fix: welcome page header padding, closes #4374

package.json

@@ -239,7 +239,7 @@
     "@babel/preset-typescript": "7.23.0",
     "@btckit/types": "0.0.19",
     "@ls-lint/ls-lint": "2.1.0",
-    "@pandacss/dev": "0.15.4",
+    "@pandacss/dev": "0.16.0",
     "@playwright/test": "1.38.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@redux-devtools/cli": "3.0.2",

public/assets/base.css

@@ -1,16 +1,3 @@
-/*
-    * Web Fonts from colophon-foundry.org
-    *
-    * The fonts included in this stylesheet are subject to the End User License you purchased
-    * from Colophon Foundry. The fonts are protected under domestic and international trademark and
-    * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
-    * distributing this font software.
-    *
-    * (c) 2023 Colophon Foundry
-    *
-    * Licenced to Trustmachines,
-*/
-
 @font-face {
   font-family: 'Diatype';
   src: url('/assets/fonts/diatype/diatype-regular.woff2') format('woff2');
@@ -55,208 +42,3 @@
   font-weight: 400;
   font-style: normal;
 }
-
-html,
-body {
-  -webkit-font-smoothing: antialiased;
-  font-size: 100%;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-}
-
-html,
-body {
-  font-family: 'Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-}
-
-body {
-  margin: 0;
-}
-
-main {
-  display: block;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-
-pre {
-  font-family: 'Fira Code', monospace;
-  font-size: 1em;
-}
-
-code {
-  font-family: 'Fira Code', monospace;
-}
-
-a {
-  background-color: transparent;
-}
-
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-img {
-  border-style: none;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-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 {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-textarea {
-  overflow: auto;
-}
-
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  height: auto;
-  margin: 0;
-}
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-
-details {
-  display: block;
-}
-
-summary {
-  display: list-item;
-}
-
-template {
-  display: none;
-}
-
-[hidden] {
-  display: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-}

src/app/components/warning-label.tsx

@@ -1,34 +1,31 @@
-import { ReactNode } from 'react';
-
-import { Box, BoxProps } from '@stacks/ui';
-import { styled } from 'leather-styles/jsx';
+import { Box, BoxProps, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { AlertIcon } from './icons/alert-icon';
 import { Flag } from './layout/flag';
 
 interface WarningLabelProps extends BoxProps {
-  children: ReactNode | undefined;
   title?: string;
 }
 export function WarningLabel({ children, title, ...props }: WarningLabelProps) {
   return (
     <Box {...props}>
       <Flag
-        bg={token('colors.accent.warning')}
+        bg="colors.accent.warning"
         borderRadius="10px"
         img={<AlertIcon color={token('colors.yellow.600')} />}
         minHeight="48px"
         px="base"
         py="base-tight"
         width="100%"
+        color="accent.notification-text"
       >
-        {title ? (
-          <styled.h1 mb="space.01" textStyle="label.02" color="accent.notification-text">
+        {title && (
+          <styled.h1 mb="space.01" mt={0} textStyle="label.02">
             {title}
           </styled.h1>
-        ) : null}
-        <styled.span mb="space.01" textStyle="caption.02" color="accent.notification-text">
+        )}
+        <styled.span mb="space.01" textStyle="caption.02">
           {children}
         </styled.span>
       </Flag>

src/app/features/stacks-transaction-request/page-top.tsx

@@ -1,8 +1,7 @@
 import { memo } from 'react';
 
-import { Stack } from '@stacks/ui';
 import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors';
-import { styled } from 'leather-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 
 import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-search-params';
 import { addPortSuffix, getUrlHostname } from '@app/common/utils';
@@ -31,7 +30,7 @@ function PageTopBase() {
     <Stack
       data-testid={TransactionRequestSelectors.TransactionRequestPage}
       mb="loose"
-      spacing="base"
+      gap="space.04"
       width="100%"
     >
       <styled.h1 mb="space.04" textStyle="heading.03">

src/app/pages/onboarding/welcome/welcome.layout.tsx

@@ -1,5 +1,5 @@
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Flex, styled } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { LeatherButton } from '@app/components/button/button';
@@ -35,16 +35,18 @@ export function WelcomeLayout(props: WelcomeLayoutProps): React.JSX.Element {
           justifyContent={['center', '', 'flex-start']}
           color={['brown.12', '', 'brown.2']}
         >
-          <styled.h1 textStyle={['heading.03', '', 'display.02', 'display.01']}>
-            {tagline}
-          </styled.h1>
-          <styled.h2
-            textStyle={['label.01', '', 'heading.04']}
-            mt={['space.02', '', 'space.07']}
-            maxW="556px"
-          >
-            {subheader}
-          </styled.h2>
+          <Box>
+            <styled.h1 textStyle={['heading.03', '', 'display.02', 'display.01']}>
+              {tagline}
+            </styled.h1>
+            <styled.h2
+              textStyle={['label.01', '', 'heading.04']}
+              mt={['space.02', '', 'space.07']}
+              maxW="556px"
+            >
+              {subheader}
+            </styled.h2>
+          </Box>
         </Flex>
         <Flex flexDir="column" alignItems={['normal', '', 'flex-start']}>
           <LeatherButton

src/content-scripts/content-script.ts

@@ -128,12 +128,12 @@ document.addEventListener(DomEventName.psbtRequest, ((event: PsbtRequestEvent) =
   });
 }) as EventListener);
 
-function addHiroWalletToPage() {
+function addLeatherToPage() {
   const inpage = document.createElement('script');
   inpage.src = chrome.runtime.getURL('inpage.js');
   inpage.id = 'hiro-wallet-provider';
   document.body.appendChild(inpage);
 }
 
 // Don't block thread to add Leather to page
-requestAnimationFrame(() => addHiroWalletToPage());
+requestAnimationFrame(() => addLeatherToPage());

theme/semantic-tokens.ts

@@ -76,7 +76,7 @@ export const semanticTokens = defineSemanticTokens({
         value: { base: '{colors.yellow.100}', _dark: '{colors.yellow.100}' },
       },
       'notification-text': {
-        value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.lightModeBrown.1}' },
+        value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' },
       },
     },
     error: {