Implemented Themed Logout Button and Sidebar

src/client/components/AppSidebar/FolderOption.tsx

@@ -54,11 +54,11 @@ export const FolderOption: React.FC<FolderOptionProps> = ({
 
   const renderIcon = () => {
     if (folder === 'FAVORITES') {
-      return <Star size={15} className="app-sidebar-icon" color={iconColor} />
+      return <Star size={15} className="app-sidebar-icon star" color={iconColor} />
     } else if (folder === 'ALL') {
       return <Book size={15} className="app-sidebar-icon" color={iconColor} />
     } else {
-      return <Trash2 size={15} className="app-sidebar-icon" color={iconColor} />
+      return <Trash2 size={15} className="app-sidebar-icon trash" color={iconColor} />
     }
   }
 

src/client/containers/NoteMenuBar.tsx

@@ -120,7 +120,7 @@ export const NoteMenuBar = () => {
           </button>
           {!activeNote.scratchpad && (
             <>
-              <button className="note-menu-bar-button" onClick={favoriteNoteHandler}>
+              <button className="note-menu-bar-button star" onClick={favoriteNoteHandler}>
                 <Star aria-hidden="true" size={18} />
                 <span className="sr-only">Add note to favorites</span>
               </button>

src/client/containers/SettingsModal.tsx

@@ -163,6 +163,7 @@ export const SettingsModal: React.FC = () => {
               <div className="subtitle">{currentUser.bio}</div>
             </div>
             <button
+              className="profile-logout-button"
               onClick={() => {
                 _logout()
               }}

src/client/styles/_app-sidebar.scss

@@ -78,6 +78,14 @@
       svg {
         stroke: darken($light-font-color, 10%);
       }
+
+      svg.star {
+        stroke: darken($warning, 10%);
+      }
+
+      svg.trash {
+        stroke: darken($error, 10%);
+      }
     }
   }
 
@@ -106,6 +114,14 @@
       svg {
         stroke: $primary;
       }
+
+      svg.star {
+        stroke: darken($warning, 10%);
+      }
+
+      svg.trash {
+        stroke: darken($error, 10%);
+      }
     }
 
     &.dragged-over {

src/client/styles/_modal.scss

@@ -133,6 +133,17 @@
       margin: 0;
       margin-right: 1rem;
     }
+    margin-right: 1rem;
+  }
+
+  .profile-logout-button {
+    background-color: rgb(202, 29, 29);
+    border-color: rgb(202, 29, 29);
+
+    &:hover {
+      background-color: rgb(189, 32, 32);
+      border-color: rgb(189, 32, 32);
+    }
   }
 
   .subtitle {

src/client/styles/_note-menu-bar.scss

@@ -37,6 +37,11 @@
     color: lighten($font-color, 15%);
     padding: 0 0.75rem;
     margin: 0;
+    &.star {
+      &:hover {
+        color: darken($warning, 8%);
+      }
+    }
     &.trash {
       &:hover {
         color: darken($error, 20%);

src/client/styles/_variables.scss

@@ -19,6 +19,7 @@ $accent-gray: #d0d0d0;
 $accent-lightgray: lighten($accent-gray, 12%);
 $dimmer-background: rgba(0, 0, 0, 0.6);
 $error: #f2777a;
+$warning: #ffb10a;
 
 $box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.08);