From 2b1af3fab4cc51f8cbb577ed51842cec1774a355 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 8 Jul 2020 13:22:49 -0500
Subject: restructured textbox comment, cleaned menu UI

---
 .../formattedText/FormattedTextBoxComment.scss     | 99 +++++++++-------------
 1 file changed, 39 insertions(+), 60 deletions(-)

(limited to 'src/client/views/nodes/formattedText/FormattedTextBoxComment.scss')

diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
index 9089e7039..286ccf22d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
@@ -8,6 +8,45 @@
     margin-bottom: 7px;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
+    box-shadow: 3px 3px 1.5px grey;
+
+    .FormattedTextBoxComment-title {
+        background-color: white;
+        border: 8px solid white;
+
+        .FormattedTextBoxComment-button {
+            display: inline;
+            padding-left: 6px;
+            padding-right: 6px;
+            padding-top: 2.5px;
+            padding-bottom: 2.5px;
+            width: 20px;
+            height: 20px;
+            margin: 0;
+            margin-right: 6px;
+            border-radius: 50%;
+            pointer-events: auto;
+            background-color: rgb(0, 0, 0);
+            color: rgb(255, 255, 255);
+            transition: transform 0.2s;
+            text-align: center;
+            position: relative;
+            font: 10px;
+
+            &:hover {
+                background-color: rgb(77, 77, 77);
+                cursor: grab;
+            }
+        }
+
+        .FormattedTextBoxComment-preview-wrapper {
+            max-width: 180px;
+            max-height: 168px;
+            overflow: hidden;
+            overflow-y: hidden;
+            padding-top: 5px;
+        }
+    }
 }
 
 .FormattedTextBox-tooltip:before {
@@ -42,64 +81,4 @@
     top: 50%;
     right: 0;
     transform: translateY(-50%);
-
-    .FormattedTextBoxComment-button {
-        width: 20px;
-        height: 20px;
-        margin: 0;
-        margin-right: 6px;
-        border-radius: 50%;
-        pointer-events: auto;
-        background-color: rgb(38, 40, 41);
-        color: rgb(178, 181, 184);
-        font-size: 65%;
-        transition: transform 0.2s;
-        text-align: center;
-        position: relative;
-
-        // margin-top: "auto";
-        //     margin-bottom: "auto";
-        //     background: black;
-        //     color: white;
-        //     display: inline-block;
-        //     border-radius: 18px;
-        //     font-size: 12.5px;
-        //     width: 18px;
-        //     height: 18px;
-        //     margin-top: auto;
-        //     margin-bottom: auto;
-        //     margin-right: 3px;
-        //     cursor: pointer;
-        //     transition: transform 0.2s;
-
-        .FormattedTextBoxComment-fa-icon {
-            margin-top: "auto";
-            margin-bottom: "auto";
-            background: black;
-            color: white;
-            display: inline-block;
-            border-radius: 18px;
-            font-size: 12.5px;
-            width: 18px;
-            height: 18px;
-            margin-top: auto;
-            margin-bottom: auto;
-            margin-right: 3px;
-            cursor: pointer;
-            transition: transform 0.2s;
-            // position: absolute;
-            // top: 50%;
-            // left: 50%;
-            // transform: translate(-50%, -50%);
-        }
-
-        &:last-child {
-            margin-right: 0;
-        }
-
-        &:hover {
-            background: rgb(53, 146, 199);
-            ;
-        }
-    }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2