refactor the Modal component and improve Auth Modal

Author: medyo

src/assets/App.css

@@ -1406,29 +1406,37 @@ Modal
 .modalHeader {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
+  position: relative;
 }
 
 .modalTitle {
   margin: 0;
   padding: 0;
   color: var(--primary-text-color);
+  font-size: 1.3em;
+  display: inline-flex;
+  width: 100%;
+  column-gap: 8px;
+  align-items: center;
 }
 .modalCloseBtn {
   align-items: center;
+  position: absolute;
   background-color: transparent;
   border-radius: 50%;
+  top: 0;
+  right: 0;
   border: none;
   color: var(--primary-text-color);
   cursor: pointer;
   display: flex;
-  height: 40px;
   justify-content: center;
   margin: 0;
   padding: 0;
   text-align: center;
-  width: 40px;
 }
 .modalCloseBtn:hover {
   opacity: 0.7;

src/components/Elements/Button/Button.css

@@ -22,8 +22,8 @@ button.small {
   font-size: 0.875rem;
 }
 button.medium {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
+  padding: 0.75rem 1.2rem;
+  font-size: 1.1rem;
 }
 button.large {
   padding: 1rem 2rem;

src/components/Elements/Modal/Modal.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx'
+import { VscClose } from 'react-icons/vsc'
+import ReactModal from 'react-modal'
+type ModalProps = {
+  showModal: boolean
+  onClose: () => void
+  className?: string
+  header: {
+    title: string
+    className?: string
+    icon?: React.ReactNode
+  }
+  children: React.ReactNode
+}
+export const Modal = ({ showModal, className, header, onClose, children }: ModalProps) => {
+  return (
+    <ReactModal
+      isOpen={showModal}
+      ariaHideApp={false}
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={true}
+      shouldFocusAfterRender={false}
+      onRequestClose={onClose}
+      className={clsx('Modal', className)}
+      style={{
+        overlay: {
+          zIndex: 3,
+        },
+      }}
+      overlayClassName="Overlay">
+      <div>
+        <header className="modalHeader">
+          <h1 className={clsx('modalTitle', header.className)}>
+            {header.icon}
+            {header.title}
+          </h1>
+          <button
+            className="modalCloseBtn"
+            onClick={() => onClose()}
+            aria-label="Close share modal">
+            <VscClose size="24" />
+          </button>
+        </header>
+
+        {children}
+      </div>
+    </ReactModal>
+  )
+}

src/components/Elements/Modal/index.ts

@@ -0,0 +1 @@
+export * from './Modal'

src/components/Elements/index.ts

@@ -8,6 +8,7 @@ export * from './ClickableItem'
 export * from './ColoredLanguagesBadges'
 export * from './FloatingFilter'
 export * from './InlineTextFilter'
+export * from './Modal'
 export * from './Panel'
 export * from './SearchBar'
 export * from './SearchBarWithLogo'

src/features/auth/components/AuthModal.tsx

@@ -1,10 +1,9 @@
 import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
-import { FaGithub, FaHeart } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
-import { IoMdClose } from 'react-icons/io'
-import ReactModal from 'react-modal'
+import { IoHeartCircle } from 'react-icons/io5'
 import toast from 'react-simple-toasts'
-import { Button } from 'src/components/Elements'
+import { Button, Modal } from 'src/components/Elements'
 import { useAuth } from 'src/features/auth'
 import { trackUserConnect } from 'src/lib/analytics'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
@@ -45,51 +44,32 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
   }
 
   return (
-    <ReactModal
-      isOpen={showAuth}
-      ariaHideApp={false}
-      shouldCloseOnEsc={true}
-      shouldCloseOnOverlayClick={true}
-      shouldFocusAfterRender={false}
-      onRequestClose={closeAuthModal}
-      contentLabel="Auth"
-      className="Modal authModal"
-      style={{
-        overlay: {
-          zIndex: 3,
-        },
+    <Modal
+      showModal={showAuth}
+      onClose={closeAuthModal}
+      header={{
+        className: 'header',
+        title: 'Join Hackertab',
+        icon: <IoHeartCircle style={{ fontSize: '1.2em' }} />,
       }}
-      overlayClassName="Overlay">
-      <div className="authModal">
-        <div className="titleAndCloseBtn">
-          <h3>
-            <FaHeart /> Join the community
-          </h3>
-          <button className="extraBtn" onClick={closeAuthModal}>
-            <IoMdClose />
-          </button>
-        </div>
+      className="authModal">
+      <div>
+        <p className="description">Create an account to sync, save bookmarks, and earn rewards.</p>
         <div className="buttons">
           <Button
-            startIcon={<FaGithub style={{ fontSize: '1.6em' }} />}
+            startIcon={<FaGithub className="blockHeaderWhite" style={{ fontSize: '1.5em' }} />}
             onClick={() => signIn(githubAuthProvider)}
-            className="blockHeaderWhite"
             size="medium">
             Connect with Github
           </Button>
-
           <Button
-            startIcon={<FcGoogle style={{ fontSize: '1.6em' }} />}
+            startIcon={<FcGoogle style={{ fontSize: '1.5em' }} />}
             onClick={() => signIn(googleAuthProvider)}
             size="medium">
             Connect with Google
           </Button>
         </div>
-        <p className="description">
-          We use your account to save your settings and track streaks for rowards 🎁 ... or risk
-          losing them like unusaved code!
-        </p>
       </div>
-    </ReactModal>
+    </Modal>
   )
 }

src/features/auth/components/authModal.css

@@ -1,25 +1,23 @@
 .authModal {
-  display: flex;
-  flex-direction: column;
-  row-gap: 30px;
-  overflow-y: hidden;
+  width: 400px;
 }
 
-.authModal .titleAndCloseBtn {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+.authModal .header {
+  text-align: center;
+  justify-content: center;
 }
-
 .authModal .buttons {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
+  justify-items: center;
   flex-direction: column;
   row-gap: 16px;
-  margin: auto;
+  width: 100%;
+  margin: 0 0 20px 0;
 }
 
 .authModal .description {
-  margin: 20px 100px;
+  padding: 20px;
   text-align: center;
+  font-size: 1em;
 }