Update: Improve and simplify annotation button and icon styles (#318)

box · Dec 19, 2018 · 538fbd2 · 538fbd2
1 parent 6f9d783
commit 538fbd2
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 65 deletions.
diff --git a/src/components/ActionControls/DrawingControls.scss b/src/components/ActionControls/DrawingControls.scss
@@ -2,28 +2,23 @@
 
 .ba {
     .ba-action-controls-draw {
+        $button-spacing: 5px;
+
         display: flex;
-    }
+        margin-left: -#{$button-spacing};
+        margin-right: -#{$button-spacing};
 
-    .ba-action-controls-draw .btn-plain {
-        flex-grow: 1;
-        padding-left: 5px;
-        padding-right: 5px;
+        .btn-plain {
+            flex-grow: 1;
+            padding-left: $button-spacing;
+            padding-right: $button-spacing;
 
-        .fill-color {
-            fill: $sevens;
+            .fill-color {
+                fill: $sevens;
+            }
         }
-    }
-
-    .icon-trash {
-        margin-top: 4px;
-    }
-
-    .ba-action-controls-draw .btn-plain:hover {
-        padding-left: 5px;
-        padding-right: 5px;
 
-        .fill-color {
+        .btn-plain:hover .fill-color {
             fill: $better-black;
         }
     }

diff --git a/src/components/ActionControls/HighlightControls.js b/src/components/ActionControls/HighlightControls.js
@@ -34,6 +34,8 @@ const HighlightControls = ({
         {canAnnotateAndDelete && (
             <PlainButton type='button' className={CLASS_HIGHLIGHT_BTN} onClick={isPending ? onCreate : onDelete}>
                 <IconHighlightAnnotation
+                    height={20}
+                    width={20}
                     className={classNames({
                         [CLASS_SAVED_HIGHLIGHT]: !isPending
                     })}
@@ -42,7 +44,7 @@ const HighlightControls = ({
         )}
         {canComment && (
             <PlainButton type='button' className={CLASS_HIGHLIGHT_COMMENT_BTN} onClick={onCommentClick}>
-                <IconHighlightCommentAnnotation height={24} width={24} />
+                <IconHighlightCommentAnnotation height={20} width={20} />
             </PlainButton>
         )}
     </div>

diff --git a/src/components/ActionControls/HighlightControls.scss b/src/components/ActionControls/HighlightControls.scss
@@ -2,35 +2,36 @@
 
 .ba {
     .ba-action-controls-highlight {
-        display: flex;
-    }
-
-    .ba-action-controls-highlight .btn-plain {
-        flex-grow: 1;
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-
-    .icon-annotation-highlight,
-    .icon-annotation-highlight-comment .icon {
-        fill: $sevens;
-    }
+        $button-spacing: 5px;
 
-    .ba-saved-highlight {
-        fill: $highlight-yellow;
-    }
-
-    .ba-action-controls-highlight .btn-plain:hover {
-        padding-left: 5px;
-        padding-right: 5px;
-
-        .icon-annotation-highlight,
-        .icon-annotation-highlight-comment .icon {
-            fill: $better-black;
+        display: flex;
+        margin-left: -#{$button-spacing};
+        margin-right: -#{$button-spacing};
+
+        .btn-plain {
+            flex-grow: 1;
+            padding-left: $button-spacing;
+            padding-right: $button-spacing;
+
+            .icon-annotation-highlight,
+            .icon-annotation-highlight-comment .icon {
+                fill: $sevens;
+            }
+
+            .icon-annotation-highlight.ba-saved-highlight {
+                fill: $highlight-yellow;
+            }
         }
 
-        .icon-annotation-highlight.ba-saved-highlight {
-            fill: $highlight-yellow-hover;
+        .btn-plain:hover {
+            .icon-annotation-highlight,
+            .icon-annotation-highlight-comment .icon {
+                fill: $better-black;
+            }
+
+            .icon-annotation-highlight.ba-saved-highlight {
+                fill: $highlight-yellow-hover;
+            }
         }
     }
 

diff --git a/src/components/ActionControls/__tests__/__snapshots__/HighlightControls-test.js.snap b/src/components/ActionControls/__tests__/__snapshots__/HighlightControls-test.js.snap
@@ -11,8 +11,8 @@ exports[`components/ActionControls/HighlightControls should correctly render pen
   >
     <IconHighlightAnnotation
       className=""
-      height={24}
-      width={24}
+      height={20}
+      width={20}
     />
   </PlainButton>
   <PlainButton
@@ -22,8 +22,8 @@ exports[`components/ActionControls/HighlightControls should correctly render pen
   >
     <IconHighlightCommentAnnotation
       className=""
-      height={24}
-      width={24}
+      height={20}
+      width={20}
     />
   </PlainButton>
 </div>
@@ -40,8 +40,8 @@ exports[`components/ActionControls/HighlightControls should correctly render pen
   >
     <IconHighlightAnnotation
       className=""
-      height={24}
-      width={24}
+      height={20}
+      width={20}
     />
   </PlainButton>
 </div>
@@ -57,8 +57,8 @@ exports[`components/ActionControls/HighlightControls should correctly render sav
   >
     <IconHighlightAnnotation
       className="ba-saved-highlight"
-      height={24}
-      width={24}
+      height={20}
+      width={20}
     />
   </PlainButton>
   <PlainButton
@@ -68,8 +68,8 @@ exports[`components/ActionControls/HighlightControls should correctly render sav
   >
     <IconHighlightCommentAnnotation
       className=""
-      height={24}
-      width={24}
+      height={20}
+      width={20}
     />
   </PlainButton>
 </div>
@@ -85,8 +85,8 @@ exports[`components/ActionControls/HighlightControls should correctly render sav
   >
     <IconHighlightAnnotation
       className="ba-saved-highlight"
-      height={24}
-      width={24}
+      height={20}
+      width={20}
     />
   </PlainButton>
 </div>

diff --git a/src/components/AnnotationPopover/AnnotationPopover.js b/src/components/AnnotationPopover/AnnotationPopover.js
@@ -93,7 +93,7 @@ class AnnotationPopover extends React.PureComponent<Props> {
                     {isMobile ? (
                         <span className={CLASS_MOBILE_HEADER} style={{ height: headerHeight }}>
                             <PlainButton className={CLASS_MOBILE_CLOSE_BTN} onClick={onCancel}>
-                                <IconClose height={24} width={24} />
+                                <IconClose height={20} width={20} />
                             </PlainButton>
                         </span>
                     ) : (

diff --git a/src/components/AnnotationPopover/AnnotationPopover.scss b/src/components/AnnotationPopover/AnnotationPopover.scss
@@ -46,11 +46,12 @@
         display: block;
         overflow-x: hidden;
         overflow-y: auto;
-        padding: 15px;
+        padding: 10px;
         white-space: normal;
     }
 
     .ba-inline-popover .overlay {
+        align-items: center;
         display: inline-flex;
     }
 

diff --git a/src/components/AnnotationPopover/AnnotatorLabel.scss b/src/components/AnnotationPopover/AnnotatorLabel.scss
@@ -1,10 +1,6 @@
 @import '../../variables';
 
 .ba {
-    .ba-annotator-label {
-        line-height: 23px;
-    }
-
     // MOBILE & TABLET CSS
     @media #{$mobile}, #{$tablet} {
         .ba-annotator-label {

diff --git a/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap b/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap
@@ -135,8 +135,8 @@ exports[`components/AnnotationPopover should correctly render a div without a Fo
         }
       >
         <IconClose
-          height={24}
-          width={24}
+          height={20}
+          width={20}
         />
       </PlainButton>
     </span>

diff --git a/src/constants.js b/src/constants.js
@@ -189,7 +189,7 @@ export const POINT_ANNOTATION_ICON_HEIGHT = 31;
 export const POINT_ANNOTATION_ICON_DOT_HEIGHT = 8;
 export const POINT_ANNOTATION_ICON_WIDTH = 24;
 export const ANNOTATION_POPOVER_CARET_HEIGHT = 8;
-export const INLINE_POPOVER_HEIGHT = 56;
+export const INLINE_POPOVER_HEIGHT = 42;
 
 export const PAGE_PADDING_TOP = 15;
 export const PAGE_PADDING_BOTTOM = 15;