remove all unnecesary local icons

src/components/ExportModal.tsx

@@ -15,10 +15,10 @@ import { Label, Row, Value } from './Container';
 import ExportFinished from './ExportFinished';
 import ExportInit from './ExportInit';
 import ExportInProgress from './ExportInProgress';
-import FolderIcon from './icons/FolderIcon';
-import InProgressIcon from './icons/InProgressIcon';
+import FolderIcon from '@mui/icons-material/Folder';
 import DialogBox from './DialogBox';
 import { ExportStage, ExportType } from 'constants/export';
+import EnteSpinner from './EnteSpinner';
 
 const FolderIconWrapper = styled('div')`
     width: 15%;
@@ -354,7 +354,7 @@ export default function ExportModal(props: Props) {
                 <Row>
                     <Label width="40%">{constants.TOTAL_EXPORT_SIZE} </Label>
                     <Value width="60%">
-                        {exportSize ? `${exportSize}` : <InProgressIcon />}
+                        {exportSize ? `${exportSize}` : <EnteSpinner />}
                     </Value>
                 </Row>
             </div>

src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx

@@ -7,7 +7,7 @@ import {
     formatDateTime,
     updateExistingFilePubMetadata,
 } from 'utils/file';
-import EditIcon from 'components/icons/EditIcon';
+import EditIcon from '@mui/icons-material/Edit';
 import { Label, Row, Value } from 'components/Container';
 import { logError } from 'utils/sentry';
 import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';

src/components/PhotoSwipe/InfoDialog/RenderFileName.tsx

@@ -7,7 +7,7 @@ import {
     splitFilenameAndExtension,
     updateExistingFilePubMetadata,
 } from 'utils/file';
-import EditIcon from 'components/icons/EditIcon';
+import EditIcon from '@mui/icons-material/Edit';
 import { FreeFlowText, Label, Row, Value } from 'components/Container';
 import { logError } from 'utils/sentry';
 import { FileNameEditForm } from './FileNameEditForm';

src/components/Sidebar/HelpSection.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useState } from 'react';
 import SidebarButton from './Button';
 import constants from 'utils/strings/constants';
 import ExportModal from 'components/ExportModal';
-import InProgressIcon from 'components/icons/InProgressIcon';
 import exportService from 'services/exportService';
 import { convertBytesToHumanReadable } from 'utils/billing';
 import { getEndpoint } from 'utils/common/apiUtil';
@@ -13,6 +12,7 @@ import { AppContext } from 'pages/_app';
 import { useLocalState } from 'hooks/useLocalState';
 import { LS_KEYS } from 'utils/storage/localStorage';
 import { UserDetails } from 'types/user';
+import EnteSpinner from 'components/EnteSpinner';
 
 export default function HelpSection() {
     const [userDetails] = useLocalState<UserDetails>(LS_KEYS.USER_DETAILS);
@@ -36,7 +36,7 @@ export default function HelpSection() {
         } else {
             setDialogMessage({
                 title: constants.DOWNLOAD_APP,
-                content: constants.DOWNLOAD_APP_MESSAGE(),
+                content: constants.DOWNLOAD_APP_MESSAGE,
 
                 proceed: {
                     text: constants.DOWNLOAD,
@@ -66,7 +66,7 @@ export default function HelpSection() {
                 <div style={{ display: 'flex' }}>
                     {constants.EXPORT}
                     <div style={{ width: '20px' }} />
-                    {exportService.isExportInProgress() && <InProgressIcon />}
+                    {exportService.isExportInProgress() && <EnteSpinner />}
                 </div>
             </SidebarButton>
             <ExportModal

src/components/UploadProgress/title.tsx

@@ -11,9 +11,9 @@ import {
 import { SpaceBetweenFlex } from 'components/Container';
 import { UPLOAD_STAGES } from 'constants/upload';
 import constants from 'utils/strings/constants';
-import { MaximizeIcon } from 'components/icons/Maximize';
-import { MinimizeIcon } from 'components/icons/Minimize';
 import UploadProgressContext from 'contexts/uploadProgress';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 
 const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
     backgroundColor: theme.palette.secondary.main,
@@ -53,7 +53,7 @@ export function UploadProgressTitle() {
                 <Box>
                     <Stack direction={'row'} spacing={1}>
                         <IconButtonWithBG onClick={toggleExpanded}>
-                            {expanded ? <MinimizeIcon /> : <MaximizeIcon />}
+                            {expanded ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
                         </IconButtonWithBG>
                         <IconButtonWithBG onClick={onClose}>
                             <Close />

src/components/icons/AddIcon.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-export default function AddIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <g>
-                <rect fill="none" height="24" width="24" />
-            </g>
-            <g>
-                <g>
-                    <path d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z" />
-                </g>
-            </g>
-        </svg>
-    );
-}
-
-AddIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/Archive.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function Archive(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M10 3h4v5h3l-5 5-5-5h3v-5zm8.546 0h-2.344l5.467 9h-4.669l-2.25 3h-5.5l-2.25-3h-4.666l5.46-9h-2.317l-5.477 8.986v9.014h24v-9.014l-5.454-8.986z" />
-        </svg>
-    );
-}
-
-Archive.defaultProps = {
-    height: 28,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/ArrowEast.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function ArrowEast(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            {...props}>
-            <rect fill="none" height="24" width="24" />
-            <path d="M15,5l-1.41,1.41L18.17,11H2V13h16.17l-4.59,4.59L15,19l7-7L15,5z" />
-        </svg>
-    );
-}
-
-ArrowEast.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/ClockIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function ClockIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            {...props}>
-            <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 12v-6h-2v8h7v-2h-5z" />
-        </svg>
-    );
-}
-
-ClockIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/CloudUpload.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function CloudUpload(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z" />
-        </svg>
-    );
-}
-
-CloudUpload.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/CollectionIcon.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export default function CollectionIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M6.083 4c1.38 1.612 2.578 3 4.917 3h11v13h-20v-16h4.083zm.917-2h-7v20h24v-17h-13c-1.629 0-2.305-1.058-4-3z" />
-        </svg>
-    );
-}
-
-CollectionIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/CopyIcon.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export default function CopyIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
-        </svg>
-    );
-}
-
-CopyIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/DateIcon.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export default function DateIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm-4.5-7a2.5 2.5 0 0 0 0 5 2.5 2.5 0 0 0 0-5z" />
-        </svg>
-    );
-}
-
-DateIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/DeleteIcon.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-export default function DeleteIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M0 0h24v24H0z" fill="none" />
-            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-        </svg>
-    );
-}
-
-DeleteIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-    open: false,
-};

src/components/icons/DownloadIcon.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-export default function DownloadIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <g>
-                <rect fill="none" height="24" width="24" />
-            </g>
-            <g>
-                <path d="M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z" />
-            </g>
-        </svg>
-    );
-}
-
-DownloadIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/EditIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function EditIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-        </svg>
-    );
-}
-
-EditIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/ExpandLess.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-export default function ExpandLess(props) {
-    return (
-        <div>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="#000000">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" />
-            </svg>
-        </div>
-    );
-}
-
-ExpandLess.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-    open: false,
-};

src/components/icons/ExpandMore.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-export default function ExpandMore(props) {
-    return (
-        <div>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="#000000">
-                <path d="M24 24H0V0h24v24z" fill="none" opacity=".87" />
-                <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" />
-            </svg>
-        </div>
-    );
-}
-
-ExpandMore.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-    open: false,
-};

src/components/icons/FavIcon.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material';
-const HeartUI = styled('div')<{
-    isActive: boolean;
-    size: number;
-}>(
-    ({ isActive, size }) => `
-    width: ${size}px;
-    height: ${size}px;
-    float: right;
-    background: url('/fav-button.png') no-repeat;
-    cursor: pointer;
-    background-size: cover;
-    border: none;
-    ${
-        isActive &&
-        `background-position: -${
-            size * 44
-        }px;transition: background 1s steps(28);`
-    }
-`
-);
-
-export default function FavIcon({ isActive, size }) {
-    return <HeartUI isActive={isActive} size={size} />;
-}
-
-FavIcon.defaultProps = {
-    size: 44,
-};

src/components/icons/FileUploadIcon.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-export default function FileUploadIcon(props) {
-    return (
-        <svg
-            width={props.width}
-            height={props.height}
-            viewBox={props.viewBox}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M28 25.3333V6.66667C28 5.2 26.8 4 25.3333 4H6.66667C5.2 4 4 5.2 4 6.66667V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333ZM11.8667 18.64L14.6667 22.0133L18.8 16.6933C19.0667 16.3467 19.6 16.3467 19.8667 16.7067L24.5467 22.9467C24.88 23.3867 24.56 24.0133 24.0133 24.0133H8.02667C7.46667 24.0133 7.16 23.3733 7.50667 22.9333L10.8267 18.6667C11.08 18.32 11.5867 18.3067 11.8667 18.64V18.64Z"
-                fill="black"
-            />
-        </svg>
-    );
-}
-
-FileUploadIcon.defaultProps = {
-    height: 32,
-    width: 32,
-    viewBox: '0 0 32 32',
-};

src/components/icons/FolderIcon.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-export default function FolderIcon(props) {
-    return (
-        <div>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="#000000">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" />
-            </svg>
-        </div>
-    );
-}
-
-FolderIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-    open: false,
-};

src/components/icons/FolderUploadIcon.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-export default function FolderUploadIcon(props) {
-    return (
-        <svg
-            width={props.width}
-            height={props.height}
-            viewBox={props.viewBox}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M24.333 23.3333H2.99967V7.33333C2.99967 6.6 2.39967 6 1.66634 6C0.933008 6 0.333008 6.6 0.333008 7.33333V23.3333C0.333008 24.8 1.53301 26 2.99967 26H24.333C25.0663 26 25.6663 25.4 25.6663 24.6667C25.6663 23.9333 25.0663 23.3333 24.333 23.3333Z"
-                fill="black"
-            />
-            <path
-                d="M26.9993 3.33366H17.666L15.786 1.45366C15.2793 0.946992 14.5993 0.666992 13.8927 0.666992H8.33268C6.86602 0.666992 5.67935 1.86699 5.67935 3.33366L5.66602 18.0003C5.66602 19.467 6.86602 20.667 8.33268 20.667H26.9993C28.466 20.667 29.666 19.467 29.666 18.0003V6.00033C29.666 4.53366 28.466 3.33366 26.9993 3.33366ZM22.9993 15.3337H12.3327C11.786 15.3337 11.466 14.707 11.7993 14.267L13.6393 11.827C13.906 11.467 14.4393 11.467 14.706 11.827L16.3327 14.0003L19.2927 10.0403C19.5593 9.68033 20.0927 9.68033 20.3594 10.0403L23.5327 14.267C23.866 14.707 23.546 15.3337 22.9993 15.3337Z"
-                fill="black"
-            />
-        </svg>
-    );
-}
-
-FolderUploadIcon.defaultProps = {
-    height: 32,
-    width: 32,
-    viewBox: '0 0 32 32',
-};

src/components/icons/ImageIcon.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function ImageIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" />
-        </svg>
-    );
-}
-
-ImageIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/InProgressIcon.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material';
-const Rotate = styled('div')<{ disabled }>`
-    width: 24px;
-    height: 27px;
-    ${(props) =>
-        !props.disabled && '-webkit-animation: rotation 1s infinite linear'};
-    cursor: ${(props) => props.disabled && 'pointer'};
-    transition-duration: 0.8s;
-    transition-property: transform;
-    &:hover {
-        color: #fff;
-        transform: rotate(90deg);
-        -webkit-transform: rotate(90deg);
-    }
-`;
-export default function InProgressIcon(props) {
-    return (
-        <Rotate {...props}>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="#000000">
-                <path d="M.01 0h24v24h-24V0z" fill="none" />
-                <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
-            </svg>
-        </Rotate>
-    );
-}
-InProgressIcon.defaultProps = {
-    disabled: false,
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/LeftArrow.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-export default function LeftArrow(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width={props.width}
-            height={props.height}
-            viewBox={props.viewBox}
-            fill="currentColor"
-            className="bi bi-arrow-left">
-            <path
-                fillRule="evenodd"
-                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
-            />
-        </svg>
-    );
-}
-
-LeftArrow.defaultProps = {
-    height: 28,
-    width: 28,
-    viewBox: '0 0 16 16',
-};

src/components/icons/LivePhotoIndicatorOverlay.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material';
-const Wrapper = styled('div')`
-    font-size: 10px;
-    position: absolute;
-    padding: 2px;
-    right: 5px;
-    top: 5px;
-`;
-export default function LivePhotoIndicatorOverlay(props) {
-    return (
-        <Wrapper>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="currentColor">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79zM1 10.5h3v2H1zM11 .55h2V3.5h-2zm8.04 2.495l1.408 1.407-1.79 1.79-1.407-1.408zm-1.8 15.115l1.79 1.8 1.41-1.41-1.8-1.79zM20 10.5h3v2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm-1 4h2v2.95h-2zm-7.45-.96l1.41 1.41 1.79-1.8-1.41-1.41z" />
-            </svg>
-        </Wrapper>
-    );
-}
-
-LivePhotoIndicatorOverlay.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/LocationIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function LocationIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z" />
-            <circle cx="12" cy="9" r="2.5" />
-        </svg>
-    );
-}
-
-LocationIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/Maximize.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import OpenInFullIcon from '@mui/icons-material/OpenInFull';
-
-export function MaximizeIcon() {
-    return (
-        <OpenInFullIcon
-            sx={{
-                padding: '4px',
-                transform: 'rotate(90deg)',
-            }}
-        />
-    );
-}

src/components/icons/Minimize.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
-
-export function MinimizeIcon() {
-    return (
-        <CloseFullscreenIcon
-            sx={{
-                padding: '4px',
-                transform: 'rotate(90deg)',
-            }}
-        />
-    );
-}

src/components/icons/MoveIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function MoveIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" />
-        </svg>
-    );
-}
-
-MoveIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/PlayCircleOutline.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function PlayCircleOutline(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M0 0h24v24H0z" fill="none" />
-            <path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
-        </svg>
-    );
-}
-
-PlayCircleOutline.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/RemoveIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function RemoveIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
-        </svg>
-    );
-}
-
-RemoveIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/RestoreIcon.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function RestoreIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M13 3c-4.97 0-9 4.03-9 9H1l4 3.99L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
-        </svg>
-    );
-}
-
-RestoreIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/SadFace.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-export default function SadFace(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <circle cx="15.5" cy="9.5" r="1.5" />
-            <circle cx="8.5" cy="9.5" r="1.5" />
-            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z" />
-        </svg>
-    );
-}
-
-SadFace.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/UnArchive.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function UnArchive(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M24 11.986v9.014h-24v-9.014l5.477-8.986h2.317l-5.46 9h4.666l2.25 3h5.5l2.25-3h4.669l-5.467-9h2.344l5.454 8.986zm-10-3.986h3l-5-5-5 5h3v5h4v-5zm-11.666 4" />
-        </svg>
-    );
-}
-
-UnArchive.defaultProps = {
-    height: 28,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

src/components/icons/VideoIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function VideoIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" />
-        </svg>
-    );
-}
-
-VideoIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/Visibility.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-export default function Visibility(props) {
-    return (
-        <div>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="#000000">
-                <path d="M0 0h24v24H0z" fill="none" />
-                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
-            </svg>
-        </div>
-    );
-}
-
-Visibility.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-    open: false,
-};

src/components/icons/VisibilityOff.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-export default function VisibilityOff(props) {
-    return (
-        <div>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="#000000">
-                <path
-                    d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
-                    fill="none"
-                />
-                <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
-            </svg>
-        </div>
-    );
-}
-
-VisibilityOff.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-    open: false,
-};

src/components/icons/WarningIcon.tsx

@@ -1,31 +0,0 @@
-import {
-    ButtonVariant,
-    getVariantColor,
-} from 'components/pages/gallery/LinkButton';
-import React from 'react';
-
-export default function WarningIcon(props) {
-    return (
-        <div
-            style={{
-                color: getVariantColor(ButtonVariant.danger),
-                display: 'inline-block',
-                padding: '0 10px',
-            }}>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height={props.height}
-                viewBox={props.viewBox}
-                width={props.width}
-                fill="currentColor">
-                <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z" />
-            </svg>
-        </div>
-    );
-}
-
-WarningIcon.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/icons/power_settings.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-export default function PowerSettings(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-                fill="#ff6666"
-                d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"
-            />
-        </svg>
-    );
-}
-
-PowerSettings.defaultProps = {
-    height: 24,
-    width: 24,
-    viewBox: '0 0 24 24',
-};

src/components/pages/dedupe/SelectedFileOptions.tsx

@@ -1,7 +1,6 @@
 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 { Box, IconButton, styled } from '@mui/material';
 import { DeduplicateContext } from 'pages/deduplicate';
@@ -9,6 +8,7 @@ import { IconWithMessage } from 'components/IconWithMessage';
 import { AppContext } from 'pages/_app';
 import CloseIcon from '@mui/icons-material/Close';
 import BackButton from '@mui/icons-material/ArrowBackOutlined';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const VerticalLine = styled('div')`
     position: absolute;
@@ -64,7 +64,7 @@ export default function DeduplicateOptions({
                         <BackButton />
                     </IconButton>
                 )}
-                <Box ml={'12px'}>
+                <Box ml={1.5}>
                     {count} {constants.SELECTED}
                 </Box>
             </FluidContainer>

src/components/pages/gallery/PreviewCard.tsx

@@ -8,7 +8,7 @@ import { GalleryContext } from 'pages/gallery';
 import { GAP_BTW_TILES, IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
-import LivePhotoIndicatorOverlay from 'components/icons/LivePhotoIndicatorOverlay';
+import LivePhotoIndicatorOverlay from '@mui/icons-material/LightMode';
 import { isLivePhoto } from 'utils/file';
 import { DeduplicateContext } from 'pages/deduplicate';
 import { logError } from 'utils/sentry';

src/components/pages/gallery/SelectedFileOptions.tsx

@@ -17,7 +17,7 @@ import { AppContext } from 'pages/_app';
 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';
+import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ClockIcon from '@mui/icons-material/AccessTime';
 import DownloadIcon from '@mui/icons-material/Download';
@@ -138,7 +138,7 @@ const SelectedFileOptions = ({
                 <IconButton onClick={clearSelection}>
                     <CloseIcon />
                 </IconButton>
-                <Box ml={'12px'}>
+                <Box ml={1.5}>
                     {count} {constants.SELECTED}
                 </Box>
             </FluidContainer>