minor improvements

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',
 };
 

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;
 }

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>

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}

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}

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,
  },

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>

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);
 

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>
  );

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;
+ }
  }
 }