feat: add welcome page

2026-04-25 13:25:34 +08:00 · 2021-12-21 19:21:35 -06:00
parent 6aafe8964a
commit 57c16a734d
23 changed files with 336 additions and 260 deletions
--- a/public/assets/base.css
+++ b/public/assets/base.css
@@ -1,7 +1,7 @@
@font-face {
  font-family: 'Open Sauce One';
  src: url('/assets/fonts/open-sauce-one/opensauceone-bold-webfont.woff2') format('woff2'),
-  url('/assets/fonts/open-sauce-one/opensauceone-bold-webfont.woff') format('woff');
+    url('/assets/fonts/open-sauce-one/opensauceone-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
 }
@@ -9,7 +9,7 @@
@font-face {
  font-family: 'Open Sauce One';
  src: url('/assets/fonts/open-sauce-one/opensauceone-bolditalic-webfont.woff2') format('woff2'),
-  url('/assets/fonts/open-sauce-one/opensauceone-bolditalic-webfont.woff') format('woff');
+    url('/assets/fonts/open-sauce-one/opensauceone-bolditalic-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
 }
@@ -17,7 +17,7 @@
@font-face {
  font-family: 'Open Sauce One';
  src: url('/assets/fonts/open-sauce-one/opensauceone-italic-webfont.woff2') format('woff2'),
-  url('/assets/fonts/open-sauce-one/opensauceone-italic-webfont.woff') format('woff');
+    url('/assets/fonts/open-sauce-one/opensauceone-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
 }
@@ -25,7 +25,7 @@
@font-face {
  font-family: 'Open Sauce One';
  src: url('/assets/fonts/open-sauce-one/opensauceone-regular-webfont.woff2') format('woff2'),
-  url('/assets/fonts/open-sauce-one/opensauceone-regular-webfont.woff') format('woff');
+    url('/assets/fonts/open-sauce-one/opensauceone-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
 }
@@ -33,7 +33,7 @@
@font-face {
  font-family: 'Open Sauce One';
  src: url('/assets/fonts/open-sauce-one/opensauceone-semibold-webfont.woff2') format('woff2'),
-  url('/assets/fonts/open-sauce-one/opensauceone-semibold-webfont.woff') format('woff');
+    url('/assets/fonts/open-sauce-one/opensauceone-semibold-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
 }
@@ -41,7 +41,7 @@
@font-face {
  font-family: 'Open Sauce One';
  src: url('/assets/fonts/open-sauce-one/opensauceone-semibolditalic-webfont.woff2') format('woff2'),
-  url('/assets/fonts/open-sauce-one/opensauceone-semibolditalic-webfont.woff') format('woff');
+    url('/assets/fonts/open-sauce-one/opensauceone-semibolditalic-webfont.woff') format('woff');
  font-weight: 500;
  font-style: italic;
 }
@@ -51,8 +51,8 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"),
-  url("/assets/fonts/inter/Inter-Regular.woff") format("woff");
+  src: url('/assets/fonts/inter/Inter-Regular.woff2') format('woff2'),
+    url('/assets/fonts/inter/Inter-Regular.woff') format('woff');
 }

@font-face {
@@ -60,8 +60,8 @@
  font-style: italic;
  font-weight: 400;
  font-display: swap;
-  src: url("/assets/fonts/inter/Inter-Italic.woff2") format("woff2"),
-  url("/assets/fonts/inter/Inter-Italic.woff") format("woff");
+  src: url('/assets/fonts/inter/Inter-Italic.woff2') format('woff2'),
+    url('/assets/fonts/inter/Inter-Italic.woff') format('woff');
 }

@font-face {
@@ -69,8 +69,8 @@
  font-style: normal;
  font-weight: 500;
  font-display: swap;
-  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2"),
-  url("/assets/fonts/inter/Inter-Medium.woff") format("woff");
+  src: url('/assets/fonts/inter/Inter-Medium.woff2') format('woff2'),
+    url('/assets/fonts/inter/Inter-Medium.woff') format('woff');
 }

@font-face {
@@ -78,15 +78,14 @@
  font-style: italic;
  font-weight: 500;
  font-display: swap;
-  src: url("/assets/fonts/inter/Inter-MediumItalic.woff2") format("woff2"),
-  url("/assets/fonts/inter/Inter-MediumItalic.woff") format("woff");
+  src: url('/assets/fonts/inter/Inter-MediumItalic.woff2') format('woff2'),
+    url('/assets/fonts/inter/Inter-MediumItalic.woff') format('woff');
 }

-
@font-face {
  font-family: 'Fira Code';
  src: url('/assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
-  url("/assets/fonts/fira-code/woff/FiraCode-Light.woff") format("woff");
+    url('/assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
 }
@@ -94,13 +93,13 @@
@font-face {
  font-family: 'Fira Code';
  src: url('/assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
-  url("/assets/fonts/fira-code/woff/FiraCode-Regular.woff") format("woff");
+    url('/assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
 }

-
-html, body {
+html,
+body {
  -webkit-font-smoothing: antialiased;
  background-color: white;
  font-size: 100%;
@@ -108,10 +107,10 @@ html, body {
  -webkit-text-size-adjust: 100%;
 }

-
-html, body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+html,
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }

 body {
@@ -152,11 +151,14 @@ abbr[title] {
  text-decoration: underline dotted;
 }

-b, strong {
+b,
+strong {
  font-weight: bolder;
 }

-code, kbd, samp {
+code,
+kbd,
+samp {
  font-family: monospace, monospace;
  font-size: 1em;
 }
@@ -165,7 +167,8 @@ small {
  font-size: 80%;
 }

-sub, sup {
+sub,
+sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
@@ -184,31 +187,46 @@ img {
  border-style: none;
 }

-button, input, optgroup, select, textarea {
+button,
+input,
+optgroup,
+select,
+textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
 }

-button, input {
+button,
+input {
  overflow: visible;
 }

-button, select {
+button,
+select {
  text-transform: none;
 }

-button, [type="button"], [type="reset"], [type="submit"] {
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
  -webkit-appearance: button;
 }

-button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
 }

@@ -233,21 +251,23 @@ textarea {
  overflow: auto;
 }

-[type="checkbox"], [type="radio"] {
+[type='checkbox'],
+[type='radio'] {
  box-sizing: border-box;
  padding: 0;
 }

-[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
  height: auto;
 }

-[type="search"] {
+[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
 }

-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
 }

@@ -279,5 +299,5 @@ h4,
 h5,
 h6 {
  font-family: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
--- a/public/assets/images/explore-stacks-lg.svg
+++ b/public/assets/images/explore-stacks-lg.svg
--- a/public/assets/images/explore-stacks-sm.svg
+++ b/public/assets/images/explore-stacks-sm.svg
--- a/public/html/devtool.html
+++ b/public/html/devtool.html
@@ -11,6 +11,6 @@

 </head>
 <body>
-<div id="actions-root"></div>
+<div id="app"></div>
 </body>
 </html>
--- a/public/html/index.html
+++ b/public/html/index.html
@@ -8,6 +8,6 @@
  <link href="/assets/base.css" rel="stylesheet"/>
 </head>
 <body>
-<div id="actions-root"></div>
+<div id="app"></div>
 </body>
 </html>
--- a/public/html/popup-center.html
+++ b/public/html/popup-center.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="mode__extension">
+<html class="mode__popup-center">
 <head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
@@ -8,6 +8,6 @@
  <link href="/assets/base.css" rel="stylesheet"/>
 </head>
 <body>
-<div id="actions-root"></div>
+<div id="app"></div>
 </body>
 </html>
--- a/public/html/popup.html
+++ b/public/html/popup.html
@@ -8,6 +8,6 @@
  <link href="/assets/base.css" rel="stylesheet"/>
 </head>
 <body>
-<div id="actions-root"></div>
+<div id="app"></div>
 </body>
 </html>
--- a/scripts/generate-manifest.js
+++ b/scripts/generate-manifest.js
@@ -25,7 +25,7 @@ const manifest = {
  web_accessible_resources: ['inpage.js'],
  browser_action: {
    default_title: 'Stacks',
-    default_popup: 'extension.html',
+    default_popup: 'popup.html',
  },
  commands: {
    _execute_browser_action: {
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -14,7 +14,7 @@ import { Devtools } from '@app/features/devtool/devtools';
 import { jotaiWrappedReactQueryQueryClient as queryClient } from '@app/store/common/common.hooks';
 import { initSegment } from './common/segment-init';
 import { theme } from './common/theme';
-import { GlobalStyles } from './components/global-styles';
+import { GlobalStyles } from './components/styles/global-styles';
 import { AppRoutes } from './routes/app-routes';

 const devToolsEnabled = false;
--- a/src/app/components/container/container.layout.tsx
+++ b/src/app/components/container/container.layout.tsx
@@ -13,7 +13,6 @@ export function ContainerLayout(props: ContainerLayoutProps) {
      flexGrow={1}
      width="100%"
      background={color('bg')}
-      data-testid="container-outer"
      minHeight="100vh"
      maxHeight="100vh"
      position="relative"
@@ -24,7 +23,6 @@ export function ContainerLayout(props: ContainerLayoutProps) {
        flexDirection="column"
        flexGrow={1}
        className="main-content"
-        id="main-content"
        as="main"
        position="relative"
        width="100%"
--- a/src/app/components/global-styles.tsx
+++ b/src/app/components/global-styles.tsx
@@ -1,165 +0,0 @@
-import { memo } from 'react';
-import { CSSReset } from '@stacks/ui';
-import { Global, css } from '@emotion/react';
-
-const SizeStyles = css`
-  body {
-    display: flex;
-
-    &.no-scroll .main-content {
-      overflow: hidden;
-      pointer-events: none;
-    }
-  }
-
-  #actions-root {
-    flex-grow: 1;
-    display: flex;
-    min-height: 100vh;
-  }
-
-  .container-outer {
-    min-height: 100vh;
-    height: 100vh;
-  }
-
-  .mode__extension {
-    &,
-    body {
-      min-height: 600px !important;
-      min-width: 392px !important;
-      overflow-x: hidden;
-      main.main-content {
-        flex-grow: 1;
-        max-width: 392px;
-      }
-    }
-  }
-
-  .mode__full-page {
-    &,
-    body {
-      height: 100%;
-      max-height: unset;
-      width: 100%;
-
-      main.main-content {
-        flex-grow: 1;
-        justify-content: center;
-        max-width: 440px;
-        margin: 0 auto;
-      }
-
-      .onboarding-text {
-        text-align: center;
-      }
-    }
-  }
-
-  .mode__popup {
-    &,
-    body {
-      height: unset !important;
-      min-height: 552px !important;
-      min-width: 440px !important;
-      overflow-x: hidden;
-    }
-  }
-
-  .tippy-box[data-animation='fade'][data-state='hidden'] {
-    opacity: 0;
-  }
-
-  [data-tippy-root] {
-    max-width: calc(100vw - 10px);
-  }
-
-  .tippy-box {
-    position: relative;
-    background-color: #333;
-    color: #fff;
-    border-radius: 4px;
-    font-size: 14px;
-    line-height: 1.4;
-    outline: 0;
-    transition-property: transform, visibility, opacity;
-  }
-
-  .tippy-box[data-placement^='top'] > .tippy-arrow {
-    bottom: 0;
-  }
-
-  .tippy-box[data-placement^='top'] > .tippy-arrow:before {
-    bottom: -7px;
-    left: 0;
-    border-width: 8px 8px 0;
-    border-top-color: initial;
-    transform-origin: center top;
-  }
-
-  .tippy-box[data-placement^='bottom'] > .tippy-arrow {
-    top: 0;
-  }
-
-  .tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
-    top: -7px;
-    left: 0;
-    border-width: 0 8px 8px;
-    border-bottom-color: initial;
-    transform-origin: center bottom;
-  }
-
-  .tippy-box[data-placement^='left'] > .tippy-arrow {
-    right: 0;
-  }
-
-  .tippy-box[data-placement^='left'] > .tippy-arrow:before {
-    border-width: 8px 0 8px 8px;
-    border-left-color: initial;
-    right: -7px;
-    transform-origin: center left;
-  }
-
-  .tippy-box[data-placement^='right'] > .tippy-arrow {
-    left: 0;
-  }
-
-  .tippy-box[data-placement^='right'] > .tippy-arrow:before {
-    left: -7px;
-    border-width: 8px 8px 8px 0;
-    border-right-color: initial;
-    transform-origin: center right;
-  }
-
-  .tippy-box[data-inertia][data-state='visible'] {
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-  }
-
-  .tippy-arrow {
-    width: 16px;
-    height: 16px;
-    color: #333;
-  }
-
-  .tippy-arrow:before {
-    content: '';
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .tippy-content {
-    position: relative;
-    padding: 5px 9px;
-    z-index: 1;
-  }
-`;
-
-export const GlobalStyles = memo(() => {
-  return (
-    <>
-      {CSSReset}
-      <Global styles={SizeStyles} />
-    </>
-  );
-});
--- a/src/app/components/hiro-wallet-logo.tsx
+++ b/src/app/components/hiro-wallet-logo.tsx
@@ -1,37 +1,22 @@
 import { memo } from 'react';
+import { Stack, StackProps, color } from '@stacks/ui';

-import { Stack, StackProps, color, Box, BoxProps } from '@stacks/ui';
-import { Title } from '@app/components/typography';
-
-const HiroSvg = (props: BoxProps) => (
-  <Box as="svg" viewBox="0 0 16 16" fill="none" {...props}>
-    <circle cx="8" cy="8" r="8" fill="currentColor" />
-    <path
-      d="M9.17128 9.07053L10.4458 11H9.4937L7.99748 8.733L6.50126 11H5.55416L6.82872 9.07557H5V8.34509H11V9.07053H9.17128Z"
-      fill={color('bg')}
-    />
-    <path
-      d="M11 6.90428V7.63476V7.6398H5V6.90428H6.79345L5.53401 5H6.48615L7.99748 7.29723L9.51385 5H10.466L9.20655 6.90428H11Z"
-      fill={color('bg')}
-    />
-  </Box>
-);
+import { HiroIcon } from './icons/hiro-icon';
+import { HiroWalletText } from './icons/hiro-wallet-text';

 export const HiroWalletLogo = memo((props: StackProps) => {
  return (
    <Stack
+      _hover={{ color: color('brand') }}
+      alignItems="center"
      color={color('text-title')}
      cursor="pointer"
      flexDirection="row"
      isInline
-      alignItems="center"
-      _hover={{ color: color('brand') }}
      {...props}
    >
-      <HiroSvg size="23px" />
-      <Title lineHeight="1rem" fontSize={2} fontWeight={500}>
-        Hiro Wallet
-      </Title>
+      <HiroIcon width="28px" height="20px" />
+      <HiroWalletText width="82px" height="14px" />
    </Stack>
  );
 });
--- a/src/app/components/icons/hiro-icon.tsx
+++ b/src/app/components/icons/hiro-icon.tsx
@@ -0,0 +1,11 @@
+import { Box, BoxProps } from '@stacks/ui';
+
+export const HiroIcon = (props: BoxProps) => (
+  <Box as="svg" viewBox="0 0 28 20" fill="none" {...props}>
+    <path
+      d="M20.8824 20L27.7093 9.99999L20.8824 0H6.82697V20H20.8824ZM6.82693 20L0 10L6.82693 1.48616e-05V20ZM18.8745 8.17381H15.8736L17.981 5H16.3878L13.8505 8.82872L11.3216 5H9.72842L11.8358 8.17381H8.83489V9.39966H18.8745V8.17381ZM15.8146 11.7842L17.9472 15H16.3541L13.8505 11.2217L11.3469 15H9.76214L11.8948 11.7926H8.83489V10.5751H18.8745V11.7842H15.8146Z"
+      fill="black"
+      fillRule="evenodd"
+    />
+  </Box>
+);
--- a/src/app/components/icons/hiro-wallet-text.tsx
+++ b/src/app/components/icons/hiro-wallet-text.tsx
@@ -0,0 +1,40 @@
+import { Box, BoxProps } from '@stacks/ui';
+
+export const HiroWalletText = (props: BoxProps) => (
+  <Box as="svg" viewBox="0 0 82 14" fill="none" {...props}>
+    <path
+      d="M0.61499 0.716872V13.5589H2.73311V7.98181H8.71911V13.5589H10.8372V0.716872H8.71911V6.11054H2.73311V0.716872H0.61499Z"
+      fill="black"
+    />
+    <path
+      d="M13.7956 0.42334C13.1141 0.42334 12.5799 0.918677 12.5799 1.61582C12.5799 2.31296 13.1141 2.8083 13.7956 2.8083C14.477 2.8083 15.0112 2.31296 15.0112 1.61582C15.0112 0.918677 14.477 0.42334 13.7956 0.42334ZM12.801 4.16589V13.5589H14.7902V4.16589H12.801Z"
+      fill="black"
+    />
+    <path
+      d="M21.3263 4.16589C19.7791 4.16589 19.024 4.78964 18.5451 5.57851L18.3241 4.16589H16.5559V13.5589H18.5451V8.84407C18.5451 7.39475 19.1161 6.01881 20.8842 6.01881H21.7683V4.16589H21.3263Z"
+      fill="black"
+    />
+    <path
+      d="M26.8545 13.669C29.7278 13.669 31.6618 11.7427 31.6618 8.86241C31.6618 6.00047 29.7278 4.05581 26.8545 4.05581C23.9813 4.05581 22.0473 6.00047 22.0473 8.86241C22.0473 11.7427 23.9813 13.669 26.8545 13.669ZM26.8545 11.9812C25.1785 11.9812 24.0918 10.6786 24.0918 8.86241C24.0918 7.04618 25.1785 5.74362 26.8545 5.74362C28.5306 5.74362 29.6357 7.04618 29.6357 8.86241C29.6357 10.6786 28.5306 11.9812 26.8545 11.9812Z"
+      fill="black"
+    />
+    <path
+      d="M34.9099 0.716872L38.8146 13.5589H40.0118L43.3456 2.368L46.6793 13.5589H47.8765L51.7996 0.716872H50.7682L47.2871 12.2564L43.8981 0.716872H42.8851L39.404 12.2564L35.9598 0.716872H34.9099Z"
+      fill="black"
+    />
+    <path
+      d="M60.5637 12.6967C60.0479 12.6967 59.7348 12.3665 59.7348 11.7977V7.46813C59.7348 5.34002 58.4087 4.14754 56.0696 4.14754C53.933 4.14754 52.5332 5.1749 52.2938 6.86272H53.2331C53.4725 5.72528 54.4671 4.9731 56.0327 4.9731C57.7825 4.9731 58.7955 5.89039 58.7955 7.43144V8.23865H55.6275C53.2331 8.23865 51.9438 9.26602 51.9438 11.0089C51.9438 12.66 53.2515 13.669 55.2591 13.669C57.1562 13.669 58.2982 12.7884 58.8323 11.6326V12.0179C58.7955 12.9719 59.2559 13.5589 60.361 13.5589H60.9136V12.6967H60.5637ZM58.7955 9.79805C58.7955 11.5776 57.5246 12.8618 55.3144 12.8618C53.8409 12.8618 52.9016 12.1096 52.9016 10.9538C52.9016 9.72467 53.8409 9.04587 55.5538 9.04587H58.7955V9.79805Z"
+      fill="black"
+    />
+    <path d="M61.9848 0.716872V13.5589H62.9241V0.716872H61.9848Z" fill="black" />
+    <path d="M64.9483 0.716872V13.5589H65.8876V0.716872H64.9483Z" fill="black" />
+    <path
+      d="M67.5986 8.89911C67.5986 11.7244 69.4221 13.669 72.0743 13.669C74.1188 13.669 75.6475 12.3481 76.0711 10.4768H75.1134C74.745 11.9262 73.5294 12.8251 72.0007 12.8251C70.0115 12.8251 68.6117 11.3208 68.5748 9.1376C68.5748 9.06422 68.5748 8.99084 68.5932 8.91745H76.2001C76.2185 8.78903 76.2185 8.64226 76.2185 8.53219C76.1264 5.76197 74.4135 4.14754 71.9086 4.14754C69.3668 4.14754 67.5986 6.05551 67.5986 8.89911ZM68.6485 8.12858C68.8143 6.23896 70.2141 4.9731 71.927 4.9731C73.7504 4.9731 75.0581 6.0922 75.2055 8.12858H68.6485Z"
+      fill="black"
+    />
+    <path
+      d="M78.4084 11.3941C78.4084 12.8801 79.0162 13.5589 80.6002 13.5589H82V12.6967H80.637C79.6977 12.6967 79.3478 12.3298 79.3478 11.3758V5.11987H81.8343V4.25761H79.3478V1.65251H78.4084V4.25761H76.6402V5.11987H78.4084V11.3941Z"
+      fill="black"
+    />
+  </Box>
+);
--- a/src/app/components/styles/full-page-styles.tsx
+++ b/src/app/components/styles/full-page-styles.tsx
@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+
+export const fullPageStyles = css`
+  .mode__full-page {
+    &,
+    body {
+      height: 100%;
+      max-height: unset;
+      width: 100%;
+    }
+    main.main-content {
+      flex-direction: row;
+      flex-grow: 1;
+      justify-content: center;
+      margin: 0 auto;
+    }
+    .temp {
+      max-width: 440px;
+    }
+    .welcome-page {
+      .content-image {
+        order: 2;
+        height: calc(100vh - 102px);
+        .image-small {
+          display: none;
+        }
+      }
+      .content-text {
+        order: 1;
+        margin-left: 168px;
+        .title {
+          max-width: 500px;
+          font-size: 64px;
+          margin-bottom: 24px;
+        }
+        .text {
+          max-width: 440px;
+          font-size: 16px;
+          margin-bottom: 24px;
+        }
+      }
+    }
+    .onboarding-text {
+      text-align: center;
+    }
+  }
+`;
--- a/src/app/components/styles/global-styles.tsx
+++ b/src/app/components/styles/global-styles.tsx
@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import { CSSReset } from '@stacks/ui';
+import { Global, css } from '@emotion/react';
+
+import { extensionStyles } from './popup-styles';
+import { fullPageStyles } from './full-page-styles';
+import { popupCenterStyles } from './popup-center-styles';
+
+const styles = css`
+  body {
+    display: flex;
+    &.no-scroll .main-content {
+      overflow: hidden;
+      pointer-events: none;
+    }
+  }
+  #app {
+    display: flex;
+    flex-grow: 1;
+    min-height: 100vh;
+  }
+  ${extensionStyles};
+  ${fullPageStyles};
+  ${popupCenterStyles};
+`;
+
+export const GlobalStyles = memo(() => {
+  return (
+    <>
+      {CSSReset}
+      <Global styles={styles} />
+    </>
+  );
+});
--- a/src/app/components/styles/popup-center-styles.tsx
+++ b/src/app/components/styles/popup-center-styles.tsx
@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+
+export const popupCenterStyles = css`
+  .mode__popup-center {
+    &,
+    body {
+      height: unset !important;
+      min-height: 552px !important;
+      min-width: 440px !important;
+      overflow-x: hidden;
+    }
+    .welcome-page {
+      .content-image .image-large {
+        display: none;
+      }
+      .content-text {
+        .title {
+          width: 264px;
+          font-size: 32px;
+          line-height: 44px;
+          margin-top: 24px;
+        }
+        .text {
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+`;
--- a/src/app/components/styles/popup-styles.tsx
+++ b/src/app/components/styles/popup-styles.tsx
@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+
+export const extensionStyles = css`
+  .mode__extension {
+    &,
+    body {
+      min-height: 600px !important;
+      min-width: 392px !important;
+      overflow-x: hidden;
+      main.main-content {
+        flex-grow: 1;
+        max-width: 392px;
+      }
+    }
+    .welcome-page {
+      .content-image .image-large {
+        display: none;
+      }
+      .content-text {
+        .title {
+          width: 264px;
+          font-size: 32px;
+          line-height: 44px;
+          margin-top: 24px;
+        }
+        .text {
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+`;
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -7,7 +7,7 @@ import { initSentry } from '@shared/utils/sentry-init';
 initSentry();

 function renderApp() {
-  ReactDOM.render(<App />, document.getElementById('actions-root'));
+  ReactDOM.render(<App />, document.getElementById('app'));
 }

 void persistAndRenderApp(renderApp);
--- a/src/app/pages/onboarding/welcome/welcome.layout.tsx
+++ b/src/app/pages/onboarding/welcome/welcome.layout.tsx
@@ -1,8 +1,11 @@
 import { Button, Stack } from '@stacks/ui';

-import { Body, Title } from '@app/components/typography';
+import { Text, Title } from '@app/components/typography';
 import { Link } from '@app/components/link';
+import ExploreStacksLarge from '@assets/images/explore-stacks-lg.svg';
+import ExploreStacksSmall from '@assets/images/explore-stacks-sm.svg';
 import { InitialPageSelectors } from '@tests/integration/initial-page.selectors';
+import { getViewMode } from '@app/common/utils';

 interface WelcomeLayoutProps {
  isGeneratingWallet: boolean;
@@ -11,27 +14,39 @@ interface WelcomeLayoutProps {
 }
 export function WelcomeLayout(props: WelcomeLayoutProps): JSX.Element {
  const { isGeneratingWallet, onStartOnboarding, onRestoreWallet } = props;
+  const mode = getViewMode();

  return (
-    <Stack spacing="extra-loose" flexGrow={1} justifyContent="center">
-      <Stack width="100%" spacing="loose" textAlign="center" alignItems="center">
-        <Title as="h1" fontWeight={500}>
-          Hiro Wallet is installed
-        </Title>
-        <Body maxWidth="28ch">Are you new to Stacks or do you already have a Secret Key?</Body>
+    <Stack className="welcome-page" isInline={mode === 'full'} width="100%">
+      <Stack className="content-image" flexGrow={1}>
+        <img src={ExploreStacksLarge} className="image-large" />
+        <img src={ExploreStacksSmall} className="image-small" />
      </Stack>
-      <Stack justifyContent="center" spacing="loose" textAlign="center">
-        <Button
-          onClick={onStartOnboarding}
-          isLoading={isGeneratingWallet}
-          data-testid={InitialPageSelectors.SignUp}
-          borderRadius="10px"
-        >
-          I'm new to Stacks
-        </Button>
-        <Link onClick={onRestoreWallet} data-testid={InitialPageSelectors.SignIn}>
-          Sign in with Secret Key
-        </Link>
+      <Stack className="content-text" flexGrow={1} justifyContent="center">
+        <Stack width="100%" textAlign="left" alignItems="start">
+          <Title className="title" fontWeight={500}>
+            Explore the world of Stacks
+          </Title>
+          <Text className="text">
+            Hiro Wallet connects you to Stacks apps while keeping your account, data, and crypto
+            secure. Create your Stacks account to get started.
+          </Text>
+        </Stack>
+        <Stack spacing="loose" textAlign="left" {...props}>
+          <Button
+            borderRadius="10px"
+            data-testid={InitialPageSelectors.SignUp}
+            height="48px"
+            isLoading={isGeneratingWallet}
+            onClick={onStartOnboarding}
+            width="198px"
+          >
+            Create Stacks Account
+          </Button>
+          <Link data-testid={InitialPageSelectors.SignIn} fontSize="14px" onClick={onRestoreWallet}>
+            I already have an account
+          </Link>
+        </Stack>
      </Stack>
    </Stack>
  );
--- a/src/background/background.ts
+++ b/src/background/background.ts
@@ -16,7 +16,7 @@ import {
 } from '@shared/message-types';

 import type { VaultActions } from '@shared/vault/vault-types';
-import { popupCenter } from '@background/popup';
+import { popupCenter } from '@background/popup-center';
 import { vaultMessageHandler } from '@background/vault';
 import { initContextMenuActions } from '@background/init-context-menus';
 import { initSentry } from '@shared/utils/sentry-init';
@@ -66,7 +66,7 @@ chrome.runtime.onConnect.addListener(port =>
            if (IS_TEST_ENV) {
              await openRequestInFullPage(path, urlParams);
            } else {
-              popupCenter({ url: `/popup.html#${path}?${urlParams.toString()}` });
+              popupCenter({ url: `/popup-center.html#${path}?${urlParams.toString()}` });
            }
            break;
          }
@@ -82,7 +82,7 @@ chrome.runtime.onConnect.addListener(port =>
            if (IS_TEST_ENV) {
              await openRequestInFullPage(path, urlParams);
            } else {
-              popupCenter({ url: `/popup.html#${path}?${urlParams.toString()}` });
+              popupCenter({ url: `/popup-center.html#${path}?${urlParams.toString()}` });
            }
            break;
          }
--- a/src/background/popup-center.ts
+++ b/src/background/popup-center.ts
--- a/webpack/webpack.config.base.js
+++ b/webpack/webpack.config.base.js
@@ -154,8 +154,8 @@ const config = {
      contextRegExp: /bip39\/src$/,
    }),
    new HtmlWebpackPlugin({
-      template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'extension.html'),
-      filename: 'extension.html',
+      template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'index.html'),
+      filename: 'index.html',
      ...HTML_PROD_OPTIONS,
    }),
    new HtmlWebpackPlugin({
@@ -164,8 +164,8 @@ const config = {
      ...HTML_PROD_OPTIONS,
    }),
    new HtmlWebpackPlugin({
-      template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'index.html'),
-      filename: 'index.html',
+      template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'popup-center.html'),
+      filename: 'popup-center.html',
      ...HTML_PROD_OPTIONS,
    }),
    new GenerateJsonPlugin(