From 2c5915a50b20a7b4a30260a77ba25e69d8ff3c6d Mon Sep 17 00:00:00 2001
From: james hadfield <jh22@sanger.ac.uk>
Date: Tue, 14 Jan 2020 18:52:11 +1300
Subject: [PATCH] fix styled component errors. Site now builds.

---
 static-site/.babelrc                         | 5 ++++-
 static-site/src/components/nav-bar/index.jsx | 8 ++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/static-site/.babelrc b/static-site/.babelrc
index 66b69f027..de1f626ba 100644
--- a/static-site/.babelrc
+++ b/static-site/.babelrc
@@ -1,5 +1,8 @@
 {
-    "plugins": ["lodash"],
+    "plugins": [
+      "lodash",
+      "babel-plugin-styled-components"
+    ],
     "presets": [
       [
         "babel-preset-gatsby"
diff --git a/static-site/src/components/nav-bar/index.jsx b/static-site/src/components/nav-bar/index.jsx
index bedb15e7b..41f40f715 100644
--- a/static-site/src/components/nav-bar/index.jsx
+++ b/static-site/src/components/nav-bar/index.jsx
@@ -35,10 +35,14 @@ const NavLogoCharacter = styled.span`
   font-size: 20px;
   font-weight: 400;
   cursor: pointer;
-  color: ${(props) => props.theme.titleColors[props.colorIndex]};
+  color: ${(props) => {
+    // TODO -- the theme is not available as a prop for some reason
+    // return props.theme.titleColors[props.colorIndex];
+    return "black";
+  }};
 `;
 
-const NavLink = styled(Link)`
+const NavLink = styled((props) => <Link {...props} />)`
   padding-left: ${(props) => props.minified ? '6px' : '12px'};
   padding-right: ${(props) => props.minified ? '6px' : '12px'};
   padding-top: 20px;