Fix: Popover CSS issues (#287)

- Hide @mention tooltip at all times - Fix time misalignment in popover - Fix tablet popover CSS to not be positioned absolutely
box · Nov 15, 2018 · e64b3f8 · e64b3f8
1 parent 448347c
commit e64b3f8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 25 deletions.
diff --git a/src/components/ActionControls/ActionControls.scss b/src/components/ActionControls/ActionControls.scss
@@ -1,6 +1,10 @@
 @import '../../variables';
 
 .ba {
+    .bcs-at-mention-tip {
+        display: none;
+    }
+
     .ba-action-controls {
         background: white;
         color: $fours;
@@ -17,7 +21,7 @@
         flex-flow: column wrap;
     }
 
-    .bcs-comment-user-name ~ .bcs-comment-created-at {
+    .bcs-comment .bcs-comment-content .bcs-comment-user-name ~ .bcs-comment-created-at {
         margin: 0;
     }
 
@@ -32,12 +36,16 @@
         .ba-create-popover .ba-action-controls {
             border: none;
             box-shadow: none;
+            justify-content: flex-end;
         }
 
-        .ba-annotation-input-container {
+        .ba-annotation-input-container,
+        .ba-create-popover .ba-annotation-input-container {
+            background: white;
+            border-top: 1px solid $see-see;
             bottom: 0;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
             padding: 15px;
-            position: absolute;
             width: 100%;
         }
 
@@ -55,17 +63,5 @@
             justify-content: flex-end;
             width: 100%;
         }
-
-        .ba-annotation-input-container {
-            padding: 15px;
-            width: 100%;
-        }
-
-        .ba-create-popover .ba-annotation-input-container {
-            border-top: 1px solid $seesee;
-            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
-            padding: 15px;
-            width: 100%;
-        }
     }
 }
diff --git a/src/components/AnnotationPopover/AnnotationPopover.scss b/src/components/AnnotationPopover/AnnotationPopover.scss
@@ -115,7 +115,7 @@
             height: 100%;
         }
 
-        .ba-popover .overlay {
+        .ba-popover .ba-popover-overlay {
             border: none;
             box-shadow: unset;
             display: flex;
@@ -130,7 +130,7 @@
             height: auto;
         }
 
-        .ba-inline .overlay {
+        .ba-inline .ba-popover-overlay {
             background: transparent;
             border-bottom: 1px solid $seesee;
             box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
@@ -139,7 +139,7 @@
             text-align: center;
         }
 
-        .ba-inline.ba-create-popover .overlay {
+        .ba-inline.ba-create-popover .ba-popover-overlay {
             border: none;
             box-shadow: none;
             display: flex;
@@ -164,7 +164,7 @@
             top: auto;
         }
 
-        .ba-create-popover .overlay {
+        .ba-create-popover .ba-popover-overlay {
             background: transparent;
             border-radius: 0;
             height: auto;
@@ -196,19 +196,15 @@
         }
 
         .ba-create-popover,
-        .ba-create-popover .overlay {
+        .ba-create-popover .ba-popover-overlay {
             background: white;
             height: 100%;
         }
 
         .ba-inline.ba-create-popover,
-        .ba-inline.ba-create-popover .overlay {
+        .ba-inline.ba-create-popover .ba-popover-overlay {
             background: transparent;
             height: auto;
         }
-
-        .ba-create-popover .overlay {
-            padding: 15px;
-        }
     }
 }