Adapt context menu icons to new UI approach

oacore · Oct 4, 2019 · 1b92a3a · 1b92a3a
1 parent c743c9a
commit 1b92a3a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/src/components/pdf-highlighter/PDFHighlighter.scss b/src/components/pdf-highlighter/PDFHighlighter.scss
@@ -1,3 +1,5 @@
+@import "../bootstrap/core";
+
 $HIGHLIGHT_COLORS: (
   red: #e57373,
   yellow: #fff176,
@@ -21,6 +23,24 @@ $HIGHLIGHT_COLORS: (
   right: 0;
   bottom: 0;
 
+  .context-menu-icon {
+    width: 2rem;
+    height: 2rem;
+    padding: 0.1rem;
+    color: $gray-700;
+
+    &:hover,
+    &:focus {
+      color: $primary;
+    }
+
+    // remove Bootstrap's shadow
+     &.active,
+     &.active:focus {
+       box-shadow: none !important;
+     }
+  }
+
   .highlight-popup-animated {
     animation: tooltip 300ms ease-out forwards;
   }
@@ -43,11 +63,6 @@ $HIGHLIGHT_COLORS: (
       }
     }
 
-    > div > button {
-      max-height: 27px;
-      max-width: 27px;
-    }
-
     .dot {
       height: 25px;
       width: 25px;

diff --git a/src/components/pdf-highlighter/components/ContextMenu.jsx b/src/components/pdf-highlighter/components/ContextMenu.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Tooltip, Input } from 'reactstrap'
+import { Tooltip, Input, Button } from 'reactstrap'
 import { isEmpty, noop } from 'lodash'
 import withAppContext from 'store/withAppContext'
 import { Markup } from 'interweave'
@@ -206,16 +206,17 @@ class ContextMenu extends React.PureComponent {
               )}
             </>
             <div className="d-flex justify-content-between menu-actions mb-1">
-              <button
+              <Button
                 id="add-new-annotation"
-                className="btn p-0"
+                className="context-menu-icon"
                 type="button"
                 onClick={() => {
                   this.setAnnotationAndToggleSidebar('red')
                   this.setState(s => ({
                     showNewAnnotationInput: !s.showNewAnnotationInput,
                   }))
                 }}
+                color="none"
               >
                 <Tooltip
                   placement="top"
@@ -231,12 +232,13 @@ class ContextMenu extends React.PureComponent {
                   Create new annotation!
                 </Tooltip>
                 <Icon iconType="create-new-annotation" isActive={false} />
-              </button>
-              <button
+              </Button>
+              <Button
                 id="copy-text-to-clipboard"
-                className="btn p-0"
+                className="context-menu-icon"
                 type="button"
                 onClick={this.copyToClipBoard}
+                color="none"
               >
                 <Tooltip
                   placement="top"
@@ -260,11 +262,12 @@ class ContextMenu extends React.PureComponent {
                   Copied!
                 </Tooltip>
                 <Icon iconType="copy" isActive={false} />
-              </button>
-              <button
+              </Button>
+              <Button
                 id="wikification"
-                className="btn p-0"
+                className="context-menu-icon"
                 type="button"
+                color="none"
                 onClick={() =>
                   this.setState(s => ({
                     showWikipediaSuggestions: !s.showWikipediaSuggestions,
@@ -285,10 +288,10 @@ class ContextMenu extends React.PureComponent {
                   Search Wikipedia
                 </Tooltip>
                 <Icon iconType="wiki" isActive={showWikipediaSuggestions} />
-              </button>
+              </Button>
               <a
                 id="search-web"
-                className="btn p-0"
+                className="btn context-menu-icon"
                 href={`http://www.google.com/search?q=${encodeURIComponent(
                   selectedText
                 )}`}
@@ -308,7 +311,9 @@ class ContextMenu extends React.PureComponent {
                 >
                   Search on Google
                 </Tooltip>
-                <Icon iconType="search" isActive={false} />
+                <Button className="context-menu-icon" color="none">
+                  <Icon iconType="search" isActive={false} />
+                </Button>
               </a>
             </div>
             <hr className="m-1" />