fix(Onboarding): improve styles, semantics and file structure (#1387)

Co-authored-by: Dominik Harz <[email protected]>

src/components/index.tsx

@@ -2,6 +2,8 @@ export type { AccountSelectProps } from './AccountSelect';
 export { AccountSelect } from './AccountSelect';
 export type { AuthCTAProps } from './AuthCTA';
 export { AuthCTA } from './AuthCTA';
+export type { AuthModalProps, SignTermsModalProps } from './AuthModal';
+export { AuthModal, SignTermsModal } from './AuthModal';
 export type { AssetCellProps, BalanceCellProps, CellProps, TableProps } from './DataGrid';
 export { AssetCell, BalanceCell, Cell, Table } from './DataGrid';
 export type { FundWalletProps } from './FundWallet';

src/pages/Onboarding/Onboarding.tsx

@@ -1,27 +1,27 @@
 import { Keyring } from '@polkadot/api';
 import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { showAccountModalAction, showSignTermsModalAction } from '@/common/actions/general.actions';
 import { StoreType } from '@/common/types/util.types';
-import { Card, CTA, CTALink, Dd, DlGroup, Dt, Flex } from '@/component-library';
-import { AuthModal, SignTermsModal } from '@/components/AuthModal';
-import { Tutorial } from '@/components/Tutorial';
+import { Card, CTA, CTALink, Flex, H1, H2, P, TextLink } from '@/component-library';
+import { AuthModal, SignTermsModal } from '@/components';
 import { INTERLAY_DISCORD_LINK } from '@/config/links';
 import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
 import { SS58_FORMAT } from '@/constants';
 import { KeyringPair, useSubstrate, useSubstrateSecureState } from '@/lib/substrate';
 import MainContainer from '@/parts/MainContainer';
-import PageTitle from '@/parts/PageTitle';
 import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances';
 import { useSignMessage } from '@/utils/hooks/use-sign-message';
 
+import { Tutorial } from './components';
 import { StyledWrapper } from './Onboarding.style';
 
 type Steps = {
   title: string;
-  content: string;
+  content: ReactNode;
   ctaType: typeof CTA | typeof CTALink | typeof Tutorial;
   ctaText: string;
   isCompleted: boolean;
@@ -92,7 +92,15 @@ const Onboarding = (): JSX.Element => {
     },
     {
       title: 'Request Funds',
-      content: 'If you do not have any INTR, join our Discord and request funds in the #faucet channel.',
+      content: (
+        <>
+          If you do not have any INTR, join our Discord and request funds in the{' '}
+          <TextLink external weight='bold' color='secondary' to='#'>
+            #faucet channel
+          </TextLink>
+          .
+        </>
+      ),
       ctaType: CTALink,
       ctaText: `${t('faq.join_discord')} and ${t('fund_wallet')}`,
       to: INTERLAY_DISCORD_LINK,
@@ -129,12 +137,7 @@ const Onboarding = (): JSX.Element => {
     switch (step.ctaType) {
       case CTA:
         return (
-          <CTA
-            onPress={step.onPress}
-            variant='primary'
-            fullWidth={false}
-            disabled={step.isCompleted || !step.isActive}
-          >
+          <CTA onPress={step.onPress} variant='primary' fullWidth={false} disabled={step.isCompleted || !step.isActive}>
             {getCtaLabel(step)}
           </CTA>
         );
@@ -146,7 +149,7 @@ const Onboarding = (): JSX.Element => {
             variant='primary'
             fullWidth={false}
             disabled={step.isCompleted || !step.isActive}
-          > 
+          >
             {getCtaLabel(step)}
           </CTALink>
         );
@@ -160,19 +163,21 @@ const Onboarding = (): JSX.Element => {
   return (
     <MainContainer>
       <StyledWrapper direction='column' gap='spacing4'>
-        <PageTitle mainTitle={'Onboarding Tutorial'} />
+        <H1 weight='bold' align='center' size='xl3'>
+          Onboarding Tutorial
+        </H1>
         {steps.map((step, index) => (
-          <Flex key={index} direction='column' gap='spacing4'>
-            <Card flex='1'>
-              <DlGroup direction='column' alignItems='flex-start' gap='spacing4' marginY='spacing4'>
-                <Dt weight='semibold' color='primary'>
-                  {step.title}
-                </Dt>
-                <Dd color='primary'>{step.content}</Dd>
-              </DlGroup>
-              {getCta(step)}
-            </Card>
-          </Flex>
+          <Card key={index} flex='1' gap='spacing4' justifyContent='space-between'>
+            <Flex direction='column' gap='spacing2'>
+              <H2 size='lg' weight='semibold'>
+                {step.title}
+              </H2>
+              <P size='s' color='primary'>
+                {step.content}
+              </P>
+            </Flex>
+            {getCta(step)}
+          </Card>
         ))}
         <AuthModal
           isOpen={showAccountModal}

src/components/Tutorial/Tutorial.tsx → src/pages/Onboarding/components/Tutorial/Tutorial.tsx

@@ -6,7 +6,7 @@ import { CTA, theme } from '@/component-library';
 type Props = {
   disabled?: boolean;
   label?: string;
-}
+};
 
 type TutorialProps = Props;
 
@@ -15,12 +15,12 @@ const steps: Step[] = [
     target: 'body',
     placement: 'center',
     title: 'Welcome to the Interlay app!',
-    content: 'Step through this tutorial to understand the different parts of the app.',
+    content: 'Step through this tutorial to understand the different parts of the app.'
   },
   {
     target: '[href="/wallet"]',
     title: 'Wallet',
-    content: 'You can find an overview of your assets and positions in the DeFi hub on the wallet page.',
+    content: 'You can find an overview of your assets and positions in the DeFi hub on the wallet page.'
   },
   {
     target: '[href="/bridge"]',
@@ -35,7 +35,8 @@ const steps: Step[] = [
   {
     target: '[href="/transfer"]',
     title: 'Transfer and Bridge',
-    content: '...bridge assets from other chains like Polkadot, Polkadot Asset Hub, Astar, HydraDX, and many more from and to Interlay.'
+    content:
+      '...bridge assets from other chains like Polkadot, Polkadot Asset Hub, Astar, HydraDX, and many more from and to Interlay.'
   },
   {
     target: '[href="/lending"]',
@@ -45,43 +46,41 @@ const steps: Step[] = [
   {
     target: '[href="/lending"]',
     title: 'Lending',
-    content: 'You can also borrow assets like IBTC, DOT, USDT and others.',
+    content: 'You can also borrow assets like IBTC, DOT, USDT and others.'
   },
   {
     target: '[href="/swap"]',
     title: 'Swap',
-    content: 'On the swap page you can swap assets like IBTC, DOT, USDT and others.',
+    content: 'On the swap page you can swap assets like IBTC, DOT, USDT and others.'
   },
   {
     target: '[href="/pools"]',
     title: 'Pools',
-    content: 'On the pools page you can provide liquidity to earn rewards.',
+    content: 'On the pools page you can provide liquidity to earn rewards.'
   },
   {
     target: '[href="/staking"]',
     title: 'Staking',
-    content: 'Here you can stake INTR to enable you to participate in Interlay governance.',
+    content: 'Here you can stake INTR to enable you to participate in Interlay governance.'
   },
   {
     target: '[data-key="info"]',
     title: 'Onboarding',
-    content: 'All done! You can always redo this tutorial under "More" and "Onboarding".',
+    content: 'All done! You can always redo this tutorial under "More" and "Onboarding".'
   },
   {
     target: '[href="/wallet"]',
     title: 'Wallet',
-    content: 'As a first step, click on the wallet page and check the guide to get assets onto Interlay to join the DeFi hub.',
+    content:
+      'As a first step, click on the wallet page and check the guide to get assets onto Interlay to join the DeFi hub.',
     disableOverlayClose: true,
     hideCloseButton: true,
     hideFooter: true,
-    spotlightClicks: true,
-  },
+    spotlightClicks: true
+  }
 ];
 
-const Tutorial = ({
-  disabled = false,
-  label = 'Start Tutorial',
-}: TutorialProps): JSX.Element => {
+const Tutorial = ({ disabled = false, label = 'Start Tutorial' }: TutorialProps): JSX.Element => {
   const [run, setRun] = useState(false);
 
   const handleStartTutorial = () => {
@@ -93,19 +92,14 @@ const Tutorial = ({
     const { action, status } = data;
     const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
 
-    if (finishedStatuses.includes(status as string) || (action === 'close')) {
+    if (finishedStatuses.includes(status as string) || action === 'close') {
       setRun(false);
     }
   };
 
   return (
-    <>
-      <CTA
-        onPress={handleStartTutorial}
-        variant='primary'
-        disabled={disabled}
-        id='start-tutorial'
-      >
+    <div>
+      <CTA fullWidth onPress={handleStartTutorial} variant='primary' disabled={disabled} id='start-tutorial'>
         {label}
       </CTA>
       <Joyride
@@ -118,13 +112,13 @@ const Tutorial = ({
         run={run}
         styles={{
           options: {
-            primaryColor: theme.cta.primary.bg,
+            primaryColor: theme.cta.primary.bg
           }
         }}
       />
-    </>
+    </div>
   );
 };
 
 export { Tutorial };
-export type { TutorialProps };
+export type { TutorialProps };

src/pages/Onboarding/components/index.tsx

@@ -0,0 +1 @@
+export { Tutorial } from './Tutorial';

src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.styles.tsx

@@ -63,6 +63,7 @@ const StyledCTALink = styled(CTALink)`
   padding: ${theme.spacing.spacing2} ${theme.spacing.spacing6};
   color: #1a0144;
   background-color: var(--colors-neutral-white);
+  white-space: nowrap;
 
   &:hover:not([disabled]) {
     background-color: var(--colors-neutral-lighter-grey);
@@ -77,16 +78,17 @@ const StyledTitle = styled(H2)`
 const StyledCTAGroup = styled(Flex)`
   flex-wrap: wrap;
 
-  @media ${theme.breakpoints.up('sm')} {
-    flex-wrap: nowrap;
+  @media ${theme.breakpoints.up('md')} {
+    max-width: 80%;
   }
 
   @media ${theme.breakpoints.up('lg')} {
-    max-width: 70%;
+    flex-wrap: nowrap;
+    max-width: 100%;
   }
 
   @media ${theme.breakpoints.up('xl')} {
-    max-width: 50%;
+    max-width: 70%;
   }
 `;