fix(emotion): updated the navigation components to use emotion

which removes the need to depend on glamor

for #571

package.json

@@ -87,7 +87,6 @@
   "dependencies": {
     "@emotion/core": "^10.0.21",
     "gatsby-link": "^2.2.20",
-    "glamor": "2.20.40",
     "glamorous": "5.0.0",
     "prop-types": "15.7.2",
     "react-simple-icons": "^1.0.0-beta.5",

src/atoms/navigation/site/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {shape} from 'prop-types';
-import {css} from 'glamor';
 import Link from 'gatsby-link';
 import layoutStyles from '../../../layoutStyles.json';
 
@@ -16,9 +15,9 @@ export default function SiteNavigation({linkStyles}) {
 
   return (
     <ol css={{listStyle: 'none', display: 'flex', margin: 0, paddingLeft: layoutStyles.innerGutterWidth}}>
-      <li className={css(listItemStyles)}><Link className={css(enhancedLinkStyles)} to="/">Home</Link></li>
-      <li className={css(listItemStyles)}>
-        <Link className={css(enhancedLinkStyles)} to="/archive">Past Meetings</Link>
+      <li css={listItemStyles}><Link css={enhancedLinkStyles} to="/">Home</Link></li>
+      <li css={listItemStyles}>
+        <Link css={enhancedLinkStyles} to="/archive">Past Meetings</Link>
       </li>
     </ol>
   );

src/molecules/navigation-bar/index.js

@@ -6,7 +6,7 @@ const navigationTextColor = '#fff';
 
 export default function NavigationBar() {
   return (
-    <div style={{background: '#666', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+    <div css={{background: '#666', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
       <SiteNavigation linkStyles={{color: navigationTextColor}} />
       <FooterSocialIcons color={navigationTextColor} />
     </div>