Refactor generic, drive and referral signup styles, use helpers, rename class names

Author: Raphael Rychetsky

applications/account/src/app/signupCtx/flows/drive/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import './layout.scss';
 
 const Layout = ({ children }: { children: ReactNode }) => {
     return (
-        <div className="flex *:min-size-auto flex-nowrap flex-column h-full overflow-auto relative drive-signup drive-signup-bg-gradient">
+        <div className="flex *:min-size-auto flex-nowrap flex-column h-full overflow-auto relative scroll-smooth drive-signup drive-signup-bg-gradient">
             <div>{children}</div>
         </div>
     );

applications/account/src/app/signupCtx/flows/drive/components/Layout/Wrapper.tsx

@@ -7,7 +7,10 @@ export const Wrapper = ({ children, minHeight }: { children: ReactNode; minHeigh
             style={{ '--min-h-custom': minHeight }}
         >
             <div className="flex items-center justify-center h-full">
-                <div className="flex flex-column md:flex-row flex-nowrap items-center justify-center w-full drive-signup-layout-gap p-4">
+                <div
+                    className="flex flex-column md:flex-row flex-nowrap items-center justify-center w-full p-4 gap-4 md:gap-custom"
+                    style={{ '--md-gap-custom': 'min(7vw, 10rem)' }}
+                >
                     {children}
                 </div>
             </div>

applications/account/src/app/signupCtx/flows/drive/components/Layout/layout.scss

@@ -1,8 +1,6 @@
 @import '~@proton/styles/scss/lib';
 
 .drive-signup {
-	scroll-behavior: smooth;
-
 	.button-outline-norm {
 		--button-default-text-color: var(--interaction-norm-major-1);
 	}
@@ -11,15 +9,3 @@
 .drive-signup-bg-gradient {
 	background: linear-gradient(122deg, #fff 8.63%, #f7f5fe 69.23%);
 }
-
-.drive-signup-layout-gap {
-	gap: var(--space-4);
-
-	@include media('>medium') {
-		gap: 6rem;
-	}
-
-	@include media('>large') {
-		gap: 10rem;
-	}
-}

applications/account/src/app/signupCtx/flows/drive/components/PlanSelector/PlanCard.scss

@@ -1,6 +1,6 @@
 @import '~@proton/styles/scss/lib';
 
-.planCard {
+.drive-signup-plan-card {
 	--plan-card-border-width: 3px;
 	--plan-card-border-radius: calc(var(--border-radius-lg) + var(--plan-card-border-width));
 	--plan-card-highlight-gradient: conic-gradient(

applications/account/src/app/signupCtx/flows/drive/components/PlanSelector/PlanCard.tsx

@@ -45,14 +45,16 @@ const PlanCard = ({
     return (
         <div
             className={clsx(
-                'planCard w-full p-6 max-w-custom relative',
-                highlighted && 'planCard-highlighted',
-                highlighted && highlightVariant === PlanCardBorderVariant.Plain && 'planCard-highlighted--default'
+                'drive-signup-plan-card w-full p-6 max-w-custom relative',
+                highlighted && 'drive-signup-plan-card-highlighted',
+                highlighted &&
+                    highlightVariant === PlanCardBorderVariant.Plain &&
+                    'drive-signup-plan-card-highlighted--default'
             )}
             style={{ '--max-w-custom': '25rem' }}
         >
             {highlighted ? (
-                <span className="planCard-label p-2 text-center text-semibold">{highlightTitle}</span>
+                <span className="drive-signup-plan-card-label p-2 text-center text-semibold">{highlightTitle}</span>
             ) : undefined}
 
             <h3 className="text-bold text-xl mt-0 mb-2">{title}</h3>

applications/account/src/app/signupCtx/flows/drive/components/PricingCard/PricingCard.scss

@@ -1,4 +1,4 @@
-.pricing-card {
+.drive-signup-pricing-card {
 	&-inner,
 	&-top {
 		border-radius: var(--border-radius-xl);
@@ -21,12 +21,12 @@
 		}
 	}
 
-	&:has(.pricing-card-top) &-inner {
+	&:has(.drive-signup-pricing-card-top) &-inner {
 		z-index: 2;
 		border-radius: var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-xl) var(--border-radius-xl);
 	}
 
-	&:has(.pricing-card-top) &-top {
+	&:has(.drive-signup-pricing-card-top) &-top {
 		z-index: 1;
 		border-radius: var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-sm) var(--border-radius-sm);
 	}

applications/account/src/app/signupCtx/flows/drive/components/PricingCard/PricingCard.tsx

@@ -250,8 +250,8 @@ export const PricingCard = ({ step }: { step: PricingStep }) => {
 
     const showCouponBanner = hasFullCheckoutDetails && checkout.couponDiscount !== 0;
     const couponBanner = showCouponBanner && (
-        <div className="pricing-card-top w-full shadow-raised bg-norm mb-1">
-            <div className="pricing-card-top-content">
+        <div className="drive-signup-pricing-card-top w-full shadow-raised bg-norm mb-1">
+            <div className="drive-signup-pricing-card-top-content">
                 <div className="flex items-center gap-2 px-8 py-4 fade-in">
                     <IcBagPercentFilled className="shrink-0 color-primary" />
                     <span className="text-semibold" data-testid="discountBanner">{c('Signup')
@@ -262,9 +262,9 @@ export const PricingCard = ({ step }: { step: PricingStep }) => {
     );
 
     return (
-        <section className={clsx('pricing-card w-full flex flex-column')}>
+        <section className={clsx('drive-signup-pricing-card w-full flex flex-column')}>
             {couponBanner}
-            <div className="pricing-card-inner fade-in w-full flex flex-column shadow-raised gap-8 py-8 bg-norm">
+            <div className="drive-signup-pricing-card-inner fade-in w-full flex flex-column shadow-raised gap-8 py-8 bg-norm">
                 <PricingHeader />
                 <PricingFeatures />
                 <PricingFooter step={step} />

applications/account/src/app/signupCtx/flows/genericStart/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import './layout.scss';
 
 const Layout = ({ children }: { children: ReactNode }) => {
     return (
-        <div className="flex *:min-size-auto flex-nowrap flex-column h-full overflow-auto relative signup signup-bg-gradient">
+        <div className="flex *:min-size-auto flex-nowrap flex-column h-full overflow-auto relative scroll-smooth generic-signup generic-signup-bg-gradient">
             <div>{children}</div>
         </div>
     );

applications/account/src/app/signupCtx/flows/genericStart/components/Layout/Wrapper.tsx

@@ -7,7 +7,10 @@ export const Wrapper = ({ children, minHeight }: { children: ReactNode; minHeigh
             style={{ '--min-h-custom': minHeight }}
         >
             <div className="flex items-center justify-center h-full">
-                <div className="flex flex-column md:flex-row flex-nowrap items-center justify-center w-full signup-layout-gap p-4">
+                <div
+                    className="flex flex-column md:flex-row flex-nowrap items-center justify-center w-full p-4 gap-4 md:gap-custom"
+                    style={{ '--md-gap-custom': 'min(7vw, 10rem)' }}
+                >
                     {children}
                 </div>
             </div>

applications/account/src/app/signupCtx/flows/genericStart/components/Layout/layout.scss

@@ -1,25 +1,11 @@
 @import '~@proton/styles/scss/lib';
 
-.signup {
-	scroll-behavior: smooth;
-
+.generic-signup {
 	.button-outline-norm {
 		--button-default-text-color: var(--interaction-norm-major-1);
 	}
 }
 
-.signup-bg-gradient {
+.generic-signup-bg-gradient {
 	background: linear-gradient(122deg, #fff 8.63%, #f7f5fe 69.23%);
 }
-
-.signup-layout-gap {
-	gap: var(--space-4);
-
-	@include media('>medium') {
-		gap: 6rem;
-	}
-
-	@include media('>large') {
-		gap: 10rem;
-	}
-}