feat. Update web UI

packages/adena-extension/src/components/atoms/web-button/index.tsx

@@ -6,18 +6,18 @@ import IconRight from '@assets/web/chevron-right.svg';
 
 import { WebImg } from '../web-img';
 import { WebText } from '../web-text';
-import { Row } from '../base';
+import { Row, View } from '../base';
 
 type WebButtonProps = {
   size: 'full' | 'large' | 'small';
   textType?: WebFontType;
   figure: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
 } & (
-    | { text: string; rightIcon?: 'chevronRight' }
-    | {
+  | { text: string; rightIcon?: 'chevronRight' }
+  | {
       children: ReactNode;
     }
-  ) &
+) &
   ButtonHTMLAttributes<HTMLButtonElement>;
 
 const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small' }>`
@@ -27,7 +27,7 @@ const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small' }>`
   padding: ${({ size }): string => (size === 'large' ? '12px 16px 16px' : '8px 24px')};
   display: flex;
   flex-direction: row;
-  width: ${({ size }): string => size === 'full' ? '100%' : 'auto'};
+  width: ${({ size }): string => (size === 'full' ? '100%' : 'auto')};
   justify-content: center;
   align-items: center;
 
@@ -96,17 +96,22 @@ const StyledButtonQuaternary = styled(StyledButtonBase)`
   border: 1px solid #212429;
 
   :hover {
-    color: #FFF;
+    color: #fff;
     background: rgba(255, 255, 255, 0.08);
   }
 
   :active {
-    color: #FFF;
+    color: #fff;
     background: rgba(255, 255, 255, 0.08);
   }
 `;
 
-export const WebButton = ({ figure, textType = 'title4', children, ...rest }: WebButtonProps): ReactElement => {
+export const WebButton = ({
+  figure,
+  textType = 'title4',
+  children,
+  ...rest
+}: WebButtonProps): ReactElement => {
   let StyledComponent;
   switch (figure) {
     case 'secondary':
@@ -127,9 +132,15 @@ export const WebButton = ({ figure, textType = 'title4', children, ...rest }: We
   return (
     <StyledComponent {...rest}>
       {'text' in rest ? (
-        <Row>
-          <WebText type={textType}>{rest.text}</WebText>
-          {rest.rightIcon === 'chevronRight' && <WebImg src={IconRight} size={24} />}
+        <Row style={{ alignItems: 'flex-end' }}>
+          <WebText type={textType} style={{ padding: '0 8px' }}>
+            {rest.text}
+          </WebText>
+          {rest.rightIcon === 'chevronRight' && (
+            <View style={{ margin: '0 -4px' }}>
+              <WebImg src={IconRight} size={24} />
+            </View>
+          )}
         </Row>
       ) : (
         children

packages/adena-extension/src/components/atoms/web-main/index.tsx

@@ -5,7 +5,7 @@ import mixins from '@styles/mixins';
 export const WebMain = styled.main`
   ${mixins.flex({ align: 'center' })}
   width: fit-content;
-  height: calc(100vh - 80px);
-  margin: 0 auto;
+  height: calc(100vh);
+  margin: -80px auto 0;
   row-gap: 24px;
 `;

packages/adena-extension/src/components/pages/web/main-header/index.tsx

@@ -8,6 +8,7 @@ import { Pressable, Row, View, WebImg } from '@components/atoms';
 const StyledContainer = styled(Row)`
   width: 100%;
   justify-content: space-between;
+  padding-bottom: 16px;
 `;
 
 const StyledDot = styled(View) <{ selected: boolean }>`

packages/adena-extension/src/components/pages/web/sensitive-info-step/index.tsx

@@ -36,7 +36,7 @@ export const SensitiveInfoStep = ({
       <View style={{ rowGap: 24, alignItems: 'flex-start' }}>
         <WebImg src={IconAlert} />
         <StyledMessageBox>
-          <WebText type='headline3'>Sensitive Information Ahead</WebText>
+          <WebText type='headline2'>Sensitive Information Ahead</WebText>
           <WebText type='body4' color={theme.webNeutral._500}>
             {desc}
           </WebText>

packages/adena-extension/src/hooks/web/use-account-add-screen.ts

@@ -11,7 +11,6 @@ import useQuestionnaire from './use-questionnaire';
 export type UseAccountAddScreenReturn = {
   step: AccountAddStateType;
   setStep: React.Dispatch<React.SetStateAction<AccountAddStateType>>;
-  stepLength: number;
   onClickGoBack: () => void;
   onClickNext: () => void;
   addAccount: () => Promise<void>;
@@ -30,8 +29,6 @@ const useAccountAddScreen = (): UseAccountAddScreenReturn => {
     params?.doneQuestionnaire ? 'CREATE_ACCOUNT' : 'INIT',
   );
 
-  const stepLength = ableToSkipQuestionnaire ? 1 : 2;
-
   const onClickGoBack = useCallback(() => {
     if (step === 'INIT') {
       navigate(RoutePath.WebAdvancedOption);
@@ -75,7 +72,6 @@ const useAccountAddScreen = (): UseAccountAddScreenReturn => {
   return {
     step,
     setStep,
-    stepLength,
     onClickGoBack,
     onClickNext,
     addAccount,

packages/adena-extension/src/pages/web/account-add-screen/index.tsx

@@ -10,13 +10,13 @@ import { ADENA_DOCS_PAGE } from '@common/constants/resource.constant';
 
 const AccountAddScreen = (): ReactElement => {
   const useAccountAddScreenReturn = useAccountAddScreen();
-  const { step, onClickGoBack, stepLength, onClickNext } = useAccountAddScreenReturn;
+  const { step, onClickGoBack, onClickNext } = useAccountAddScreenReturn;
 
   return (
     <WebMain>
       {step === 'INIT' && (
         <>
-          <WebMainHeader stepLength={stepLength} onClickGoBack={onClickGoBack} currentStep={0} />
+          <WebMainHeader stepLength={0} onClickGoBack={onClickGoBack} />
           <SensitiveInfoStep
             desc='You are about to add a new private key derived from your existing seed phrase. Be sure to store it in a safe place.'
             onClickNext={onClickNext}