Merge pull request #2 from HS-KunioOkita/feature/expired_dudate

Feature/expired dudate

client/src/components/Card/Card.jsx

@@ -86,6 +86,8 @@ const Card = React.memo(
 
     const ActionsPopup = usePopup(ActionsStep);
 
+    const isExpiredDueDate = dueDate && dueDate.getTime() < new Date().getTime();
+
     const contentNode = (
       <>
         {coverUrl && <img src={coverUrl} alt="" className={styles.cover} />}
@@ -119,7 +121,7 @@ const Card = React.memo(
               )}
               {dueDate && (
                 <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                  <DueDate value={dueDate} size="tiny" />
+                  <DueDate value={dueDate} size="tiny" isExpired={isExpiredDueDate} />
                 </span>
               )}
               {stopwatch && (

client/src/components/CardModal/CardModal.jsx

@@ -167,6 +167,8 @@ const CardModal = React.memo(
     const userIds = users.map((user) => user.id);
     const labelIds = labels.map((label) => label.id);
 
+    const isExpiredDueDate = dueDate && dueDate.getTime() < new Date().getTime();
+
     const contentNode = (
       <Grid className={styles.grid}>
         <Grid.Row className={styles.headerPadding}>
@@ -286,10 +288,10 @@ const CardModal = React.memo(
                     <span className={styles.attachment}>
                       {canEdit ? (
                         <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
-                          <DueDate value={dueDate} />
+                          <DueDate value={dueDate} isExpired={isExpiredDueDate} />
                         </DueDateEditPopup>
                       ) : (
-                        <DueDate value={dueDate} />
+                        <DueDate value={dueDate} isExpired={isExpiredDueDate} />
                       )}
                     </span>
                   </div>

client/src/components/DueDate/DueDate.jsx

@@ -18,13 +18,15 @@ const FORMATS = {
   medium: 'longDateTime',
 };
 
-const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
+const DueDate = React.memo(({ value, size, isDisabled, onClick, isExpired }) => {
   const [t] = useTranslation();
 
+  const wrapperClass = isExpired ? styles.wrapperExpired : styles.wrapper;
+
   const contentNode = (
     <span
       className={classNames(
-        styles.wrapper,
+        wrapperClass,
         styles[`wrapper${upperFirst(size)}`],
         onClick && styles.wrapperHoverable,
       )}
@@ -50,12 +52,14 @@ DueDate.propTypes = {
   size: PropTypes.oneOf(Object.values(SIZES)),
   isDisabled: PropTypes.bool,
   onClick: PropTypes.func,
+  isExpired: PropTypes.bool,
 };
 
 DueDate.defaultProps = {
   size: SIZES.MEDIUM,
   isDisabled: false,
   onClick: undefined,
+  isExpired: false,
 };
 
 export default DueDate;

client/src/components/DueDate/DueDate.module.scss

@@ -20,6 +20,18 @@
     vertical-align: top;
   }
 
+  .wrapperExpired {
+    background: red;
+    border: none;
+    border-radius: 3px;
+    color: #ffffff;
+    display: inline-block;
+    outline: none;
+    text-align: left;
+    transition: background 0.3s ease;
+    vertical-align: top;
+  }
+
   .wrapperHoverable:hover {
     background: #d2d8dc;
     color: #17394d;
@@ -43,4 +55,5 @@
     line-height: 20px;
     padding: 6px 12px;
   }
+
 }