status-im · felicio · Jun 24, 2025 · May 28, 2025 · May 28, 2025 · May 28, 2025
diff --git a/apps/wallet/src/entrypoints/popup/index.html b/apps/wallet/src/entrypoints/popup/index.html
@@ -17,7 +17,7 @@
     <meta name="manifest.type" content="browser_action" />
     <!-- <meta name="manifest.browser_style" content="true|false" /> -->
   </head>
-  <body>
+  <body data-customisation="blue">
     <div id="root"></div>
     <script type="module" src="../../main.tsx"></script>
   </body>

diff --git a/apps/wallet/src/routes/onboarding/_layout.tsx b/apps/wallet/src/routes/onboarding/_layout.tsx
@@ -9,5 +9,9 @@ export const Route = createFileRoute('/onboarding')({
 })
 
 function RouteComponent() {
-  return <Outlet />
+  return (
+    <div className="h-full p-5">
+      <Outlet />
+    </div>
+  )
 }
diff --git a/apps/wallet/src/routes/onboarding/import.tsx b/apps/wallet/src/routes/onboarding/import.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 
-import { Button, Input } from '@status-im/components'
+import { Button, Input, Text } from '@status-im/components'
+import { ArrowLeftIcon } from '@status-im/icons/20'
 import { createFileRoute } from '@tanstack/react-router'
 import { useForm } from 'react-hook-form'
 
@@ -27,7 +28,7 @@ function RouteComponent() {
   })
 
   return (
-    <div>
+    <div className="h-full">
       {onboardingState.type === 'import-wallet' && (
         <ImportWallet
           onNext={mnemonic =>
@@ -58,20 +59,39 @@ function ImportWallet({ onNext }: { onNext: (mnemonic: string) => void }) {
   })
 
   return (
-    <div className="flex flex-col gap-4">
-      <textarea
-        className="h-32 rounded-12 border border-neutral-80 bg-neutral-90 p-2 text-white-100 placeholder:text-neutral-40 dark:border-neutral-60 dark:bg-neutral-100"
-        placeholder="Enter your recovery phrase"
-        {...register('mnemonic', {
-          required: 'Recovery phrase is required',
-        })}
-      />
-      {errors.mnemonic && (
-        <p className="text-13 text-danger-50">{errors.mnemonic.message}</p>
-      )}
-      <Button variant="danger" onClick={onSubmit}>
-        Continue
-      </Button>
+    <div className="flex h-full flex-col justify-between">
+      <div className="flex flex-col gap-1">
+        <div className="pb-4">
+          <Button
+            href="/onboarding"
+            variant="grey"
+            icon={<ArrowLeftIcon color="$neutral-100" />}
+            aria-label="Back"
+            size="32"
+          />
+        </div>
+        <Text size={27} weight="semibold">
+          Import via recovery phrase
+        </Text>
+        <Text size={15} color="$neutral-50">
+          Type or paste your 12-, 18-, or 24-word Ethereum recovery phrase
+        </Text>
+        <textarea
+          className="mt-4 h-32 resize-none rounded-12 border border-neutral-20 bg-white-100 px-4 py-2 text-neutral-100 placeholder:text-neutral-40 invalid:border-danger-50/40 focus:border-neutral-40 dark:border-neutral-60 dark:bg-neutral-100"
+          placeholder="Recovery phrase"
+          {...register('mnemonic', {
+            required: 'Recovery phrase is required',
+          })}
+        />
+      </div>
+      <div className="flex flex-col gap-6">
+        {errors.mnemonic && (
+          <p className="text-13 text-danger-50">{errors.mnemonic.message}</p>
+        )}
+        <Button variant="primary" onClick={onSubmit}>
+          Continue
+        </Button>
+      </div>
     </div>
   )
 }
@@ -130,7 +150,7 @@ function CreatePassword({ mnemonic }: { mnemonic: string }) {
           {errors.confirmPassword.message}
         </p>
       )}
-      <Button variant="danger" onClick={onSubmit}>
+      <Button variant="primary" onClick={onSubmit}>
         Import Wallet
       </Button>
     </div>

diff --git a/apps/wallet/src/routes/onboarding/index.tsx b/apps/wallet/src/routes/onboarding/index.tsx
@@ -1,3 +1,4 @@
+import { Button, Text } from '@status-im/components'
 import { createFileRoute, Link } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/onboarding/')({
@@ -13,19 +14,37 @@ export const Route = createFileRoute('/onboarding/')({
 
 function RouteComponent() {
   return (
-    <div className="grid gap-2">
-      <Link
-        to="/onboarding/new"
-        className="flex h-10 items-center rounded-12 bg-neutral-50 px-3 text-15 font-medium transition-colors active:bg-neutral-50 hover:bg-neutral-90"
-      >
-        Create a wallet
-      </Link>
-      <Link
-        to="/onboarding/import"
-        className="flex h-10 items-center rounded-12 bg-neutral-50 px-3 text-15 font-medium transition-colors active:bg-neutral-50 hover:bg-neutral-90"
-      >
-        I already have a wallet
-      </Link>
+    <div className="flex flex-col items-center gap-6 py-3 text-center">
+      <div className="size-52 rounded-full bg-neutral-5" />
+      <div className="flex flex-col gap-4">
+        <Text size={40} weight="bold">
+          Your Wallet.
+          <br />
+          Your crypto.
+        </Text>
+        <Text size={15} color="$neutral-50">
+          Some awesome sub copy
+        </Text>
+      </div>
+      <div className="flex w-full flex-col gap-3">
+        <Button href="/onboarding/new" className="w-full">
+          New wallet
+        </Button>
+        <Button href="/onboarding/import" className="w-full" variant="grey">
+          Import wallet
+        </Button>
+      </div>
+      <Text size={13} color="$neutral-50">
+        By continuing you agree with Status
+        <br />
+        <Link to="/onboarding" color="$neutral-100">
+          Terms of use
+        </Link>{' '}
+        and{' '}
+        <Link to="/onboarding" color="$neutral-100">
+          Privacy policy
+        </Link>
+      </Text>
     </div>
   )
 }
diff --git a/apps/wallet/tailwind.config.ts b/apps/wallet/tailwind.config.ts
@@ -10,7 +10,7 @@ export default {
   // todo: extend @status-im/components too
   presets: [config],
 
-  darkMode: 'media',
+  darkMode: ['selector', '[data-theme="dark"]'],
 
   future: {
     hoverOnlyWhenSupported: true,