Merge branch 'main' into fix/fix-wrong-password-bricking

palladians · Dec 23, 2023 · c068e12 · c068e12
2 parents 893f6d9 + 8fe0550
commit c068e12
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/apps/extension/public/intro.png b/apps/extension/public/intro.png
diff --git a/packages/features/src/common/assets/intro.png b/packages/features/src/common/assets/intro.png
diff --git a/packages/features/src/components/wizard-layout.tsx b/packages/features/src/components/wizard-layout.tsx
@@ -7,17 +7,26 @@ import { Toggle } from '@/components/ui/toggle'
 interface WizardLayoutProps {
   children: React.ReactNode
   footer: React.ReactNode
+  textLogo?: boolean
 }
 
-export const WizardLayout = ({ children, footer }: WizardLayoutProps) => {
+export const WizardLayout = ({
+  children,
+  footer,
+  textLogo = false
+}: WizardLayoutProps) => {
   const { setTheme, theme } = useTheme()
   const toggleTheme = () => {
     theme === 'dark' ? setTheme('light') : setTheme('dark')
   }
   return (
     <div className="flex flex-1 dark:bg-slate-950 bg-white flex-col">
-      <div className="flex justify-between p-4">
-        <Logo />
+      <div className="flex justify-between items-center p-4">
+        {textLogo ? (
+          <span className="text-lg font-semibold ml-2">Pallad</span>
+        ) : (
+          <Logo />
+        )}
         <Toggle size="sm" onClick={toggleTheme}>
           {theme === 'dark' ? <SunIcon size={16} /> : <MoonIcon size={16} />}
         </Toggle>

diff --git a/packages/features/src/onboarding/views/start.tsx b/packages/features/src/onboarding/views/start.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useAppStore } from '@/common/store/app'
+import { ButtonArrow } from '@/components/button-arrow'
 import { Button } from '@/components/ui/button'
 import { WizardLayout } from '@/components/wizard-layout'
 
@@ -39,36 +40,33 @@ export const StartView = () => {
   if (!appInitialized) return null
   return (
     <WizardLayout
+      textLogo
       footer={
-        <>
+        <div className="flex flex-1 flex-col gap-2 px-4">
           <Button
-            className="flex-1"
+            className="flex-1 gap-2 group"
             onClick={() => navigate('/onboarding/restore')}
             data-testid="onboarding__restoreWalletButton"
           >
-            Restore Wallet
+            <span>Restore an existing wallet</span>
+            <ButtonArrow />
           </Button>
           <Button
             variant="secondary"
-            className="flex-1"
+            className="flex-1 gap-2 group"
             onClick={() => navigate('/onboarding/create')}
             data-testid="onboarding__createWalletButton"
           >
-            Create Wallet
+            <span>Create a new wallet</span>
+            <ButtonArrow />
           </Button>
-        </>
+        </div>
       }
     >
-      <div className="flex flex-col items-center justify-center gap-8 p-4 text-center">
-        <div className="w-full">
-          <h1 className="text-8xl text-sky-500 font-semibold break-words">
-            Pallad
-          </h1>
-          <h2 className="text-2xl break-words">Enter The Minaverse</h2>
-        </div>
-        <p className="text-sm leading-2">
-          Enhance your Mina adventure. Transparent and intuitively designed for
-          your Web3 journey.
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 p-4 text-center">
+        <img src="/intro.png" className="w-[220px]" />
+        <p className="leading-7 text-muted-foreground">
+          Your gateway to Minaverse.
         </p>
       </div>
     </WizardLayout>