From b1b95496d8deb72dba46bc73a743bee51385fe2d Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Tue, 9 Jul 2024 16:26:53 +0530
Subject: [PATCH] More UI improvements

---
 frontend/app/components/Onboarding/components/SideMenu.tsx | 5 -----
 .../Session/Player/MobilePlayer/MobilePlayerSubheader.tsx  | 2 +-
 .../app/components/shared/SessionSearch/SessionSearch.tsx  | 2 +-
 .../shared/SessionSearchField/AiSessionSearchField.tsx     | 4 ++--
 frontend/app/layout/SupportModal.tsx                       | 7 ++++---
 5 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/Onboarding/components/SideMenu.tsx b/frontend/app/components/Onboarding/components/SideMenu.tsx
index a9571bdcf..b71db41a5 100644
--- a/frontend/app/components/Onboarding/components/SideMenu.tsx
+++ b/frontend/app/components/Onboarding/components/SideMenu.tsx
@@ -44,7 +44,6 @@ function SideMenu(props: Props) {
         >
           <Menu.Item
             key={OB_TABS.INSTALLING}
-            style={{ paddingLeft: 0 }}
             icon={
               <Icon
                 name="tools"
@@ -58,7 +57,6 @@ function SideMenu(props: Props) {
           </Menu.Item>
           <Menu.Item
             key={OB_TABS.IDENTIFY_USERS}
-            style={{ paddingLeft: 0 }}
             icon={
               <Icon
                 name="person-border"
@@ -72,7 +70,6 @@ function SideMenu(props: Props) {
           </Menu.Item>
           <Menu.Item
             key={OB_TABS.MANAGE_USERS}
-            style={{ paddingLeft: 0 }}
             icon={
               <Icon
                 name="people"
@@ -86,7 +83,6 @@ function SideMenu(props: Props) {
           </Menu.Item>
           <Menu.Item
             key={OB_TABS.INTEGRATIONS}
-            style={{ paddingLeft: 0 }}
             icon={
               <Icon
                 name="plug"
@@ -101,7 +97,6 @@ function SideMenu(props: Props) {
           <Divider style={{ margin: '6px 0' }} />
           <Menu.Item
             key={'support'}
-            style={{ paddingLeft: 0 }}
             icon={
               <Icon
                 name="question-circle"
diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
index 2ec964452..853fd1184 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
@@ -24,7 +24,7 @@ function SubHeader(props: any) {
   return (
     <>
       <div className="w-full px-4 flex items-center border-b relative">
-        <Tag color="error">{props.isIOS ? 'iOS' : 'ANDROID'} BETA</Tag>
+        <Tag color="green" bordered={false} className='rounded-full'>{props.isIOS ? 'iOS' : 'Android'} BETA</Tag>
         <div
           className="ml-auto text-sm flex items-center color-gray-medium gap-2"
           style={{ width: 'max-content' }}
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
index 38e598bf4..f4038f396 100644
--- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -113,7 +113,7 @@ function SessionSearch(props: Props) {
         <div className="border bg-white rounded-lg mt-4">
           <div className="p-5">
             {aiFiltersStore.isLoading ? (
-              <div className={'font-semibold flex items-center gap-2'}>
+              <div className={'font-semibold flex items-center gap-2 mb-2'}>
                 <AnimatedSVG name={ICONS.LOADER} size={18} />
                 <span>Translating your query into search steps...</span>
               </div>
diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
index 60731d1fb..3cb28726a 100644
--- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
@@ -146,7 +146,7 @@ const AiSearchField = observer(
           value={searchQuery}
           style={{ minWidth: 360, height: 30 }}
           autoComplete="off"
-          className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-e-full nofocus"
+          className="px-2 py-1 pe-9 text-lg placeholder-lg !border-0 rounded-e-full nofocus"
           leadingButton={
             searchQuery !== '' ? (
               <div
@@ -189,7 +189,7 @@ function AiSessionSearchField(props: Props) {
                    ? gradientBox
                    : isFocused ? regularBoxFocused : regularBoxUnfocused;
   return (
-    <div className={'bg-white rounded-full'}>
+    <div className={'bg-white rounded-full shadow-sm'}>
       <div
         className={aiFiltersStore.isLoading ? 'animate-bg-spin' : ''}
         style={boxStyle}
diff --git a/frontend/app/layout/SupportModal.tsx b/frontend/app/layout/SupportModal.tsx
index a3238bedb..085588bdc 100644
--- a/frontend/app/layout/SupportModal.tsx
+++ b/frontend/app/layout/SupportModal.tsx
@@ -22,9 +22,10 @@ function SupportModal(props: Props) {
       width={400}
       onClose={onClose}
       closable={false}
+      className='!bg-stone-50'
     >
       <div className="flex flex-col items-center gap-2">
-        <div className="border p-3 bg-white flex rounded">
+        <div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-50">
           <div className="shrink-0 w-10 mt-2">
             <Icon name="bookmark" size={18} />
           </div>
@@ -55,7 +56,7 @@ function SupportModal(props: Props) {
           </div>
         </div>
 
-        <div className="border p-3 bg-white flex rounded">
+        <div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-50">
           <div className="shrink-0 w-10 mt-2">
             <Icon name="slack" size={18} />
           </div>
@@ -85,7 +86,7 @@ function SupportModal(props: Props) {
           </div>
         </div>
 
-        <div className="border p-3 bg-white flex rounded">
+        <div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-50">
           <div className="shrink-0 w-10 mt-2">
             <Icon name="github" size={18} />
           </div>