From 53339af46b6797a0dfe3b93d12d0f2c5bf4821b1 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 19 Aug 2022 12:49:53 +0200
Subject: [PATCH] change(ui): change alert fonts

---
 .../Dashboard/components/Alerts/AlertListItem.tsx  | 14 +++++++-------
 .../Dashboard/components/Alerts/NewAlert.tsx       |  2 +-
 .../components/DashboardList/DashboardListItem.tsx |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
index 0c87f92a8..521625ef1 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
@@ -92,29 +92,29 @@ function AlertListItem(props: Props) {
               )}
         </div>
       </div>
-      <div className="text-disabled-text px-2 pb-2">
+      <div className="color-gray-medium px-2 pb-2">
         {'When the '}
-        <span className="font-medium">{alert.detectionMethod}</span>
+        <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{alert.detectionMethod}</span>
         {' of '}
-        <span className="font-medium">{alert.query.left}</span>
+        <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{alert.query.left}</span>
         {' is '}
-        <span className="font-medium">
+        <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
           {alert.query.operator}
           {alert.query.right} {alert.metric.unit}
         </span>
         {' over the past '}
-        <span className="font-medium">{getThreshold(alert.currentPeriod)}</span>
+        <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{getThreshold(alert.currentPeriod)}</span>
         {alert.detectionMethod === 'change' ? (
           <>
             {' compared to the previous '}
-            <span className="font-medium">{getThreshold(alert.previousPeriod)}</span>
+            <span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas ' }}>{getThreshold(alert.previousPeriod)}</span>
           </>
         ) : null}
         {', notify me on '}
         <span>{getNotifyChannel(alert, webhooks)}</span>.
       </div>
       {alert.description ? (
-        <div className="text-disabled-text px-2 pb-2">{alert.description}</div>
+        <div className="color-gray-medium px-2 pb-2">{alert.description}</div>
       ) : null}
     </div>
   );
diff --git a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
index 697d6426d..c44d1c31b 100644
--- a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
@@ -267,7 +267,7 @@ const NewAlert = (props: IProps) => {
          
       </Form>
 
-      <div className="bg-white mt-4 border rounded">
+      <div className="bg-white mt-4 border rounded mb-10">
         {instance && (
           <AlertListItem alert={instance} demo siteId="" init={() => null} webhooks={webhooks} />
         )}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
index 54f359041..0d3b76fd9 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
@@ -41,7 +41,7 @@ function DashboardListItem(props: Props) {
                 </div>
                 <div className="col-span-2 text-right">{checkForRecent(dashboard.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
             </div>
-            {dashboard.description ? <div className="text-disabled-text px-2 pb-2">{dashboard.description}</div> : null}
+            {dashboard.description ? <div className="color-gray-medium px-2 pb-2">{dashboard.description}</div> : null}
         </div>
     );
 }