in-progress revamp of the entire UI

app/index.html

@@ -20,7 +20,6 @@
     </div>
 
     <div class="bottomBar">
-        <button id="removeBox" class="removeButton"></button>
         <button onclick="toggleMarkdown()" class="markdownButton"></button>
         <button id="wordCountBox">0 words</button>
         <div class="textManipulator">
@@ -31,9 +30,14 @@
     </div>
 
     <div id="notesBar" class="notesBar">
-        <button id="newNote" class="newNote">
+        <button id="newNote" class="newNote" style="margin-left: 5px;">
             <div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg"></div>
-            <div class="vcenter">New note</div>
+        </button>
+        <button class="newNote" style="margin-left: 37.5px; background-color: var(--bar) !important;">
+    
+        </button>
+        <button id="removeBox" class="newNote">
+            <div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/delete.svg"></div>
         </button>
         <div id="notesDiv" class="notesDiv">
             <button class="loadingStuff" id="loadingStuff"></button>

static/css/style.css

@@ -4,11 +4,12 @@
 :root {
     --contrast: #eee;
     --contrast2: #fff;
-    --bar: #f4f4f4;
+    --bar: #FAFAFA;
     --editor: #ffffff;
     --text-color: #000000;
-    --border-color: #dadada;
+    --border-color: #dcdcdc;
     --theme-color: #1c71d8;
+    --note-theme-color: #CDE1EC;
     --hover-theme-color: #4990e7;
     --nonimporant-theme-color: #EBEBEB;
     --hover-nonimportant-theme-color: #dbdbdb; 
@@ -18,9 +19,11 @@
     --exit-color: #e9e9e9;
     --session-color: #f4f4f4;
     --note-button: #ffffff;
-    --note-button-text-color: #ffffff;
+    --note-button-hover: #eeeeee;
+    --note-button-text-color: #000;
     --unselected-note-button-text-color: #000000;
     --option-background: #ffffff;
+    --icon-button-hover: #ececec;
     --invertdm: 0%;
 }
 
@@ -35,6 +38,7 @@
         --text-color: #ffffff;
         --border-color: #393b3d;
         --theme-color: #3584e4;
+        --note-theme-color: #293B53;
         --hover-theme-color: #4990e7;
         --nonimporant-theme-color: #4A4A4A;
         --hover-nonimportant-theme-color: #595959; 
@@ -44,9 +48,11 @@
         --exit-color: #454649;
         --session-color: #2d2f31;
         --note-button: #202124;
+        --note-button-hover: #2a2c2f;
         --note-button-text-color: #ffffff;
         --unselected-note-button-text-color: #ffffff;
         --option-background: #202124;
+        --icon-button-hover: #333333;
         --invertdm: 100%;
     }
 
@@ -285,15 +291,13 @@ body {
 .notesBar {
     position: fixed;
     width: 180px;
-    top: 50px;
+    height: calc(100%);
-    height: calc(100% - 50px - 30px - 1px);
 
     background-color: var(--bar);
     border: solid;
     border-color: var(--border-color);
     border-width: 0;
     border-right-width: 1px;
-    border-top-width: 1px;
 }
 
 .notesDiv {
@@ -308,11 +312,11 @@ body {
     padding: 10px;
     margin: 5px;
     margin-bottom: 0;
-    background-color: var(--note-button);
+    background-color: var(--bar);
     color: var(--unselected-note-button-text-color);
     border-radius: 8px;
 
-    border: solid;
+    border: none;
     border-color: var(--border-color);
     border-width: 1px;
     font-size: 15px;
@@ -321,6 +325,12 @@ body {
     cursor: pointer;
     white-space: nowrap;
     overflow-x: hidden;
+
+    transition: 0.125s;
+}
+
+.notesBar .noteButton:hover {
+    background-color: var(--note-button-hover);
 }
 
 .notesBar .loadingStuff {
@@ -343,29 +353,35 @@ body {
 }
 
 .notesBar .selected {
-    background-color: var(--theme-color) !important;
+    background-color: var(--note-theme-color) !important;
     border: none;
     color: var(--note-button-text-color);
 }
 
+.notesBar .selected:hover {
+    background-color: var(--note-theme-color) !important;
+}
+
 .notesBar .newNote {
     height: 41px;
+    width: 41px;
     line-height: 41px;
     text-align: left;
     font-size: 16px;
     cursor: pointer;
-    display: flex;
     margin-top: 5px;
-    background: var(--note-button);
+    background-color: var(--bar);
     border-radius: 8px;
-    border: var(--border-color) solid 1px;
+    border: none;
-    width: calc(100% - 7px - 7px - 3.5px);
+    transition: 0.125s;
-    margin-left: 5px;
+}
+
+.notesBar .newNote:hover {
+    background-color: var(--icon-button-hover);
 }
 
 .notesBar .newNote img {
-    height: 32px;
+    height: 20px;
-    padding-right: 5px;
     filter: invert(var(--invertdm));
 }
 

static/svg/add.svg

@@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 7 1 v 6 h -6 v 2 h 6 v 6 h 2 v -6 h 6 v -2 h -6 v -6 z m 0 0" fill="#222222"/></svg>

static/svg/delete.svg

@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#2e3436">
+        <path d="m 1 3 h 14 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 h -14 c -0.550781 0 -1 -0.449219 -1 -1 s 0.449219 -1 1 -1 z m 0 0"/>
+        <path d="m 4 4 v -1.5 c 0 -1.386719 1.113281 -2.5 2.5 -2.5 h 2.980469 c 1.382812 0 2.5 1.113281 2.5 2.5 v 1.5 h -2 v -1.5 c 0 -0.269531 -0.230469 -0.5 -0.5 -0.5 h -2.980469 c -0.269531 0 -0.5 0.230469 -0.5 0.5 v 1.5 z m 0 0"/>
+        <path d="m 4 4 v 9 c 0 0.546875 0.453125 1 1 1 h 6 c 0.546875 0 1 -0.453125 1 -1 v -9 h 2 v 9 c 0 1.660156 -1.339844 3 -3 3 h -6 c -1.660156 0 -3 -1.339844 -3 -3 v -9 z m 0 0"/>
+        <path d="m 7 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
+        <path d="m 10 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
+    </g>
+</svg>