Merge branch 'new_audio' of https://github.com/browngraphicslab/Dash-Web into new_audio

1 files changed, 58 insertions, 16 deletions

diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 5b85d8b0b..9709e1dbd 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,25 +1,67 @@
-.fontIconBox-outerDiv {
+.fontIconBox-label {
+    color: white;
+    margin-right: 4px;
+    margin-top: 1px;
+    position: relative;
+    text-align: center;
+    font-size: 7px;
+    letter-spacing: normal;
+    background-color: inherit;
+    border-radius: 8px;
+    margin-top: -8px;
+    padding: 0;
+    width: 100%;
+}
+
+.menuButton-round {
+    border-radius: 100%;
+    background-color: black;
+
+    .fontIconBox-label {
+        margin-left: -10px; // button padding is 10px;
+        bottom: 0;
+        position: absolute;
+    }
+
+    &:hover {
+        background-color: #aaaaa3;
+    }
+}
+
+.menuButton-square {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 5px;
+
+    .fontIconBox-label {
+        border-radius: 0px;
+        margin-top: 0px;
+        border-radius: "inherit";
+    }
+}
+
+.menuButton,
+.menuButton-round,
+.menuButton-square {
     width: 100%;
     height: 100%;
     pointer-events: all;
     touch-action: none;
-    border-radius: inherit;
-    background: black;
-    border-radius: 100%;
-    transform-origin: top left;
 
-    .fontIconBox-label {
-        background: gray;
-        color:white;
+    .menuButton-wrap {
+        touch-action: none;
         border-radius: 8px;
-        width:100%;
-        position: absolute;
-        text-align: center;
-        font-size: 8px;
-        margin-top:4px;
-        letter-spacing: normal;
-        left: 0;
-        overflow: hidden;
+
+        // &:hover {
+        //     background: rgb(61, 61, 61);
+        //     cursor: pointer;
+        // }
+    }
+
+    .menuButton-icon-square {
+        width: auto;
+        height: 32px;
+        padding: 4px;
     }
 
     svg {