feat: basic dashboard view

1 files changed, 178 insertions, 188 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 923f1892e..9a8e7c2e5 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,29 +1,30 @@
 @import "../global/globalCssVariables";
 
 .topbar-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-    font-size: 10px;
-    line-height: 1;
-    overflow-y: auto;
-    overflow-x: visible;
-    background: $dark-gray;
-    overflow: visible;
-    z-index: 1000;
-
-    .topbar-bar {
-        height: $topbar-height;
-        display: grid;
-        grid-auto-columns: 33.3% 33.3% 33.3%;
-        align-items: center;
-        background-color: $dark-gray;
-
-        .topBar-icon {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      position: relative;
+      font-size: 10px;
+      line-height: 1;
+      overflow-y: auto;
+      overflow-x: visible;
+      background: $dark-gray;
+      overflow: visible;
+      z-index: 1000;
+
+      .topbar-button-text {
+            color: $white;
+            padding: 10px;
+            size: 15;
+
+            &:hover {
+                  font-weight: 500;
+            }
+      }
+
+      .topbar-button-icon {
             cursor: pointer;
-            font-size: 12.5px;
-            font-family: 'Roboto';
             width: fit-content;
             display: flex;
             justify-content: center;
@@ -31,190 +32,179 @@
             align-items: center;
             justify-self: center;
             align-self: center;
-            border-radius: $standard-border-radius;
             padding: 5px;
             transition: linear 0.2s;
-            color: $black;
-            background-color: $light-gray;
+            color: $white;
 
             &:hover {
-                background-color: darken($color: $light-gray, $amount: 20);
+                  background-color: darken($color: $light-gray, $amount: 20);
             }
-        }
-
-
-
-
-        .topbar-center {
-            grid-column: 2;
-            display: inline-flex;
-            justify-content: center;
+      }
+
+      .topbar-title {
+            color: $white;
+            font-size: 17;
+            font-weight: 500;
+      }
+
+      .topbar-bar {
+            height: $topbar-height;
+            display: grid;
+            grid-auto-columns: 33.3% 33.3% 33.3%;
             align-items: center;
-            gap: 5px;
-
-            .topbar-dashboards {
-                display: flex;
-                flex-direction: row;
-                gap: 5px;
+            background-color: $dark-gray;
+
+            .topbar-center {
+                  grid-column: 2;
+                  display: inline-flex;
+                  justify-content: center;
+                  align-items: center;
+                  gap: 5px;
+
+                  .topbar-dashboards {
+                        display: flex;
+                        flex-direction: row;
+                        gap: 5px;
+                  }
             }
 
-            .topbar-lozenge-dashboard {
-                display: flex;
-
-
-
-                .topbar-dashSelect {
-                    border: none;
-                    background-color: $dark-gray;
-                    color: $white;
-                    font-family: 'Roboto';
-                    font-size: 17;
-                    font-weight: 500;
-
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
-
-
-        .topbar-right {
-            grid-column: 3;
-            position: relative;
-            display: flex;
-            justify-content: flex-end;
-            gap: 5px;
-            margin-right: 5px;
-        }
-
-        .topbar-left {
-            grid-column: 1;
-            color: black;
-            font-family: 'Roboto';
-            position: relative;
-            display: flex;
-            width: fit-content;
-            gap: 5px;
 
-            .topBar-icon:hover {
-                background-color: $close-red;
+            .topbar-right {
+                  grid-column: 3;
+                  position: relative;
+                  display: flex;
+                  justify-content: flex-end;
+                  gap: 5px;
+                  margin-right: 5px;
             }
 
-            .topbar-lozenge-user,
-            .topbar-lozenge {
-                height: 23;
-                font-size: 12;
-                color: white;
-                font-family: 'Roboto';
-                font-weight: 400;
-                padding: 4px;
-                align-self: center;
-                margin-left: 7px;
-                display: flex;
-                align-items: center;
-
-                .topbar-dashSelect {
-                    border: none;
-                    background-color: transparent;
-                    color: black;
-                    font-family: 'Roboto';
-                    font-size: 17;
-                    font-weight: 500;
-
-                    &:hover {
+            .topbar-left {
+                  grid-column: 1;
+                  color: black;
+                  font-family: 'Roboto';
+                  position: relative;
+                  display: flex;
+                  width: fit-content;
+                  gap: 5px;
+
+                  .topBar-icon:hover {
+                        background-color: $close-red;
+                  }
+
+                  .topbar-lozenge-user,
+                  .topbar-lozenge {
+                        height: 23;
+                        font-size: 12;
+                        color: white;
+                        font-family: 'Roboto';
+                        font-weight: 400;
+                        padding: 4px;
+                        align-self: center;
+                        margin-left: 7px;
+                        display: flex;
+                        align-items: center;
+
+                        .topbar-dashSelect {
+                              border: none;
+                              background-color: transparent;
+                              color: black;
+                              font-family: 'Roboto';
+                              font-size: 17;
+                              font-weight: 500;
+
+                              &:hover {
+                                    cursor: pointer;
+                              }
+                        }
+                  }
+
+                  .topbar-logoff {
+                        border-radius: 3px;
+                        background: olivedrab;
+                        color: white;
+                        display: none;
+                        margin-left: 5px;
+                        padding: 1px 2px 1px 2px;
                         cursor: pointer;
-                    }
-                }
-            }
-
-            .topbar-logoff {
-                border-radius: 3px;
-                background: olivedrab;
-                color: white;
-                display: none;
-                margin-left: 5px;
-                padding: 1px 2px 1px 2px;
-                cursor: pointer;
-            }
-
-            .topbar-logoff {
-                background: red;
-            }
-
-            .topbar-lozenge-user:hover {
-                .topbar-logoff {
-                    display: inline-block;
-                }
-            }
-        }
-
-        .topbar-barChild {
+                  }
 
-            &.topbar-collection {
-                flex: 0 1 auto;
-                margin-left: 2px;
-                margin-right: 2px
-            }
-
-            &.topbar-input {
-                margin: 5px;
-                border-radius: 20px;
-                border: $dark-gray;
-                display: block;
-                width: 130px;
-                -webkit-transition: width 0.4s;
-                transition: width 0.4s;
-                /* align-self: stretch; */
-                outline: none;
-
-                &:focus {
-                    width: 500px;
-                    outline: none;
-                }
-            }
-
-            &.topbar-filter {
-                align-self: stretch;
-
-                button {
-                    transform: none;
-
-                    &:hover {
-                        transform: none;
-                    }
-                }
-            }
+                  .topbar-logoff {
+                        background: red;
+                  }
 
-            &.topbar-submit {
-                margin-left: 2px;
-                margin-right: 2px
+                  .topbar-lozenge-user:hover {
+                        .topbar-logoff {
+                              display: inline-block;
+                        }
+                  }
             }
 
-            &.topbar-close {
-                color: $white;
-                max-height: $topbar-height;
+            .topbar-barChild {
+
+                  &.topbar-collection {
+                        flex: 0 1 auto;
+                        margin-left: 2px;
+                        margin-right: 2px
+                  }
+
+                  &.topbar-input {
+                        margin: 5px;
+                        border-radius: 20px;
+                        border: $dark-gray;
+                        display: block;
+                        width: 130px;
+                        -webkit-transition: width 0.4s;
+                        transition: width 0.4s;
+                        /* align-self: stretch; */
+                        outline: none;
+
+                        &:focus {
+                              width: 500px;
+                              outline: none;
+                        }
+                  }
+
+                  &.topbar-filter {
+                        align-self: stretch;
+
+                        button {
+                              transform: none;
+
+                              &:hover {
+                                    transform: none;
+                              }
+                        }
+                  }
+
+                  &.topbar-submit {
+                        margin-left: 2px;
+                        margin-right: 2px
+                  }
+
+                  &.topbar-close {
+                        color: $white;
+                        max-height: $topbar-height;
+                  }
             }
-        }
-    }
+      }
 }
 
 .topbar-results {
-    display: flex;
-    flex-direction: column;
-    top: 300px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: visible;
-
-    .no-result {
-        width: 500px;
-        background: $light-gray;
-        padding: 10px;
-        height: 50px;
-        text-transform: uppercase;
-        text-align: left;
-        font-weight: bold;
-    }
+      display: flex;
+      flex-direction: column;
+      top: 300px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: visible;
+
+      .no-result {
+            width: 500px;
+            background: $light-gray;
+            padding: 10px;
+            height: 50px;
+            text-transform: uppercase;
+            text-align: left;
+            font-weight: bold;
+      }
 }
\ No newline at end of file