remove custom icon button

src/components/Container.ts

@@ -19,23 +19,6 @@ export const DisclaimerContainer = styled('div')`
     font-size: 14px;
 `;
 
-export const IconButton = styled('button')`
-    background: none;
-    border: none;
-    border-radius: 50%;
-    padding: 5px;
-    color: inherit;
-    margin: 0 10px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &:focus,
-    &:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-    }
-`;
-
 export const Row = styled('div')`
     min-height: 32px;
     display: flex;
@@ -88,14 +71,3 @@ export const Overlay = styled(Box)`
     left: 0;
     z-index: 1; ;
 `;
-
-export const InvertedIconButton = styled(IconButton)`
-    background-color: ${({ theme }) => theme.palette.primary.main};
-    color: ${({ theme }) => theme.palette.background.default};
-    &:hover {
-        background-color: ${({ theme }) => theme.palette.grey.A100};
-    }
-    &:focus {
-        background-color: ${({ theme }) => theme.palette.primary.main};
-    }
-`;

src/components/PhotoSwipe/InfoDialog/FileNameEditForm.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import constants from 'utils/strings/constants';
 import { Col, Form, FormControl } from 'react-bootstrap';
-import { FlexWrapper, IconButton, Value } from 'components/Container';
+import { FlexWrapper, Value } from 'components/Container';
 import CloseIcon from '@mui/icons-material/Close';
 import TickIcon from '@mui/icons-material/Done';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 import { MAX_EDITED_FILE_NAME_LENGTH } from 'constants/file';
 import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';
+import { IconButton } from '@mui/material';
 
 export interface formValues {
     filename: string;

src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx

@@ -8,10 +8,11 @@ import {
     updateExistingFilePubMetadata,
 } from 'utils/file';
 import EditIcon from 'components/icons/EditIcon';
-import { IconButton, Label, Row, Value } from 'components/Container';
+import { Label, Row, Value } from 'components/Container';
 import { logError } from 'utils/sentry';
 import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';
 import EnteDateTimePicker from 'components/EnteDateTimePicker';
+import { IconButton } from '@mui/material';
 
 export function RenderCreationTime({
     shouldDisableEdits,

src/components/PhotoSwipe/InfoDialog/RenderFileName.tsx

@@ -8,15 +8,10 @@ import {
     updateExistingFilePubMetadata,
 } from 'utils/file';
 import EditIcon from 'components/icons/EditIcon';
-import {
-    FreeFlowText,
-    IconButton,
-    Label,
-    Row,
-    Value,
-} from 'components/Container';
+import { FreeFlowText, Label, Row, Value } from 'components/Container';
 import { logError } from 'utils/sentry';
 import { FileNameEditForm } from './FileNameEditForm';
+import { IconButton } from '@mui/material';
 
 export const getFileTitle = (filename, extension) => {
     if (extension) {

src/components/Sidebar/Header.tsx

@@ -16,7 +16,7 @@ export default function HeaderSection({ closeSidebar }: IProps) {
                 aria-label="close"
                 onClick={closeSidebar}
                 sx={{ color: 'stroke.secondary' }}>
-                <CloseIcon fontSize="small" />
+                <CloseIcon fontSize="small" color="stroke." />
             </IconButton>
         </SpaceBetweenFlex>
     );

src/components/pages/dedupe/SelectedFileOptions.tsx

@@ -1,9 +1,9 @@
-import { FluidContainer, IconButton } from 'components/Container';
+import { FluidContainer } from 'components/Container';
 import { SelectionBar } from '../../Navbar/SelectionBar';
 import constants from 'utils/strings/constants';
 import DeleteIcon from 'components/icons/DeleteIcon';
 import React, { useContext } from 'react';
-import { styled } from '@mui/material';
+import { Box, IconButton, styled } from '@mui/material';
 import { DeduplicateContext } from 'pages/deduplicate';
 import { IconWithMessage } from 'components/IconWithMessage';
 import { AppContext } from 'pages/_app';
@@ -64,9 +64,9 @@ export default function DeduplicateOptions({
                         <BackButton />
                     </IconButton>
                 )}
-                <div>
+                <Box ml={'12px'}>
                     {count} {constants.SELECTED}
-                </div>
+                </Box>
             </FluidContainer>
             <input
                 type="checkbox"

src/components/pages/gallery/SelectedFileOptions.tsx

@@ -14,7 +14,7 @@ import { FIX_CREATION_TIME_VISIBLE_TO_USER_IDS } from 'constants/user';
 import { User } from 'types/user';
 import { SelectionBar } from '../../Navbar/SelectionBar';
 import { AppContext } from 'pages/_app';
-import { IconButton, Stack, Tooltip } from '@mui/material';
+import { Box, IconButton, Stack, Tooltip } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import RestoreIcon from '@mui/icons-material/Restore';
 import AddIcon from 'components/icons/AddIcon';
@@ -138,9 +138,9 @@ const SelectedFileOptions = ({
                 <IconButton onClick={clearSelection}>
                     <CloseIcon />
                 </IconButton>
-                <div>
+                <Box ml={'12px'}>
                     {count} {constants.SELECTED}
-                </div>
+                </Box>
             </FluidContainer>
             <Stack spacing={2} direction="row" mr={2}>
                 {activeCollection === TRASH_SECTION ? (