fix: Add spacing in login page; add story

bryphe-coder · bryphe-coder · commit c7dbd9f6302e · 2022-02-10T00:14:55.000Z
diff --git a/site/components/SignIn/SignInForm.stories.tsx b/site/components/SignIn/SignInForm.stories.tsx
@@ -0,0 +1,16 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { SignInForm, SignInProps } from "./SignInForm"
+
+export default {
+  title: "SignIn/SignInForm",
+  component: SignInForm,
+  argTypes: {
+    loginHandler: { action: "Login" },
+  },
+}
+
+const Template: Story<SignInProps> = (args) => <SignInForm {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/components/SignIn/SignInForm.tsx b/site/components/SignIn/SignInForm.tsx
@@ -31,33 +31,8 @@ const useStyles = makeStyles((theme) => ({
     borderTop: `1px solid ${theme.palette.action.disabled}`,
     paddingTop: theme.spacing(3),
   },
-  loginTypeToggleWrapper: {
+  loginTextField: {
     marginTop: theme.spacing(2),
-    display: "flex",
-    justifyContent: "center",
-  },
-  loginTypeToggleBtn: {
-    color: theme.palette.text.primary,
-    // We want opacity so that this isn't super highlighted for the user.
-    // In most cases, they shouldn't want to switch login types.
-    opacity: 0.5,
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 1,
-      textDecoration: "underline",
-    },
-  },
-  loginTypeToggleBtnFocusVisible: {
-    opacity: 1,
-    textDecoration: "underline",
-  },
-  loginTypeBtn: {
-    backgroundColor: "#2A2B45",
-    textTransform: "none",
-
-    "&:not(:first-child)": {
-      marginTop: theme.spacing(2),
-    },
   },
   submitBtn: {
     marginTop: theme.spacing(2),
@@ -101,27 +76,28 @@ export const SignInForm: React.FC<SignInProps> = ({
           <FormTextField
             autoComplete="email"
             autoFocus
+            className={styles.loginTextField}
             eventTransform={(email: string) => email.trim()}
             form={form}
             formFieldName="email"
             fullWidth
             inputProps={{
               id: "signin-form-inpt-email",
+              className: styles.innerText,
             }}
-            margin="none"
             placeholder="Email"
             variant="outlined"
           />
           <FormTextField
             autoComplete="current-password"
+            className={styles.loginTextField}
             form={form}
             formFieldName="password"
             fullWidth
             inputProps={{
               id: "signin-form-inpt-password",
             }}
             isPassword
-            margin="none"
             placeholder="Password"
             variant="outlined"
           />
