Dark mode styling of New Note dialog

src/components/NewNote.vue

@@ -192,7 +192,7 @@
         &:focus
             outline: none
         +dark-mode
-            background: #333
+            background: #151516
             box-shadow: 0 0 10px rgba(0,0,0,0.5)
             color: rgba(255,255,255, 0.7)
         +webapp-mobile
@@ -247,8 +247,6 @@
             padding-top: 0
             display: flex
             justify-content: flex-end
-            +dark-mode
-                background: #222
             button
                 font-size: 12px
                 height: 28px
@@ -258,5 +256,8 @@
                 padding-right: 10px
                 &:focus
                     outline-color: #48b57e
+                +dark-mode
+                    background: #444
+                    border: none
         
 </style>

src/components/folder-selector/FolderItem.vue

@@ -70,10 +70,17 @@
         background-repeat: no-repeat
         background-position-y: 5px
         background-position-x: calc(2px + var(--indent-level) * 16px)
+        +dark-mode
+            background-image: url('@/assets/icons/caret-right-white.svg')
+            color: rgba(255,255,255, 0.87)
         &:hover
             background-color: #f1f1f1
+            +dark-mode
+                background-color: #39393a
         &.open
             background-image: url('@/assets/icons/caret-down.svg')
+            +dark-mode
+                background-image: url('@/assets/icons/caret-down-white.svg')
         &.selected
             background-color: #48b57e
             color: #fff
@@ -82,6 +89,11 @@
                 background-image: url('@/assets/icons/caret-down-white.svg')
             &:hover
                 background-color: #40a773
+            +dark-mode
+                background-color: #1b6540
+                color: rgba(255,255,255, 0.87)
+                &:hover
+                    background-color: #1f6f47
             .new-folder
                 display: block
                 color: rgba(255,255,255, 0.9)
@@ -90,6 +102,10 @@
             color: rgba(0,0,0, 0.5)
             &.selected
                 color: rgba(255,255,255, 0.8)
+            +dark-mode
+                color: rgba(255,255,255, 0.5)
+                &.selected
+                    color: rgba(255,255,255, 0.8)
 
 
         .name

src/components/folder-selector/FolderSelector.vue

@@ -245,4 +245,7 @@
             outline: none
             border: 1px solid #fff
             outline: 2px solid #48b57e
+        +dark-mode
+            background: #262626
+            border: 1px solid #363636
 </style>

src/components/folder-selector/NewFolderItem.vue

@@ -86,8 +86,8 @@
         padding-left: calc(0px + var(--indent-level) * 16px)
         display: flex
         background: #f1f1f1
-        &:hover
-            background: #f1f1f1
+        +dark-mode
+            background-color: #39393a
                 
 
         input
@@ -104,5 +104,7 @@
                 outline: none
             &::placeholder
                 font-size: 12px
+            +dark-mode
+                background: #3b3b3b
 
 </style>