From 9afce902afed5f8655d3bd71ea8a4110d5e4548d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 29 Mar 2023 17:07:55 +0200
Subject: [PATCH] change(ui) - alignment and other changes in dashboard

---
 .../components/Alerts/AlertsList.tsx          | 26 ++++++++++++-------
 .../components/Alerts/AlertsView.tsx          |  4 ---
 .../DashboardList/DashboardList.tsx           |  2 +-
 .../components/MetricsList/MetricsList.tsx    |  4 +--
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index d1d4c84ef..7b4981d8e 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -3,9 +3,9 @@ import { NoContent, Pagination } from 'UI';
 import { filterList } from 'App/utils';
 import { sliceListPerPage } from 'App/utils';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-import AlertListItem from './AlertListItem'
-import { useStore } from 'App/mstore'
-import { observer } from 'mobx-react-lite'
+import AlertListItem from './AlertListItem';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 const pageSize = 10;
 
@@ -15,14 +15,19 @@ interface Props {
 
 function AlertsList({ siteId }: Props) {
   const { alertsStore, settingsStore } = useStore();
-  const { fetchWebhooks, webhooks } = settingsStore
-  const { alerts: alertsList, alertsSearch, fetchList, init } = alertsStore
+  const { fetchWebhooks, webhooks } = settingsStore;
+  const { alerts: alertsList, alertsSearch, fetchList, init } = alertsStore;
   const page = alertsStore.page;
 
-  React.useEffect(() => { fetchList(); fetchWebhooks() }, []);
-  const alertsArray = alertsList
+  React.useEffect(() => {
+    fetchList();
+    fetchWebhooks();
+  }, []);
+  const alertsArray = alertsList;
 
-  const filteredAlerts = filterList(alertsArray, alertsSearch, ['name'], (item, query) => query.test(item.query.left))
+  const filteredAlerts = filterList(alertsArray, alertsSearch, ['name'], (item, query) =>
+    query.test(item.query.left)
+  );
   const list = alertsSearch !== '' ? filteredAlerts : alertsArray;
 
   return (
@@ -31,9 +36,12 @@ function AlertsList({ siteId }: Props) {
       title={
         <div className="flex flex-col items-center justify-center">
           <AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
-          <div className="text-center text-gray-600 my-4">
+          <div className="text-center mt-4">
             {alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
           </div>
+          <div className="text-sm color-gray-medium font-normal">
+            Alerts helps your team stay up to date with the activity on your app.
+          </div>
         </div>
       }
     >
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
index 544c86f8f..1c313b067 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
@@ -38,10 +38,6 @@ function AlertsView({ siteId }: IAlertsView) {
                     </div>
                 </div>
             </div>
-            <div className="text-base text-disabled-text flex items-center px-6">
-                <Icon name="info-circle-fill" className="mr-2" size={16} />
-                Alerts helps your team stay up to date with the activity on your app.
-            </div>
             <AlertsList siteId={siteId} />
         </div>
     );
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 18c96f12a..95b6bc0f6 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -17,6 +17,7 @@ function DashboardList() {
       show={lenth === 0}
       title={
         <div className="flex flex-col items-center justify-center">
+          <AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
           <div className="text-center my-4">
             {dashboardsSearch !== '' ? (
               'No matching results'
@@ -29,7 +30,6 @@ function DashboardList() {
               </div>
             )}
           </div>
-          <AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
         </div>
       }
     >
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index bcf464d76..1f618544f 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -54,10 +54,10 @@ function MetricsList({
       title={
         <div className="flex flex-col items-center justify-center">
           <AnimatedSVG name={ICONS.NO_CARDS} size={180} />
-          <div className="text-center text-gray-600 my-4">
+          <div className="text-center mt-4">
             {metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
           </div>
-          <div className="text-base text-disabled-text flex items-center px-6">
+          <div className="text-sm color-gray-medium font-normal">
             Create cards to capture key interactions and track KPIs.
           </div>
         </div>