plan card tweaks

client/src/components/design-elements/PlanCard.tsx

@@ -1,5 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
+import Chip from "@mui/material/Chip";
+import { Button } from "@/components/inputs";
 import { BaseBox } from "@/components/design-elements";
 import {
   PersonStanding,
@@ -18,10 +20,12 @@ export const PlanCard = ({
   plan,
   currentPlan,
   onClick,
+  loading,
 }: {
   plan: Entitlements;
   currentPlan: PlanKey | null;
   onClick?: (planKey: PlanKey) => void;
+  loading?: boolean;
 }) => {
   const selected = plan.plan === currentPlan;
   const theme = useTheme();
@@ -89,17 +93,29 @@ export const PlanCard = ({
   return (
     <BaseBox
       padding={6}
-      sx={
-        selected
-          ? {
-              border: 2,
-              borderColor: theme.palette.accent.main,
-            }
-          : { cursor: "pointer" }
-      }
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        border: selected ? 2 : 1,
+        borderColor: selected ? theme.palette.accent.main : "divider",
+        transition:
+          "transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease",
+        ...(selected
+          ? {}
+          : {
+              cursor: "pointer",
+              "&:hover": {
+                transform: "scale(0.995)",
+                boxShadow: 2,
+                borderColor: theme.palette.action.active,
+              },
+            }),
+        position: "relative",
+      }}
       onClick={selected ? undefined : () => onClick?.(plan.plan)}
     >
-      <Stack spacing={3}>
+      <Stack spacing={3} sx={{ flexGrow: 1 }}>
         <Stack
           direction="row"
           alignItems="center"
@@ -108,7 +124,12 @@ export const PlanCard = ({
           <Typography variant="h6" textTransform="capitalize">
             {plan.plan}
           </Typography>
-          <Icon size={18} />
+          <Stack direction="row" alignItems="center" spacing={1}>
+            {plan.plan === "pro" && (
+              <Chip size="small" label="Most popular" sx={{ bgcolor: theme.palette.accent.main, color: theme.palette.getContrastText(theme.palette.accent.main) }} />
+            )}
+            <Icon size={18} />
+          </Stack>
         </Stack>
         <Divider />
         <Typography variant="h4" fontWeight={700}>
@@ -116,12 +137,7 @@ export const PlanCard = ({
         </Typography>
         <Stack spacing={2}>
           {featureItems.map((item) => (
-            <Stack
-              key={item.label}
-              direction="row"
-              alignItems="center"
-              gap={2}
-            >
+            <Stack key={item.label} direction="row" alignItems="center" gap={2}>
               <Check size={16} color={checkColor} />
               {item.tooltip ? (
                 <Tooltip title={item.tooltip} arrow placement="right">
@@ -138,6 +154,24 @@ export const PlanCard = ({
           ))}
         </Stack>
       </Stack>
+      <Stack direction="row" justifyContent="flex-end" pt={2}>
+        {selected ? null : (
+          // <Button variant="contained" color="accent" loading={loading}>
+          //   Manage
+          // </Button>
+          <Button
+            loading={loading}
+            variant="contained"
+            color="accent"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClick?.(plan.plan);
+            }}
+          >
+            Choose plan
+          </Button>
+        )}
+      </Stack>
     </BaseBox>
   );
 };

client/src/pages/billing/Billing.tsx

@@ -67,13 +67,18 @@ const BillingPage = () => {
         title="Choose a plan!"
         description="Choose a plan that fits your needs and start enjoying our services."
       />
-      <Grid container spacing={{ xs: 2, sm: 3, md: 4 }} columns={{ xs: 1, sm: 2, md: 4 }}>
+      <Grid
+        container
+        spacing={{ xs: 2, sm: 3, md: 4 }}
+        columns={{ xs: 1, sm: 2, md: 4 }}
+      >
         {plans.map((plan) => (
           <Grid key={plan.plan} size={1}>
             <PlanCard
               plan={plan}
               currentPlan={selectedPlan}
               onClick={handlePlanClick}
+              loading={isPosting}
             />
           </Grid>
         ))}