feat: update icons

tolgee · Aug 29, 2024 · 1f09882 · 1f09882
1 parent 1ed64b2
commit 1f09882
Show file tree

Hide file tree

Showing 21 changed files with 65 additions and 102 deletions.
diff --git a/webapp/src/component/AutoTranslationIcon.tsx b/webapp/src/component/AutoTranslationIcon.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
-import { MtIcon, TranslationMemoryIcon } from 'tg.component/CustomIcons';
+import { Mt, TranslationMemory } from 'tg.component/CustomIcons';
 import { useServiceImg } from 'tg.views/projects/translations/ToolsPanel/panels/MachineTranslation/useServiceImg';
 import { TranslationFlagIcon } from './TranslationFlagIcon';
 
@@ -45,9 +45,9 @@ export const AutoTranslationIcon: React.FC<Props> = ({
           {provider && providerImg ? (
             <StyledProviderImg src={providerImg} />
           ) : provider ? (
-            <MtIcon />
+            <Mt />
           ) : (
-            <TranslationMemoryIcon />
+            <TranslationMemory />
           )}
         </StyledImgWrapper>
       }

diff --git a/webapp/src/component/CustomIcons.tsx b/webapp/src/component/CustomIcons.tsx
@@ -1,50 +1,14 @@
-import React, { ComponentProps } from 'react';
-import { SvgIcon } from '@mui/material';
-
-import ExportSvg from '../svgs/icons/export.svg?react';
-import TadaSvg from '../svgs/icons/tada.svg?react';
-import RocketSvg from '../svgs/icons/rocket.svg?react';
-import QSFinishedSvg from '../svgs/icons/qs-finished.svg?react';
-import StarsSvg from '../svgs/icons/stars.svg?react';
-import SlackSvg from '../svgs/icons/slack.svg?react';
-export { default as DropzoneIcon } from '../svgs/icons/dropzone.svg?react';
-export { default as TaskDetailIcon } from '../svgs/icons/taskDetail.svg?react';
-export { default as IntegrationIcon } from '../svgs/icons/integration.svg?react';
+export { default as Slack } from '../svgs/icons/slack.svg?react';
+export { default as Stars } from '../svgs/icons/stars.svg?react';
+export { default as Dropzone } from '../svgs/icons/dropzone.svg?react';
+export { default as TaskDetail } from '../svgs/icons/taskDetail.svg?react';
+export { default as Integration } from '../svgs/icons/integration.svg?react';
 export { default as CheckCircleDash } from '../svgs/icons/check-circle-dash.svg?react';
-export { default as MtIcon } from '../svgs/icons/mt.svg?react';
-export { default as TranslationMemoryIcon } from '../svgs/icons/translation-memory.svg?react';
+export { default as Mt } from '../svgs/icons/mt.svg?react';
+export { default as TranslationMemory } from '../svgs/icons/translation-memory.svg?react';
 export { default as ViewCards } from '../svgs/icons/view-cards.svg?react';
 export { default as ViewList } from '../svgs/icons/view-list.svg?react';
-
-type IconProps = ComponentProps<typeof SvgIcon>;
-
-const CustomIcon: React.FC<IconProps & { icon: typeof ExportSvg }> = ({
-  icon,
-  ...props
-}) => {
-  const Icon = icon;
-  return (
-    <SvgIcon {...props}>
-      <Icon fill="currentColor" />
-    </SvgIcon>
-  );
-};
-
-export const TadaIcon: React.FC<IconProps> = (props) => (
-  <CustomIcon icon={TadaSvg} {...props} />
-);
-export const RocketIcon: React.FC<IconProps> = (props) => (
-  <CustomIcon icon={RocketSvg} {...props} />
-);
-
-export const QSFinishedIcon: React.FC<IconProps> = (props) => (
-  <CustomIcon icon={QSFinishedSvg} {...props} />
-);
-
-export const StarsIcon: React.FC<IconProps> = (props) => (
-  <CustomIcon icon={StarsSvg} {...props} />
-);
-
-export const SlackIcon: React.FC<IconProps> = (props) => (
-  <CustomIcon icon={SlackSvg} {...props} />
-);
+export { default as Rocket } from '../svgs/icons/rocket.svg?react';
+export { default as RocketFilled } from '../svgs/icons/rocket-filled.svg?react';
+export { default as Tada } from '../svgs/icons/tada.svg?react';
+export { default as QsFinished } from '../svgs/icons/qs-finished.svg?react';
diff --git a/webapp/src/component/HelpMenu.tsx b/webapp/src/component/HelpMenu.tsx
@@ -29,7 +29,7 @@ import {
   usePreferredOrganization,
   useUser,
 } from 'tg.globalContext/helpers';
-import { SlackIcon } from './CustomIcons';
+import { Slack } from './CustomIcons';
 
 const BASE_URL = 'https://app.chatwoot.com';
 let scriptPromise: Promise<void> | null = null;
@@ -196,7 +196,7 @@ export const HelpMenu = () => {
         </MenuItem>
         <MenuItem component={Link} {...buttonLink('https://tolg.ee/slack')}>
           <ListItemIcon>
-            <SlackIcon />
+            <Slack />
           </ListItemIcon>
           <ListItemText
             primary={t('help_menu_slack_community')}

diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartFinishStep.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartFinishStep.tsx
@@ -1,7 +1,7 @@
 import { Box, styled, useTheme } from '@mui/material';
 import { StyledLink } from './StyledComponents';
 import { useGlobalActions } from 'tg.globalContext/GlobalContext';
-import { TadaIcon } from 'tg.component/CustomIcons';
+import { Tada } from 'tg.component/CustomIcons';
 import { useTranslate } from '@tolgee/react';
 
 const StyledContainer = styled(Box)`
@@ -35,8 +35,10 @@ export const QuickStartFinishStep = () => {
   return (
     <StyledContainer data-cy="quick-start-finish-step">
       <StyledIndex>
-        <TadaIcon
-          sx={{ fontSize: 20, color: theme.palette.quickStart.finishIcon }}
+        <Tada
+          width={20}
+          height={20}
+          color={theme.palette.quickStart.finishIcon}
         />
       </StyledIndex>
       <Box display="grid">

diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartGuide.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartGuide.tsx
@@ -1,7 +1,7 @@
 import { Box, IconButton, styled } from '@mui/material';
 import { T } from '@tolgee/react';
 import { useMemo } from 'react';
-import { RocketIcon } from 'tg.component/CustomIcons';
+import { Rocket } from 'tg.component/CustomIcons';
 import {
   useGlobalActions,
   useGlobalContext,
@@ -67,7 +67,7 @@ export const QuickStartGuide = () => {
       <StyledArrow sx={{ opacity: topBarHeight ? 1 : 0 }} />
       <StyledHeader>
         <Box display="flex" gap="12px" alignItems="center">
-          <RocketIcon fontSize="small" />
+          <Rocket width={20} height={20} />
           <T keyName="guide_title" />
         </Box>
         <IconButton onClick={() => setQuickStartOpen(false)}>

diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartProgress.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartProgress.tsx
@@ -1,5 +1,5 @@
 import { styled, useTheme } from '@mui/material';
-import { QSFinishedIcon } from 'tg.component/CustomIcons';
+import { QsFinished } from 'tg.component/CustomIcons';
 
 const RADIUS = 45;
 const CIRCUIT = RADIUS * Math.PI * 2;
@@ -35,9 +35,9 @@ export const QuickStartProgress = ({ percent, size = 28 }: Props) => {
 
   if (percent === 1) {
     return (
-      <QSFinishedIcon
+      <QsFinished
         fillOpacity={0}
-        sx={{ color: theme.palette.quickStart.circleSuccess }}
+        style={{ color: theme.palette.quickStart.circleSuccess }}
       />
     );
   }

diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartTopBarButton.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartTopBarButton.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, styled } from '@mui/material';
-import { RocketIcon } from 'tg.component/CustomIcons';
+import { Rocket } from 'tg.component/CustomIcons';
 import {
   useGlobalActions,
   useGlobalContext,
@@ -34,7 +34,7 @@ export const QuickStartTopBarButton = () => {
             color="inherit"
           >
             <Box display="flex" gap={1} alignItems="center">
-              <RocketIcon fontSize="small" />
+              <Rocket width={20} height={20} />
               <QuickStartProgress percent={completedSteps / allSteps} />
             </Box>
           </StyledButton>

diff --git a/webapp/src/component/layout/TopBanner/Announcement.tsx b/webapp/src/component/layout/TopBanner/Announcement.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
-import { TadaIcon } from 'tg.component/CustomIcons';
+import { Tada } from 'tg.component/CustomIcons';
 import { BannerLink } from './BannerLink';
 
 type Props = {
@@ -36,7 +36,7 @@ export const Announcement = ({ content, link, icon, title }: Props) => {
   return (
     <StyledWrappableContent>
       <StyledContent>
-        {icon ? icon : <TadaIcon />}
+        {icon ? icon : <Tada />}
         {title && <StyledTitle>{title}</StyledTitle>}
         <div>{content}</div>
       </StyledContent>

diff --git a/webapp/src/component/slack/SlackConnectView.tsx b/webapp/src/component/slack/SlackConnectView.tsx
@@ -9,7 +9,7 @@ import { BoxLoading } from 'tg.component/common/BoxLoading';
 import { useUser } from 'tg.globalContext/helpers';
 import { UserAvatar } from 'tg.component/common/avatar/UserAvatar';
 import { TolgeeLogo } from 'tg.component/common/icons/TolgeeLogo';
-import { SlackIcon } from 'tg.component/CustomIcons';
+import { Slack } from 'tg.component/CustomIcons';
 import { LINKS } from 'tg.constants/links';
 import { TranslatedError } from 'tg.translationTools/TranslatedError';
 import LoadingButton from 'tg.component/common/form/LoadingButton';
@@ -127,12 +127,7 @@ export const SlackConnectView = () => {
                       description: user?.username,
                     }}
                     second={{
-                      platformImage: (
-                        <SlackIcon
-                          fontSize="inherit"
-                          style={{ fontSize: 20 }}
-                        />
-                      ),
+                      platformImage: <Slack width={20} height={20} />,
                       image: (
                         <StyledImage src={connectionInfo.data?.slackAvatar} />
                       ),

diff --git a/webapp/src/component/task/TaskItem.tsx b/webapp/src/component/task/TaskItem.tsx
@@ -4,7 +4,7 @@ import { useTranslate } from '@tolgee/react';
 import { Box, IconButton, styled, Tooltip, useTheme } from '@mui/material';
 import { AlarmClock, DotsVertical } from '@untitled-ui/icons-react';
 
-import { TaskDetailIcon } from 'tg.component/CustomIcons';
+import { TaskDetail } from 'tg.component/CustomIcons';
 import { components } from 'tg.service/apiSchema.generated';
 import { BatchProgress } from 'tg.views/projects/translations/BatchOperations/OperationsSummary/BatchProgress';
 import { useDateFormatter } from 'tg.hooks/useLocale';
@@ -182,7 +182,7 @@ export const TaskItem = ({
           size="small"
           onClick={stopAndPrevent(() => onDetailOpen(task))}
         >
-          <TaskDetailIcon />
+          <TaskDetail />
         </IconButton>
         <IconButton
           size="small"

diff --git a/webapp/src/svgs/icons/rocket.svg b/webapp/src/svgs/icons/rocket.svg
diff --git a/webapp/src/views/projects/import/component/ImportFileDropzone.tsx b/webapp/src/views/projects/import/component/ImportFileDropzone.tsx
@@ -11,7 +11,7 @@ import {
 } from 'tg.fixtures/FileUploadFixtures';
 
 import { MAX_FILE_COUNT } from './ImportFileInput';
-import { DropzoneIcon } from 'tg.component/CustomIcons';
+import { Dropzone } from 'tg.component/CustomIcons';
 
 export interface ScreenshotDropzoneProps {
   onNewFiles: (files: FilesType) => void;
@@ -55,7 +55,7 @@ const StyledWrapper = styled(Box)`
   }
 `;
 
-const StyledValidIcon = styled(DropzoneIcon)`
+const StyledValidIcon = styled(Dropzone)`
   width: 100px;
   height: 100px;
   color: ${({ theme }) => theme.palette.import.progressDone};

diff --git a/webapp/src/views/projects/import/component/ImportOperationTitle.tsx b/webapp/src/views/projects/import/component/ImportOperationTitle.tsx
@@ -1,7 +1,6 @@
 import { T } from '@tolgee/react';
 import { OperationType } from './ImportFileInput';
-import React from 'react';
-import { TadaIcon } from 'tg.component/CustomIcons';
+import { Tada } from 'tg.component/CustomIcons';
 import { Box } from '@mui/material';
 import { ImportInputAreaLayoutTitle } from './ImportInputAreaLayout';
 
@@ -13,7 +12,9 @@ export const ImportOperationTitle = (props: {
   const Message = () => {
     if (props.importDone) {
       return (
-        <ImportInputAreaLayoutTitle icon={<TadaIcon sx={{ ml: 1 }} />}>
+        <ImportInputAreaLayoutTitle
+          icon={<Tada style={{ marginLeft: '8px' }} />}
+        >
           <T keyName="import-data-imported-info" />
         </ImportInputAreaLayoutTitle>
       );

diff --git a/webapp/src/views/projects/languages/AiCustomization/AiExampleBanner.tsx b/webapp/src/views/projects/languages/AiCustomization/AiExampleBanner.tsx
@@ -1,5 +1,5 @@
 import { Box, styled } from '@mui/material';
-import { StarsIcon } from 'tg.component/CustomIcons';
+import { Stars } from 'tg.component/CustomIcons';
 
 const StyledWrapper = styled(Box)`
   border-radius: 4px;
@@ -33,7 +33,7 @@ export const AiExampleBanner = ({ label, items, action }: Props) => {
     <StyledWrapper>
       <Box display="flex" gap={1} py="8px">
         <StyledLabel>
-          <StarsIcon />
+          <Stars />
           <div>{label}</div>
         </StyledLabel>
         <StyledItems>

diff --git a/webapp/src/views/projects/languages/AiCustomization/AiProjectDescription.tsx b/webapp/src/views/projects/languages/AiCustomization/AiProjectDescription.tsx
@@ -3,7 +3,7 @@ import { Box, Button, IconButton, styled } from '@mui/material';
 import { Plus, Edit02 } from '@untitled-ui/icons-react';
 import { useState } from 'react';
 import { AiProjectDescriptionDialog } from './AiProjectDescriptionDialog';
-import { StarsIcon } from 'tg.component/CustomIcons';
+import { Stars } from 'tg.component/CustomIcons';
 import clsx from 'clsx';
 
 const EXAMPLE = 'App for teaching children about the world.';
@@ -61,7 +61,7 @@ export const AiProjectDescription = ({ description }: Props) => {
         <>
           <Box display="flex" gap={1} py="8px">
             <StyledLabel>
-              <StarsIcon />
+              <Stars />
               <Box>{t('project_ai_prompt_example_label')}</Box>
             </StyledLabel>
             <StyledItems>

diff --git a/webapp/src/views/projects/languages/AiCustomization/AiTips.tsx b/webapp/src/views/projects/languages/AiCustomization/AiTips.tsx
@@ -1,6 +1,6 @@
 import { Box, styled } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
-import { StarsIcon } from 'tg.component/CustomIcons';
+import { Stars } from 'tg.component/CustomIcons';
 
 const StyledWrapper = styled(Box)`
   border-radius: 4px;
@@ -31,7 +31,7 @@ export const AiTips = ({ tips }: Props) => {
     <StyledWrapper>
       <Box display="flex" gap={1} py="8px">
         <StyledLabel>
-          <StarsIcon />
+          <Stars />
           <Box>{t('ai_tips_label')}</Box>
         </StyledLabel>
         <StyledItems>

diff --git a/webapp/src/views/projects/projectMenu/ProjectMenu.tsx b/webapp/src/views/projects/projectMenu/ProjectMenu.tsx
@@ -19,7 +19,7 @@ import { SideMenuItem } from './SideMenuItem';
 import { SideLogo } from './SideLogo';
 import { useProjectPermissions } from 'tg.hooks/useProjectPermissions';
 import { useGlobalContext } from 'tg.globalContext/GlobalContext';
-import { IntegrationIcon } from 'tg.component/CustomIcons';
+import { Integration } from 'tg.component/CustomIcons';
 
 export const ProjectMenu = ({ id }) => {
   const { satisfiesPermission } = useProjectPermissions();
@@ -157,7 +157,7 @@ export const ProjectMenu = ({ id }) => {
           linkTo={LINKS.PROJECT_INTEGRATE.build({
             [PARAMS.PROJECT_ID]: id,
           })}
-          icon={<IntegrationIcon />}
+          icon={<Integration />}
           text={t('project_menu_integrate')}
           data-cy="project-menu-item-integrate"
           quickStart={{ itemKey: 'menu_integrate' }}

diff --git a/webapp/src/views/projects/translations/Screenshots/ScreenshotDropzone.tsx b/webapp/src/views/projects/translations/Screenshots/ScreenshotDropzone.tsx
@@ -8,7 +8,7 @@ import { FileUploadFixtures } from 'tg.fixtures/FileUploadFixtures';
 import { useProjectPermissions } from 'tg.hooks/useProjectPermissions';
 
 import { MAX_FILE_COUNT } from './ScreenshotGallery';
-import { DropzoneIcon } from 'tg.component/CustomIcons';
+import { Dropzone } from 'tg.component/CustomIcons';
 
 export interface ScreenshotDropzoneProps {
   validateAndUpload: (files: File[]) => void;
@@ -34,7 +34,7 @@ const StyledDropZoneValidation = styled(Box)`
   }
 `;
 
-const StyledValidIcon = styled(DropzoneIcon)`
+const StyledValidIcon = styled(Dropzone)`
   filter: drop-shadow(1px 1px 0px ${green[200]})
     drop-shadow(-1px 1px 0px ${green[200]})
     drop-shadow(1px -1px 0px ${green[200]})