From 87e8c5297132ccaa34f3f5a12ea0d30f0753ee16 Mon Sep 17 00:00:00 2001
From: "hs_okita.kunio" <okita.kunio@heartsoft.co.jp>
Date: Sat, 25 Mar 2023 20:41:04 +0900
Subject: [PATCH] =?UTF-8?q?=E6=9C=9F=E9=99=90=E5=88=87=E3=82=8C=E3=81=AE?=
 =?UTF-8?q?=E5=A0=B4=E5=90=88=E3=81=AB=E8=83=8C=E6=99=AF=E3=82=92=E8=B5=A4?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4=EF=BC=88=E3=83=9C=E3=83=BC=E3=83=89?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AE=E3=82=AB=E3=83=BC=E3=83=89=E3=81=AE?=
 =?UTF-8?q?=E3=81=BF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Card/Card.jsx               |  4 +++-
 client/src/components/DueDate/DueDate.jsx         |  8 ++++++--
 client/src/components/DueDate/DueDate.module.scss | 13 +++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
index 37521a06..10dfd49b 100755
--- a/client/src/components/Card/Card.jsx
+++ b/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 && (
diff --git a/client/src/components/DueDate/DueDate.jsx b/client/src/components/DueDate/DueDate.jsx
index e36fa251..207d30bf 100644
--- a/client/src/components/DueDate/DueDate.jsx
+++ b/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;
diff --git a/client/src/components/DueDate/DueDate.module.scss b/client/src/components/DueDate/DueDate.module.scss
index 45ffa50a..9669b6c2 100644
--- a/client/src/components/DueDate/DueDate.module.scss
+++ b/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;
   }
+
 }