minor improvements (#47)

rayzhou-bit · May 10, 2024 · fcd9f1f · fcd9f1f
1 parent 4a99847
commit fcd9f1f
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 23 deletions.
diff --git a/src/assets/icons/library.svg b/src/assets/icons/library.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+    }
   }
 }