refactor: Remove login banner (#5239)

site/src/components/SignInForm/SignInForm.tsx

@@ -57,15 +57,9 @@ const validationSchema = Yup.object({
 })
 
 const useStyles = makeStyles((theme) => ({
-  wrapper: {
-    maxWidth: 385,
+  root: {
     width: "100%",
-
-    [theme.breakpoints.down("sm")]: {
-      maxWidth: "none",
-    },
   },
-
   title: {
     fontSize: theme.spacing(4),
     fontWeight: 400,
@@ -77,7 +71,6 @@ const useStyles = makeStyles((theme) => ({
       fontWeight: 600,
     },
   },
-
   buttonIcon: {
     width: 14,
     height: 14,
@@ -145,7 +138,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
   const loginPageTranslation = useTranslation("loginPage")
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.root}>
       <h1 className={styles.title}>
         {loginPageTranslation.t("signInTo")}{" "}
         <strong>{commonTranslation.t("coder")}</strong>

site/src/i18n/en/loginPage.json

@@ -1,4 +1,3 @@
 {
-  "signInTo": "Sign in to",
-  "tipCaption": "Coder Tip"
+  "signInTo": "Sign in to"
 }

site/src/pages/LoginPage/LoginPageView.tsx

@@ -1,15 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { Logo } from "components/Icons/Logo"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
 import { FC } from "react"
 import { useLocation } from "react-router-dom"
 import { AuthContext } from "xServices/auth/authXService"
 import { LoginErrors, SignInForm } from "components/SignInForm/SignInForm"
 import { retrieveRedirect } from "util/redirect"
-import { Pill } from "components/Pill/Pill"
-import { useTranslation } from "react-i18next"
-import IdeaIcon from "@material-ui/icons/EmojiObjects"
-import { colors } from "theme/colors"
+import { CoderIcon } from "components/Icons/CoderIcon"
 
 interface LocationState {
   isRedirect: boolean
@@ -35,163 +31,59 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
   const { authError, getUserError, checkPermissionsError, getMethodsError } =
     context
   const styles = useStyles()
-  const { t } = useTranslation("loginPage")
 
   return isLoading ? (
     <FullScreenLoader />
   ) : (
-    <div className={styles.container}>
-      <div className={styles.left}>
-        <Logo fill="white" opacity={1} width={110} />
-
-        <div className={styles.formSection}>
-          <SignInForm
-            authMethods={context.methods}
-            redirectTo={redirectTo}
-            isLoading={isLoading}
-            loginErrors={{
-              [LoginErrors.AUTH_ERROR]: authError,
-              [LoginErrors.GET_USER_ERROR]: isRedirected ? getUserError : null,
-              [LoginErrors.CHECK_PERMISSIONS_ERROR]: checkPermissionsError,
-              [LoginErrors.GET_METHODS_ERROR]: getMethodsError,
-            }}
-            onSubmit={onSignIn}
-          />
-        </div>
-
+    <div className={styles.root}>
+      <div className={styles.container}>
+        <CoderIcon fill="white" opacity={1} className={styles.icon} />
+        <SignInForm
+          authMethods={context.methods}
+          redirectTo={redirectTo}
+          isLoading={isLoading}
+          loginErrors={{
+            [LoginErrors.AUTH_ERROR]: authError,
+            [LoginErrors.GET_USER_ERROR]: isRedirected ? getUserError : null,
+            [LoginErrors.CHECK_PERMISSIONS_ERROR]: checkPermissionsError,
+            [LoginErrors.GET_METHODS_ERROR]: getMethodsError,
+          }}
+          onSubmit={onSignIn}
+        />
         <footer className={styles.footer}>
           Copyright © 2022 Coder Technologies, Inc.
         </footer>
       </div>
-
-      <div className={styles.right}>
-        <div className={styles.tipWrapper}>
-          <Pill
-            icon={<IdeaIcon className={styles.pillIcon} />}
-            text={t("tipCaption")}
-            className={styles.pill}
-            type="secondary"
-          />
-          <div className={styles.tipContent}>
-            <h2 className={styles.tipTitle}>Scheduling</h2>
-            <p>
-              Coder automates your cloud cost control by ensuring developer
-              resources are only online while used.
-            </p>
-            <img
-              src="/featured/scheduling.webp"
-              alt=""
-              className={styles.tipImage}
-            />
-          </div>
-        </div>
-      </div>
     </div>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  container: {
-    padding: theme.spacing(5),
-    margin: "auto",
-    display: "flex",
-    height: "100vh",
-
-    [theme.breakpoints.down("md")]: {
-      height: "auto",
-      minHeight: "100vh",
-    },
-
-    [theme.breakpoints.down("sm")]: {
-      padding: theme.spacing(4),
-    },
-  },
-
-  left: {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(4),
-  },
-
-  right: {
-    flex: 1,
-
-    [theme.breakpoints.down("md")]: {
-      display: "none",
-    },
-  },
-
-  formSection: {
-    flex: 1,
+  root: {
+    padding: theme.spacing(3),
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    minHeight: "100vh",
+    textAlign: "center",
+  },
+
+  container: {
+    width: "100%",
+    maxWidth: 385,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+
+  icon: {
+    fontSize: theme.spacing(8),
   },
 
   footer: {
     fontSize: 12,
     color: theme.palette.text.secondary,
-  },
-
-  tipWrapper: {
-    width: "100%",
-    height: "100%",
-    borderRadius: theme.shape.borderRadius,
-    background: theme.palette.background.paper,
-    padding: theme.spacing(5),
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-  },
-
-  pill: {
-    position: "absolute",
-    top: theme.spacing(3),
-    right: theme.spacing(3),
-    fontWeight: 600,
-    fontSize: 10,
-    letterSpacing: "0.1em",
-    textTransform: "uppercase",
-    background: theme.palette.divider,
-    border: 0,
-    padding: theme.spacing(0, 1.5),
-    height: theme.spacing(3.5),
-  },
-
-  pillIcon: {
-    color: colors.yellow[5],
-  },
-
-  tipContent: {
-    maxWidth: 570,
-    textAlign: "center",
-    fontSize: 16,
-    color: theme.palette.text.secondary,
-    lineHeight: "160%",
-
-    "& p": {
-      maxWidth: 440,
-      margin: "auto",
-    },
-
-    "& strong": {
-      color: theme.palette.text.primary,
-    },
-  },
-
-  tipTitle: {
-    fontWeight: 400,
-    fontSize: 24,
-    margin: 0,
-    lineHeight: 1,
-    marginBottom: theme.spacing(2),
-    color: theme.palette.text.primary,
-  },
-
-  tipImage: {
-    maxWidth: 570,
-    marginTop: theme.spacing(4),
+    marginTop: theme.spacing(3),
   },
 }))