updated homepage view

1 files changed, 79 insertions, 6 deletions

diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 3db23b86f..b8a6f6c05 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,3 +1,6 @@
+@import "./global/globalCssVariables";
+
+
 .dashboard-view {
       padding: 50px;
       display: flex;
@@ -7,8 +10,10 @@
 
       .left-menu {
             display: flex;
+            justify-content: flex-start;
             flex-direction: column;
-            width: 300px;
+            width: 250px;
+            min-width: 250px;
       }
 
       .all-dashboards {
@@ -20,7 +25,8 @@
 }
 
 .text-button {
-      padding: 10px 0;
+    cursor: pointer;
+      padding: 3px 0;
       &:hover {
             font-weight: 500;
       }
@@ -30,17 +36,46 @@
       }
 }
 
+.new-dashboard-button {
+    font-weight: 600;
+    padding-bottom: 10px;
+}
+
+.dashboard-container-new {
+    border-radius: 10px;
+    width: 250px;
+    height: 200px;
+    font-size: 120px;
+    font-weight: 100;
+    text-align: center;
+    border: solid 2px $light-gray;
+    margin: 0 0px 30px 30px;
+    cursor: pointer;
+    color: $light-gray;
+    display: flex;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        color: $light-blue;
+        border: solid 2px $light-blue;
+    }
+}
+
 .dashboard-container {
       border-radius: 10px;
+      cursor: pointer;
       width: 250px;
-      border: solid .5px grey;
+      height: 200px;
+      outline: solid 2px $light-gray;
       display: flex;
       flex-direction: column;
-      margin: 0 30px 30px 30px;
+      margin: 0 0px 30px 30px;
       overflow: hidden;
 
-      &:hover {
-            border: solid 1.5px grey;  
+      &:hover{
+        outline: solid 2px $light-blue;
       }
 
       .title {
@@ -58,9 +93,47 @@
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
+            padding: 0px 10px;
       }
 
       .more {
             z-index: 100;
       }
+}
+
+.new-dashboard {
+    color: $dark-gray;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .header {
+        font-size: 1.5em;
+        font-weight: 600;
+    }
+
+    .title-input,
+    .color-picker {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        font-weight: 500;
+        gap: 5px;
+        z-index: 5;
+
+        .input {
+            border-radius: 10px;
+            padding: 5px 10px;
+        }
+    }
+
+    .button-bar {
+        display: flex;
+        gap: 5px;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
 }
\ No newline at end of file