refactor code

src/components/FullScreenDropZone.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
-import CloseIcon from './icons/CloseIcon';
+import CloseIcon from '@mui/icons-material/Close';
 
 const CloseButtonWrapper = styled.div`
     position: absolute;

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -37,7 +37,7 @@ import {
 import { livePhotoBtnHTML } from 'components/LivePhotoBtn';
 import { logError } from 'utils/sentry';
 
-import CloseIcon from 'components/icons/CloseIcon';
+import CloseIcon from '@mui/icons-material/Close';
 import TickIcon from 'components/icons/TickIcon';
 import { Formik } from 'formik';
 import * as Yup from 'yup';

src/components/Search/index.tsx

@@ -16,7 +16,7 @@ import constants from 'utils/strings/constants';
 import LocationIcon from '../icons/LocationIcon';
 import DateIcon from '../icons/DateIcon';
 import SearchIcon from '../icons/SearchIcon';
-import CloseIcon from '../icons/CloseIcon';
+import CloseIcon from '@mui/icons-material/Close';
 import { Collection } from 'types/collection';
 import CollectionIcon from '../icons/CollectionIcon';
 

src/components/Sidebar/Header.tsx

@@ -0,0 +1,29 @@
+import { Typography, IconButton } from '@mui/material';
+import React from 'react';
+import constants from 'utils/strings/constants';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface IProps {
+    closeSidebar: () => void;
+}
+
+export default function HeaderSection({ closeSidebar }: IProps) {
+    return (
+        <>
+            <Typography variant="h6">
+                <strong>{constants.ENTE}</strong>
+            </Typography>
+            <IconButton
+                aria-label="close"
+                onClick={closeSidebar}
+                sx={{
+                    position: 'absolute',
+                    right: 16,
+                    top: 16,
+                    color: (theme) => theme.palette.grey[400],
+                }}>
+                <CloseIcon />
+            </IconButton>
+        </>
+    );
+}

src/components/Sidebar/InfoSection.tsx

@@ -1,16 +1,11 @@
 import React, { useState } from 'react';
-import { IconButton, Typography } from '@mui/material';
-import constants from 'utils/strings/constants';
+import { Typography } from '@mui/material';
 import { SpaceBetweenFlex } from 'components/Container';
-import SubscriptionDetails from './SubscriptionDetails';
 import ThemeToggler from './ThemeToggler';
-import { DividerWithMargin } from './styledComponents';
 import { UserDetails } from 'types/user';
-import CloseIcon from '@mui/icons-material/Close';
 
 interface IProps {
     userDetails: UserDetails;
-    closeSidebar: () => void;
 }
 
 export enum THEMES {
@@ -18,33 +13,13 @@ export enum THEMES {
     DARK,
 }
 
-export default function InfoSection({ userDetails, closeSidebar }: IProps) {
+export default function InfoSection({ userDetails }: IProps) {
     const [theme, setTheme] = useState<THEMES>(THEMES.DARK);
 
     return (
-        <>
-            <Typography variant="h6">
-                <strong>{constants.ENTE}</strong>
-            </Typography>
-            <IconButton
-                aria-label="close"
-                onClick={closeSidebar}
-                sx={{
-                    position: 'absolute',
-                    right: 16,
-                    top: 16,
-                    color: (theme) => theme.palette.grey[400],
-                }}>
-                <CloseIcon />
-            </IconButton>
-            <DividerWithMargin />
-
         <SpaceBetweenFlex style={{ marginBottom: '20px' }}>
             <Typography pl="5px">{userDetails?.email}</Typography>
             <ThemeToggler theme={theme} setTheme={setTheme} />
         </SpaceBetweenFlex>
-
-            <SubscriptionDetails userDetails={userDetails} />
-        </>
     );
 }

src/components/Sidebar/index.tsx

@@ -12,6 +12,8 @@ import ExitSection from './ExitSection';
 import DebugLogs from './DebugLogs';
 import { DrawerSidebar, DividerWithMargin } from './styledComponents';
 import { AppContext } from 'pages/_app';
+import SubscriptionDetails from './SubscriptionDetails';
+import HeaderSection from './Header';
 
 export default function Sidebar() {
     const { sidebarView, closeSidebar } = useContext(AppContext);
@@ -31,11 +33,10 @@ export default function Sidebar() {
 
     return (
         <DrawerSidebar anchor="left" open={sidebarView} onClose={closeSidebar}>
-            <div>
-                <InfoSection
-                    userDetails={userDetails}
-                    closeSidebar={closeSidebar}
-                />
+            <HeaderSection closeSidebar={closeSidebar} />
+            <DividerWithMargin />
+            <InfoSection userDetails={userDetails} />
+            <SubscriptionDetails userDetails={userDetails} />
             <DividerWithMargin />
             <NavigationSection closeSidebar={closeSidebar} />
             <UtilitySection closeSidebar={closeSidebar} />
@@ -45,7 +46,6 @@ export default function Sidebar() {
             <ExitSection />
             <DividerWithMargin />
             <DebugLogs />
-            </div>
         </DrawerSidebar>
     );
 }

src/components/icons/CloseIcon.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export default function CloseIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-        </svg>
-    );
-}
-
-CloseIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/pages/gallery/SelectedFileOptions/GalleryOptions.tsx

@@ -2,7 +2,7 @@ import { SetDialogMessage } from 'components/MessageDialog';
 import React, { useEffect, useState } from 'react';
 import { SetCollectionSelectorAttributes } from '../CollectionSelector';
 import DeleteIcon from 'components/icons/DeleteIcon';
-import CloseIcon from 'components/icons/CloseIcon';
+import CloseIcon from '@mui/icons-material/Close';
 import AddIcon from 'components/icons/AddIcon';
 import { IconButton } from 'components/Container';
 import constants from 'utils/strings/constants';