fix: side note visibility, side note style

hamid-deriv · Dec 14, 2022 · c158e91 · c158e91
1 parent 5a12219
commit c158e91
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 18 deletions.
diff --git a/packages/cashier/src/components/cashier-onboarding/cashier-onboarding-side-note.jsx b/packages/cashier/src/components/cashier-onboarding/cashier-onboarding-side-note.jsx
@@ -47,7 +47,7 @@ const CashierOnboardingSideNote = ({ is_crypto }) => {
 
     return (
         <div>
-            <Text className='cashier-onboarding-side-note__text' color='prominent' weight='bold' sixe='xs' as='p'>
+            <Text className='cashier-onboarding-side-note__text' color='prominent' weight='bold' size='xs' as='p'>
                 {is_crypto ? (
                     <Localize i18n_default_text='This is your {{currency_code}} account.' values={{ currency_code }} />
                 ) : (

diff --git a/packages/cashier/src/components/side-note/side-note.scss b/packages/cashier/src/components/side-note/side-note.scss
@@ -6,7 +6,7 @@
         color: var(--text-general);
         font-size: var(--text-size-xxs);
         line-height: 1.5;
-        margin: 2.4rem 0;
+        margin: 1.6rem 0;
         width: auto;
         text-align: left;
 
@@ -32,4 +32,7 @@
             margin-top: 1.1rem;
         }
     }
+    &__title {
+        margin-bottom: 0.8rem;
+    }
 }
diff --git a/packages/cashier/src/components/side-note/side-note.tsx b/packages/cashier/src/components/side-note/side-note.tsx
@@ -30,7 +30,7 @@ const SideNoteTitle = ({ children_length, side_notes_length, title }: TSideNoteT
     const length_of_notes = children_length || side_notes_length || 0;
 
     return (
-        <Text className='side-note__title' weight='bold' as='p'>
+        <Text className='side-note__title' weight='bold' as='p' size='xs'>
             {title ||
                 (length_of_notes > 1 ? <Localize i18n_default_text='Notes' /> : <Localize i18n_default_text='Note' />)}
         </Text>

diff --git a/...shier/src/pages/payment-agent/missing-payment-method-note/missing-payment-method-note.tsx b/...shier/src/pages/payment-agent/missing-payment-method-note/missing-payment-method-note.tsx
@@ -5,14 +5,9 @@ import './missing-payment-method-note.scss';
 
 const MissingPaymentMethodNote = () => {
     return (
-        <div className='missing-payment-method-note'>
-            <Text as='p' className='missing-payment-method-note__title' size='xs' lh='m' weight='bold'>
-                <Localize i18n_default_text='Note' />
-            </Text>
-            <Text as='p' size='xxs' lh='s'>
-                <Localize i18n_default_text='Some payment methods may not be listed here but payment agents may still offer them. If you can’t find your favourite method, contact the payment agents directly to check further.' />
-            </Text>
-        </div>
+        <Text as='p' size='xxs' lh='s'>
+            <Localize i18n_default_text='Some payment methods may not be listed here but payment agents may still offer them. If you can’t find your favourite method, contact the payment agents directly to check further.' />
+        </Text>
     );
 };
 

diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx
@@ -93,14 +93,14 @@ const PaymentAgentContainer = ({
                     <SideNote has_title={false} is_mobile>
                         <PaymentAgentDisclaimer />
                     </SideNote>
+                    <SideNote has_title is_mobile>
+                        <MissingPaymentMethodNote />
+                    </SideNote>
                     <SideNote has_title={false} is_mobile>
                         <PaymentAgentSignupSideNote />
                     </SideNote>
                 </>
             )}
-            <SideNote className='payment-agent-list__side-note-second' has_title={false} is_mobile>
-                <MissingPaymentMethodNote />
-            </SideNote>
             <div className='payment-agent-list__list-header'>
                 {is_deposit ? (
                     <Text as='p' line_height='s' size='xs'>

diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.tsx
@@ -11,6 +11,7 @@ import DepositTab from './deposit-tab';
 import WithdrawalTab from './withdrawal-tab';
 import MissingPaymentMethodNote from '../missing-payment-method-note';
 import PaymentAgentDisclaimer from '../payment-agent-disclaimer';
+import { PaymentAgentSignupSideNote } from '../payment-agent-signup/components/signup-side-note';
 import './payment-agent-list.scss';
 
 type TProps = {
@@ -27,9 +28,12 @@ const PaymentAgentList = ({ setSideNotes }: TProps) => {
                 <SideNote has_title={false} key={0}>
                     <PaymentAgentDisclaimer />
                 </SideNote>,
-                <SideNote has_title={false} key={0}>
+                <SideNote has_title key={1}>
                     <MissingPaymentMethodNote />
                 </SideNote>,
+                <SideNote has_title={false} key={2}>
+                    <PaymentAgentSignupSideNote />
+                </SideNote>,
             ]);
         } else {
             setSideNotes?.([]);

diff --git a/...pages/payment-agent/payment-agent-signup/components/signup-side-note/signup-side-note.tsx b/...pages/payment-agent/payment-agent-signup/components/signup-side-note/signup-side-note.tsx
@@ -25,15 +25,15 @@ const Note = ({ note }: { note: TNote }) => {
         <div className='signup-side-note'>
             <div className='signup-side-note__header'>
                 {note.icon && <Icon icon={note.icon} size={16} custom_color={note.icon_color} />}
-                <Text as='p' color={note.title_color} size='xxs' line-height='m' weight='bold'>
+                <Text as='p' color={note.title_color} size='xs' line-height='m' weight='bold'>
                     {note.title}
                 </Text>
             </div>
-            <Text as='p' className='signup-side-note__description' size='xxxs' line-height='s'>
+            <Text as='p' className='signup-side-note__description' size='xxs' line-height='s'>
                 {note.description}
             </Text>
             {note.tip && (
-                <Text as='p' className='signup-side-note__tip' size='xxxs' line-height='s'>
+                <Text as='p' className='signup-side-note__tip' size='xxs' line-height='s'>
                     {note.tip}
                 </Text>
             )}