[HOTFIX]: calculating your uniqueness modal style (#322)

## Description

## Definition of Done

1. [ ] Acceptance criteria are met.
2. [ ] PR is manually tested before the merge by developer(s).
    - [ ] Happy path is manually checked.
3. [ ] PR is manually tested by QA when their assistance is required
(1).
- [ ] Octant Areas & Test Cases are checked for impact and updated if
required (2).
4. [ ] Unit tests are added unless there is a reason to omit them.
5. [ ] Automated tests are added when required.
6. [ ] The code is merged.
7. [ ] Tech documentation is added / updated, reviewed and approved
(including mandatory approval by a code owner, should such exist for
changed files).
    - [ ] BE: Swagger documentation is updated.
8. [ ] When required by QA:
    - [ ] Deployed to the relevant environment.
    - [ ] Passed system tests.

---

(1) Developer(s) in coordination with QA decide whether it's required.
For small tickets introducing small changes QA assistance is most
probably not required.

(2) [Octant Areas & Test
Cases](https://docs.google.com/spreadsheets/d/1cRe6dxuKJV3a4ZskAwWEPvrFkQm6rEfyUCYwLTYw_Cc).

client/src/components/Settings/ModalSettingsCalculatingYourUniqueness/ModalSettingsCalculatingYourUniqueness.module.scss

@@ -2,29 +2,38 @@
   min-width: 39rem;
 
   .imageWrapper {
-    height: 22.6rem;
-    width: 100%;
-    padding: 6.4rem 14.8rem 0;
+    height: 24rem;
+    padding: 6.4rem 0 4.9rem;
+
+    @media #{$desktop-up} {
+      height: 27.2rem;
+    }
 
     .image {
-      width: 17.6rem;
-      height: 16rem;
+      width: 12.4rem;
+      height: 11.2rem;
+
+      @media #{$desktop-up} {
+        width: 17.6rem;
+        height: 16rem;
+      }
     }
   }
 
   .text {
-    height: 19.8rem;
+    height: 22.2rem;
     line-height: 2.2rem;
-
+    margin-right: auto;
+
     &,
     * {
       font-size: $font-size-14;
     }
-  
+
     @media #{$desktop-up} {
-      height: 21.6rem;
+      height: 24.2rem;
       line-height: 2.4rem;
-  
+
       &,
       * {
         font-size: $font-size-16;
@@ -34,12 +43,12 @@
 
   .link {
     text-decoration: underline;
-
+    white-space: nowrap;
+
     @media #{$desktop-up} {
       text-decoration: none;
     }
   }
-
 }
 
 .stepper {
@@ -52,4 +61,4 @@
       width: 100%;
     }
   }
-}
+}

client/src/components/Settings/ModalSettingsCalculatingYourUniqueness/ModalSettingsCalculatingYourUniqueness.tsx

@@ -23,12 +23,10 @@ const ModalSettingsCalculatingYourUniqueness: FC<ModalSettingsCalculatingYourUni
 
   const steps = [
     <Trans
-      className={styles.onboardingModalText}
       components={[<Button className={styles.link} href={GITCOIN_PASSPORT} variant="link3" />]}
       i18nKey="views.settings.calculatingYourUniquenessStep1"
     />,
     <Trans
-      className={styles.onboardingModalText}
       components={[
         <Button
           className={styles.link}
@@ -39,7 +37,6 @@ const ModalSettingsCalculatingYourUniqueness: FC<ModalSettingsCalculatingYourUni
       i18nKey="views.settings.calculatingYourUniquenessStep2"
     />,
     <Trans
-      className={styles.onboardingModalText}
       components={[
         <Button className={styles.link} href={SCORING_20_FOR_HUMANS_GUIDE} variant="link3" />,
       ]}

client/src/locales/en/translation.json

@@ -538,7 +538,7 @@
       "addresses": "addresses",
       "calculatingYourUniqueness": "Calculating your uniqueness",
       "switchAccounts": "Switch accounts",
-      "calculatingYourUniquenessStep1": "To prove your uniqueness your need a <0>Gitcoin Passport</0> score of 20 or higher.<br/><br/>If you have this your donations will attract the maximum amount of match funding. If not, maximum match funding will be set to 20%.<br/><br/>You can increase your score in a couple of different ways.",
+      "calculatingYourUniquenessStep1": "To prove your uniqueness your need a <0>Gitcoin\u00a0Passport</0> score of 20 or higher.<br/><br/>If you have this your donations will attract the maximum amount of match funding. If not, maximum match funding will be set to 20%.<br/><br/>You can increase your score in a couple of different ways.",
       "calculatingYourUniquenessStep2": "You can go to our <0>Passport dashboard</0> and add stamps to the score for your Octant address.<br/><br/>If your Passport score is not on your primary address, you can delegate your score from another address with a 20+ Passport score. <br/><br/>You can only do this once, and it must be done before allocating to benefit the current epoch.",
       "calculatingYourUniquenessStep3": "Delegation will not link your addresses or compromise your privacy in any way.<br/><br/>We require proof of uniqueness to defend against sybil attacks as we have switched  to a quadratic funding model.<br/><br/> To learn more, check out Gitcoin’s handy guide to <0>scoring 20, for humans.</0>",
       "primary": "Primary",