From de70865ec9a524d7f2e3bddb4116dfbfcc26484f Mon Sep 17 00:00:00 2001
From: Esnobart <offrichterrr@gmail.com>
Date: Thu, 13 Jun 2024 18:14:31 +0100
Subject: [PATCH] final modals

---
 .../CreateCardModal/CreateCardModal.jsx       |   2 +-
 .../CreateCardModal.module.css                |  31 +++-
 .../CreateColumnModal.module.css              |  16 +-
 .../EditCardModal/EditCardModal.jsx           |  14 +-
 .../EditCardModal/EditCardModal.module.css    | 146 ++++++++++++++++--
 .../MainDashboard/MainDashboard.jsx           |   2 +-
 src/components/TaskCard/TaskCard.module.css   |   2 +-
 7 files changed, 188 insertions(+), 25 deletions(-)

diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
index 11c9463..c1fadef 100644
--- a/src/components/CreateCardModal/CreateCardModal.jsx
+++ b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -29,7 +29,7 @@ export const CreateCard = ({ isOpen, isClose }) => {
                     <Form autoComplete="off" className={css.createCardModalForm}>
                         <Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
                         <Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
-                        <label>Label color
+                        <label className={css.createCardModalLabel}>Label color
                             <div className={css.createCardModalRadioContainer}>
                                 <div>
                                     <Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
diff --git a/src/components/CreateCardModal/CreateCardModal.module.css b/src/components/CreateCardModal/CreateCardModal.module.css
index f6075b1..588bad3 100644
--- a/src/components/CreateCardModal/CreateCardModal.module.css
+++ b/src/components/CreateCardModal/CreateCardModal.module.css
@@ -1,7 +1,8 @@
 .createCardModalRadioContainer {
     display: flex;
-    gap: 10px;
+    gap: 8px;
     width: 80px;
+    margin-top: 5px;
 }
 
 .createCardModalRadio1,
@@ -147,6 +148,17 @@
     opacity: 100%;
 }
 
+.createCardModalLabel {
+    margin-bottom: 14px;
+    font-family: 'Poppins', sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    color: #FFFFFF80;
+}
+
 .createCardModalRadio1 {
     margin-right: 5px;
     color: #8FA1D0;
@@ -182,4 +194,19 @@
 
 .createCardModalAddIcon {
     stroke: white;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 768px) {
+    .createCardModal {
+        width: 350px;
+    }
+
+    .createCardModalInput1,
+    .createCardModalInput2 {
+        width: 302px;
+    }
+    
+    .createCardModalSubmit {
+        width: 302px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/CreateColumnModal/CreateColumnModal.module.css b/src/components/CreateColumnModal/CreateColumnModal.module.css
index 0378e8c..91ddc6a 100644
--- a/src/components/CreateColumnModal/CreateColumnModal.module.css
+++ b/src/components/CreateColumnModal/CreateColumnModal.module.css
@@ -103,4 +103,18 @@
 
 .createColumnModalAddIcon {
     stroke: white;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 768px) {
+    .createColumnModal {
+        width: 350px;
+    }
+
+    .createColumnModalInput {
+        width: 302px;
+    }
+    
+    .createColumnModalSubmit {
+        width: 302px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx
index 80db8b3..2e67a88 100644
--- a/src/components/EditCardModal/EditCardModal.jsx
+++ b/src/components/EditCardModal/EditCardModal.jsx
@@ -29,23 +29,19 @@ export const EditCard = ({ isOpen, isClose }) => {
                     <Form autoComplete="off" className={css.editCardModalForm}>
                         <Field type='text' name='cardtitle' className={css.editCardModalInput1} placeholder="Title" />
                         <Field as='textarea' name='carddescription' className={css.editCardModalInput2} placeholder="Description" />
-                        <label>Label color
+                        <label className={css.editCardModalLabel}>Label color
                             <div className={css.editCardModalRadioContainer}>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="Low" className={css.editCardModalRadio1} id="editCardModalRadio1" name="color" />
-                                    <label htmlFor="editCardModalRadio1" className="radio-label"></label>
                                 </div>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="Medium" className={css.editCardModalRadio2} id="editCardModalRadio2" name="color" />
-                                    <label htmlFor="editCardModalRadio2" className="radio-label"></label>
                                 </div>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="High" className={css.editCardModalRadio3} id="editCardModalRadio3" name="color" />
-                                    <label htmlFor="editCardModalRadio3" className="radio-label"></label>
                                 </div>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="Without priority" className={css.editCardModalRadio4} id="editCardModalRadio4" name="color" />
-                                    <label htmlFor="editCardModalRadio4" className="radio-label"></label>
                                 </div>
                             </div>
                         </label>
diff --git a/src/components/EditCardModal/EditCardModal.module.css b/src/components/EditCardModal/EditCardModal.module.css
index 37f3891..85cb08f 100644
--- a/src/components/EditCardModal/EditCardModal.module.css
+++ b/src/components/EditCardModal/EditCardModal.module.css
@@ -1,10 +1,126 @@
 .editCardModalRadioContainer {
     display: flex;
-    gap: 10px;
+    gap: 8px;
     width: 80px;
+    margin-top: 5px;
 }
 
-.editCardModalRadio1,
+.editCardModalRadioContainerRadio {
+    height: 14px;
+    width: 14px;
+    margin: 0;
+}
+
+/* input[type=radio] {
+    --s: 14px;     
+    --c: #009688; 
+    
+    height: var(--s);
+    aspect-ratio: 1;
+    border: calc(var(--s)/8) solid #939393;
+    padding: calc(var(--s)/8);
+    background: 
+       radial-gradient(farthest-side,var(--c) 94%,#0000) 
+       50%/0 0 no-repeat content-box;
+    border-radius: 50%;
+    outline-offset: calc(var(--s)/10);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    transition: .3s;
+    margin: 0;
+  } */
+
+  input[type=radio] {
+    --s: 14px;     /* control the size */
+    --c: #009688; /* the active color */
+    
+    height: var(--s);
+    aspect-ratio: 1;
+    border: 2px solid #939393;
+    padding: 1px;
+    background: 
+       radial-gradient(farthest-side, var(--c) 100%,#0000) 
+       50%/0 0 no-repeat content-box;
+    border-radius: 50%;
+    outline-offset: 2px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    transition: .3s;
+  }
+
+  input[type=radio]:checked {
+    border-color: var(--c);
+    background-size: 100% 100%;
+  }
+  
+  @media print {
+    input[type=radio] {
+      -webkit-appearance: auto;
+      -moz-appearance: auto;
+      appearance: auto;
+      background: none;
+    }
+  }
+
+/* .editCardModalRadio1 {
+    color: #8FA1D0;
+    border: 2px solid #8FA1D0;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#8FA1D0) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio2 {
+    color: #E09CB5;
+    border: 2px solid #E09CB5;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#E09CB5) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio3 {
+    color: #BEDBB0;
+    border: 2px solid #BEDBB0;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#BEDBB0) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio4 {
+    color: #FFFFFF4D;
+    border: 2px solid #FFFFFF4D;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#FFFFFF4D) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio1:checked {
+    border-color: #8FA1D0;
+    background-size: 100% 100%;
+}
+
+.editCardModalRadio2:checked {
+    border-color: #E09CB5;
+    background-size: 100% 100%;
+}
+
+.editCardModalRadio3:checked {
+    border-color: #BEDBB0;
+    background-size: 100% 100%;
+}
+
+.editCardModalRadio4:checked {
+    border-color: #FFFFFF4D;
+    background-size: 100% 100%;
+} */
+
+/* .editCardModalRadio1,
 .editCardModalRadio2,
 .editCardModalRadio3,
 .editCardModalRadio4 {
@@ -44,17 +160,21 @@
 }
 
 .editCardModalRadio1:focus + label::before {
-    border: 1px solid #8FA1D0;
+    border: 2px solid #8FA1D0;
+    padding: 2px;
 }
 .editCardModalRadio2:focus + label::before {
-    border: 1px solid #E09CB5;
+    border: 2px solid #E09CB5;
+    padding: 2px;
 }
 .editCardModalRadio3:focus + label::before {
-    border: 1px solid #BEDBB0;
+    border: 2px solid #BEDBB0;
+    padding: 2px;
 }
 .editCardModalRadio4:focus + label::before {
-    border: 1px solid #FFFFFF4D;
-}  
+    border: 2px solid #FFFFFF4D;
+    padding: 2px;
+} */
  
 .editCardModalCloseBtn {
     position: fixed;
@@ -147,9 +267,15 @@
     opacity: 100%;
 }
 
-.editCardModalRadio1 {
-    margin-right: 5px;
-    color: #8FA1D0;
+.editCardModalLabel {
+    margin-bottom: 14px;
+    font-family: 'Poppins', sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    color: #FFFFFF80;
 }
 
 .editCardModalSubmit {
diff --git a/src/components/MainDashboard/MainDashboard.jsx b/src/components/MainDashboard/MainDashboard.jsx
index f4c5b5a..9966585 100644
--- a/src/components/MainDashboard/MainDashboard.jsx
+++ b/src/components/MainDashboard/MainDashboard.jsx
@@ -7,7 +7,7 @@ export const MainDashboard = () => {
   return (
     <div className={css.container}>
       {/* <DashboardMessage /> */}
-      {/* <AddColumnBtn/> */}
+      <AddColumnBtn/>
       <TaskColumn />
     </div>
   );
diff --git a/src/components/TaskCard/TaskCard.module.css b/src/components/TaskCard/TaskCard.module.css
index 6d3c8cf..83ec5ae 100644
--- a/src/components/TaskCard/TaskCard.module.css
+++ b/src/components/TaskCard/TaskCard.module.css
@@ -113,11 +113,11 @@
 
 
 .editModalBtn {
-    position: fixed;
     background: #121212;
     border: none;
     padding: 0;
 }
+
 .icon {
     cursor: pointer;
 }