From 3191dfa1958d7e0d4fff9a30b433f6c02fd3a53e Mon Sep 17 00:00:00 2001
From: rayzhou-bit <rayzhou12.12@gmail.com>
Date: Thu, 9 May 2024 17:14:08 -0700
Subject: [PATCH] minor improvements

---
 src/assets/icons/library.svg                  |  4 +--
 .../Dropdowns/ActionDropdown.jsx              |  1 +
 .../Dropdowns/ActionDropdown.scss             |  7 ++++-
 .../Dropdowns/ColorDropdown.jsx               |  3 +-
 src/components/Card/LibraryTitle.jsx          |  1 +
 src/components/Card/Title.jsx                 |  1 +
 src/components/Card/hooks.js                  |  4 +--
 src/components/Library/FilterBar.jsx          | 30 ++++++++++---------
 src/components/Library/hooks.js               |  2 +-
 src/components/Library/index.jsx              |  4 +--
 src/components/Library/index.scss             |  7 +++++
 11 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/assets/icons/library.svg b/src/assets/icons/library.svg
index 8c8a331..0204fb7 100644
--- a/src/assets/icons/library.svg
+++ b/src/assets/icons/library.svg
@@ -1,3 +1,3 @@
-<svg width="34" height="27" viewBox="0 0 34 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.6154 25.4706C17.6154 25.4706 13.3569 23.6651 8.68 23.6651C5.43455 23.6651 3.63717 24.2447 2.39541 24.8006C1.73264 25.0973 1 24.6482 1 23.9221V23.6651V6.33333V3.51825C1 3.09172 1.2709 2.71279 1.66621 2.55262C3.22976 1.91912 5.04483 1 8.68 1C12.84 1 15.8718 2.20368 17.6154 2.80552M17.6154 25.4706C17.6154 25.4706 20.52 23.6651 25.32 23.6651C27.8327 23.6651 29.6506 23.9949 30.9008 24.3956C31.7441 24.6658 33 23.9782 33 23.0927C33 17.2952 33 13.0616 33 7.90196M17.6154 25.4706V2.80552M33 2.80552C33 2.80552 33 4.81962 33 7.90196M33 2.80552V7.90196M33 2.80552C33 2.80552 31.9696 2.31949 30.44 1.85177C29.0215 1.41801 27.1736 1 25.32 1C21.4677 1 19.359 2.20368 17.6154 2.80552" stroke="black" stroke-width="2" stroke-linejoin="round"/>
+<svg width="29" height="37" viewBox="0 0 29 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6538 1H5.84616H2.38462C1.61992 1 1 1.60657 1 2.3548L1 34.0201C1 34.7683 1.61991 35.3749 2.38462 35.3749H5.84615H26.6154C27.3801 35.3749 28 34.7683 28 34.0201L28 2.3548C28 1.60657 27.3801 1 26.6154 1H22.8077M18.6538 1V9.80621L20.7308 8.79012L22.8077 9.80621V1M18.6538 1H22.8077" stroke="#353535" stroke-width="2"/>
 </svg>
diff --git a/src/components-shared/Dropdowns/ActionDropdown.jsx b/src/components-shared/Dropdowns/ActionDropdown.jsx
index 6c24b70..b59399d 100644
--- a/src/components-shared/Dropdowns/ActionDropdown.jsx
+++ b/src/components-shared/Dropdowns/ActionDropdown.jsx
@@ -15,6 +15,7 @@ import useOutsideClick from '../../utils/useOutsideClick';
 
 export const ACTION_TYPE = {
   danger: 'danger',
+  bold: 'bold',
   disabled: 'disabled',
 };
 
diff --git a/src/components-shared/Dropdowns/ActionDropdown.scss b/src/components-shared/Dropdowns/ActionDropdown.scss
index 81c5957..8efea34 100644
--- a/src/components-shared/Dropdowns/ActionDropdown.scss
+++ b/src/components-shared/Dropdowns/ActionDropdown.scss
@@ -66,11 +66,16 @@ $y: 38px;
   border: 1px solid #f4f4f4;
 }
 
+
+// ACTION_TYPES
 .danger {
   font-weight: 600 !important;
   color: #ed5e31 !important;
 }
-
+.bold {
+  font-weight: 700 !important;
+  color: #353535 !important;
+}
 .disabled {
   color: #C4C4C4 !important;
 }
diff --git a/src/components-shared/Dropdowns/ColorDropdown.jsx b/src/components-shared/Dropdowns/ColorDropdown.jsx
index 7339204..27979a1 100644
--- a/src/components-shared/Dropdowns/ColorDropdown.jsx
+++ b/src/components-shared/Dropdowns/ColorDropdown.jsx
@@ -8,6 +8,7 @@ import useOutsideClick from '../../utils/useOutsideClick';
 export const ColorDropdown = ({
   btnRef,
   isOpen,
+  message,
   onClose,
   onUpdateColor,
   selectedColor,
@@ -39,7 +40,7 @@ export const ColorDropdown = ({
       className='color-dropdown'
       ref={dropdownRef}
     >
-      <div className='select-text'>Select card top color</div>
+      <div className='select-text'>{message}</div>
       <div className='container'>
         { colorList }
       </div>
diff --git a/src/components/Card/LibraryTitle.jsx b/src/components/Card/LibraryTitle.jsx
index f9c4cf7..bd8e89e 100644
--- a/src/components/Card/LibraryTitle.jsx
+++ b/src/components/Card/LibraryTitle.jsx
@@ -80,6 +80,7 @@ const LibraryTitle = ({
       <ColorDropdown
         btnRef={colorDropdownBtnRef}
         isOpen={isColorDropdownOpen}
+        message="Select card-top color"
         onClose={closeColorDropdown}
         onUpdateColor={updateColor}
         selectedColor={color}
diff --git a/src/components/Card/Title.jsx b/src/components/Card/Title.jsx
index 3791c1f..35a2739 100644
--- a/src/components/Card/Title.jsx
+++ b/src/components/Card/Title.jsx
@@ -80,6 +80,7 @@ const Title = ({
       <ColorDropdown
         btnRef={colorDropdownBtnRef}
         isOpen={isColorDropdownOpen}
+        message="Select card-top color"
         onClose={closeColorDropdown}
         onUpdateColor={updateColor}
         selectedColor={color}
diff --git a/src/components/Card/hooks.js b/src/components/Card/hooks.js
index 994b04f..b186ba4 100644
--- a/src/components/Card/hooks.js
+++ b/src/components/Card/hooks.js
@@ -265,7 +265,6 @@ export const useOptionsDropdownHooks = ({
       title: 'Duplicate card',
       callback: () => dispatch(actions.project.copyCard({ id: cardId })),
     },
-    {},
     {
       title: 'Rename',
       callback: () => beginTitleEdit(),
@@ -280,7 +279,8 @@ export const useOptionsDropdownHooks = ({
     //   callback: () => {},
     // },
     {
-      title: 'Remove from tab',
+      title: 'Move to the library',
+      type: ACTION_TYPE.bold,
       callback: () => dispatch(actions.project.unlinkCardFromView({ id: cardId })),
       icon: LibraryIcon,
     },
diff --git a/src/components/Library/FilterBar.jsx b/src/components/Library/FilterBar.jsx
index 0292e41..580ddd6 100644
--- a/src/components/Library/FilterBar.jsx
+++ b/src/components/Library/FilterBar.jsx
@@ -24,18 +24,6 @@ const FilterBar = ({
         <span>Filter</span>
       </div>
       <div className='selections'>
-        <button
-          className={`option ${filterOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.thisTab)}
-        >
-          <span>Cards in this Tab</span>
-        </button>
-        <button
-          className={`option ${filterOption === FILTER_OPTIONS.all ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.all)}
-        >
-          <span>All Cards</span>
-        </button>
         <div className='color-selection'>
           <button
             className={`option ${filterOption === FILTER_OPTIONS.color ? 'selected' : null}`}
@@ -46,17 +34,31 @@ const FilterBar = ({
           </button>
           <ColorDropdown
             btnRef={colorDropdownBtnRef}
-            selectedColor={filterColor}
             isOpen={isColorDropdownOpen}
+            message="Filter by card color"
             onClose={closeColorDropdown}
             onUpdateColor={setFilterColor}
+            selectedColor={filterColor}
           />
         </div>
+        <div className='divider' />
+        <button
+          className={`option ${filterOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
+          onClick={() => setFilterOption(FILTER_OPTIONS.thisTab)}
+        >
+          <span>In this tab</span>
+        </button>
+        <button
+          className={`option ${filterOption === FILTER_OPTIONS.all ? 'selected' : null}`}
+          onClick={() => setFilterOption(FILTER_OPTIONS.all)}
+        >
+          <span>In all tabs</span>
+        </button>
         <button
           className={`option ${filterOption === FILTER_OPTIONS.unsorted ? 'selected' : null}`}
           onClick={() => setFilterOption(FILTER_OPTIONS.unsorted)}
         >
-          <span>Unsorted</span>
+          <span>In no tabs</span>
         </button>
       </div>
     </div>
diff --git a/src/components/Library/hooks.js b/src/components/Library/hooks.js
index 0b8c9b1..f7c7432 100644
--- a/src/components/Library/hooks.js
+++ b/src/components/Library/hooks.js
@@ -87,7 +87,7 @@ export const useLibraryHooks = () => {
   const [ isOpen, setIsOpen ] = useState(false);
   const [ searchString, setSearchString ] = useState('');
   const [ filterOption, setFilterOption ] = useState(FILTER_OPTIONS.all);
-  const [ filterColor, setFilterColor ] = useState(null);
+  const [ filterColor, setFilterColor ] = useState('');
   const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
   const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
 
diff --git a/src/components/Library/index.jsx b/src/components/Library/index.jsx
index b421b0f..5623969 100644
--- a/src/components/Library/index.jsx
+++ b/src/components/Library/index.jsx
@@ -47,11 +47,11 @@ const Library = () => {
           {cardComponents}
         </div>
 
-        <LibrarySearch />
+        {/* <LibrarySearch /> */}
       </div>
       <button className='library-btn' onClick={toggleLibrary}>
         <img src={LibraryIcon} alt='Library' />
-        <span className='tooltip'>Library</span>
+        <span className='tooltip'>Library of cards</span>
       </button>
     </div>
   );
diff --git a/src/components/Library/index.scss b/src/components/Library/index.scss
index 343b5b2..3f81324 100644
--- a/src/components/Library/index.scss
+++ b/src/components/Library/index.scss
@@ -45,6 +45,7 @@ $library-width: 35vw;
   .tooltip {
     top: 30%;
     right: 115%;
+    white-space: nowrap;
   }
   .tooltip::after {
     top: 50%;
@@ -109,6 +110,12 @@ $library-width: 35vw;
         right: 0;
       }
     }
+
+    .divider {
+      height: 25px;
+      margin: auto 10px;
+      border: 1px solid black;
+    }
   }
 }