update plan tiles

src/components/pages/gallery/PlanSelector/plans/button.tsx

@@ -0,0 +1,60 @@
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import Done from '@mui/icons-material/Done';
+import { Button } from '@mui/material';
+import { SpaceBetweenFlex } from 'components/Container';
+import React from 'react';
+import constants from 'utils/strings/constants';
+export function PlanIconButton({
+    current,
+    onClick,
+}: {
+    current: boolean;
+    onClick: () => void;
+}) {
+    return current ? (
+        <DisabledPlanTileButton />
+    ) : (
+        <EnabledPlanTileButton onClick={onClick} />
+    );
+}
+
+function DisabledPlanTileButton() {
+    return (
+        <Button
+            color="accent"
+            disabled={true}
+            sx={(theme) => ({
+                mt: 6,
+                '&&': {
+                    color: theme.palette.accent.main,
+                    borderColor: theme.palette.accent.main,
+                },
+            })}
+            fullWidth
+            onClick={() => null}
+            variant={'outlined'}>
+            <SpaceBetweenFlex>
+                {constants.ACTIVE}
+                <Done />
+            </SpaceBetweenFlex>
+        </Button>
+    );
+}
+
+function EnabledPlanTileButton({ onClick }) {
+    return (
+        <Button
+            color="accent"
+            sx={{
+                mt: 6,
+            }}
+            fullWidth
+            onClick={onClick}
+            variant={'contained'}>
+            <SpaceBetweenFlex>
+                {constants.CHOOSE_PLAN_BTN}
+                <ChevronRight />
+            </SpaceBetweenFlex>
+        </Button>
+    );
+}

src/components/pages/gallery/PlanSelector/plans/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { isUserSubscribedPlan, convertBytesToGBs } from 'utils/billing';
 import { PlanCard } from './planCard';
 
 const Plans = ({ plans, planPeriod, subscription, onPlanSelect }) => (
@@ -8,19 +7,17 @@ const Plans = ({ plans, planPeriod, subscription, onPlanSelect }) => (
             display: 'flex',
             justifyContent: 'space-around',
             flexWrap: 'wrap',
-            minHeight: '212px',
+            minHeight: '230px',
-            margin: '5px 0',
+            marginTop: '32px',
         }}>
         {plans
             ?.filter((plan) => plan.period === planPeriod)
             ?.map((plan) => (
                 <PlanCard
                     key={plan.stripeID}
-                    isUserSubscribedPlan={isUserSubscribedPlan}
                     plan={plan}
                     subscription={subscription}
                     onPlanSelect={onPlanSelect}
-                    convertBytesToGBs={convertBytesToGBs}
                 />
             ))}
     </div>

src/components/pages/gallery/PlanSelector/plans/planCard.tsx

@@ -1,72 +1,37 @@
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { PlanIconButton } from './button';
+import { Typography } from '@mui/material';
 import React from 'react';
-import { Button } from 'react-bootstrap';
+import { isUserSubscribedPlan, convertBytesToGBs } from 'utils/billing';
 import constants from 'utils/strings/constants';
-import { PlanTile } from './planTile';
+import { PLAN_PERIOD } from '..';
+import PlanTile from './planTile';
+
+export function PlanCard({ plan, subscription, onPlanSelect }) {
+    const handleClick = () => {
+        !isUserSubscribedPlan(plan, subscription) && onPlanSelect(plan);
+    };
 
-export function PlanCard({
-    isUserSubscribedPlan,
-    plan,
-    subscription,
-    onPlanSelect,
-    convertBytesToGBs,
-}) {
     return (
         <PlanTile
             key={plan.stripeID}
-            className="subscription-plan-selector"
+            current={isUserSubscribedPlan(plan, subscription)}
-            currentlySubscribed={isUserSubscribedPlan(plan, subscription)}
+            onClick={handleClick}>
-            onClick={
+            <Typography variant="title" fontWeight={900}>
-                isUserSubscribedPlan(plan, subscription)
+                {convertBytesToGBs(plan.storage, 0)}
-                    ? () => {}
+            </Typography>
-                    : async () => await onPlanSelect(plan)
+
-            }>
+            <Typography color="text.secondary" variant="title" fontWeight={500}>
-            <div>
+                {`${plan.price} / ${
-                <span
+                    plan.period === PLAN_PERIOD.MONTH
-                    style={{
+                        ? constants.MONTH_SHORT
-                        color: '#ECECEC',
+                        : constants.YEAR_SHORT
-                        fontWeight: 900,
+                }`}
-                        fontSize: '40px',
+            </Typography>
-                        lineHeight: '40px',
+
-                    }}>
+            <PlanIconButton
-                    {convertBytesToGBs(plan.storage, 0)}
+                current={isUserSubscribedPlan(plan, subscription)}
-                </span>
+                onClick={handleClick}
-                <span
+            />
-                    style={{
-                        color: '#858585',
-                        fontSize: '24px',
-                        fontWeight: 900,
-                    }}>
-                    {' '}
-                    GB
-                </span>
-            </div>
-            <div
-                className="bold-text"
-                style={{
-                    color: '#aaa',
-                    lineHeight: '36px',
-                    fontSize: '20px',
-                }}>
-                {`${plan.price} / ${plan.period}`}
-            </div>
-            <Button
-                variant="outline-success"
-                block
-                style={{
-                    marginTop: '20px',
-                    fontSize: '14px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                }}
-                disabled={isUserSubscribedPlan(plan, subscription)}>
-                {constants.CHOOSE_PLAN_BTN}
-                <ArrowForwardIcon
-                    style={{
-                        marginLeft: '5px',
-                    }}
-                />
-            </Button>
         </PlanTile>
     );
 }

src/components/pages/gallery/PlanSelector/plans/planTile.tsx

@@ -1,48 +1,74 @@
-import { css, styled } from '@mui/material';
+import { styled } from '@mui/material';
 
-export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>`
+// const OldPlanTile = styled('div')<{ currentlySubscribed: boolean }>`
-    border-radius: 20px;
+//     border-radius: 20px;
-    width: 220px;
+//     width: 220px;
-    border: 2px solid #333;
+//     border: 2px solid #333;
-    padding: 30px;
+//     padding: 30px;
-    margin: 10px;
+//     margin: 10px;
-    text-align: center;
+//     text-align: center;
-    font-size: 20px;
+//     font-size: 20px;
-    background-color: #ffffff00;
+//     background-color: #ffffff00;
-    display: flex;
+//     display: flex;
-    justify-content: center;
+//     justify-content: center;
-    align-items: center;
+//     align-items: center;
-    flex-direction: column;
+//     flex-direction: column;
-    cursor: ${(props) =>
+//     cursor: ${(props) =>
-        props.currentlySubscribed ? 'not-allowed' : 'pointer'};
+//         props.currentlySubscribed ? 'not-allowed' : 'pointer'};
-    border-color: ${(props) => props.currentlySubscribed && '#56e066'};
+//     border-color: ${(props) => props.currentlySubscribed && '#56e066'};
-    transition: all 0.3s ease-out;
+//     transition: all 0.3s ease-out;
-    overflow: hidden;
+//     overflow: hidden;
-    position: relative;
+//     position: relative;
 
-    & > div:first-child::before {
+//     & > div:first-child::before {
-        content: ' ';
+//         content: ' ';
-        height: 600px;
+//         height: 600px;
-        width: 50px;
+//         width: 50px;
-        background-color: #444;
+//         background-color: #444;
-        left: 0;
+//         left: 0;
-        top: -50%;
+//         top: -50%;
-        position: absolute;
+//         position: absolute;
-        transform: rotate(45deg) translateX(-200px);
+//         transform: rotate(45deg) translateX(-200px);
-        transition: all 0.5s ease-out;
+//         transition: all 0.5s ease-out;
-    }
+//     }
 
-    &:hover
+//     &:hover
-        ${(props) =>
+//         ${(props) =>
-            !props.currentlySubscribed &&
+//             !props.currentlySubscribed &&
-            css`
+//             css`
-                 {
+//                  {
-                    transform: scale(1.1);
+//                     transform: scale(1.1);
-                    background-color: #ffffff11;
+//                     background-color: #ffffff11;
-                }
+//                 }
-            `}
+//             `}
-        &:hover
+//         &:hover
-        > div:first-child::before {
+//         > div:first-child::before {
-        transform: rotate(45deg) translateX(300px);
+//         transform: rotate(45deg) translateX(300px);
-    }
+//     }
-`;
+// `;
+
+const PlanTile = styled('div')<{ current: boolean }>(({ theme, current }) => ({
+    padding: theme.spacing(3),
+    border: `1px solid ${theme.palette.divider}`,
+
+    '&:hover': {
+        backgroundColor: ' rgba(40, 214, 101, 0.11)',
+        cursor: 'pointer',
+    },
+    ...(current && {
+        borderColor: theme.palette.accent.main,
+        cursor: 'not-allowed',
+        '&:hover': { backgroundColor: 'transparent' },
+    }),
+    width: ' 260px',
+    borderRadius: '8px 8px 0 0',
+    '&:not(:first-of-type)': {
+        borderTopLeftRadius: '0',
+    },
+
+    '&:not(:last-of-type)': {
+        borderTopRightRadius: '0',
+    },
+}));
+
+export default PlanTile;

src/utils/billing/index.ts

@@ -30,7 +30,7 @@ enum RESPONSE_STATUS {
 }
 
 export function convertBytesToGBs(bytes, precision?): string {
-    return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2);
+    return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2) + ' GB';
 }
 
 export function convertBytesToHumanReadable(

src/utils/strings/englishConstants.tsx

@@ -263,6 +263,7 @@ const englishConstants = {
     CHOOSE_PLAN: 'Choose your subscription plan',
     MANAGE_PLAN: 'Manage your subscription',
     CHOOSE_PLAN_BTN: 'Choose plan',
+    ACTIVE: 'Active',
 
     OFFLINE_MSG: 'You are offline, cached memories are being shown',
 
@@ -775,6 +776,8 @@ const englishConstants = {
     FAMILY: 'Family',
     FREE: 'free',
     OF: 'of',
+    MONTH_SHORT: 'mo',
+    YEAR_SHORT: 'yr',
 };
 
 export default englishConstants;