fix: icons cleanup (#137)

* fix: added new branch * fix: arrows * fix: cleaned up the icons on the new branch * fix: new names for icons and illustrations * Revert "fix: new names for icons and illustrations" This reverts commit 4464738. * fix: changed the names of icons and illustrations * fix: some small issues * fix: lint --------- Co-authored-by: Nikita Mashchenko <[email protected]>
nmashchenko · Dec 8, 2023 · a3134f9 · a3134f9 · github-actions · Dec 8, 2023
1 parent 605e614
commit a3134f9
Show file tree

Hide file tree

Showing 136 changed files with 273 additions and 194 deletions.
diff --git a/client/src/app/(auth)/password/recover/page.tsx b/client/src/app/(auth)/password/recover/page.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { ArrowLeft } from '@/shared/assets';
+import { ArrowLeftIcon } from '@/shared/assets';
 import { Button, Flex, Input, Typography } from '@/shared/ui';
 import styles from '../password.module.scss';
 import { useForgotPassword } from '@/entities/session';
@@ -59,7 +59,7 @@ export default function Recover() {
             Reset password
           </Button>
           <Button width='100%' typeBtn='secondary' type='button'>
-            <ArrowLeft />
+            <ArrowLeftIcon />
             <Link href='/login'>Back to Log in</Link>
           </Button>
         </Flex>

diff --git a/client/src/app/(auth)/ui/illustration/illustration.tsx b/client/src/app/(auth)/ui/illustration/illustration.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeft, Email } from '@/shared/assets';
+import { ArrowLeftIcon, EmailIllustration } from '@/shared/assets';
 import { Button, Flex, Typography } from '@/shared/ui';
 import styles from './illustration.module.scss';
 import { FC } from 'react';
@@ -14,7 +14,7 @@ export const IllustrationStatus: FC<ConfirmProps> = props => {
   const { mainText, subText, buttonText, buttonHandler } = props;
   return (
     <div className={styles.container}>
-      <Email />
+      <EmailIllustration />
       <Flex direction='column' gap={24} className={styles.text_align}>
         <Flex justify='center' align='center' direction='column' gap={8}>
           <Typography size='heading_m'>{mainText}</Typography>
@@ -25,7 +25,7 @@ export const IllustrationStatus: FC<ConfirmProps> = props => {
         {buttonText && (
           <Flex align='center' justify='center'>
             <Button onClick={buttonHandler} width='136px' size='m' typeBtn='secondary'>
-              <ArrowLeft />
+              <ArrowLeftIcon />
               {buttonText}
             </Button>
           </Flex>

diff --git a/client/src/app/not-found.tsx b/client/src/app/not-found.tsx
@@ -1,10 +1,9 @@
 'use client';
 import Link from 'next/link';
-import { ArrowLeft, Planet } from '@/shared/assets';
+import { ArrowLeftIcon, PlanetIllustration } from '@/shared/assets';
 import { AmongUs } from '@/shared/lib';
-import { Button, Logo, Typography } from '@/shared/ui';
+import { Button, Logo, Typography, NeedHelp } from '@/shared/ui';
 import styles from './styles/not-found.module.scss';
-import { NeedHelp } from '../shared/ui/need-help';
 
 /** Used to open email */
 const mailTo = 'mailto:[email protected]';
@@ -19,14 +18,14 @@ export default function NotFound() {
         </header>
         <div className={styles.main}>
           <div className={styles.illustration}>
-            <Planet />
+            <PlanetIllustration />
           </div>
           <div className={styles.info}>
             <Typography size='heading_m'>Oops... it looks like you are lost.</Typography>
             <Typography size='body_m'>Please check the URL or contact us for assistance</Typography>
             <div className={styles.button}>
               <Button>
-                <ArrowLeft />
+                <ArrowLeftIcon />
                 <Link href='/'>Back to home</Link>
               </Button>
             </div>
@@ -35,7 +34,7 @@ export default function NotFound() {
         <div className={styles.mobileButtons}>
           <Link href='/'>
             <Button width='100%'>
-              <ArrowLeft />
+              <ArrowLeftIcon />
               Back to home
             </Button>
           </Link>

diff --git a/client/src/app/onboarding/ui/action-section/action-section.tsx b/client/src/app/onboarding/ui/action-section/action-section.tsx
@@ -1,8 +1,7 @@
-import { Button, Flex, Typography } from '@/shared/ui';
+import { Button, Flex, Typography, NeedHelp } from '@/shared/ui';
 import { ReactNode } from 'react';
-import { ArrowLeft, ArrowRight } from '@/shared/assets';
+import { ArrowLeftIcon, ArrowRightIcon } from '@/shared/assets';
 import styles from './action-section.module.scss';
-import { NeedHelp } from '@/shared/ui/need-help';
 
 interface ActionSectionProps {
   children: ReactNode;
@@ -23,12 +22,12 @@ export const ActionSection = ({ children, stepTitle }: ActionSectionProps) => {
       </Flex>
       <Flex justify={'space-between'}>
         <Button className={styles.button} typeBtn='secondary'>
-          <ArrowLeft />
+          <ArrowLeftIcon />
           Back
         </Button>
         <Button className={styles.button}>
           Next
-          <ArrowRight />
+          <ArrowRightIcon />
         </Button>
       </Flex>
     </Flex>

diff --git a/client/src/features/cookie-banner/cookie-banner.tsx b/client/src/features/cookie-banner/cookie-banner.tsx
@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import { Button, Typography } from '@/shared/ui';
 import styles from './cookie-banner.module.scss';
 import { useAnimationEnd } from './lib/hooks/useAnimationEnd';
-import { Cookie } from '@/shared/assets';
+import { CookieIcon } from './cookie';
 
 export const CookieBanner = () => {
   const elemRef = useRef<HTMLDivElement | null>(null);
@@ -20,7 +20,7 @@ export const CookieBanner = () => {
       <div ref={elemRef} className={styles.container}>
         <div className={styles.inline}>
           <div>
-            <Cookie />
+            <CookieIcon />
           </div>
           <div>
             <Typography color='white' size='body_s'>

diff --git a/client/src/shared/assets/icons/cookie.tsx → client/src/features/cookie-banner/cookie.tsx b/client/src/shared/assets/icons/cookie.tsx → client/src/features/cookie-banner/cookie.tsx
@@ -1,5 +1,5 @@
 import { FC, SVGProps } from 'react';
-export const Cookie: FC<SVGProps<SVGSVGElement>> = props => {
+export const CookieIcon: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
       width='50'

diff --git a/client/src/shared/assets/icons.stories.mdx b/client/src/shared/assets/icons.stories.mdx
@@ -1,16 +1,52 @@
 import { IconGallery, IconItem, Meta } from '@storybook/blocks';
 
-import { ICON_OPTIONS } from './storybook';
+import { ICON_OPTIONS, ILLUSTRATION_OPTIONS, LOGO_OPTIONS } from './storybook';
 import styles from './icons.module.scss';
 
 <Meta title='global/Iconography' />
 
 # Iconography
 
+<hr />
+<br />
+<div>
+  <h3>Icons that can be changed, you can pass 20, 28, 40 px size to all of them</h3>
+</div>
+<br />
 <IconGallery>
   {Object.entries(ICON_OPTIONS).map(([iconName, iconComponent]) => (
     <IconItem name={iconName} key={iconName}>
       <div className={styles.iconItemStyle}>{iconComponent}</div>
     </IconItem>
   ))}
 </IconGallery>
+
+<hr />
+<br />
+<div>
+  <h3>Illustrations are used to be displayed on entire screen</h3>
+</div>
+<br />
+
+<IconGallery>
+  {Object.entries(ILLUSTRATION_OPTIONS).map(([illustrationName, illustrationComponent]) => (
+    <IconItem name={illustrationName} key={illustrationName}>
+      <div className={styles.iconItemStyle}>{illustrationComponent}</div>
+    </IconItem>
+  ))}
+</IconGallery>
+
+<hr />
+<br />
+<div>
+  <h3>Logos can't be changed anyhow and are use only in specific places</h3>
+</div>
+<br />
+
+<IconGallery>
+  {Object.entries(LOGO_OPTIONS).map(([logoName, logoComponent]) => (
+    <IconItem name={logoName} key={logoName}>
+      <div className={styles.iconItemStyle}>{logoComponent}</div>
+    </IconItem>
+  ))}
+</IconGallery>
diff --git a/client/src/shared/assets/icons/arrows/arrow-left.tsx b/client/src/shared/assets/icons/arrows/arrow-left.tsx
@@ -1,14 +1,14 @@
-import { FC, SVGProps } from 'react';
-export const ArrowLeft: FC<SVGProps<SVGSVGElement>> = props => {
-  // props: size: '20' | '28' | '40'
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const ArrowLeftIcon: FC<SVGPropsWithSize> = ({ size = '20', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='20'
-      height='20'
+      width={size}
+      height={size}
       fill='#ffffff'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'></path>
     </svg>

diff --git a/client/src/shared/assets/icons/arrows/arrow-right.tsx b/client/src/shared/assets/icons/arrows/arrow-right.tsx
@@ -1,13 +1,14 @@
-import { FC, SVGProps } from 'react';
-export const ArrowRight: FC<SVGProps<SVGSVGElement>> = props => {
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const ArrowRightIcon: FC<SVGPropsWithSize> = ({ size = '20', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='20'
-      height='20'
+      width={size}
+      height={size}
       fill='#ffffff'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'></path>
     </svg>

diff --git a/client/src/shared/assets/icons/arrows/index.ts b/client/src/shared/assets/icons/arrows/index.ts
@@ -1,2 +1,2 @@
-export { ArrowLeft } from './arrow-left';
-export { ArrowRight } from './arrow-right';
+export { ArrowLeftIcon } from './arrow-left';
+export { ArrowRightIcon } from './arrow-right';
diff --git a/client/src/shared/assets/icons/caret/caret-down.tsx b/client/src/shared/assets/icons/caret/caret-down.tsx
@@ -1,13 +1,14 @@
-import { FC, SVGProps } from 'react';
-export const CaretDown: FC<SVGProps<SVGSVGElement>> = props => {
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const CaretDownIcon: FC<SVGPropsWithSize> = ({ size = '24', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={size}
+      height={size}
       fill='#5bd424'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'></path>
     </svg>

diff --git a/client/src/shared/assets/icons/caret/caret-up.tsx b/client/src/shared/assets/icons/caret/caret-up.tsx
@@ -1,13 +1,14 @@
-import { FC, SVGProps } from 'react';
-export const CaretUp: FC<SVGProps<SVGSVGElement>> = props => {
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const CaretUpIcon: FC<SVGPropsWithSize> = ({ size = '24', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={size}
+      height={size}
       fill='#5bd424'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z'></path>
     </svg>

diff --git a/client/src/shared/assets/icons/caret/index.ts b/client/src/shared/assets/icons/caret/index.ts
@@ -1,2 +1,2 @@
-export { CaretDown } from './caret-down';
-export { CaretUp } from './caret-up';
+export { CaretDownIcon } from './caret-down';
+export { CaretUpIcon } from './caret-up';
diff --git a/client/src/shared/assets/icons/chat-circle-dots.tsx b/client/src/shared/assets/icons/chat-circle-dots.tsx
@@ -1,14 +1,15 @@
-import { FC, SVGProps } from 'react';
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
 
-export const ChatCircleDots: FC<SVGProps<SVGSVGElement>> = props => {
+export const ChatCircleDotsIcon: FC<SVGPropsWithSize> = ({ size = '20', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='20'
-      height='20'
+      width={size}
+      height={size}
       fill='#ffffff'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z'></path>
     </svg>

diff --git a/client/src/shared/assets/icons/check.tsx b/client/src/shared/assets/icons/check.tsx
@@ -1,5 +1,7 @@
 import { FC, SVGProps } from 'react';
-export const Check: FC<SVGProps<SVGSVGElement>> = props => {
+
+// NB: don't add size here since it can brake other components
+export const CheckIcon: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' viewBox='0 0 256 256' {...props}>
       <path d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'></path>

diff --git a/client/src/shared/assets/icons/cross.tsx b/client/src/shared/assets/icons/cross.tsx
@@ -1,7 +1,8 @@
-import { FC, SVGProps } from 'react';
-export const Cross: FC<SVGProps<SVGSVGElement>> = props => {
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const CrossIcon: FC<SVGPropsWithSize> = ({ size = '20', ...rest }) => {
   return (
-    <svg width='20' height='20' fill='#ffffff' viewBox='0 0 256 256' {...props}>
+    <svg width={size} height={size} fill='#ffffff' viewBox='0 0 256 256' {...rest}>
       <path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'></path>
     </svg>
   );

diff --git a/client/src/shared/assets/icons/crowns/crown20.tsx b/client/src/shared/assets/icons/crowns/crown20.tsx
@@ -1,5 +1,5 @@
 import { FC, SVGProps } from 'react';
-export const Crown20: FC<SVGProps<SVGSVGElement>> = props => {
+export const CrownIcon20: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
       width='20'

diff --git a/client/src/shared/assets/icons/crowns/crown28.tsx b/client/src/shared/assets/icons/crowns/crown28.tsx
@@ -1,5 +1,5 @@
 import { FC, SVGProps } from 'react';
-export const Crown28: FC<SVGProps<SVGSVGElement>> = props => {
+export const CrownIcon28: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
       width='28'

diff --git a/client/src/shared/assets/icons/crowns/crown40.tsx b/client/src/shared/assets/icons/crowns/crown40.tsx
@@ -1,5 +1,5 @@
 import { FC, SVGProps } from 'react';
-export const Crown40: FC<SVGProps<SVGSVGElement>> = props => {
+export const CrownIcon40: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
       width='40'

diff --git a/client/src/shared/assets/icons/crowns/index.ts b/client/src/shared/assets/icons/crowns/index.ts
@@ -1,3 +1,3 @@
-export { Crown40 } from './crown40';
-export { Crown28 } from './crown28';
-export { Crown20 } from './crown20';
+export { CrownIcon40 } from './crown40';
+export { CrownIcon28 } from './crown28';
+export { CrownIcon20 } from './crown20';
diff --git a/client/src/shared/assets/icons/eye-closed.tsx b/client/src/shared/assets/icons/eye-closed.tsx
@@ -1,13 +1,14 @@
-import { FC, SVGProps } from 'react';
-export const EyeClosed: FC<SVGProps<SVGSVGElement>> = props => {
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const EyeClosedIcon: FC<SVGPropsWithSize> = ({ size = '20', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='20'
-      height='20'
+      width={size}
+      height={size}
       fill='#ffffff'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M228,175a8,8,0,0,1-10.92-3l-19-33.2A123.23,123.23,0,0,1,162,155.46l5.87,35.22a8,8,0,0,1-6.58,9.21A8.4,8.4,0,0,1,160,200a8,8,0,0,1-7.88-6.69l-5.77-34.58a133.06,133.06,0,0,1-36.68,0l-5.77,34.58A8,8,0,0,1,96,200a8.4,8.4,0,0,1-1.32-.11,8,8,0,0,1-6.58-9.21L94,155.46a123.23,123.23,0,0,1-36.06-16.69L39,172A8,8,0,1,1,25.06,164l20-35a153.47,153.47,0,0,1-19.3-20A8,8,0,1,1,38.22,99c16.6,20.54,45.64,45,89.78,45s73.18-24.49,89.78-45A8,8,0,1,1,230.22,109a153.47,153.47,0,0,1-19.3,20l20,35A8,8,0,0,1,228,175Z'></path>
     </svg>

diff --git a/client/src/shared/assets/icons/eye.tsx b/client/src/shared/assets/icons/eye.tsx
@@ -1,13 +1,14 @@
-import { FC, SVGProps } from 'react';
-export const Eye: FC<SVGProps<SVGSVGElement>> = props => {
+import { SVGPropsWithSize } from '@/shared/types/svg-props-with-size';
+import { FC } from 'react';
+export const EyeIcon: FC<SVGPropsWithSize> = ({ size = '20', ...rest }) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='20'
-      height='20'
+      width={size}
+      height={size}
       fill='#ffffff'
       viewBox='0 0 256 256'
-      {...props}
+      {...rest}
     >
       <path d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'></path>
     </svg>