Skip to content

Commit 2bc0e5f

Browse files
committed
UI fixes button color and overflow
1 parent d5f1dbb commit 2bc0e5f

File tree

6 files changed

+19
-15
lines changed

6 files changed

+19
-15
lines changed

ui/components/app/rewards/onboarding/OnboardingIntroStep.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,8 @@ const OnboardingIntroStep: React.FC = () => {
191191
*/
192192
const renderImage = () => (
193193
<Box
194-
className="flex justify-center items-center my-4 absolute"
195-
style={{ top: 180 }}
194+
className="flex justify-center items-center absolute"
195+
style={{ top: '25%' }}
196196
data-testid="rewards-onboarding-intro-image"
197197
>
198198
<img
@@ -227,7 +227,7 @@ const OnboardingIntroStep: React.FC = () => {
227227
candidateSubscriptionId === 'retry'
228228
}
229229
onClick={handleNext}
230-
className="w-full my-2 bg-white"
230+
className="w-full my-2 bg-white hover:bg-default-hover"
231231
>
232232
<Text variant={TextVariant.BodyMd} className="text-black font-medium">
233233
{t('rewardsOnboardingIntroStepConfirm')}

ui/components/app/rewards/onboarding/OnboardingModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export default function OnboardingModal() {
102102
paddingTop: 0,
103103
paddingBottom: 0,
104104
style: {
105-
height: '800px',
105+
height: '740px',
106106
alignItems: 'center',
107107
justifyContent: 'center',
108108
},

ui/components/app/rewards/onboarding/OnboardingStep1.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const OnboardingStep1: React.FC = () => {
3131
xmlns="http://www.w3.org/2000/svg"
3232
aria-hidden="true"
3333
focusable="false"
34-
style={{ left: 0 }}
34+
style={{ left: 0, top: 0 }}
3535
>
3636
<path
3737
d="M 302.98438 0 L 213.17773 113.25586 L 162.85742 113.25586 L 162.85742 224.83594 L 162.84766 224.83594 L 162.84766 113.09766 L 62.902344 113.09766 L -37.042969 226.49805 L -37.042969 339.89844 L 62.902344 339.89844 L 162.8125 226.53711 L 162.8125 339.9707 L 212.77539 339.9707 L 212.77539 340.4043 L 302.69336 453.79883 L 392.61523 453.79883 L 392.61523 340.4043 L 361.58008 301.26758 L 361.58008 224.83594 L 304.5332 224.83594 L 392.90625 113.39453 L 392.90625 0 L 302.98438 0 z "
@@ -41,15 +41,16 @@ const OnboardingStep1: React.FC = () => {
4141

4242
<img
4343
src="https://images.ctfassets.net/9sy2a0egs6zh/5ieKFEvd1qM3crY76W751i/ab846811e550d4a84c12a063f468f30c/rewards-onboarding-step1.png"
44-
className="w-full z-10 object-contain"
44+
className="z-10 object-contain"
4545
data-testid="rewards-onboarding-step1-image"
46+
width={'94%'}
4647
/>
4748
</>
4849
);
4950

5051
const renderStepInfo = () => (
5152
<Box
52-
className="flex flex-col min-h-30 gap-2 flex-1 justify-end"
53+
className="flex flex-col gap-2 flex-1 justify-end"
5354
data-testid="rewards-onboarding-step1-info"
5455
>
5556
<Text variant={TextVariant.HeadingLg} className="text-center">

ui/components/app/rewards/onboarding/OnboardingStep2.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const OnboardingStep2: React.FC = () => {
3131
xmlns="http://www.w3.org/2000/svg"
3232
aria-hidden="true"
3333
focusable="false"
34-
style={{ left: 0 }}
34+
style={{ left: 0, top: 0 }}
3535
>
3636
<path
3737
d="M 257.61523 0 L 121.50195 136.11328 L 121.50195 272.51562 L 30.742188 272.51562 L 30.742188 363.25781 L 166.87109 363.25781 L 166.87109 454 L 302.98438 454 L 393.72852 363.25781 L 393.71289 363.25781 L 393.71289 272.51562 L 393.73047 272.51562 L 302.79492 227.04688 L 393.73047 136.11328 L 393.73047 0 L 257.61523 0 z M 30.742188 363.25781 L -60 363.25781 L -60 454 L 30.742188 454 L 30.742188 363.25781 z M -59.998047 45.660156 L -14.626953 136.40234 L 121.48633 136.40234 L 76.115234 45.660156 L -59.998047 45.660156 z M 121.48633 181.76953 L 30.744141 272.51367 L 121.48633 272.51367 L 121.48633 181.76953 z M 212.24414 272.36914 L 212.24414 272.51562 L 165.20898 272.51562 L 212.24414 272.36914 z "
@@ -41,15 +41,16 @@ const OnboardingStep2: React.FC = () => {
4141

4242
<img
4343
src="https://images.ctfassets.net/9sy2a0egs6zh/2wG5gvQmC4d95TShVVpsEX/9bd7f199f47833fdc68e403a059713df/rewards-onboarding-step2.png"
44-
className="w-full z-10 object-contain"
44+
className="z-10 object-contain"
4545
data-testid="rewards-onboarding-step2-image"
46+
width={'94%'}
4647
/>
4748
</>
4849
);
4950

5051
const renderStepInfo = () => (
5152
<Box
52-
className="flex flex-col min-h-30 gap-2 flex-1 justify-end"
53+
className="flex flex-col gap-2 flex-1 justify-end"
5354
data-testid="rewards-onboarding-step2-info"
5455
>
5556
<Text variant={TextVariant.HeadingLg} className="text-center">

ui/components/app/rewards/onboarding/OnboardingStep3.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const OnboardingStep3: React.FC = () => {
3131
xmlns="http://www.w3.org/2000/svg"
3232
aria-hidden="true"
3333
focusable="false"
34-
style={{ left: 0 }}
34+
style={{ left: 0, top: 0 }}
3535
>
3636
<path
3737
d="M 294.88086 0 L 197.81836 90.767578 L 197.81836 181.53516 L 294.88086 181.53516 L 294.93555 181.48438 L 294.93555 181.54102 L 197.94922 181.54102 L 197.94922 272 L 99 272 L 0 362.99805 L 0 454 L 99 454 L 198 362.99805 L 198 362.81641 L 294.84375 272.27148 L 294.93555 272.27148 L 294.93555 362.11914 L 392 362.11914 L 392 181.35938 L 295.06836 181.35938 L 391.94336 90.767578 L 391.94336 0 L 294.88086 0 z "
@@ -41,15 +41,16 @@ const OnboardingStep3: React.FC = () => {
4141

4242
<img
4343
src="https://images.ctfassets.net/9sy2a0egs6zh/7ERFcIMMLMTL4EekVoOana/a03bef86b2cb4f87fc5ee84afd427d21/rewards-onboarding-step3.png"
44-
className="w-full z-10 object-contain"
44+
className="z-10 object-contain"
4545
data-testid="rewards-onboarding-step3-image"
46+
width={'94%'}
4647
/>
4748
</>
4849
);
4950

5051
const renderStepInfo = () => (
5152
<Box
52-
className="flex flex-col min-h-30 gap-2 flex-1 justify-end"
53+
className="flex flex-col gap-2 flex-1 justify-end"
5354
data-testid="rewards-onboarding-step3-info"
5455
>
5556
<Text variant={TextVariant.HeadingLg} className="text-center">

ui/components/app/rewards/onboarding/OnboardingStep4.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,17 @@ const OnboardingStep4: React.FC = () => {
9696

9797
const renderStepInfo = () => (
9898
<Box
99-
className="flex flex-col min-h-30 gap-4 flex-1 justify-end"
99+
className="flex flex-col flex-1 gap-4 justify-center"
100100
data-testid="rewards-onboarding-step4-info"
101101
>
102102
<img
103103
src="https://images.ctfassets.net/9sy2a0egs6zh/2W921m9iDZsozDlv1pNx4z/c04e3577afd665ae5434d8b7115c4bcc/rewards-onboarding-step4.png"
104-
className="z-10 object-contain self-center my-4"
104+
className="z-10 object-contain self-center"
105105
width={100}
106106
height={100}
107107
alt={t('rewardsOnboardingStep4Title')}
108108
/>
109+
109110
<Text variant={TextVariant.HeadingLg} className="text-center">
110111
{referralCodeIsValid
111112
? t('rewardsOnboardingStep4TitleWithReferralCode')

0 commit comments

Comments
 (0)