1 files changed, 84 insertions, 8 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
index 2dd63ec21..6a403cb17 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
@@ -4,14 +4,80 @@
     z-index: 20;
     background: white;
     border: 1px solid silver;
-    border-radius: 2px;
+    border-radius: 7px;
     margin-bottom: 7px;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
-  }
-  .FormattedTextBox-tooltip:before {
+    box-shadow: 3px 3px 1.5px grey;
+
+    .FormattedTextBoxComment {
+        background-color: white;
+        border: 8px solid white;
+
+        //display: flex;
+        .FormattedTextBoxComment-info {
+
+            margin-bottom: 9px;
+
+            .FormattedTextBoxComment-title {
+                padding-right: 4px;
+                float: left;
+
+                .FormattedTextBoxComment-description {
+                    text-decoration: none;
+                    font-style: italic;
+                    color: rgb(95, 97, 102);
+                    font-size: 10px;
+                    padding-bottom: 4px;
+                    margin-bottom: 5px;
+
+                }
+            }
+
+            .FormattedTextBoxComment-button {
+                display: inline;
+                padding-left: 6px;
+                padding-right: 6px;
+                padding-top: 2.5px;
+                padding-bottom: 2.5px;
+                width: 17px;
+                height: 17px;
+                margin: 0;
+                margin-right: 3px;
+                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-size: 12px;
+
+                &:hover {
+                    background-color: rgb(77, 77, 77);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .FormattedTextBoxComment-preview-wrapper {
+            width: 170px;
+            height: 170px;
+            overflow: hidden;
+            //padding-top: 5px;
+            margin-top: 10px;
+            margin-bottom: 8px;
+            align-content: center;
+            justify-content: center;
+            background-color: rgb(160, 160, 160);
+        }
+    }
+}
+
+.FormattedTextBox-tooltip:before {
     content: "";
-    height: 0; width: 0;
+    height: 0;
+    width: 0;
     position: absolute;
     left: 50%;
     margin-left: -5px;
@@ -19,10 +85,12 @@
     border: 5px solid transparent;
     border-bottom-width: 0;
     border-top-color: silver;
-  }
-  .FormattedTextBox-tooltip:after {
+}
+
+.FormattedTextBox-tooltip:after {
     content: "";
-    height: 0; width: 0;
+    height: 0;
+    width: 0;
     position: absolute;
     left: 50%;
     margin-left: -5px;
@@ -30,4 +98,12 @@
     border: 5px solid transparent;
     border-bottom-width: 0;
     border-top-color: white;
-  }
-\ No newline at end of file
+}
+
+.FormattedTextBoxComment-buttons {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+}
+\ No newline at end of file