From 277318bdb43fbe081e855b8b39ed0d7750b47043 Mon Sep 17 00:00:00 2001
From: Bryan <bryan@coder.com>
Date: Wed, 9 Feb 2022 20:18:29 -0800
Subject: [PATCH] fix: Login - Add padding between username / password (#239)

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.
---
 site/components/SignIn/SignInForm.stories.tsx | 16 ++++++++++
 site/components/SignIn/SignInForm.tsx         | 31 ++-----------------
 2 files changed, 19 insertions(+), 28 deletions(-)
 create mode 100644 site/components/SignIn/SignInForm.stories.tsx

diff --git a/site/components/SignIn/SignInForm.stories.tsx b/site/components/SignIn/SignInForm.stories.tsx
new file mode 100644
index 0000000000..5556cf38b6
--- /dev/null
+++ 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
index b0fefdc45d..a456cf57ed 100644
--- 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,6 +76,7 @@ export const SignInForm: React.FC<SignInProps> = ({
           <FormTextField
             autoComplete="email"
             autoFocus
+            className={styles.loginTextField}
             eventTransform={(email: string) => email.trim()}
             form={form}
             formFieldName="email"
@@ -108,12 +84,12 @@ export const SignInForm: React.FC<SignInProps> = ({
             inputProps={{
               id: "signin-form-inpt-email",
             }}
-            margin="none"
             placeholder="Email"
             variant="outlined"
           />
           <FormTextField
             autoComplete="current-password"
+            className={styles.loginTextField}
             form={form}
             formFieldName="password"
             fullWidth
@@ -121,7 +97,6 @@ export const SignInForm: React.FC<SignInProps> = ({
               id: "signin-form-inpt-password",
             }}
             isPassword
-            margin="none"
             placeholder="Password"
             variant="outlined"
           />