From 341d5fdb8bab3bbb9af32342e16f1b8884385c5e Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@decock.org>
Date: Thu, 30 May 2019 15:36:58 +0200
Subject: [PATCH] :construction: Changes to components and css

---
 config/dependencies.yaml                          |  6 +++---
 packages/components/package.json                  |  8 ++++----
 packages/components/rollup.config.js              |  3 ++-
 packages/components/src/Footer/index.js           |  8 +++++++-
 packages/css-theme/src/components/_fab.scss       |  2 ++
 packages/css-theme/src/components/_topicstoc.scss | 10 +++++-----
 packages/css-theme/src/elements/_code.scss        |  2 +-
 7 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/config/dependencies.yaml b/config/dependencies.yaml
index c507ca6c504..02bc0be7ea8 100644
--- a/config/dependencies.yaml
+++ b/config/dependencies.yaml
@@ -76,9 +76,9 @@ components:
     "@freesewing/i18n": "^{{version}}"
     "@freesewing/utils": "^{{version}}"
     "react-intl": "^2.8.0"
-    "@material-ui/core": "^3.9.3"
-    "@material-ui/icons": "^3.0.2"
-    "@material-ui/lab": "^3.0.0-alpha.30"
+    "@material-ui/core": "^4.0.1"
+    "@material-ui/icons": "^4.0.1"
+    "@material-ui/lab": "^v4.0.0-alpha.14"
     "prismjs": "1.16.0"
 core:
   _:
diff --git a/packages/components/package.json b/packages/components/package.json
index 2b099485041..29af76ff1a7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -16,7 +16,7 @@
   "main": "dist/index.js",
   "scripts": {
     "clean": "rimraf Blockquote && rimraf Draft && rimraf DraftConfigurator && rimraf Emblem && rimraf Example && rimraf Footer && rimraf Icon && rimraf Logo && rimraf Navbar && rimraf Ogol && rimraf Robot && rimraf SampleConfigurator && rimraf withGist && rimraf withLanguage && rimraf Workbench",
-    "nodebuild": "BABEL_ENV=production rollup -c -o dist/index.js -f cjs",
+    "nodebuild": "BABEL_ENV=production rollup -c",
     "build": "npm run clean && npm run nodebuild",
     "test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",
     "pubtest": "npm publish --registry http://localhost:6662",
@@ -38,9 +38,9 @@
     "@freesewing/i18n": "^2.0.0-beta.9",
     "@freesewing/utils": "^2.0.0-beta.9",
     "react-intl": "^2.8.0",
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/icons": "^3.0.2",
-    "@material-ui/lab": "^3.0.0-alpha.30",
+    "@material-ui/core": "^4.0.1",
+    "@material-ui/icons": "^4.0.1",
+    "@material-ui/lab": "^v4.0.0-alpha.14",
     "prismjs": "1.16.0"
   },
   "dependencies": {},
diff --git a/packages/components/rollup.config.js b/packages/components/rollup.config.js
index efe995d05c8..4c02d003f99 100644
--- a/packages/components/rollup.config.js
+++ b/packages/components/rollup.config.js
@@ -34,7 +34,8 @@ const createConfig = (component, module) => {
 const config = [];
 for (let component of components) {
   config.push(createConfig(component, false));
-  config.push(createConfig(component, true));
+  // Webpack doesn't handle .mjs very well
+  //config.push(createConfig(component, true));
 }
 
 export default config;
diff --git a/packages/components/src/Footer/index.js b/packages/components/src/Footer/index.js
index 6618362d41c..65bc20215cf 100644
--- a/packages/components/src/Footer/index.js
+++ b/packages/components/src/Footer/index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import Logo from "../Logo";
 import { FormattedMessage, FormattedHTMLMessage } from "react-intl";
 import IconButton from "@material-ui/core/IconButton";
@@ -37,7 +38,9 @@ const Footer = props => {
   };
   return (
     <footer>
-      <Logo size={101} />
+      <a href={props.home}>
+        <Logo size={101} />
+      </a>
       <p>
         {Object.keys(icons).map(i => (
           <IconButton href={icons[i]} className={i} title={i} key={i}>
@@ -72,4 +75,7 @@ const Footer = props => {
   );
 };
 
+Footer.defaultProps = {
+  home: "/"
+};
 export default Footer;
diff --git a/packages/css-theme/src/components/_fab.scss b/packages/css-theme/src/components/_fab.scss
index 6c7dcaef88c..7a4d44f6940 100644
--- a/packages/css-theme/src/components/_fab.scss
+++ b/packages/css-theme/src/components/_fab.scss
@@ -6,6 +6,8 @@ button.fab {
   background: $fc-text-light!important;
   z-index: 20;
   font-size: 2rem;
+  border: 1px solid $oc-gray-7;
+  border-radius: 50%;
 }
 button.fab.primary {
   right: 1rem;
diff --git a/packages/css-theme/src/components/_topicstoc.scss b/packages/css-theme/src/components/_topicstoc.scss
index 389ac17c720..7082963eb8a 100644
--- a/packages/css-theme/src/components/_topicstoc.scss
+++ b/packages/css-theme/src/components/_topicstoc.scss
@@ -2,7 +2,7 @@ ul.topics {
   margin: 0;
   padding: 0;
 }
-ul.topics > li.topic {
+ul.topics > li {
   @include title-font;
   list-style-type: none;
   //text-transform: uppercase;
@@ -19,13 +19,13 @@ ul.topics > li.topic {
     text-decoration: none!important;
   }
 }
-ul.topics > li.topic.active {
+ul.topics > li.active {
   font-weight: bold;
   a.topic {
     border-left: 4px solid $fc-link-light;
   }
 }
-ul.topics > li.topic > ul.topics.l1 {
+ul.topics > li > ul.topics.l1 {
   font-weight: normal;
   a {
     color: $fc-text-light!important;
@@ -55,7 +55,7 @@ ul.topics > li.topic > ul.topics.l1 {
 }
 
 .theme-wrapper.dark {
-  ul.topics > li.topic {
+  ul.topics > li {
     a.topic {
       color: $fc-text-dark!important;
     }
@@ -63,7 +63,7 @@ ul.topics > li.topic > ul.topics.l1 {
       background: $oc-gray-6;
     }
   }
-  ul.topics > li.topic > ul.topics.l1 {
+  ul.topics > li > ul.topics.l1 {
     a {
       color: $fc-text-dark!important;
     }
diff --git a/packages/css-theme/src/elements/_code.scss b/packages/css-theme/src/elements/_code.scss
index 6d789d3b3fe..48a993ebe51 100644
--- a/packages/css-theme/src/elements/_code.scss
+++ b/packages/css-theme/src/elements/_code.scss
@@ -57,7 +57,7 @@ pre.language-svg:before {
 pre code[class*="language-"],
 pre[class*="language-"] {
   white-space: pre-wrap;
-  border-radius: 4px;
+  border-radius: 6px;
   margin: 2rem 0;
   padding: 1.5rem 0;
 }