create button coloring and zoom buttons moved

1 files changed, 28 insertions, 11 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bc10600ca..0fc85ba5d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -43,8 +43,9 @@
 
     &.close-menu {
         font-size: 12px;
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
+        border-radius: 2px;
         font-size: 12px;
         margin-left: auto;
     }
@@ -96,12 +97,20 @@
         position: absolute;
         left: 40px;
         z-index: 2;
+
+        &.selected {
+            z-index: 4;
+        }
     }
 
     &.right {
         position: absolute;
         left: 80px;
         z-index: 1;
+
+        &.selected {
+            z-index: 4;
+        }
     }
 
     &:hover::before{
@@ -132,6 +141,10 @@
         width: 52px;
         z-index: -1;
     }
+
+    &.selected::before {
+        border-bottom-color: rgb(67, 119, 214);
+    }
 }
 
 .top-button-content {
@@ -164,6 +177,7 @@
     padding: 0px;
     font-size: 16px;
     color: black;
+    flex: 0 0 auto;
 
     &:hover {
         background-color: rgb(129, 223, 83);
@@ -408,7 +422,7 @@
         position: relative;
         padding: 0px;
 
-        &:hover .docCreatorMenu-zoom-button {
+        &:hover .docCreatorMenu-zoom-button-container {
             display: block;
         }
 
@@ -441,8 +455,17 @@
             }
         }
 
-        .docCreatorMenu-zoom-button{ 
+        .docCreatorMenu-zoom-button-container {
+            position: absolute;
+            top: 0px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             display: none;
+            z-index: 999;
+        }
+
+        .docCreatorMenu-zoom-button{ 
             width: 15px;
             height: 15px;
             background: whitesmoke; 
@@ -451,17 +474,11 @@
             border: 1px solid rgb(180, 180, 180);
             padding: 0px;
             font-size: 10px;
-            position: absolute;
-            top: 0px;
             z-index: 6;
             margin-left: 0px;
             margin-top: 0px;
-            margin-right: 225px;
+            margin-right: 0px; //225px
             margin-bottom: 0px;
-
-            &.zoom-in{
-                top: 15px;
-            }
         }
     }
 }