💄(ui) make due date blocks more visual

Author: sneko

client/src/components/CardModal/CardModal.jsx

@@ -433,7 +433,6 @@ const CardModal = React.memo(
                             <button type="button" className="bare-button">
                               <DueDate
                                 size="medium"
-                                withStatusIcon
                                 value={dueDate}
                                 isCompleted={isDueDateCompleted}
                                 onClick={() => {}}
@@ -442,12 +441,7 @@ const CardModal = React.memo(
                           </DueDateEditPopover>
                         </>
                       ) : (
-                        <DueDate
-                          size="medium"
-                          withStatusIcon
-                          value={dueDate}
-                          isCompleted={isDueDateCompleted}
-                        />
+                        <DueDate size="medium" value={dueDate} isCompleted={isDueDateCompleted} />
                       )}
                     </div>
                   </div>

client/src/ui/DueDate/DueDate.jsx

@@ -37,15 +37,12 @@ const FULL_DATE_FORMAT_BY_SIZE = {
 const STATUS_ICON_PROPS_BY_STATUS = {
   [STATUSES.DUE_SOON]: {
     name: 'warning',
-    color: 'var(--c--contextuals--border--semantic--warning--primary)',
   },
   [STATUSES.OVERDUE]: {
     name: 'hourglass_bottom',
-    color: 'var(--c--contextuals--border--semantic--error--primary)',
   },
   [STATUSES.COMPLETED]: {
     name: 'check_box',
-    color: 'var(--c--contextuals--border--semantic--success--primary)',
   },
 };
 
@@ -67,7 +64,7 @@ const getStatus = (dateTime, isCompleted) => {
   return null;
 };
 
-const DueDate = React.memo(({ value, size, isCompleted, isDisabled, withStatusIcon, onClick }) => {
+const DueDate = React.memo(({ value, size, isCompleted, isDisabled, onClick }) => {
   const [t] = useTranslation();
   const forceUpdate = useForceUpdate();
 
@@ -109,15 +106,15 @@ const DueDate = React.memo(({ value, size, isCompleted, isDisabled, withStatusIc
       className={classNames(
         styles.wrapper,
         styles[`wrapper${upperFirst(size)}`],
-        !withStatusIcon && statusRef.current && styles[`wrapper${upperFirst(statusRef.current)}`],
+        statusRef.current && styles[`wrapper${upperFirst(statusRef.current)}`],
         onClick && styles.wrapperHoverable,
       )}
     >
       {t(`format:${dateFormat}`, {
         value,
         postProcess: 'formatDate',
       })}
-      {withStatusIcon && statusRef.current && (
+      {statusRef.current && (
         <Icon
           size="small"
           type="outlined"
@@ -143,17 +140,13 @@ DueDate.propTypes = {
   size: PropTypes.oneOf(Object.values(SIZES)),
   isCompleted: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool,
-  withStatusIcon: PropTypes.bool,
   onClick: PropTypes.func,
-  onCompletionToggle: PropTypes.func,
 };
 
 DueDate.defaultProps = {
   size: SIZES.MEDIUM,
   isDisabled: false,
-  withStatusIcon: false,
   onClick: undefined,
-  onCompletionToggle: undefined,
 };
 
 export default DueDate;

client/src/ui/DueDate/DueDate.module.scss

@@ -26,6 +26,35 @@
     margin-left: 4px;
   }
 
+  /* Statuses */
+
+  .wrapperDueSoon {
+    background-color: var(--c--contextuals--background--semantic--warning--secondary);
+    color: var(--c--contextuals--content--semantic--warning--secondary);
+
+    &:hover {
+      background-color: var(--c--contextuals--background--semantic--warning--secondary-hover);
+    }
+  }
+
+  .wrapperOverdue {
+    background-color: var(--c--contextuals--background--semantic--error--secondary);
+    color: var(--c--contextuals--content--semantic--error--secondary);
+
+    &:hover {
+      background-color: var(--c--contextuals--background--semantic--error--secondary-hover);
+    }
+  }
+
+  .wrapperCompleted {
+    background-color: var(--c--contextuals--background--semantic--success--secondary);
+    color: var(--c--contextuals--content--semantic--success--secondary);
+
+    &:hover {
+      background-color: var(--c--contextuals--background--semantic--success--secondary-hover);
+    }
+  }
+
   /* Sizes */
 
   .wrapperTiny {