Merge pull request monome#180 from nattog/fix-popup-ui

Fix - low contrast on help menu
synthetiv · Jan 30, 2020 · 0b5a7ad · 0b5a7ad
2 parents 669e016 + 00eb170
commit 0b5a7ad
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 47 deletions.
diff --git a/web/src/help-button.css b/web/src/help-button.css
@@ -8,12 +8,22 @@
     padding: 6px;
 }
 
+.help-button-popup {
+    font-family: monospace !important; 
+    background-color: #F4F4F4 !important;
+    padding: 6px 6px 6px .4em !important;
+    border: 1px solid rgb(130, 130, 130, 0.1) !important;
+    border-left: none !important;
+    box-shadow: none !important;
+    padding-left: .4em !important;
+}
+
 .help-button-link, .help-botton-link:visited {
     text-decoration: none;
-    color: #979797;
+    color: hsl(0, 0%, 46%);
 }
 
 .help-button-link:hover {
     color: hsl(0, 0%, 39%);
 
-}
+}
diff --git a/web/src/help-button.js b/web/src/help-button.js
@@ -3,54 +3,42 @@ import Popup from 'reactjs-popup';
 import './help-button.css';
 
 const trigger = (
-    <div className="help-button-menu">?</div>
+  <div className="help-button-menu">?</div>
 );
 
-// FIXME: figure out how to define this style in css
-const contentStyle = {
-    fontFamily: 'monospace',
-    backgroundColor: '#F4F4F4',
-    padding: '6px',
-    opacity: '40%',
-    border: '1px solid rgb(130, 130, 130, 0.1)', // magic color to approx splitter bar color
-    borderLeft: 'none',
-    boxShadow: 'none',
-    paddingLeft: '.4em',
-};
-
 const HelpButton = props => (
-    <Popup
-        trigger={trigger}
-        on='hover'
-        contentStyle={contentStyle}
-        closeOnDocumentClick
-        mouseLeaveDelay={180}
-        mouseEnterDelay={0}
-        position='right center'
-        arrow={false}>
-          <div>
-            <div>
-              <a className="help-button-link"
-                  href="https://monome.org/docs/norns/"
-                  target="_blank"
-                  key="overview"
-                  rel="noopener noreferrer">overview...</a>
-            </div>
-            <div>
-              <a className="help-button-link"
-                  href="https://monome.org/docs/norns/script-reference/" target="_blank"
-                  key="reference"
-                  rel="noopener noreferrer">script reference...</a>
-            </div>
-            <div>
-              <a className="help-button-link"
-                  href="/doc"
-                  target="_blank"
-                  key="api"
-                  rel="noopener noreferrer">api...</a>
-            </div>
-          </div>
-    </Popup>
+  <Popup
+    trigger={trigger}
+    on='hover'
+    className='help-button-popup'
+    closeOnDocumentClick
+    mouseLeaveDelay={180}
+    mouseEnterDelay={0}
+    position='right center'
+    arrow={false}>
+    <div>
+      <div>
+        <a className="help-button-link"
+          href="https://monome.org/docs/norns/"
+          target="_blank"
+          key="overview"
+          rel="noopener noreferrer">overview...</a>
+      </div>
+      <div>
+        <a className="help-button-link"
+          href="https://monome.org/docs/norns/script-reference/" target="_blank"
+          key="reference"
+          rel="noopener noreferrer">script reference...</a>
+      </div>
+      <div>
+        <a className="help-button-link"
+          href="/doc"
+          target="_blank"
+          key="api"
+          rel="noopener noreferrer">api...</a>
+      </div>
+    </div>
+  </Popup>
 );
 
 export default HelpButton;