diff --git a/styles/MainTheme.tsx b/styles/MainTheme.tsx
index d2f4c1a..7d4879b 100644
--- a/styles/MainTheme.tsx
+++ b/styles/MainTheme.tsx
@@ -1,5 +1,5 @@
import "./boot";
-import { ThemeProvider } from "@material-ui/styles";
+import { ThemeProvider, makeStyles } from "@material-ui/styles";
import {
CssBaseline,
createMuiTheme,
@@ -30,39 +30,53 @@ export const theme = createMuiTheme({
});
export const components = {
- h1: (props: {}) => ,
- h2: (props: {}) => ,
- h3: (props: {}) => ,
- h4: (props: {}) => ,
- h5: (props: {}) => ,
+ h1: (props: {}) => ,
+ h2: (props: {}) => ,
+ h3: (props: {}) => ,
+ h4: (props: {}) => ,
+ h5: (props: {}) => ,
h6: (props: {}) => ,
a: ({ href, ...props }: { href: string }) => (
-
+
)
};
-const MainTheme: React.FC<{}> = ({ children }) => (
-
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
-);
+const useStyles = makeStyles({
+ container: {
+ padding: [8, 3, 1].map(n => `${n * theme.spacing.unit}px`).join(" "),
+ [theme.breakpoints.up("sm")]: {
+ padding: [9, 4, 1].map(n => `${n * theme.spacing.unit}px`).join(" ")
+ }
+ }
+});
+
+const MainTheme: React.FC<{}> = ({ children }) => {
+ const classes = useStyles();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+};
export default MainTheme;
diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx
index f8c0f1f..61a5267 100644
--- a/styles/TopAppBar.tsx
+++ b/styles/TopAppBar.tsx
@@ -14,10 +14,10 @@ const TopAppBar: React.FC = () => {
const classes = useStyles();
return (