style: Improve signup styles for when email authentication is disabled (

#3978)
Flagsmith · May 20, 2024 · ce45d67 · ce45d67
1 parent e613eec
commit ce45d67
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 33 deletions.
diff --git a/frontend/web/components/Card.js b/frontend/web/components/Card.js
diff --git a/frontend/web/components/Card.tsx 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
@@ -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,15 +302,23 @@ 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 },
                                   { login },
                                 ) => (
                                   <>
                                     {!!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'