Merge pull request neo4j#891 from linuslundahl/fix/help-keys-dark-mode

Fix/help keys dark mode
myzero1 · Jan 3, 2019 · c6c3765 · c6c3765
2 parents d678029 + 9afa192
commit c6c3765
Show file tree

Hide file tree

Showing 15 changed files with 116 additions and 86 deletions.
diff --git a/src/browser/modules/Guides/styled.jsx b/src/browser/modules/Guides/styled.jsx
@@ -26,9 +26,15 @@ export const SlideContainer = styled.div`
   width: 100%;
   display: inline-block;
 `
-export const StyledCarouselLeft = styled.div`float: left;`
-export const StyledCarouselRight = styled.div`float: right;`
-export const StyledCarouselButtonContainer = styled.div`margin-top: -40px;`
+export const StyledCarouselLeft = styled.div`
+  float: left;
+`
+export const StyledCarouselRight = styled.div`
+  float: right;
+`
+export const StyledCarouselButtonContainer = styled.div`
+  margin-top: -40px;
+`
 const CarouselIndicator = styled.li`
   display: inline-block;
   width: 10px;
@@ -52,7 +58,9 @@ export const CarouselIndicatorActive = styled(CarouselIndicator)`
   height: 12px;
   background-color: #428bca;
 `
-export const StyledUl = styled.ul`margin: 15px;`
+export const StyledUl = styled.ul`
+  margin: 15px;
+`
 
 export const StyledSlide = styled.div`
   color: ${props => props.theme.primaryText};
@@ -62,6 +70,21 @@ export const StyledSlide = styled.div`
   .content > p,
   .table-help {
     color: ${props => props.theme.primaryText} !important;
+    line-height: 1.7;
+
+    th {
+      padding-right: 10px;
+      text-align: left;
+    }
+
+    &--keys {
+      th {
+        border-bottom: ${props => props.theme.topicBorder};
+      }
+      td {
+        padding: 3px 10px 3px 0;
+      }
+    }
   }
   & a {
     color: ${props => props.theme.link};
@@ -98,7 +121,7 @@ export const StyledSlide = styled.div`
     background-color: ${props => props.theme.primaryButtonBackground};
     color: ${props => props.theme.primaryButtonText};
   }
-  .code {
+  &.slide .code {
     background-color: transparent;
   }
 `
diff --git a/src/browser/modules/Help/html/keys.html b/src/browser/modules/Help/html/keys.html
@@ -5,77 +5,84 @@
         <p class="subtitle">Keyboard shortcuts</p>
       </div>
       <div class="content">
-        <table class="table-condensed table-help">
-          <tr>
-            <td><b>Editor action</b></td>
-            <td><b>Any mode</b></td>
-            <td><b>Single-line mode</b></td>
-          </tr>
-          <tr>
-            <td>Execute current command</td>
-            <td>
-              <div class="key code">&lt;Ctrl-Return&gt;</div>
-            </td>
-            <td>
-              <div class="key code">&lt;Return&gt;</div>
-            </td>
-          </tr>
-          <tr>
-            <td>Previous command in history</td>
-            <td>
-              <div class="key code">&lt;Ctrl-Up-Arrow&gt;</div>
-            </td>
-            <td>
-              <div class="key code">&lt;Up-Arrow&gt;</div>
-            </td>
-          </tr>
-          <tr>
-            <td>Next command in history</td>
-            <td>
-              <div class="key code">&lt;Ctrl-Down-Arrow&gt;</div>
-            </td>
-            <td>
-              <div class="key code">&lt;Down-Arrow&gt;</div>
-            </td>
-          </tr>
-          <tr>
-            <td>Switch to multi-line editing</td>
-            <td>&nbsp;</td>
-            <td>
-              <div class="key code">&lt;Shift-Return&gt;</div>
-            </td>
-          </tr>
-          <tr>
-            <td>&nbsp;</td>
-          </tr>
-          <tr>
-            <td><b>Global actions</b></td>
-          </tr>
-          <tr>
-            <td>Change focus to editor</td>
-            <td>
-              <div class="key code">/</div>
-            </td>
-          </tr>
-          <tr>
-            <td>Toggle fullscreen editor</td>
-            <td>
-              <div class="key code">Esc</div>
-            </td>
-          </tr>
-          <tr>
-            <td>&nbsp;</td>
-          </tr>
-          <tr>
-            <td><b>Platform specific</b></td>
-          </tr>
-          <tr>
-            <td>Mac users</td>
-            <td>
-
-              Use <span class="key code">Cmd</span> instead of <span class="key code">Ctrl</span>
-            </td>
-          </tr>
+        <table class="table-condensed table-help table-help--keys">
+          <thead>
+            <tr>
+              <th>Editor action</th>
+              <th>Any mode</th>
+              <th>Single-line mode</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Execute current command</td>
+              <td>
+                <div class="key code">&lt;Ctrl-Return&gt;</div>
+              </td>
+              <td>
+                <div class="key code">&lt;Return&gt;</div>
+              </td>
+            </tr>
+            <tr>
+              <td>Previous command in history</td>
+              <td>
+                <div class="key code">&lt;Ctrl-Up-Arrow&gt;</div>
+              </td>
+              <td>
+                <div class="key code">&lt;Up-Arrow&gt;</div>
+              </td>
+            </tr>
+            <tr>
+              <td>Next command in history</td>
+              <td>
+                <div class="key code">&lt;Ctrl-Down-Arrow&gt;</div>
+              </td>
+              <td>
+                <div class="key code">&lt;Down-Arrow&gt;</div>
+              </td>
+            </tr>
+            <tr>
+              <td>Switch to multi-line editing</td>
+              <td>&nbsp;</td>
+              <td>
+                <div class="key code">&lt;Shift-Return&gt;</div>
+              </td>
+            </tr>
+            <tr>
+              <td>&nbsp;</td>
+            </tr>
+            <tr>
+              <th>Global actions</th>
+              <th>&nbsp;</th>
+              <th>&nbsp;</th>
+            </tr>
+            <tr>
+              <td>Change focus to editor</td>
+              <td>
+                <div class="key code">/</div>
+              </td>
+            </tr>
+            <tr>
+              <td>Toggle fullscreen editor</td>
+              <td>
+                <div class="key code">Esc</div>
+              </td>
+            </tr>
+            <tr>
+              <td>&nbsp;</td>
+            </tr>
+            <tr>
+              <th>Platform specific</th>
+              <th>&nbsp;</th>
+              <th>&nbsp;</th>
+            </tr>
+            <tr>
+              <td>Mac users</td>
+              <td>
+                Use <span class="key code">Cmd</span> instead of <span class="key code">Ctrl</span>
+              </td>
+            </tr>
+          </tbody>
         </table>
       </div>
     </section>

diff --git a/src/browser/styles/fonts/Inconsolata-Bold.ttf b/src/browser/styles/fonts/Inconsolata-Bold.ttf
diff --git a/src/browser/styles/fonts/Inconsolata-Regular.ttf b/src/browser/styles/fonts/Inconsolata-Regular.ttf
diff --git a/src/browser/styles/fonts/OpenSans-Bold.ttf b/src/browser/styles/fonts/OpenSans-Bold.ttf
diff --git a/src/browser/styles/fonts/OpenSans-BoldItalic.ttf b/src/browser/styles/fonts/OpenSans-BoldItalic.ttf
diff --git a/src/browser/styles/fonts/OpenSans-ExtraBold.ttf b/src/browser/styles/fonts/OpenSans-ExtraBold.ttf
diff --git a/src/browser/styles/fonts/OpenSans-ExtraBoldItalic.ttf b/src/browser/styles/fonts/OpenSans-ExtraBoldItalic.ttf
diff --git a/src/browser/styles/fonts/OpenSans-Italic.ttf b/src/browser/styles/fonts/OpenSans-Italic.ttf
diff --git a/src/browser/styles/fonts/OpenSans-Light.ttf b/src/browser/styles/fonts/OpenSans-Light.ttf
diff --git a/src/browser/styles/fonts/OpenSans-LightItalic.ttf b/src/browser/styles/fonts/OpenSans-LightItalic.ttf
diff --git a/src/browser/styles/fonts/OpenSans-Regular.ttf b/src/browser/styles/fonts/OpenSans-Regular.ttf
diff --git a/src/browser/styles/fonts/OpenSans-Semibold.ttf b/src/browser/styles/fonts/OpenSans-Semibold.ttf
diff --git a/src/browser/styles/fonts/OpenSans-SemiboldItalic.ttf b/src/browser/styles/fonts/OpenSans-SemiboldItalic.ttf
diff --git a/src/browser/styles/open-sans.css b/src/browser/styles/open-sans.css
@@ -2,63 +2,63 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-Light.ttf') format('truetype');
+  src: local('Open Sans Light'), local('OpenSansLight'), url('fonts/OpenSans-Light.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 300;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-LightItalic.ttf') format('truetype');
+  src: local('Open Sans Light Italic'), local('OpenSansLightItalic'), url('fonts/OpenSans-LightItalic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
+  src: local('Open Sans Regular'), local('OpenSansRegular'), url('fonts/OpenSans-Regular.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-Italic.ttf') format('truetype');
+  src: local('Open Sans Italic'), local('OpenSansItalic'), url('fonts/OpenSans-Italic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-Semibold.ttf') format('truetype');
+  src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('fonts/OpenSans-Semibold.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 600;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
+  src: local('Open Sans Semibold Italic'), local('OpenSansSemiboldItalic'), url('fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-Bold.ttf') format('truetype');
+  src: local('Open Sans Bold'), local('OpenSansBold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-BoldItalic.ttf') format('truetype');
+  src: local('Open Sans Bold Italic'), local('OpenSansBildItalic'), url('fonts/OpenSans-BoldItalic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 800;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
+  src: local('Open Sans Extra Bold'), local('OpenSansExtraBold'), url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 800;
-  src: local('Open Sans'), local('OpenSans'), url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
+  src: local('Open Sans Extra Bold Italic'), local('OpenSansExtraBoldItalic'), url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
 }