feat: add toolbar + notifications

editor/public/static/css/base.css

@@ -1,13 +1,107 @@
 * {
-    /*padding: 0;*/
-    /*margin: 0;*/
+    margin: 0;
     box-sizing: border-box;
 }
 
+html, body {
+    height: 100%;
+}
+
 body {
     font-family: Ubuntu;
+    margin: 0;
+    padding: 0;
 }
 
 .template {
     display: none !important;
+}
+
+main {
+    padding: 1.2em;
+}
+
+header {
+    background-color: #2b2b2b;
+    padding: 1.2em;
+    grid-area: header;
+    display: flex;
+    gap: 0.8em;
+    color: white;
+
+    a, button {
+        padding: 0.4em 0.8em;
+        border: none;
+        color: black;
+        background-color: #e4e4e4;
+        font-size: inherit;
+        font-family: inherit;
+        text-decoration: none;
+        border-radius: 0.2em;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #dbdbdb;
+        }
+    }
+}
+
+aside {
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: white;
+    border-left: solid black 2px;
+}
+
+.notif {
+    --bg: #f0f0f0;
+    --border: #727272;
+    --fg: black;
+    --col: #f0f0f0;
+
+    &[data-type="success"] {
+        --bg: #e0ffe0;
+        --border: #727f72;
+        --fg: black;
+        --col: #8dff8d;
+    }
+    
+    &[data-type="error"] {
+        --bg: #ffe0e0;
+        --border: #7f7272;
+        --fg: black;
+        --col: #ff8d8d;
+    }
+    
+    &[data-type="warning"] {
+        --bg: #ffefe0;
+        --border: #7f7f72;
+        --fg: black;
+        --col: #ffc36a;
+    }
+}
+
+#notifs {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4em;
+    padding-top: 0.4em;
+    width: max-content;
+
+    .notif {
+        padding: 0.4em 0.8em;
+        border-radius: 0.6em;
+        background-color: var(--bg);
+        border: solid var(--border) 2px;
+        color: var(--fg);
+        max-width: 30em;
+        cursor: pointer;
+    }
 }

editor/public/static/css/edit.css

@@ -1,3 +1,13 @@
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2em;
+}
+
+#toggle-notifs {
+    margin-left: auto;
+}
+
 #filename {
     font-size: 80%;
     font-style: italic;
@@ -117,6 +127,8 @@ button.improve {
     transform: translateY(-50%);
     margin-left: 0.4em;
     border-radius: 0.4em;
+    background: none;
+
     &:hover{
         background-color: #8d8d8d42;
     }
@@ -318,4 +330,43 @@ button.improve {
         padding: 0.2em 0.4em;
         background-color: #fafafa;
     }
+}
+
+#notifs-hist {
+    padding: 0.8em;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &:not(.show) {
+        display: none;
+    }
+
+    #close-notifs {
+        align-self: flex-end;
+        background: none;
+        border: none;
+        padding: 0.4em 0.8em;
+        border-radius: 0.2em;
+        font-family: inherit;
+        font-size: inherit;
+        cursor: pointer;
+        
+        &:hover {
+            background-color: #ebebeb;
+        }
+    }
+
+    .list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.2em;
+        overflow-y: auto;
+        margin-top: 0.6em;
+
+        .notif {
+            border-left: solid var(--col) 4px;
+            padding: 0.4em;
+        }
+    }
 }