feat: added tw icon to menu and sidebar; optimised search\'s css (#946)

mdx-js · Feb 13, 2020 · b75d9c4 · b75d9c4 · vercel · Feb 13, 2020
1 parent beee1a1
commit b75d9c4
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 30 deletions.
diff --git a/packages/gatsby-theme-mdx/src/components/buttons.js b/packages/gatsby-theme-mdx/src/components/buttons.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import {css} from 'theme-ui'
+
+export const GithubButton = ({dark, customCss}) => (
+  <a
+    href="https://github.com/mdx-js/mdx"
+    css={css({
+      display: 'flex',
+      alignItems: 'center',
+      p: 2,
+      color: 'inherit',
+      ...customCss
+    })}
+  >
+    <img
+      src={`https://icon.now.sh/github/24/${dark ? 'fff' : '000'}`}
+      alt="GitHub logo"
+    />
+  </a>
+)
+
+export const TwitterButton = ({dark, customCss}) => (
+  <a
+    href="https://twitter.com/mdx_js"
+    css={css({
+      display: 'flex',
+      alignItems: 'center',
+      p: 2,
+      color: 'inherit',
+      ...customCss
+    })}
+  >
+    <img
+      src={`https://icon.now.sh/twitter/24/${dark ? 'fff' : '000'}`}
+      alt="Twitter logo"
+    />
+  </a>
+)
diff --git a/packages/gatsby-theme-mdx/src/components/dark-toggle.js b/packages/gatsby-theme-mdx/src/components/dark-toggle.js
@@ -14,7 +14,7 @@ export default ({dark, setDark, ...props}) => (
       border: 0,
       borderRadius: 99999,
       mr: 2,
-      p: 1,
+      p: 2,
       '&:focus': {
         outline: 'none',
         boxShadow: '0 0 0 2px'

diff --git a/packages/gatsby-theme-mdx/src/components/header.js b/packages/gatsby-theme-mdx/src/components/header.js
@@ -6,6 +6,7 @@ import Burger from './burger'
 import theme from './theme'
 import DarkToggle from './dark-toggle'
 import Search from './search'
+import {GithubButton, TwitterButton} from './buttons'
 
 const MenuButton = props => (
   <button
@@ -64,26 +65,23 @@ export default ({toggleMenu, dark, setDark}) => (
       css={{
         display: 'none',
         [theme.mediaQueries.big]: {
-          display: 'inline'
+          display: 'inline',
+          padding: '8px'
         }
       }}
     >
       v{pkg.version}
     </span>
-    <a
-      href="https://github.com/mdx-js/mdx"
-      css={css({
-        display: 'flex',
-        alignItems: 'center',
-        p: 3,
-        color: 'inherit'
-      })}
-    >
-      <img
-        src={`https://icon.now.sh/github/24/${dark ? 'fff' : '000'}`}
-        alt="GitHub logo"
-      />
-    </a>
+    <GithubButton dark={dark} />
+    <TwitterButton
+      dark={dark}
+      customCss={{
+        display: 'none',
+        [theme.mediaQueries.big]: {
+          display: 'flex'
+        }
+      }}
+    />
     <DarkToggle dark={dark} setDark={setDark} />
     <MenuButton
       onClick={toggleMenu}

diff --git a/packages/gatsby-theme-mdx/src/components/layout.js b/packages/gatsby-theme-mdx/src/components/layout.js
@@ -8,6 +8,7 @@ import Header from './header'
 import Pagination from './pagination'
 import EditLink from './edit-link'
 import {SkipNavLink, SkipNavContent} from './skip-nav'
+import {GithubButton, TwitterButton} from './buttons'
 import baseTheme from './theme'
 
 const styles = (
@@ -172,6 +173,15 @@ export default props => {
           <Main>
             <Sidebar onClick={closeMenu} open={menuOpen}>
               <SidebarContent />
+              <div
+                css={css({
+                  display: 'flex',
+                  pl: 16
+                })}
+              >
+                <GithubButton dark={dark} />
+                <TwitterButton dark={dark} />
+              </div>
             </Sidebar>
             <Container className="searchable-content">
               <SkipNavContent />

diff --git a/packages/gatsby-theme-mdx/src/components/search.js b/packages/gatsby-theme-mdx/src/components/search.js
@@ -24,20 +24,21 @@ const styles = theme =>
       display: 'flex',
       alignItems: 'center',
       // <3 CSS
-      '.algolia-autocomplete': {
-        '@media screen and (min-width:40em)': {
-          width: '500px'
-        },
-        '.ds-dropdown-menu': {
-          '@media screen and (max-width:40em)': {
+      [theme.mediaQueries.big]: {
+        '.algolia-autocomplete': {
+          width: '450px'
+        }
+      },
+      [theme.mediaQueries.maxBig]: {
+        '.algolia-autocomplete.algolia-autocomplete-left': {
+          '.ds-dropdown-menu': {
             position: 'fixed',
-            top: '128px',
-            right: 0,
-            bottom: 0,
-            left: 0,
-            margin: 16,
-            minWidth: 'calc(100vw - 32px)',
-            backgroundColor: 'white'
+            top: '60px',
+            right: '0px',
+            bottom: '0px',
+            margin: '5px',
+            minWidth: 'calc(100vw - 20px)',
+            maxWidth: 'calc(100vw - 20px)'
           }
         }
       }

diff --git a/packages/gatsby-theme-mdx/src/components/theme.js b/packages/gatsby-theme-mdx/src/components/theme.js
@@ -32,7 +32,8 @@ export default {
     monospace: '"Roboto Mono", Menlo, monospace'
   },
   mediaQueries: {
-    big: '@media screen and (min-width: 40em)'
+    big: '@media screen and (min-width: 48em)',
+    maxBig: '@media screen and (max-width: 47.9em)'
   },
   styles: {
     h1: {