got rid of InkOptionsMenu. Merged into CollectionFreeFormViewChrome.

1 files changed, 42 insertions, 19 deletions

diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 0da78df9f..9da204787 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -8,15 +8,15 @@
     opacity: 0.9;
     z-index: 9001;
     transition: top .5s;
-    background: #121721;
+    background: #323232;
     color: white;
     transform-origin: top left;
     top: 0;
     width:100%;
 
     .antimodeMenu-button {
-        padding:0;
-        width:30px;
+        padding: 0;
+        width: 30px;
         display: flex;
         svg {
             margin:auto;
@@ -37,7 +37,7 @@
 
             .collectionViewBaseChrome-viewPicker {
                 font-size: 75%;
-                background: #121721;
+                background: #323232;
                 outline-color: black;
                 color: white;
                 border: none;
@@ -64,7 +64,7 @@
                 margin-left: 3px;
                 margin-right: 0px;
                 font-size: 75%;
-                background: #121721;
+                background: #323232;
                 color: white;
                 border: none;
                 border-right: solid gray 1px;
@@ -72,7 +72,7 @@
 
             .commandEntry-outerDiv {
                 pointer-events: all;
-                background-color: #121721;
+                background-color: #323232;
                 display: flex;
                 flex-direction: row;
                 height: 30px;
@@ -118,7 +118,7 @@
                     position: relative;
                     display: flex;
                     margin: auto;
-                    background: #121721;
+                    background: #323232;
                     color: white;
                     width: 30px;
                     height: 30px;
@@ -310,28 +310,54 @@
 }
 
 .collectionFreeFormMenu-cont {
-    width: 60px;
-    display: flex;
+    display: inline-flex;
     position: relative;
     align-items: center;
 
+    .antimodeMenu-button {
+        text-align: center;
+        display: block;
+    }
+    .color-previewI {
+        width: 80%;
+        height: 20%;
+        bottom: 0;
+        position: absolute;
+    }
+    .color-previewII {
+        width: 80%;
+        height: 80%;
+        margin-left: 10%;
+    }
+
+    .btn-group {
+        display: grid;
+        grid-template-columns: auto auto auto auto;
+        margin: auto;
+        /* Make the buttons appear below each other */
+    }
+    
+    .btn-draw {
+        display: inline-flex;
+        margin: auto;
+        /* Make the buttons appear below each other */
+    }
+
     .fwdKeyframe,
     .numKeyframe,
     .backKeyframe {
         cursor: pointer;
-        position: absolute;
+        position: relative;
         width: 20;
         height: 30;
         bottom: 0;
-        background: #121721;
-        display: flex;
+        background: #323232;
+        display: inline-flex;
         align-items: center;
         color: white;
     }
 
     .backKeyframe {
-        left: 0;
-
         svg {
             display: block;
             margin: auto;
@@ -339,19 +365,16 @@
     }
 
     .numKeyframe {
-        left: 20;
-        display: flex;
         flex-direction: column;
-        padding: 5px;
+        padding-top: 5px;
     }
 
     .fwdKeyframe {
-        left: 40;
-
         svg {
             display: block;
             margin: auto;
         }
+        border-right: solid gray 1px;
     }
 }