From 352639da24bb297fa2bf95beb0237ad1185ca14b Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 4 Jan 2023 15:24:12 +0500
Subject: [PATCH] web: make disabled status of reminders more apparent

---
 apps/web/src/components/list-item/index.js |  4 +++-
 apps/web/src/components/reminder/index.tsx | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/list-item/index.js b/apps/web/src/components/list-item/index.js
index 04a37e080..a77b2a5f2 100644
--- a/apps/web/src/components/list-item/index.js
+++ b/apps/web/src/components/list-item/index.js
@@ -60,7 +60,8 @@ function ListItem(props) {
       background: "background"
     },
     isFocused,
-    isCompact
+    isCompact,
+    isDisabled
   } = props;
 
   const listItemRef = useRef();
@@ -117,6 +118,7 @@ function ListItem(props) {
       pl={1}
       tabIndex={-1}
       sx={{
+        opacity: isDisabled ? 0.7 : 1,
         height: "inherit",
         cursor: "pointer",
         position: "relative",
diff --git a/apps/web/src/components/reminder/index.tsx b/apps/web/src/components/reminder/index.tsx
index 4444af671..f6af7dad5 100644
--- a/apps/web/src/components/reminder/index.tsx
+++ b/apps/web/src/components/reminder/index.tsx
@@ -53,16 +53,15 @@ function Reminder({ item, index }: { item: ReminderType; index: number }) {
       item={reminder}
       title={reminder.title}
       body={reminder.description}
+      isDisabled={reminder.disabled}
       footer={
         <Flex
           sx={{
             alignItems: "center"
           }}
         >
-          {reminder.disabled ? (
-            <Icon.ReminderOff size={16} color="fontTertiary" sx={{ mr: 1 }} />
-          ) : (
-            <PriorityIcon size={16} color="fontTertiary" sx={{ mr: 1 }} />
+          {reminder.disabled ? null : (
+            <PriorityIcon size={14} color="fontTertiary" sx={{ mr: 1 }} />
           )}
           {reminder.mode === "repeat" && reminder.recurringMode && (
             <IconTag
@@ -70,7 +69,15 @@ function Reminder({ item, index }: { item: ReminderType; index: number }) {
               text={RECURRING_MODE_MAP[reminder.recurringMode]}
             />
           )}
-          <IconTag icon={Icon.Clock} text={formatReminderTime(reminder)} />
+          {reminder.disabled ? (
+            <IconTag
+              icon={Icon.ReminderOff}
+              text={"Disabled"}
+              styles={{ icon: { color: "error" } }}
+            />
+          ) : (
+            <IconTag icon={Icon.Clock} text={formatReminderTime(reminder)} />
+          )}
         </Flex>
       }
       index={index}