Fix note icon and Scratchpad category (#370)

* Small bugs

* Consistency

.eslintrc.js

@@ -34,7 +34,7 @@ module.exports = {
     'no-useless-return': 1,
     'prefer-const': 1,
     'no-useless-return': 1,
-    'no-unused-vars': 1,
+    'no-unused-vars': 0,
   },
   settings: {
     'import/resolver': {

src/client/components/AppSidebar/FolderOption.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Star, Trash2 } from 'react-feather'
+import { Book, Star, Trash2 } from 'react-feather'
 
 import { Folder } from '@/utils/enums'
 import { iconColor } from '@/utils/constants'
@@ -55,6 +55,8 @@ export const FolderOption: React.FC<FolderOptionProps> = ({
   const renderIcon = () => {
     if (folder === 'FAVORITES') {
       return <Star size={15} className="app-sidebar-icon" 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} />
     }

src/client/containers/ContextMenu.tsx

@@ -145,21 +145,23 @@ const NotesMenu: React.FC<NotesMenuProps> = ({ note, setOptionsId }) => {
 
   return (
     <>
-      <SelectCategory
-        onChange={(event) => {
-          _addCategoryToNote(event.target.value, note.id)
+      {!note.scratchpad && (
+        <SelectCategory
+          onChange={(event) => {
+            _addCategoryToNote(event.target.value, note.id)
 
-          if (event.target.value !== activeCategoryId) {
-            _updateActiveCategoryId(event.target.value)
-            _updateActiveNote(note.id, false)
-          }
+            if (event.target.value !== activeCategoryId) {
+              _updateActiveCategoryId(event.target.value)
+              _updateActiveNote(note.id, false)
+            }
 
-          setOptionsId('')
-        }}
-        categories={categories}
-        activeCategoryId={activeCategoryId}
-        note={note}
-      />
+            setOptionsId('')
+          }}
+          categories={categories}
+          activeCategoryId={activeCategoryId}
+          note={note}
+        />
+      )}
 
       <ContextMenuOptions type={ContextMenuEnum.NOTE} clickedItem={note} />
     </>

src/client/slices/category.ts

@@ -28,12 +28,11 @@ const categorySlice = createSlice({
       state.categories.push(payload)
     },
 
-    updateCategory: (state, { payload }: PayloadAction<CategoryItem>) => ({
-      ...state,
-      categories: state.categories.map((category) =>
+    updateCategory: (state, { payload }: PayloadAction<CategoryItem>) => {
+      state.categories = state.categories.map((category) =>
         category.id === payload.id ? { ...category, name: payload.name } : category
-      ),
-    }),
+      )
+    },
 
     deleteCategory: (state, { payload }: PayloadAction<string>) => {
       state.categories = state.categories.filter((category) => category.id !== payload)

src/client/styles/_app-sidebar.scss

@@ -27,6 +27,11 @@
     }
     &:hover {
       background: lighten($app-sidebar-color, 5%);
+      .user-settings-icon {
+        margin-left: auto;
+        margin-right: 0.5rem;
+        color: lighten($app-sidebar-color, 60%);
+      }
     }
     .user-avatar {
       border-radius: 50%;
@@ -44,6 +49,7 @@
     }
     .user-settings-icon {
       margin-left: auto;
+      margin-right: 0.5rem;
       color: lighten($app-sidebar-color, 40%);
     }
   }
@@ -59,6 +65,11 @@
 
     &:hover {
       background: lighten($app-sidebar-color, 5%);
+      color: white;
+
+      svg {
+        stroke: darken($light-font-color, 10%);
+      }
     }
 
     &.active {
@@ -177,10 +188,17 @@
 
         &:hover {
           background: lighten($app-sidebar-color, 5%);
+          color: white;
 
           .category-options {
             color: lighten($app-sidebar-color, 30%);
           }
+
+          .category-list-name {
+            svg {
+              stroke: darken($light-font-color, 10%);
+            }
+          }
         }
 
         &.active {

src/client/styles/_buttons.scss

@@ -7,7 +7,7 @@
   color: white;
   font-weight: 600;
   font-size: 1rem;
-  padding: 0.75rem 1.25rem;
+  padding: 0.5rem 0.75rem;
   margin: 0 0 0.5rem 0;
   vertical-align: middle;
   text-align: center;

src/client/styles/_dark.scss

@@ -108,7 +108,12 @@ $dark-editor: #3f3f3f;
   .options-nav {
     .nav-item {
       &:hover {
+        color: white;
         background: lighten($app-sidebar-color, 8%);
+
+        svg {
+          color: rgba(255, 255, 255, 0.8);
+        }
       }
       &.delete-option {
         &:hover {
@@ -129,7 +134,7 @@ $dark-editor: #3f3f3f;
   }
 
   .previewer {
-    background: $dark-editor;
+    background: darken($dark-editor, 5%);
     color: $light-font-color;
     padding: 1rem;
 
@@ -137,6 +142,10 @@ $dark-editor: #3f3f3f;
       color: $tag;
     }
 
+    h2 {
+      border-bottom: 1px solid lighten($dark-editor, 5%);
+    }
+
     h1,
     h2,
     h3,
@@ -145,16 +154,31 @@ $dark-editor: #3f3f3f;
       color: $attribute;
     }
 
+    thead th {
+      border-bottom: 2px solid lighten($dark-editor, 5%);
+    }
+
+    tfoot th {
+      border-top: 2px solid lighten($dark-editor, 5%);
+    }
+
+    td {
+      border-bottom: 1px solid lighten($dark-editor, 5%);
+    }
+
     code {
       background: rgba(0, 0, 0, 0.2);
+      border: 1px solid $dark-editor;
     }
 
     pre {
       background: darken($dark-editor, 10%);
+      border: 1px solid $dark-editor;
 
       code {
         color: $code-font-color;
         background: transparent;
+        border-width: 0;
       }
     }
 

src/client/styles/_layout.scss

@@ -75,8 +75,7 @@
   box-shadow: 0 10px 15px rgba(0, 0, 0, 0.07), 0 5px 5px rgba(0, 0, 0, 0.2);
 
   .move-to-category-select {
-    // This would be better as a right arrow new context
-    // menu than a dropdown
+    // This would be better as a right arrow new context menu than a dropdown
     -webkit-appearance: none;
     border-radius: 4px;
     font-size: 0.9rem;
@@ -100,6 +99,11 @@
 
     &:hover {
       background: #f0f0f0;
+      color: black;
+
+      svg {
+        color: rgba(0, 0, 0, 0.8);
+      }
     }
 
     &.delete-option {
@@ -108,7 +112,7 @@
         color: white;
 
         svg {
-          color: rgba(255, 255, 255, 0.7);
+          color: white;
         }
       }
     }

src/client/styles/_new-moon.scss

@@ -22,7 +22,7 @@
 }
 
 .cm-s-new-moon span.cm-comment {
-  color: $comment;
+  color: lighten($comment, 5%);
 }
 
 .cm-s-new-moon span.cm-keyword {

src/client/styles/_previewer.scss

@@ -2,10 +2,10 @@
   position: relative;
   max-height: calc(100vh);
   overflow-y: auto;
-
-  background: #f5f5f5;
+  background: white;
   color: #404040;
   padding: 1rem;
+  -webkit-font-smoothing: subpixel-antialiased;
 
   &_direction-ltr {
     direction: ltr;
@@ -18,6 +18,7 @@
   a {
     color: $primary;
     text-decoration: none;
+    font-weight: 600;
 
     &:hover {
       text-decoration: underline;
@@ -74,6 +75,8 @@
 
   h2 {
     font-size: 1.6rem;
+    border-bottom: 1px solid $note-sidebar-color;
+    padding-bottom: 0.5rem;
   }
 
   h3 {
@@ -114,7 +117,7 @@
   pre {
     border: 0;
     border-radius: 0;
-    background: $note-sidebar-color;
+    background: lighten($note-sidebar-color, 8%);
     padding: 1rem;
     tab-size: 2;
     color: #404040;
@@ -122,18 +125,24 @@
     white-space: pre-wrap;
     word-spacing: normal;
     word-break: normal;
+    border-radius: 0.3rem;
+    border: 1px solid darken($note-sidebar-color, 3%);
+    font-size: 0.9rem;
+    line-height: 1.4rem;
 
     code {
       padding: 0;
       background: transparent;
       line-height: 1.2;
+      border-width: 0;
     }
   }
 
   code {
-    padding: 2px 4px;
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.08);
+    padding: 2px 3px;
+    background: lighten($note-sidebar-color, 8%);
+    border-radius: 0.3rem;
+    border: 1px solid darken($note-sidebar-color, 3%);
   }
 
   hr {
@@ -149,6 +158,7 @@
   }
 
   table {
+    border: 1px solid $note-sidebar-color;
     border-collapse: collapse;
     border-spacing: 0;
     max-width: 100%;