style(subscription): polish plan card styles

src/app/subscription/components/subscription-plan-card.module.css

@@ -7,8 +7,9 @@
   padding: var(--spacing-sm) var(--spacing-xs) 0;
   background: #ffffff;
   border: 1px solid transparent;
-  border-radius: 13px;
+  border-radius: 20px;
   border-style: solid;
+  box-shadow: 0 5px 7px 0 rgba(247, 89, 168, 0.1);
   cursor: pointer;
   text-align: center;
   overflow: hidden;
@@ -31,11 +32,7 @@
 .selected {
   border-color: #f657a0;
   border-width: 3px;
-  box-shadow: 0 3px 5px rgba(247, 89, 168, 0.1);
-}
-
-.firstSelected {
-  padding-top: 24px;
+  border-radius: 20px;
 }
 
 .name {
@@ -81,7 +78,7 @@
   align-self: stretch;
   margin: auto calc(-1 * var(--spacing-xs)) 0;
   padding: 6px 0;
-  border-radius: 0 0 13px 13px;
+  border-radius: 0;
   color: #ffffff;
   font-size: var(--font-size-md);
   font-weight: 600;

src/app/subscription/components/subscription-screen.module.css

@@ -64,6 +64,10 @@
   padding: 0 var(--spacing-xs);
 }
 
+.agreementLabel {
+  font-size: 17px;
+}
+
 .agreementLink {
   color: var(--color-auth-text-primary);
   font-weight: 700;

src/app/subscription/subscription-screen.tsx

@@ -192,7 +192,7 @@ export function SubscriptionScreen() {
               })
             }
             label={
-              <>
+              <span className={styles.agreementLabel}>
                 I agree to the{" "}
                 <a
                   href={AppConstants.privacyPolicyUrl}
@@ -211,7 +211,7 @@ export function SubscriptionScreen() {
                 >
                   Automatic renewal Agreement
                 </a>
-              </>
+              </span>
             }
           />
         </div>