UI overhaul for topbar

1 files changed, 105 insertions, 3 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 328cbbaf1..bc10600ca 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -17,6 +17,8 @@
 .docCreatorMenu-menu {
     display: flex;
     flex-direction: row;
+    height: 25px;
+    align-items: flex-end;
 }
 
 .docCreatorMenu-menu-button {
@@ -41,6 +43,9 @@
 
     &.close-menu {
         font-size: 12px;
+        width: 15px;
+        height: 15px;
+        font-size: 12px;
         margin-left: auto;
     }
 
@@ -51,6 +56,88 @@
     &:hover {
         background-color: rgb(60, 60, 65);
     }
+
+    &.top-bar {
+        border-bottom: 25px solid #555;
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        // border-top-left-radius: 5px;
+        // border-top-right-radius: 5px;
+        border-radius: 0px;
+        height: 0;
+        width: 50px;
+    }
+}
+
+.docCreatorMenu-top-buttons-container {
+    position: relative;
+    margin-top: 5px;
+    margin-left: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    width: 150px;
+    height: auto;
+}
+
+.top-button-container {
+    position: relative;
+    width: 52px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.left {
+        z-index: 3;
+    }
+
+    &.middle {
+        position: absolute;
+        left: 40px;
+        z-index: 2;
+    }
+
+    &.right {
+        position: absolute;
+        left: 80px;
+        z-index: 1;
+    }
+
+    &:hover::before{
+        border-bottom: 20px solid rgb(82, 82, 82);
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-bottom: 20px solid rgb(50, 50, 50);
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        height: 0;
+        width: 50px;
+    }
+
+    &::after {
+        content: "";    
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        border-bottom: 22px solid rgb(180, 180, 180);
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        height: 0;
+        width: 52px;
+        z-index: -1;
+    }
+}
+
+.top-button-content {
+    position: relative;
+    z-index: 1;
+    color: white;
 }
 
 .docCreatorMenu-menu-hr{
@@ -59,7 +146,6 @@
     color: rgb(180, 180, 180);
 }
 
-
 .docCreatorMenu-placement-indicator {
     position: absolute;
     z-index: 100000;
@@ -69,6 +155,22 @@
     height: 25px;
 }
 
+.docCreatorMenu-create-docs-button {
+    width: 80px;
+    height: 40px;
+    background-color: rgb(176, 229, 149); 
+    border-radius: 5px;
+    border: 2px solid rgb(126, 219, 80);
+    padding: 0px;
+    font-size: 16px;
+    color: black;
+
+    &:hover {
+        background-color: rgb(129, 223, 83);
+        border: 2px solid rgb(80, 185, 28); 
+    }
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 //DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
@@ -83,7 +185,7 @@
     margin: 5px;
     margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 45px);
+    height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
@@ -243,7 +345,7 @@
     margin: 5px;
     margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 45px);
+    height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;