refactor the button component

Author: medyo

src/assets/variables.css

@@ -31,7 +31,9 @@ html.dark {
 
   /** Buttons **/
   --button-background-color: #1c2026;
+  --button-hover-background-color: #181c21;
   --button-text-color: #fff;
+  --button-hover-text-color: #d0d0d0;
 
   /**Card **/
   --card-background-color: #0d1116;
@@ -117,6 +119,8 @@ html.light {
 
   --button-background-color: #d2deeb;
   --button-text-color: #3c5065;
+  --button-hover-background-color: #b9cadc;
+  --button-hover-text-color: #3c5065;
 
   /**Card **/
   --card-background-color: #ffffff;

src/components/Elements/Button/Button.css

@@ -0,0 +1,31 @@
+.button {
+  background-color: var(--button-background-color);
+  color: var(--button-text-color);
+  font-size: 18px;
+  text-align: center;
+  border: 0;
+  border-radius: 50px;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  &:hover {
+    background-color: var(--button-hover-background-color);
+    color: var(--button-hover-text-color);
+  }
+}
+
+button.small {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+button.medium {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+button.large {
+  padding: 1rem 2rem;
+  font-size: 1.25rem;
+}

src/components/Elements/Button/Button.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx'
+import React from 'react'
+import './Button.css'
+
+const sizes = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+}
+type ButtonProps = {
+  children: React.ReactNode
+  onClick: () => void
+  className?: string
+  size?: keyof typeof sizes
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+}
+export const Button = ({
+  size = 'medium',
+  onClick,
+  className,
+  startIcon,
+  endIcon,
+  children,
+}: ButtonProps) => {
+  return (
+    <button className={clsx('button', sizes[size], className)} onClick={onClick}>
+      {startIcon}
+      {children}
+      {endIcon}
+    </button>
+  )
+}

src/components/Elements/Button/index.ts

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

src/components/Elements/index.ts

@@ -1,4 +1,5 @@
 export * from './BottomNavigation'
+export * from './Button'
 export * from './Card'
 export * from './CardLink'
 export * from './CardWithActions'

src/features/auth/components/AuthModal.tsx

@@ -4,6 +4,7 @@ import { FcGoogle } from 'react-icons/fc'
 import { IoMdClose } from 'react-icons/io'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
+import { Button } from 'src/components/Elements'
 import { useAuth } from 'src/features/auth'
 import { trackUserConnect } from 'src/lib/analytics'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
@@ -59,32 +60,35 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         },
       }}
       overlayClassName="Overlay">
-      <div className="titleAndCloseBtn">
-        <h3>
-          <FaHeart /> Join the community
-        </h3>
-        <button className="extraBtn" onClick={closeAuthModal}>
-          <IoMdClose />
-        </button>
-      </div>
-      <div className="buttons">
-        <button
-          className="extraTextWithIconBtn"
-          onClick={() => signIn(githubAuthProvider, 'Github')}>
-          <FaGithub />
-          Connect with Github
-        </button>
-        <button
-          className="extraTextWithIconBtn"
-          onClick={() => signIn(googleAuthProvider, 'Google')}>
-          <FcGoogle />
-          Connect with Google
-        </button>
+      <div className="authModal">
+        <div className="titleAndCloseBtn">
+          <h3>
+            <FaHeart /> Join the community
+          </h3>
+          <button className="extraBtn" onClick={closeAuthModal}>
+            <IoMdClose />
+          </button>
+        </div>
+        <div className="buttons">
+          <Button
+            startIcon={<FaGithub />}
+            onClick={() => signIn(githubAuthProvider, 'Github')}
+            size="large">
+            Connect with Github
+          </Button>
+
+          <Button
+            startIcon={<FcGoogle />}
+            onClick={() => signIn(googleAuthProvider, 'Google')}
+            size="large">
+            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>
-      <p className="description">
-        We use your account to save your settings and track streaks for rowards 🎁 ... or risk
-        losing them like unusaved code!
-      </p>
     </ReactModal>
   )
 }