diff --git a/package.json b/package.json index 824cb00..0c6ef2d 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dependencies": { "@material-ui/core": "^3.9.3", "@material-ui/icons": "^3.0.2", + "@material-ui/styles": "^3.0.0-alpha.10", "@zeit/next-typescript": "^1.1.1", "next": "^8.1.0", "react": "^16.8.6", diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..9bca957 --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import App, { Container } from "next/app"; +import MainTheme from "../styles/MainTheme"; +import TopAppBar from "../styles/TopAppBar"; + +export default class extends App { + render() { + const { Component, pageProps } = this.props; + return ( + + + + + + + ); + } +} diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..eb5649b --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import Document, { Head, Main, NextScript } from "next/document"; + +export default class extends Document { + render() { + return ( + + + + + + +
+ + + + ); + } +} diff --git a/styles/MainTheme.tsx b/styles/MainTheme.tsx new file mode 100644 index 0000000..a6d0d3c --- /dev/null +++ b/styles/MainTheme.tsx @@ -0,0 +1,40 @@ +import "./boot"; +import { ThemeProvider } from "@material-ui/styles"; +import { CssBaseline, createMuiTheme } from "@material-ui/core"; +import { orange, teal } from "@material-ui/core/colors"; +import React from "react"; +import Head from "next/head"; + +export const theme = createMuiTheme({ + palette: { + primary: { + main: orange[900] + }, + secondary: { + main: teal[400] + } + }, + typography: { + useNextVariants: true, + fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif' + } +}); + +const MainTheme: React.FC<{}> = ({ children }) => ( + + + + + + + + {children} + +); +export default MainTheme; diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx new file mode 100644 index 0000000..f8c0f1f --- /dev/null +++ b/styles/TopAppBar.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import Link from "next/link"; +import { makeStyles } from "@material-ui/styles"; +import { AppBar, Toolbar, IconButton } from "@material-ui/core"; +import { Home } from "@material-ui/icons"; + +const useStyles = makeStyles({ + root: { + flexGrow: 1 + } +}); + +const TopAppBar: React.FC = () => { + const classes = useStyles(); + return ( +
+ + + + + + + + + +
+ ); +}; +export default TopAppBar; diff --git a/styles/boot.ts b/styles/boot.ts new file mode 100644 index 0000000..c051785 --- /dev/null +++ b/styles/boot.ts @@ -0,0 +1,2 @@ +import { install } from "@material-ui/styles"; +install(); diff --git a/yarn.lock b/yarn.lock index dc4abf2..3d933bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -699,7 +699,7 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1": version "7.4.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc" integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA== @@ -739,6 +739,11 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" +"@emotion/hash@^0.7.1": + version "0.7.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53" + integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA== + "@material-ui/core@^3.9.3": version "3.9.3" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.3.tgz#d378c1f4beb18df9a534ca7258c2c33fb8e0e51f" @@ -780,6 +785,28 @@ "@babel/runtime" "^7.2.0" recompose "0.28.0 - 0.30.0" +"@material-ui/styles@^3.0.0-alpha.10": + version "3.0.0-alpha.10" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-3.0.0-alpha.10.tgz#4c28a6d6dacb1fb71aff4642f92b63232a3f298d" + integrity sha512-qJ5eiupBPRCNlMCDZ2G5h8auBtBtm8uT/oCUAJ/FqhO5oC7POLmmvDN1Cq1cgAmqQnaL6uN5mAM1Gc90GpKr9A== + dependencies: + "@babel/runtime" "^7.2.0" + "@emotion/hash" "^0.7.1" + "@material-ui/utils" "^3.0.0-alpha.2" + classnames "^2.2.5" + deepmerge "^3.0.0" + hoist-non-react-statics "^3.2.1" + jss "^10.0.0-alpha.7" + jss-plugin-camel-case "^10.0.0-alpha.7" + jss-plugin-default-unit "^10.0.0-alpha.7" + jss-plugin-global "^10.0.0-alpha.7" + jss-plugin-nested "^10.0.0-alpha.7" + jss-plugin-props-sort "^10.0.0-alpha.7" + jss-plugin-rule-value-function "^10.0.0-alpha.7" + jss-plugin-vendor-prefixer "^10.0.0-alpha.7" + prop-types "^15.6.0" + warning "^4.0.1" + "@material-ui/system@^3.0.0-alpha.0": version "3.0.0-alpha.2" resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46" @@ -1916,6 +1943,14 @@ css-vendor@^0.3.8: dependencies: is-in-browser "^1.0.2" +css-vendor@^1.1.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-1.2.1.tgz#21b914913d3a68bab2708090dab2e61db7c9eaec" + integrity sha512-ZpwiWxn5jWNJ7NF3DAb/Dc/+c2lRu+fnovej/adCv3VJsULJSjdXEpUwRcq4fnpAAh98Hi7b0GDnlyoNFcdv1g== + dependencies: + "@babel/runtime" "^7.3.1" + is-in-browser "^1.0.2" + css@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" @@ -3209,6 +3244,58 @@ jss-nested@^6.0.1: dependencies: warning "^3.0.0" +jss-plugin-camel-case@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz#7dcbd9acb6682f3102cb2d3356b4fd9642d93f17" + integrity sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA== + dependencies: + "@babel/runtime" "^7.0.0" + hyphenate-style-name "^1.0.2" + +jss-plugin-default-unit@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz#f6dd0a03d545e7bf243c062bae3a832ac8c5ff6d" + integrity sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g== + dependencies: + "@babel/runtime" "^7.0.0" + +jss-plugin-global@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz#38ca390802b62da490afbaafc581552a81977729" + integrity sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ== + dependencies: + "@babel/runtime" "^7.0.0" + +jss-plugin-nested@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz#03a89c8f7c1d570a3d5f16dae3e61f7f2edb0316" + integrity sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw== + dependencies: + "@babel/runtime" "^7.0.0" + tiny-warning "^1.0.2" + +jss-plugin-props-sort@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz#46f1809fcae0acc048d0047aa54a4b9b6973597d" + integrity sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA== + dependencies: + "@babel/runtime" "^7.0.0" + +jss-plugin-rule-value-function@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz#63df1078ac361dda67996e25291d90f7226ae59a" + integrity sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA== + dependencies: + "@babel/runtime" "^7.0.0" + +jss-plugin-vendor-prefixer@^10.0.0-alpha.7: + version "10.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz#caa34eb0bc39f0c98f425e174fc220d1f1a8760a" + integrity sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA== + dependencies: + "@babel/runtime" "^7.0.0" + css-vendor "^1.1.0" + jss-props-sort@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323" @@ -3221,6 +3308,15 @@ jss-vendor-prefixer@^7.0.0: dependencies: css-vendor "^0.3.8" +jss@^10.0.0-alpha.7: + version "10.0.0-alpha.16" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.16.tgz#0555e8b667e08dbd2cc94f6125be5a8b8b022833" + integrity sha512-HmKNNnr82TR5jkWjBcbrx/uim2ief588pWp7zsf4GQpL125zRkEaWYL1SXv5bR6bBvAoTtvJsTAOxDIlLxUNZg== + dependencies: + "@babel/runtime" "^7.3.1" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + jss@^9.8.7: version "9.8.7" resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05" @@ -4573,9 +4669,9 @@ run-queue@^1.0.0, run-queue@^1.0.3: aproba "^1.1.1" rxjs@^6.4.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.4.0.tgz#f3bb0fe7bda7fb69deac0c16f17b50b0b8790504" - integrity sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw== + version "6.5.0" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.0.tgz#1e4bc933f14a0c5c2ce7bb71ddd4244d42f4b04b" + integrity sha512-FOTfP3LK5VN3dDtr+wjFAeKVe5nTPPTC2+NUFJ8kyuO+YbIl/aME0eQDiX2MCVgnhKyuUYaEjgZEx8iL/4AV6A== dependencies: tslib "^1.9.0" @@ -5115,6 +5211,11 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-warning@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28" + integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q== + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"