fix: Login - Add padding between username / password (#239)

bryphe-coder · web-flow · commit 277318bdb43f · 2022-02-09T20:18:29.000-08:00
This is just a minor fit & finish fix for login, to more closely emulate the styling of v1. __Before:__ <img width="437" alt="Screen Shot 2022-02-09 at 4 16 05 PM" src="https://user-images.githubusercontent.com/88213859/153312547-04d0a15f-6f69-4365-8935-f1e8363b4cb6.png"> __After:__ <img width="446" alt="Screen Shot 2022-02-09 at 4 13 34 PM" src="https://user-images.githubusercontent.com/88213859/153312516-a4b4b67b-ed9c-43d2-b32d-3f3c746262d1.png"> While I was looking at this - removed a few currently-unnecessary styles and added a story for this component.
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,27 @@ 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",
             }}
-            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"
           />
