feat(looks): sidebar has a shadow, menubar buttons active color and s…

…hadow, MainTop bottom-border

src/pages/Newtab/components/Sidebar.tsx

@@ -3,18 +3,15 @@ import { Button, Input, Link, Text, Tooltip } from '@nextui-org/react';
 import { useRecoilState } from 'recoil';
 import { format } from 'date-fns'
 import { v4 as uuidv4 } from 'uuid'
+import { RiArrowLeftSLine, RiDeleteBin2Line } from 'react-icons/ri';
+import { useLocalStorage } from 'react-use';
 
 import { sidebarActiveState, activeNoteState, notesState, editorSearchState, binNotesState } from '../Store'
 import { Note } from '../types';
 
 import './css/Sidebar.scss'
-import { FiTrash2 } from 'react-icons/fi';
-import { RiArrowLeftSLine, RiDeleteBin2Line, RiRecycleLine } from 'react-icons/ri';
-import { useLocalStorage } from 'react-use';
 import { NotePreview } from './note/NotePreview';
 
-const { storage } = chrome
-
 const Sidebar = () => {
   const [sidebarActive, setSidebarActive] = useRecoilState(sidebarActiveState)
 
@@ -36,16 +33,15 @@ const Sidebar = () => {
 
   useEffect(() => { setIsSidebarOpen(`${Boolean(sidebarActive)}`) }, [sidebarActive])
 
-  const returnFormattedDateString = (timestamp: Date) => {
-    return format(new Date(timestamp), 'PPpp')
-  }
+  const returnFormattedDateString = (timestamp: Date) => format(new Date(timestamp), 'PPpp')
 
   const checkIfAnEmptyNoteExists = (): Note | undefined => {
     return notes.find((n) => n.title.trim() === "" && n.textContent.trim() === "")
   }
 
   const createNewNoteAndSetItAsActiveNote = () => {
     const emptyNoteInNotesList = checkIfAnEmptyNoteExists()
+
     if (emptyNoteInNotesList) {
       setActiveNote(undefined)
       setTimeout(() => setActiveNote(emptyNoteInNotesList))
@@ -91,11 +87,11 @@ const Sidebar = () => {
     if (isInBin) setBinNotes(localNotes)
     else setNotes(localNotes)
 
-    if (note.id === activeNote?.id) {
-      setActiveNote(undefined)
+    if (note.id !== activeNote?.id) return
 
-      setTimeout(() => setActiveNote(JSON.parse(JSON.stringify(newNote))))
-    }
+    setActiveNote(undefined)
+
+    setTimeout(() => setActiveNote(JSON.parse(JSON.stringify(newNote))))
   }
 
   const deleteNote = (id: string, source: 'normal' | 'bin' = 'normal') => {
@@ -260,10 +256,10 @@ const Sidebar = () => {
     <aside className={`sidebar ${sidebarActive ? 'active' : ''}`}>
       <section className='sidebar-top flex' aria-label='sidebar-top'>
         <Input
-          underlined
           fullWidth={true}
-          placeholder='Search notes...'
+          placeholder='Search all notes...'
           type="search"
+          bordered
           value={globalSearchTerm}
           onInput={e => setGlobalSearchTerm((e.target as HTMLInputElement).value)}
         />

src/pages/Newtab/components/css/MainTop.scss

@@ -2,7 +2,6 @@
   align-items: center;
   justify-content: space-between;
   padding: 8px;
-  border-bottom: 1px solid grey;
   width: 100%;
   height: 8vh;
 

src/pages/Newtab/components/css/Sidebar.scss

@@ -1,22 +1,23 @@
 .sidebar {
   height: 100vh;
   box-sizing: border-box;
-  border-right: 1px solid rgba($color: black, $alpha: 0.2);
   margin-left: -25%;
   width: 25%;
   transition: all 0.25s;
   overflow: hidden;
   position: relative;
+  border-top-right-radius: var(--nextui-radii-md);
+  border-bottom-right-radius: var(--nextui-radii-md);
 
   &.active {
     margin-left: 0;
+    box-shadow: var(--nextui-shadows-md);
   }
 
   &-top {
     justify-content: center;
     align-items: center;
-    padding: 8px;
-    border-bottom: 1px solid gray;
+    padding: 10px;
     height: 8vh;
   }
 

src/pages/Newtab/components/editor/Menubar.scss

@@ -27,7 +27,7 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-    box-shadow: 0 0 4px rgba($color: #000000, $alpha: 0.2);
+    box-shadow: var(--nextui-shadows-sm);
     border-radius: 4px;
     transition: all 0.2s ease-in-out;
 
@@ -41,10 +41,10 @@
     }
 
     &.active {
-      background: var(--nextui-colors-primary);
+      background: var(--nextui-colors-primaryLight);
 
       svg {
-        fill: white;
+        fill: var(--nextui-colors-primary);
       }
     }