update plan period toggler

src/components/pages/gallery/PlanSelector/periodToggler.tsx

@@ -1,41 +1,40 @@
-import { DeadCenter } from 'pages/gallery';
+import { styled, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import React from 'react';
-import { Form } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 import { PLAN_PERIOD } from '.';
 export function PeriodToggler({ planPeriod, togglePeriod }) {
-    return (
-        <DeadCenter>
-            <div
-                style={{
-                    display: 'flex',
-                }}>
-                <span
-                    className="bold-text"
-                    style={{
-                        fontSize: '16px',
-                    }}>
-                    {constants.MONTHLY}
-                </span>
+    const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
+        textTransform: 'none',
+        padding: '14px 42px',
+        borderRadius: '12px',
+        '&.Mui-selected': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+        },
+        '&.Mui-selected:hover': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+        },
+    }));
 
-                <Form.Switch
-                    checked={planPeriod === PLAN_PERIOD.YEAR}
-                    id="plan-period-toggler"
-                    style={{
-                        margin: '-4px 0 20px 15px',
-                        fontSize: '10px',
-                    }}
-                    className="custom-switch-md"
-                    onChange={togglePeriod}
-                />
-                <span
-                    className="bold-text"
-                    style={{
-                        fontSize: '16px',
-                    }}>
-                    {constants.YEARLY}
-                </span>
-            </div>
-        </DeadCenter>
+    const handleChange = (_, newPlanPeriod: PLAN_PERIOD) => {
+        if (newPlanPeriod !== null && newPlanPeriod !== planPeriod) {
+            togglePeriod();
+        }
+    };
+
+    return (
+        <ToggleButtonGroup
+            value={planPeriod}
+            exclusive
+            onChange={handleChange}
+            color="primary">
+            <CustomToggleButton value={PLAN_PERIOD.MONTH}>
+                {constants.MONTHLY}
+            </CustomToggleButton>
+            <CustomToggleButton value={PLAN_PERIOD.YEAR}>
+                {constants.YEARLY}
+            </CustomToggleButton>
+        </ToggleButtonGroup>
     );
 }

src/pages/gallery/index.tsx

@@ -147,7 +147,7 @@ export default function Gallery() {
         count: 0,
         collectionID: 0,
     });
-    const [planModalView, setPlanModalView] = useState(false);
+    const [planModalView, setPlanModalView] = useState(true);
     const [blockingLoad, setBlockingLoad] = useState(false);
     const [collectionSelectorAttributes, setCollectionSelectorAttributes] =
         useState<CollectionSelectorAttributes>(null);