From a60f1ec213bb90d3abe558cea5de42d57a5580d7 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 12:47:29 +0530
Subject: [PATCH] Tweak

---
 .../new/photos/components/PlanSelector.tsx    | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/web/packages/new/photos/components/PlanSelector.tsx b/web/packages/new/photos/components/PlanSelector.tsx
index f4ee5d39d0..2ccff68ddc 100644
--- a/web/packages/new/photos/components/PlanSelector.tsx
+++ b/web/packages/new/photos/components/PlanSelector.tsx
@@ -312,32 +312,32 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
 }) => (
     <>
         <Typography variant="h3">{t("choose_plan")}</Typography>
-        <Box>
-            <Stack spacing={3}>
-                <Box>
-                    <PeriodToggler
-                        planPeriod={planPeriod}
-                        togglePeriod={togglePeriod}
-                    />
-                    <Typography
-                        variant="small"
-                        sx={{ mt: 0.5, color: "text.muted" }}
-                    >
-                        {t("two_months_free")}
-                    </Typography>
-                </Box>
-                {children}
-                {subscription && addOnBonuses.length > 0 && (
-                    <>
+        <Stack sx={{ gap: 3 }}>
+            <Box>
+                <PeriodToggler
+                    planPeriod={planPeriod}
+                    togglePeriod={togglePeriod}
+                />
+                <Typography
+                    variant="small"
+                    sx={{ p: "8px 2px 0px 2px", color: "text.muted" }}
+                >
+                    {t("two_months_free")}
+                </Typography>
+            </Box>
+            {children}
+            {subscription && addOnBonuses.length > 0 && (
+                <Stack sx={{ gap: 2 }}>
+                    <Stack sx={{ gap: 1.5, p: 0.5 }}>
                         <AddOnBonusRows addOnBonuses={addOnBonuses} />
-                        <ManageSubscription
-                            {...{ onClose, setLoading, subscription }}
-                            hasAddOnBonus={true}
-                        />
-                    </>
-                )}
-            </Stack>
-        </Box>
+                    </Stack>
+                    <ManageSubscription
+                        {...{ onClose, setLoading, subscription }}
+                        hasAddOnBonus={true}
+                    />
+                </Stack>
+            )}
+        </Stack>
     </>
 );
 
@@ -409,7 +409,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
                     />
                     <Typography
                         variant="small"
-                        sx={{ mt: 0.5, color: "text.muted" }}
+                        sx={{ p: "8px 2px 0px 2px", color: "text.muted" }}
                     >
                         {t("two_months_free")}
                     </Typography>
@@ -417,7 +417,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
                 {children}
             </Stack>
 
-            <Stack sx={{ padding: "20px 8px 0px 8px", gap: 1 }}>
+            <Stack sx={{ padding: "20px 8px 0px 8px", gap: 2 }}>
                 <Typography sx={{ color: "text.muted" }}>
                     {!isSubscriptionCancelled(subscription)
                         ? t("subscription_status_renewal_active", {