From e29ba39e74d2d22a74e767c39c30055ebf2ca5e0 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Tue, 7 Jan 2020 07:14:29 -0500
Subject: styling for brush dropdown

---
 src/client/util/RichTextMenu.scss | 16 ++++++++++++++--
 src/client/util/RichTextMenu.tsx  | 10 +++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/util/RichTextMenu.scss b/src/client/util/RichTextMenu.scss
index f14703006..403e9f88a 100644
--- a/src/client/util/RichTextMenu.scss
+++ b/src/client/util/RichTextMenu.scss
@@ -1,10 +1,22 @@
 .button-dropdown-wrapper {
     position: relative;
 
+    .dropdown-button {
+        width: 20px;
+        padding-left: 7px;
+        padding-right: 7px;
+    }
+
     .dropdown {
         position: absolute;
-        top: 30px;
+        top: 35px;
         left: 0;
-        background-color: black;
+        background-color: #323232;
+        color: $light-color-secondary;
+        border: 1px solid #4d4d4d;
+        border-radius: 0 6px 6px 6px;
+        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+        min-width: 150px;
+        padding: 5px;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx
index fa65adca5..ad7b3f2fc 100644
--- a/src/client/util/RichTextMenu.tsx
+++ b/src/client/util/RichTextMenu.tsx
@@ -283,7 +283,7 @@ export default class RichTextMenu extends AntimodeMenu {
             //     }
             // });
 
-            self.view && self.brush_function(self.view.state, self.view.dispatch);
+            self.view && self.fillBrush(self.view.state, self.view.dispatch);
 
             // // update dropdown with marks
             // const newBrushDropdowndom = self.createBrushDropdown().render(self.view).dom;
@@ -307,8 +307,8 @@ export default class RichTextMenu extends AntimodeMenu {
             <div className="button-dropdown-wrapper">
                 <button className="antimodeMenu-button" title="" onPointerDown={onClick}>
                     <FontAwesomeIcon icon="eye-dropper" size="lg" />
-                    <button className="dropdown-button"><FontAwesomeIcon icon="caret-down" size="sm" /></button>
                 </button>
+                <button className="dropdown-button antimodeMenu-button"><FontAwesomeIcon icon="caret-down" size="sm" /></button>
                 <div className="dropdown">
                     <p>{label}</p>
                     <button onPointerDown={this.clearBrush}>Clear brush</button>
@@ -320,12 +320,12 @@ export default class RichTextMenu extends AntimodeMenu {
 
     @action
     clearBrush() {
-        this.brushIsEmpty = true;
-        this.brushMarks = new Set();
+        RichTextMenu.Instance.brushIsEmpty = true;
+        RichTextMenu.Instance.brushMarks = new Set();
     }
 
     @action
-    brush_function(state: EditorState<any>, dispatch: any) {
+    fillBrush(state: EditorState<any>, dispatch: any) {
         if (!this.view) return;
 
         if (this.brushIsEmpty) {
-- 
cgit v1.2.3-70-g09d2