refactor: intro page design and navigation to setup-pass instead of r…

…egister page
socious-io · Oct 3, 2024 · 7bc2cd9 · 7bc2cd9
1 parent 3e2c626
commit 7bc2cd9
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 36 deletions.
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/pages/Intro/index.module.scss b/src/pages/Intro/index.module.scss
@@ -1,22 +1,20 @@
-//FIXME: bootstrap's predefined text color not work
-.card {
-    &__text {
-        color: $gray;
-        text-align: center;
-        line-height: 1.5rem;
-    }
+.logo {
+    border-radius: 12px;
+}
 
-    &__subtitle {
-        text-align: center;
-    }
+.title {
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 32px;
+    color: $black;
+    text-align: center;
+}
 
-    &__secondary_btn {
-        color: $gray !important;
-
-    }
-
-    &__secondary_btn:hover {
-        color: $gray !important;
-        background-color: $light-rgb !important;
-    }
-}
+.subtitle {
+    @include flex(center, center, column);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    color: $gray;
+    text-align: center;
+}
diff --git a/src/pages/Intro/index.tsx b/src/pages/Intro/index.tsx
@@ -9,8 +9,9 @@ function Intro() {
   const { t: translate } = useTranslation();
   const navigate = useNavigate();
   const { state } = useAppContext();
-  if (state.did) return <Navigate to="/" />;
+  const { did } = state || {};
 
+  if (did) return <Navigate to="/" />;
   return (
     <div className="h-100 d-flex align-items-center justify-content-center">
       <Card
@@ -19,23 +20,23 @@ function Intro() {
             children: translate('intro-create-button'),
             variant: 'primary',
             className: 'fw-bold w-100 py-2',
-            onClick: () => navigate('/register'),
+            onClick: () => navigate('/setup-pass'),
           },
           {
             children: translate('intro-restore-button'),
-            variant: 'inherit',
-            className: `fw-bold w-100 py-2 ${styles['card__secondary_btn']}`,
+            variant: 'light',
+            className: 'fw-bold w-100 py-2',
             onClick: () => navigate('/import'),
           },
         ]}
       >
         <div className="mb-3">
-          <img src={logo} width={48} height={48} alt="Socious" />
+          <img src={logo} width={56} height={56} alt="Socious" className={styles['logo']} />
         </div>
-        <h4 className="fw-bold">{translate('intro-welcome')}</h4>
-        <div className={styles['card__subtitle']}>
-          <div className={styles['card__text']}>{translate('intro-title')} </div>
-          <div className={styles['card__text']}>{translate('intro-subtitle')}</div>
+        <h4 className={styles['title']}>{translate('intro-welcome')}</h4>
+        <div className={styles['subtitle']}>
+          {translate('intro-title')}
+          <span>{translate('intro-subtitle')}</span>
         </div>
       </Card>
     </div>

diff --git a/src/router/index.tsx b/src/router/index.tsx
@@ -35,7 +35,7 @@ export const blueprint: RouteObject[] = [
       { path: '/setup-pass', element: <SetupPass /> },
       { path: '/create-pass', element: <CreatePass /> },
       { path: '/backup', element: <Backup /> },
-      { path: '/register', element: <Register /> },
+      // { path: '/register', element: <Register /> },
       // { path: '/confirm', element: <Confirm /> },
       { path: '/created', element: <Created /> },
       { path: '/verify', element: <Verify /> },