Merge pull request #127 from AnWhiteM/diana-dashboard

upd filter
AnWhiteM · Jun 19, 2024 · 4d3c60e · 4d3c60e
2 parents 02c22b2 + 8034459
commit 4d3c60e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/src/components/FilterModal/FilterModal.jsx b/src/components/FilterModal/FilterModal.jsx
@@ -24,6 +24,7 @@ const [value, setValue] = useState(() => {
     if (value === null) {
         localStorage.setItem('filter', "All");
     }
+    console.log(value)
   }, [value])
 
   const handleFilterChange = (event) => {
@@ -48,8 +49,9 @@ const [value, setValue] = useState(() => {
                         <h1 className={css.filterModalText}>Filters</h1>
                     </div>
                     <Formik
+                     initialValues={{ priority: value }}
                     >
-                        {() => (
+                        {({setFieldValue}) => (
                             <Form>
                                 <div className={css.filterLabel}>
                                     <p className={css.filterModalText2}>Label color</p>
@@ -58,28 +60,33 @@ const [value, setValue] = useState(() => {
                                         value="All"
                                         className={css.filterShowAllBtn} 
                                         name="priority"
-                                        onClick={handleFilterChange}
+                                        onClick={() => {
+                                            setFieldValue('priority', 'All');
+                                            setValue('All');
+                                          }}
                                     >
                                         Show all
                                     </button>
                                 </div>
-                                <div className={css.filterModalRadioContainer}>
-                                    <label className={css.filterModalRadioContainerRadio}>
-                                        <Field type="radio" value="Without" className={css.filterModalRadio4} id="editCardModalRadio4" name="priority" onChange={handleFilterChange} />
-                                        <span className={css.filterModalRadioText}>Without priority</span>
-                                    </label>
-                                    <label className={css.filterModalRadioContainerRadio}>
-                                        <Field type="radio" value="Low" className={css.filterModalRadio1} id="editCardModalRadio1" name="priority" onChange={handleFilterChange} />
-                                        <span className={css.filterModalRadioText}>Low</span>
-                                    </label>
-                                    <label className={css.filterModalRadioContainerRadio}>
-                                        <Field type="radio" value="Medium" className={css.filterModalRadio2} id="editCardModalRadio2" name="priority" onChange={handleFilterChange} />
-                                        <span className={css.filterModalRadioText}>Medium</span>
-                                    </label>
-                                    <label className={css.filterModalRadioContainerRadio}>
-                                        <Field type="radio" value="High" className={css.filterModalRadio3} id="editCardModalRadio3" name="priority" onChange={handleFilterChange} />
-                                        <span className={css.filterModalRadioText}>High</span>
-                                    </label>
+                                <div >
+                                    <div className={css.filterModalRadioContainer}>
+                                        <label className={css.containerRadio} onChange={handleFilterChange}>
+                                            <Field type="radio" value="Without" className={css.filterModalRadio4} id="editCardModalRadio4" name="priority" />
+                                            <span className={css.filterModalRadioText}>Without priority</span>
+                                        </label>
+                                        <label className={css.containerRadio} onChange={handleFilterChange}>
+                                            <Field type="radio" value="Low" className={css.filterModalRadio1} id="editCardModalRadio1" name="priority"  />
+                                            <span className={css.filterModalRadioText}>Low</span>
+                                        </label>
+                                        <label className={css.containerRadio} onChange={handleFilterChange}>
+                                            <Field type="radio" value="Medium" className={css.filterModalRadio2} id="editCardModalRadio2" name="priority" />
+                                            <span className={css.filterModalRadioText}>Medium</span>
+                                        </label>
+                                        <label className={css.containerRadio} onChange={handleFilterChange}>
+                                            <Field type="radio" value="High" className={css.filterModalRadio3} id="editCardModalRadio3" name="priority"  />
+                                            <span className={css.filterModalRadioText}>High</span>
+                                        </label>
+                                    </div>
                                 </div>
                             </Form>
                         )}

diff --git a/src/components/FilterModal/FilterModal.module.css b/src/components/FilterModal/FilterModal.module.css
@@ -110,15 +110,22 @@
     margin-top: 14px;
 }
 
+.containerRadio {
+    display: flex;
+    color: var(--filter-sa);
+    gap: 8px;
+}
+
 .filterModalRadioContainerRadio {
-    display: inline-flex;
+    display: flex;
+    flex-direction: column;
     align-items: center;
     height: 18px;
     max-width: 110px;
     gap: 8px;
 }
 
-input[type=radio] {
+.containerRadio input[type="radio"] {
     height: 14px;
     aspect-ratio: 1;
     padding: 1px;
@@ -152,7 +159,7 @@ input[type=radio] {
     background: #5B5B5B;
 }
 
-input[type=radio]:checked {
+input[type="radio"]:checked {
     background-size: 100% 100%;
 }
 
@@ -181,7 +188,7 @@ input[type=radio]:checked {
 }
 
 @media print {
-    input[type=radio] {
+    input[type="radio"] {
         -webkit-appearance: auto;
         -moz-appearance: auto;
         appearance: auto;
@@ -201,7 +208,7 @@ input[type=radio]:checked {
     letter-spacing: -0.02em;
     text-align: left;
     cursor: pointer;
-    color: var(--modal-text);
+    color: var(--filter-sa);
 }