From ce45d67e319bccdd9d4cf9efce291b76936768d5 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kyle@solidstategroup.com>
Date: Mon, 20 May 2024 10:23:17 +0100
Subject: [PATCH] style: Improve signup styles for when email authentication is
 disabled (#3978)

---
 frontend/web/components/Card.js           | 27 ----------------------
 frontend/web/components/Card.tsx          | 20 ++++++++++++++++
 frontend/web/components/pages/HomePage.js | 28 ++++++++++++++++++-----
 3 files changed, 42 insertions(+), 33 deletions(-)
 delete mode 100644 frontend/web/components/Card.js
 create mode 100644 frontend/web/components/Card.tsx

diff --git a/frontend/web/components/Card.js b/frontend/web/components/Card.js
deleted file mode 100644
index 86c20ec58876..000000000000
--- a/frontend/web/components/Card.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { PureComponent } from 'react'
-
-const Card = class extends PureComponent {
-  static displayName = 'Card'
-
-  render() {
-    return (
-      <div
-        className={`rounded-3 panel panel-default ${
-          this.props.className || ''
-        }`}
-      >
-        <div className='panel-content p-4'>{this.props.children}</div>
-      </div>
-    )
-  }
-}
-
-Card.displayName = 'Card'
-
-Card.propTypes = {
-  children: OptionalNode,
-  icon: OptionalString,
-  title: oneOfType([OptionalObject, OptionalString]),
-}
-
-module.exports = Card
diff --git a/frontend/web/components/Card.tsx b/frontend/web/components/Card.tsx
new file mode 100644
index 000000000000..af1a4b866e2b
--- /dev/null
+++ b/frontend/web/components/Card.tsx
@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+
+type CardType = {
+  children: ReactNode
+  className?: string
+  contentClassName?: string
+}
+
+const Card: FC<CardType> = ({ children, className, contentClassName }) => {
+  return (
+    <div className={`rounded-3 panel panel-default ${className || ''}`}>
+      <div className={classNames('panel-content p-4', contentClassName)}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Card
diff --git a/frontend/web/components/pages/HomePage.js b/frontend/web/components/pages/HomePage.js
index 7f9b8b1c6550..ac6c710b8894 100644
--- a/frontend/web/components/pages/HomePage.js
+++ b/frontend/web/components/pages/HomePage.js
@@ -12,7 +12,7 @@ import ErrorMessage from 'components/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import { informationCircleOutline } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
-import Checkbox from 'components/base/forms/Checkbox'
+import classNames from 'classnames'
 
 const HomePage = class extends React.Component {
   static contextTypes = {
@@ -302,7 +302,15 @@ const HomePage = class extends React.Component {
                       <div id='sign-up'>
                         {!isSignup ? (
                           <React.Fragment>
-                            <Card className='mb-3'>
+                            <Card
+                              className='mb-3'
+                              contentClassName={classNames(
+                                'd-flex flex-column gap-3',
+                                {
+                                  'bg-light200': preventEmailPassword,
+                                },
+                              )}
+                            >
                               <AccountProvider>
                                 {(
                                   { error, isLoading, isSaving },
@@ -310,7 +318,7 @@ const HomePage = class extends React.Component {
                                 ) => (
                                   <>
                                     {!!oauths.length && (
-                                      <div className='d-flex flex-column flex-xl-row gap-2 mb-4'>
+                                      <div className='d-flex flex-column flex-xl-row justify-content-center gap-2'>
                                         {oauths}
                                       </div>
                                     )}
@@ -452,11 +460,19 @@ const HomePage = class extends React.Component {
                           </React.Fragment>
                         ) : (
                           <React.Fragment>
-                            <Card className='mb-3'>
+                            <Card
+                              className='mb-3'
+                              contentClassName={classNames(
+                                'd-flex flex-column gap-3',
+                                {
+                                  'bg-light200': preventEmailPassword,
+                                },
+                              )}
+                            >
+                              {' '}
                               {!!oauths.length && (
-                                <div className='row mb-4'>{oauths}</div>
+                                <div className='row'>{oauths}</div>
                               )}
-
                               {!preventEmailPassword && (
                                 <form
                                   id='form'