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

---
 .../Assist/components/SessionList/SessionList.tsx      |  2 +-
 .../PredefinedWidgets/CallWithErrors/MethodType.js     |  2 +-
 .../CallWithErrors/callWithErrors.module.css           |  3 ++-
 .../Dashboard/components/Alerts/AlertsList.tsx         |  2 +-
 .../components/DashboardList/DashboardList.tsx         |  4 ++--
 .../NewDashModal/Examples/CallsWithErrorsExample.tsx   |  2 +-
 .../app/components/Funnels/FunnelWidget/FunnelBar.tsx  |  2 +-
 .../components/Funnels/FunnelWidget/FunnelWidget.tsx   |  4 ++--
 .../components/UsabilityTesting/ResponsesOverview.tsx  |  2 +-
 frontend/app/components/UsabilityTesting/TestEdit.tsx  |  8 ++++----
 .../app/components/UsabilityTesting/TestOverview.tsx   |  5 +++--
 .../components/UsabilityTesting/UsabilityTesting.tsx   | 10 ++++++----
 .../shared/SelectDateRange/SelectDateRange.tsx         |  2 +-
 .../components/SessionList/SessionDateRange.tsx        |  2 +-
 frontend/app/styles/general.css                        |  4 ++++
 15 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index 67da04b2f..6fd78da60 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -40,7 +40,7 @@ function SessionList(props: Props) {
                         <div className="flex items-center justify-center flex-col">
                             <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={60} />
                             <div className="mt-4" />
-                            <div className="text-center text-lg font-medium">No live sessions found</div>
+                            <div className="text-center text-lg font-medium">No live sessions found.</div>
                         </div>
                     }
                 >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
index 2c8cba59e..029894fdb 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
@@ -3,7 +3,7 @@ import { Tag } from 'antd';
 
 const MethodType = ({ data }) => {
   return (
-    <Tag bordered={false} className="rounded-lg">
+    <Tag bordered={false} className="rounded-lg bg-indigo-50">
       {data.method}
     </Tag>
   );
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.module.css b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.module.css
index bc37a3991..cac07385f 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.module.css
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/callWithErrors.module.css
@@ -19,4 +19,5 @@
   &:hover {
     border: solid thin $gray-light !important;
   }
-}
\ No newline at end of file
+}
+
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index 883321a4f..e88017e11 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -38,7 +38,7 @@ function AlertsList({ siteId }: Props) {
           <div className='flex flex-col items-center justify-center'>
             <AnimatedSVG name={ICONS.NO_ALERTS} size={60} />
             <div className='text-center mt-4  text-lg font-medium'>
-              {alertsSearch !== '' ? 'No matching results' : 'You haven\'t created any alerts yet'}
+              {alertsSearch !== '' ? 'No matching results' : 'No alerts have been configured yet'}
             </div>
           </div>
         }
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 55d8f588f..9e5881129 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -76,8 +76,8 @@ function DashboardList({ siteId }: { siteId: string }) {
     const emptyDescription = dashboardsSearch !== '' ? (
         <div className="text-center">
             <div>
-                <Typography.Text className="my-2 text-xl font-medium">
-                    No search results found.
+                <Typography.Text className="my-2 text-lg font-medium">
+                No matching results
                 </Typography.Text>
                 <div className="mb-2 text-lg text-gray-500 mt-2 leading-normal">
                     Try adjusting your search criteria or creating a new dashboard.
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx
index c07c7f82b..b0f056569 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx
@@ -15,7 +15,7 @@ function CallsWithErrorsExample(props: Props) {
         <ExCard
             {...props}
         >
-            <CallWithErrors data={props.data}/>
+            <div className='eg-card'><CallWithErrors data={props.data}/></div>
         </ExCard>
     );
 }
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index f365ce4b7..704586cf5 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -124,7 +124,7 @@ export function UxTFunnelBar(props: Props) {
               {durationFormatted(filter.avgCompletionTime)}
             </span>
             <span>
-              Avg. completion time
+              avg. completion time
             </span>
           </div>
         </div>
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 432f38b79..77467e59e 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -52,8 +52,8 @@ function FunnelWidget(props: Props) {
         <NoContent
             style={{ minHeight: 220 }}
             title={
-                <div className="flex items-center">
-                    <Icon name="info-circle" className="mr-2" size="14" />
+                <div className="flex items-center text-lg">
+                    <Icon name="info-circle" className="mr-2" size="18" />
                     No data available for the selected period.
                 </div>
             }
diff --git a/frontend/app/components/UsabilityTesting/ResponsesOverview.tsx b/frontend/app/components/UsabilityTesting/ResponsesOverview.tsx
index 1644447b0..fae83a18b 100644
--- a/frontend/app/components/UsabilityTesting/ResponsesOverview.tsx
+++ b/frontend/app/components/UsabilityTesting/ResponsesOverview.tsx
@@ -98,7 +98,7 @@ const ResponsesOverview = observer(() => {
       </div>
       <div className={'grid grid-cols-9 border-b py-1'}>
         <div className={'col-span-1'}>
-          <Typography.Text strong># Response</Typography.Text>
+          <Typography.Text strong>#</Typography.Text>
         </div>
         <div className={'col-span-2'}>
           <Typography.Text strong>Participant</Typography.Text>
diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx
index 79c95956f..22fcd396d 100644
--- a/frontend/app/components/UsabilityTesting/TestEdit.tsx
+++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx
@@ -443,13 +443,13 @@ export function Step({
     description && description?.length > 300 ? description.slice(0, 300) + '...' : description;
   return (
     <div
-      className={`p-4 rounded border ${
-        hover ? 'bg-white hover:' : ''
-      }bg-active-blue flex items-start gap-2`}
+      className={`p-4 rounded-lg  ${
+        hover ? 'bg-white hover:border hover:border-indigo-500' : ''
+      }bg-active-blue flex items-start gap-2 shadow-sm`}
     >
       <div
         style={{ minWidth: '1.5rem' }}
-        className={'w-6 h-6 bg-white rounded-full border flex items-center justify-center'}
+        className={'w-6 h-6 bg-white rounded-full flex items-center justify-center'}
       >
         {ind + 1}
       </div>
diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx
index e990101ad..fa7002aba 100644
--- a/frontend/app/components/UsabilityTesting/TestOverview.tsx
+++ b/frontend/app/components/UsabilityTesting/TestOverview.tsx
@@ -333,7 +333,8 @@ const TaskSummary = observer(() => {
         <Typography.Title level={5}>Task Summary</Typography.Title>
 
         {uxtestingStore.taskStats.length ? (
-          <div className={'p-2 rounded bg-teal-light flex items-center gap-1'}>
+          <div className={'p-2 rounded-lg bg-indigo-50  flex items-center gap-1 px-4'}>
+            <ClockCircleOutlined rev={undefined} />
             <Typography.Text>Average completion time of all tasks:</Typography.Text>
             <Typography.Text strong>
               {uxtestingStore.taskStats
@@ -345,7 +346,7 @@ const TaskSummary = observer(() => {
                 )
                 : null}
             </Typography.Text>
-            <ClockCircleOutlined rev={undefined} />
+            
           </div>
         ) : null}
       </div>
diff --git a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
index d949217e4..9d60224af 100644
--- a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
+++ b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
@@ -131,15 +131,17 @@ function TestsTable() {
               <div className={'flex flex-col items-center justify-center mt-10'}>
                 {uxtestingStore.searchQuery === '' ? (
                   <AnimatedSVG name={ICONS.NO_UXT} size={172} />
-                ) : null}
+                ) : (
+                  <AnimatedSVG name={ICONS.NO_RESULTS} size={60} />
+                )}
                 <div className={'text-lg font-medium mt-4'}>
                   {uxtestingStore.searchQuery === ''
-                    ? 'Uncover real user insights through usability tests.'
-                    : 'No results matching your search'}
+                    ? 'Uncover real user insights through usability tests'
+                    : 'No matching results'}
                 </div>
                 <div className="text-center text-gray-600">
                   {uxtestingStore.searchQuery === ''
-                    ? 'Conduct summative testing to observe task completion and iterate your product.'
+                    ? 'Conduct summative usability testing to observe task completion and iterate your product.'
                     : ''}
                 </div>
               </div>
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
index 60e457179..367611866 100644
--- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -72,7 +72,7 @@ function SelectDateRange(props: Props) {
 
     return (
       <div className={'relative'}>
-        <Dropdown menu={menuProps}>
+        <Dropdown menu={menuProps} >
           {useButtonStyle ? (
             <Button type='text'>
               <span>{isCustomRange ? customRange : selectedValue?.label}</span>
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
index 2c02b1d6e..827eca29a 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
@@ -21,7 +21,7 @@ function SessionDateRange(props: Props) {
   return (
     <div className="flex items-center">
       <span className="mr-1">No sessions {isCustom ? 'between' : 'in the'}</span>
-      <div className="border-0 rounded-lg"><SelectDateRange period={period} onChange={onDateChange} right={true} /></div>
+      <div className="rounded-lg border"><SelectDateRange period={period} onChange={onDateChange} right={true} /></div>
     </div>
   );
 }
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 7228c05cd..361268450 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -421,3 +421,7 @@ p {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
+
+.eg-card input[name="search"] {
+  visibility: hidden !important;
+}