feat: Add auth modal ui and show it next to onboarding.

Author: zouhir96

src/App.tsx

@@ -3,6 +3,7 @@ import { DNDLayout } from 'src/components/Layout'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
+import { AuthModal } from './features/auth'
 import { isWebOrExtensionVersion } from './utils/Environment'
 import { lazyImport } from './utils/lazyImport'
 const { OnboardingModal } = lazyImport(() => import('src/features/onboarding'), 'OnboardingModal')
@@ -19,6 +20,7 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 
 export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
+  const [showAuth, setshowAuth] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
 
@@ -62,6 +64,8 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
+      {<AuthModal showAuth={showAuth} setShowAuth={setshowAuth} />}
+
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />

src/assets/App.css

@@ -162,6 +162,24 @@ a {
   color: var(--dark-mode-text-color);
 }
 
+.extraTextWithIconBtn {
+  background-color: var(--button-background-color);
+  color: var(--button-text-color);
+  height: 40px;
+  width: auto;
+  padding: 0 16px;
+  min-width: 40px;
+  font-weight: bold;
+  font-size: 18px;
+  text-align: center;
+  border: 0;
+  border-radius: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
 .badgeCount {
   width: 20px;
   height: 20px;

src/features/auth/components/AuthModal.tsx

@@ -0,0 +1,48 @@
+import { FaGithub, FaGoogle } from 'react-icons/fa'
+import ReactModal from 'react-modal'
+
+type AuthModalProps = {
+  showAuth: boolean
+  setShowAuth: (show: boolean) => void
+}
+
+export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
+  return (
+    <ReactModal
+      isOpen={showAuth}
+      ariaHideApp={false}
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={true}
+      shouldFocusAfterRender={false}
+      onRequestClose={() => setShowAuth(false)}
+      contentLabel="Auth"
+      className="Modal scrollable"
+      style={{
+        overlay: {
+          zIndex: 3,
+        },
+      }}
+      overlayClassName="Overlay">
+      <div>
+        <div>
+          <h1>Welcome to Hackertab</h1>
+          <p>
+            To enhance your experience and unlock our new rewards system, we’ve introduced a simple
+            and secure way to sign in. Connect your account with GitHub or Google to start earning
+            rewards, save your progress, and enjoy personalized features.
+          </p>
+        </div>
+        <div>
+          <button type="button" className="extraTextWithIconBtn">
+            <FaGithub />
+            Sign in with Github
+          </button>
+          <button type="button" className="extraTextWithIconBtn" style={{ marginLeft: 10 }}>
+            <FaGoogle />
+            Sign in with Google
+          </button>
+        </div>
+      </div>
+    </ReactModal>
+  )
+}

src/features/auth/index.ts

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