UI fixes button color and overflow

Author: sophieqgu

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

@@ -191,8 +191,8 @@ const OnboardingIntroStep: React.FC = () => {
    */
   const renderImage = () => (
     <Box
-      className="flex justify-center items-center my-4 absolute"
-      style={{ top: 180 }}
+      className="flex justify-center items-center absolute"
+      style={{ top: '25%' }}
       data-testid="rewards-onboarding-intro-image"
     >
       <img
@@ -227,7 +227,7 @@ const OnboardingIntroStep: React.FC = () => {
           candidateSubscriptionId === 'retry'
         }
         onClick={handleNext}
-        className="w-full my-2 bg-white"
+        className="w-full my-2 bg-white hover:bg-default-hover"
       >
         <Text variant={TextVariant.BodyMd} className="text-black font-medium">
           {t('rewardsOnboardingIntroStepConfirm')}

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

@@ -102,7 +102,7 @@ export default function OnboardingModal() {
           paddingTop: 0,
           paddingBottom: 0,
           style: {
-            height: '800px',
+            height: '740px',
             alignItems: 'center',
             justifyContent: 'center',
           },

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

@@ -31,7 +31,7 @@ const OnboardingStep1: React.FC = () => {
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
         focusable="false"
-        style={{ left: 0 }}
+        style={{ left: 0, top: 0 }}
       >
         <path
           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 = () => {
 
       <img
         src="https://images.ctfassets.net/9sy2a0egs6zh/5ieKFEvd1qM3crY76W751i/ab846811e550d4a84c12a063f468f30c/rewards-onboarding-step1.png"
-        className="w-full z-10 object-contain"
+        className="z-10 object-contain"
         data-testid="rewards-onboarding-step1-image"
+        width={'94%'}
       />
     </>
   );
 
   const renderStepInfo = () => (
     <Box
-      className="flex flex-col min-h-30 gap-2 flex-1 justify-end"
+      className="flex flex-col gap-2 flex-1 justify-end"
       data-testid="rewards-onboarding-step1-info"
     >
       <Text variant={TextVariant.HeadingLg} className="text-center">

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

@@ -31,7 +31,7 @@ const OnboardingStep2: React.FC = () => {
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
         focusable="false"
-        style={{ left: 0 }}
+        style={{ left: 0, top: 0 }}
       >
         <path
           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 = () => {
 
       <img
         src="https://images.ctfassets.net/9sy2a0egs6zh/2wG5gvQmC4d95TShVVpsEX/9bd7f199f47833fdc68e403a059713df/rewards-onboarding-step2.png"
-        className="w-full z-10 object-contain"
+        className="z-10 object-contain"
         data-testid="rewards-onboarding-step2-image"
+        width={'94%'}
       />
     </>
   );
 
   const renderStepInfo = () => (
     <Box
-      className="flex flex-col min-h-30 gap-2 flex-1 justify-end"
+      className="flex flex-col gap-2 flex-1 justify-end"
       data-testid="rewards-onboarding-step2-info"
     >
       <Text variant={TextVariant.HeadingLg} className="text-center">

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

@@ -31,7 +31,7 @@ const OnboardingStep3: React.FC = () => {
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
         focusable="false"
-        style={{ left: 0 }}
+        style={{ left: 0, top: 0 }}
       >
         <path
           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 = () => {
 
       <img
         src="https://images.ctfassets.net/9sy2a0egs6zh/7ERFcIMMLMTL4EekVoOana/a03bef86b2cb4f87fc5ee84afd427d21/rewards-onboarding-step3.png"
-        className="w-full z-10 object-contain"
+        className="z-10 object-contain"
         data-testid="rewards-onboarding-step3-image"
+        width={'94%'}
       />
     </>
   );
 
   const renderStepInfo = () => (
     <Box
-      className="flex flex-col min-h-30 gap-2 flex-1 justify-end"
+      className="flex flex-col gap-2 flex-1 justify-end"
       data-testid="rewards-onboarding-step3-info"
     >
       <Text variant={TextVariant.HeadingLg} className="text-center">

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

@@ -96,16 +96,17 @@ const OnboardingStep4: React.FC = () => {
 
   const renderStepInfo = () => (
     <Box
-      className="flex flex-col min-h-30 gap-4 flex-1 justify-end"
+      className="flex flex-col flex-1 gap-4 justify-center"
       data-testid="rewards-onboarding-step4-info"
     >
       <img
         src="https://images.ctfassets.net/9sy2a0egs6zh/2W921m9iDZsozDlv1pNx4z/c04e3577afd665ae5434d8b7115c4bcc/rewards-onboarding-step4.png"
-        className="z-10 object-contain self-center my-4"
+        className="z-10 object-contain self-center"
         width={100}
         height={100}
         alt={t('rewardsOnboardingStep4Title')}
       />
+
       <Text variant={TextVariant.HeadingLg} className="text-center">
         {referralCodeIsValid
           ? t('rewardsOnboardingStep4TitleWithReferralCode')