Separate styles from auth components (#24)

amalv · Feb 11, 2019 · 73b1943 · 73b1943
1 parent d3a82f8
commit 73b1943
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 81 deletions.
diff --git a/src/components/SignIn.js → src/components/SignIn/SignIn.js b/src/components/SignIn.js → src/components/SignIn/SignIn.js
@@ -1,58 +1,24 @@
 // @flow
 import React from "react";
-import Avatar from "@material-ui/core/Avatar";
-import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import FormControl from "@material-ui/core/FormControl";
 import Input from "@material-ui/core/Input";
 import InputLabel from "@material-ui/core/InputLabel";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
-import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 import { withTheme } from "@material-ui/core/styles";
-import styled from "styled-components";
 import type { Theme } from "@material-ui/core/styles/createMuiTheme";
+import {
+  Base,
+  PaperStyled,
+  AvatarStyled,
+  Form,
+  SubmitButtonStyled,
+} from "./SignIn.styles";
 
 type Props = { theme: Theme };
 
-const Base = styled.main`
-  width: auto;
-  display: block;
-  margin-left: ${theme => theme.spacing.unit * 3}px;
-  margin-right: ${theme => theme.spacing.unit * 3}px;
-  ${theme => theme.breakpoints.up("md")} {
-    width: 400px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-`;
-
-const PaperStyled = styled(Paper)`
-    margin-top: ${theme => theme.spacing.unit * 8}px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: ${theme => theme.spacing.unit * 2}px ${theme =>
-  theme.spacing.unit * 3}px ${theme => theme.spacing.unit * 3}px;
-  }}
-`;
-
-const AvatarStyled = styled(Avatar)`
-  margin: ${theme => theme.spacing.unit}px;
-  background-color: ${theme => theme.palette.secondary.main};
-`;
-
-const Form = styled.form`
-  width: 100%;
-  margin-top: ${theme => theme.spacing.unit}px;
-`;
-
-const SubmitButtonStyled = styled(Button)`
-  margin-top: ${theme => theme.spacing.unit * 3}px;
-`;
-
 const SignIn = (props: Props) => {
-  // eslint-disable-next-line react/prop-types
   const { theme } = props;
   const { zIndex, ...rest } = theme;
   return (

diff --git a/src/components/SignIn/SignIn.styles.js b/src/components/SignIn/SignIn.styles.js
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
+
+const Base = styled.main`
+  width: auto;
+  display: block;
+  margin-left: ${theme => theme.spacing.unit * 3}px;
+  margin-right: ${theme => theme.spacing.unit * 3}px;
+  ${theme => theme.breakpoints.up("md")} {
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const PaperStyled = styled(Paper)`
+    margin-top: ${theme => theme.spacing.unit * 8}px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: ${theme => theme.spacing.unit * 2}px ${theme =>
+  theme.spacing.unit * 3}px ${theme => theme.spacing.unit * 3}px;
+  }}
+`;
+
+const AvatarStyled = styled(Avatar)`
+  margin: ${theme => theme.spacing.unit}px;
+  background-color: ${theme => theme.palette.secondary.main};
+`;
+
+const Form = styled.form`
+  width: 100%;
+  margin-top: ${theme => theme.spacing.unit}px;
+`;
+
+const SubmitButtonStyled = styled(Button)`
+  margin-top: ${theme => theme.spacing.unit * 3}px;
+`;
+
+export { Base, PaperStyled, AvatarStyled, Form, SubmitButtonStyled };
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
@@ -0,0 +1,3 @@
+import SignIn from "./SignIn";
+
+export default SignIn;
diff --git a/src/components/SignUp.js → src/components/SignUp/SignUp.js b/src/components/SignUp.js → src/components/SignUp/SignUp.js
@@ -1,56 +1,23 @@
 // @flow
 import React from "react";
-import Avatar from "@material-ui/core/Avatar";
-import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import FormControl from "@material-ui/core/FormControl";
 import Input from "@material-ui/core/Input";
 import InputLabel from "@material-ui/core/InputLabel";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
-import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 import { withTheme } from "@material-ui/core/styles";
-import styled from "styled-components";
 import type { Theme } from "@material-ui/core/styles/createMuiTheme";
+import {
+  Base,
+  PaperStyled,
+  AvatarStyled,
+  Form,
+  SubmitButtonStyled,
+} from "./SignUp.styles";
 
 type Props = { theme: Theme };
 
-const Base = styled.main`
-  width: auto;
-  display: block;
-  margin-left: ${theme => theme.spacing.unit * 3}px;
-  margin-right: ${theme => theme.spacing.unit * 3}px;
-  ${theme => theme.breakpoints.up("md")} {
-    width: 400px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-`;
-
-const PaperStyled = styled(Paper)`
-    margin-top: ${theme => theme.spacing.unit * 8}px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: ${theme => theme.spacing.unit * 2}px ${theme =>
-  theme.spacing.unit * 3}px ${theme => theme.spacing.unit * 3}px;
-  }}
-`;
-
-const AvatarStyled = styled(Avatar)`
-  margin: ${theme => theme.spacing.unit}px;
-  background-color: ${theme => theme.palette.secondary.main};
-`;
-
-const Form = styled.form`
-  width: 100%;
-  margin-top: ${theme => theme.spacing.unit}px;
-`;
-
-const SubmitButtonStyled = styled(Button)`
-  margin-top: ${theme => theme.spacing.unit * 3}px;
-`;
-
 const SignUp = (props: Props) => {
   const { theme } = props;
   const { zIndex, ...rest } = theme;

diff --git a/src/components/SignUp/SignUp.styles.js b/src/components/SignUp/SignUp.styles.js
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
+
+const Base = styled.main`
+  width: auto;
+  display: block;
+  margin-left: ${theme => theme.spacing.unit * 3}px;
+  margin-right: ${theme => theme.spacing.unit * 3}px;
+  ${theme => theme.breakpoints.up("md")} {
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const PaperStyled = styled(Paper)`
+    margin-top: ${theme => theme.spacing.unit * 8}px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: ${theme => theme.spacing.unit * 2}px ${theme =>
+  theme.spacing.unit * 3}px ${theme => theme.spacing.unit * 3}px;
+  }}
+`;
+
+const AvatarStyled = styled(Avatar)`
+  margin: ${theme => theme.spacing.unit}px;
+  background-color: ${theme => theme.palette.secondary.main};
+`;
+
+const Form = styled.form`
+  width: 100%;
+  margin-top: ${theme => theme.spacing.unit}px;
+`;
+
+const SubmitButtonStyled = styled(Button)`
+  margin-top: ${theme => theme.spacing.unit * 3}px;
+`;
+
+export { Base, PaperStyled, AvatarStyled, Form, SubmitButtonStyled };
diff --git a/src/components/SignUp/index.js b/src/components/SignUp/index.js
@@ -0,0 +1,3 @@
+import SignUp from "./SignUp";
+
+export default SignUp;