chore: add material ui

striker-ui/components/organisms/Header.tsx

@@ -1,42 +1,30 @@
 import { FunctionComponent } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 import Image from 'next/image';
-import styled from 'styled-components';
 
-import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
+// import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
 
-const StyledHeader = styled.div`
+const useStyles = makeStyles((theme) =>
-  display: flex;
+  createStyles({
-
+    appBar: {
-  justify-content: space-between;
+      paddingTop: theme.spacing(0.5),
-  align-content: center;
+      paddingBottom: theme.spacing(0.5),
-
+      paddingLeft: theme.spacing(3),
-  padding: 0.5em 1.5em;
+      paddingRight: theme.spacing(0.5),
-
+    },
-  border-style: solid;
+  }),
-  border-color: #d02724;
+);
-
-  border-width: 0 0 1px 0;
-`;
-
-const StyledRightContainer = styled.div`
-  display: flex;
-
-  > * {
-    padding: 0 0 0 0.5em;
-  }
-`;
-
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME,
-};
 
 const Header: FunctionComponent = () => {
+  const classes = useStyles();
   return (
-    <StyledHeader>
+    <AppBar position="static" className={classes.appBar}>
       <div>
         <Image src="/pngs/logo.png" width="160" height="40" />
       </div>
-      <StyledRightContainer>
+    </AppBar>
+    /* <StyledRightContainer>
         <div>
           <Image src="/pngs/files_on.png" width="40" height="40" />
         </div>
@@ -62,7 +50,7 @@ const Header: FunctionComponent = () => {
           <Image src="/pngs/help_icon_on.png" width="40" height="40" />
         </div>
       </StyledRightContainer>
-    </StyledHeader>
+    </StyledHeader> */
   );
 };
 

striker-ui/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  pageExtensions: ['ts', 'tsx'],
+  poweredByHeader: false,
+  reactStrictMode: true,
+};

striker-ui/package-lock.json

@@ -711,6 +711,11 @@
       "integrity": "sha512-VoNqai1vR5anRF5Tuh/+SWDFk7xi7oMwHrHrbm1BprYXjB2RJsWLhUrStMssDxEl5lW/z3EUdg8RvH/IUBccSQ==",
       "dev": true
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -782,6 +787,88 @@
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.1.tgz",
       "integrity": "sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw=="
     },
+    "@material-ui/core": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
+      "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.3",
+        "@material-ui/system": "^4.11.3",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
+      "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.16",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
+          "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz",
+      "integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.16",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
+          "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@next/env": {
       "version": "10.0.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-10.0.6.tgz",
@@ -956,19 +1043,25 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
-      "dev": true
     },
     "@types/react": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.1.tgz",
       "integrity": "sha512-w8t9f53B2ei4jeOqf/gxtc2Sswnc3LBK5s0DyJcg5xd10tMHXts2N31cKjWfH9IC/JvEPa/YF1U4YeP1t4R6HQ==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/styled-components": {
       "version": "5.1.7",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.7.tgz",
@@ -1825,6 +1918,11 @@
         }
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -2117,6 +2215,15 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -2176,8 +2283,7 @@
     "csstype": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==",
+      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
-      "dev": true
     },
     "damerau-levenshtein": {
       "version": "1.0.6",
@@ -2338,6 +2444,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
@@ -3493,6 +3608,11 @@
       "integrity": "sha512-0SjcaY21a+IRdx7p7r/X33Vc09UR2m8SbP8yfkhUX2/jAmwcz+GR7i9jXkp2pP3GfX23JhMkVP6SWwXB18uXtg==",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -3528,6 +3648,14 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -3622,6 +3750,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-negative-zero": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
@@ -3781,6 +3914,85 @@
       "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
       "dev": true
     },
+    "jss": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz",
+      "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz",
+      "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz",
+      "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz",
+      "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz",
+      "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz",
+      "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz",
+      "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz",
+      "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.5.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
@@ -4954,6 +5166,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "postcss": {
       "version": "8.1.7",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.7.tgz",
@@ -5204,6 +5421,17 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -6005,6 +6233,11 @@
         "dequal": "2.0.2"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "table": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
@@ -6131,6 +6364,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -6234,6 +6472,11 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
       "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
     },
+    "typeface-muli": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/typeface-muli/-/typeface-muli-1.1.13.tgz",
+      "integrity": "sha512-FrbDCi7OKz6Mg8oK3bwAg3OTy3sGHXqb3ekSnOyHhvVCfSF/aiRTjv/KE5RJ1CfddhYDlBuTCQFNUfOOSlHObw=="
+    },
     "typescript": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz",

striker-ui/package.json

@@ -12,11 +12,13 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "next": "10.0.6",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "styled-components": "^5.2.1",
-    "swr": "^0.4.2"
+    "swr": "^0.4.2",
+    "typeface-muli": "^1.1.13"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",

striker-ui/pages/anvils/index.tsx

@@ -1,4 +1,5 @@
 import { GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 
@@ -6,10 +7,39 @@ import Button from '../../components/atoms/Button';
 import Header from '../../components/organisms/Header';
 import List from '../../components/molecules/List';
 import PageCenterContainer from '../../components/organisms/PageCenterContainer';
-import PageContainer from '../../components/organisms/PageContainer';
 
 import fetchJSON from '../../lib/fetchers/fetchJSON';
 
+import 'typeface-muli';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#343434',
+      light: '#3E78B2',
+    },
+    secondary: {
+      main: '#343434',
+    },
+  },
+  typography: {
+    fontFamily: 'Muli',
+    fontSize: 14,
+  },
+  overrides: {
+    MuiRadio: {
+      root: {
+        color: '#222222',
+      },
+      colorSecondary: {
+        '&$checked': {
+          color: '#555555',
+        },
+      },
+    },
+  },
+});
+
 export async function getServerSideProps(): Promise<
   GetServerSidePropsResult<AnvilList>
 > {
@@ -22,7 +52,7 @@ function DemoAnvilList({
   anvils,
 }: InferGetServerSidePropsType<typeof getServerSideProps>): JSX.Element {
   return (
-    <PageContainer>
+    <ThemeProvider theme={theme}>
       <Header />
       <PageCenterContainer>
         <List labelText="List of Anvils">
@@ -38,7 +68,7 @@ function DemoAnvilList({
           )}
         </List>
       </PageCenterContainer>
-    </PageContainer>
+    </ThemeProvider>
   );
 }