feat: introduce new icons for import/export (#7970)

We found good one for export from MUI, but needed to created similar one for import. ![image](https://github.com/user-attachments/assets/f8ed2f07-5c8b-4829-a298-4b5e7311b059)
Unleash · Aug 22, 2024 · f7d5c8e · f7d5c8e
1 parent 4615ff4
commit f7d5c8e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/frontend/src/assets/icons/import.svg b/frontend/src/assets/icons/import.svg
diff --git a/...component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx b/...component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
@@ -11,7 +11,6 @@ import {
     Typography,
 } from '@mui/material';
 import Add from '@mui/icons-material/Add';
-import FileDownload from '@mui/icons-material/FileDownload';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -20,6 +19,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
 import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import IosShare from '@mui/icons-material/IosShare';
 
 const StyledActions = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -138,7 +138,7 @@ export const FeatureToggleListActions: FC<IFeatureFlagListActions> = ({
                                 }}
                             >
                                 <ListItemIcon>
-                                    <FileDownload />
+                                    <IosShare />
                                 </ListItemIcon>
                                 <ListItemText>
                                     <Typography variant='body2'>

diff --git a/...aginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx b/...aginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
@@ -13,7 +13,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { Search } from 'component/common/Search/Search';
 import { useUiFlag } from 'hooks/useUiFlag';
 import Add from '@mui/icons-material/Add';
-import FileDownload from '@mui/icons-material/FileDownload';
 import { styled } from '@mui/material';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { useSearchParams } from 'react-router-dom';
@@ -26,6 +25,7 @@ import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
 import { useFeedback } from 'component/feedbackNew/useFeedback';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { CreateFeatureDialog } from './CreateFeatureDialog';
+import IosShare from '@mui/icons-material/IosShare';
 
 interface IProjectFeatureTogglesHeaderProps {
     isLoading?: boolean;
@@ -165,7 +165,7 @@ export const ProjectFeatureTogglesHeader: FC<
                                                 marginRight: theme.spacing(2),
                                             })}
                                         >
-                                            <FileDownload />
+                                            <IosShare />
                                         </IconButton>
                                     </Tooltip>
 

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router';
 import useLoading from 'hooks/useLoading';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { ReactComponent as ImportSvg } from 'assets/icons/import.svg';
 import {
     StyledDiv,
     StyledFavoriteIconButton,
@@ -14,7 +15,6 @@ import {
     StyledTopRow,
 } from './Project.styles';
 import { Box, Paper, Tabs, Typography, styled } from '@mui/material';
-import FileUpload from '@mui/icons-material/FileUpload';
 import useToast from 'hooks/useToast';
 import useQueryParams from 'hooks/useQueryParams';
 import { useEffect, useState } from 'react';
@@ -230,7 +230,7 @@ export const Project = () => {
                                         data-testid={IMPORT_BUTTON}
                                         data-loading-project
                                     >
-                                        <FileUpload />
+                                        <ImportSvg />
                                     </PermissionIconButton>
                                 }
                             />