added icons to menu

kolserdav · Jun 23, 2023 · 0e2b6b5 · 0e2b6b5
1 parent 55f7c91
commit 0e2b6b5
Show file tree

Hide file tree

Showing 16 changed files with 187 additions and 7 deletions.
diff --git a/packages/app/components/AppBar.module.scss b/packages/app/components/AppBar.module.scss
@@ -14,6 +14,7 @@
 
   .bottom {
     position: relative;
+    width: 100%;
     margin-top: auto;
   }
 

diff --git a/packages/app/components/AppBar.tsx b/packages/app/components/AppBar.tsx
@@ -38,6 +38,17 @@ import Button from './ui/Button';
 import Input from './ui/Input';
 import useLoad from '../hooks/useLoad';
 import Textarea from './ui/Textarea';
+import CopyIcon from './icons/Copy';
+import ChartLineIcon from './icons/ChartLine';
+import NotebookIcon from './icons/Notebook';
+import TranslateVariantIcon from './icons/TranslateVariant';
+import SettingsIcon from './icons/Settings';
+import TrashIcon from './icons/Trash';
+import SupportIcon from './icons/Support';
+import InformationIcon from './icons/Information';
+import LoginIcon from './icons/Login';
+import LogoutIcon from './icons/Logout';
+import CloseIcon from './icons/Close';
 
 function AppBar({
   theme,
@@ -156,27 +167,31 @@ function AppBar({
           {!checkRouterPath(router.asPath, Pages.translate) && (
             <Link withoutHover fullWidth theme={theme} href={Pages.translate}>
               <div className={clsx(s.menu__item, s.active)}>
+                <TranslateVariantIcon color={theme.text} withoutScale />
                 <div style={{ color: theme.text }}>{locale.translate}</div>
               </div>
             </Link>
           )}
           {!checkRouterPath(router.asPath, Pages.myDictionary) && user && (
             <Link withoutHover fullWidth theme={theme} href={Pages.myDictionary}>
               <div className={clsx(s.menu__item, s.active)}>
+                <NotebookIcon color={theme.text} withoutScale />
                 <div style={{ color: theme.text }}>{locale.myDictionary}</div>
               </div>
             </Link>
           )}
           {!checkRouterPath(router.asPath, Pages.statistics) && user && (
             <Link withoutHover fullWidth theme={theme} href={Pages.statistics}>
               <div className={clsx(s.menu__item, s.active)}>
+                <ChartLineIcon color={theme.text} withoutScale />
                 <div style={{ color: theme.text }}>{locale.statistics}</div>
               </div>
             </Link>
           )}
           {!checkRouterPath(router.asPath, Pages.trash) && user && (
             <Link withoutHover fullWidth theme={theme} href={Pages.trash}>
               <div className={clsx(s.menu__item, s.active)}>
+                <TrashIcon color={theme.text} withoutScale />
                 <div style={{ color: theme.text }}>{locale.trash}</div>
               </div>
             </Link>
@@ -201,6 +216,7 @@ function AppBar({
           {!checkRouterPath(router.asPath, [Pages.settings]) && (
             <Link withoutHover fullWidth theme={theme} href={Pages.settings}>
               <div className={clsx(s.menu__item, s.active)}>
+                <SettingsIcon color={theme.text} withoutScale />
                 <div style={{ color: theme.text }}>{locale.settings}</div>
               </div>
             </Link>
@@ -215,6 +231,7 @@ function AppBar({
               className={clsx(l.wrapper, l.full__width, l.without__hover)}
             >
               <div className={clsx(s.menu__item, s.active)}>
+                <SupportIcon color={theme.text} withoutScale />
                 <div style={{ color: theme.text }}>{locale.support.title}</div>
               </div>
             </div>
@@ -223,13 +240,15 @@ function AppBar({
             {!checkRouterPath(router.asPath, [Pages.about]) && (
               <Link withoutHover fullWidth theme={theme} href={Pages.about}>
                 <div className={clsx(s.menu__item, s.active)}>
+                  <InformationIcon color={theme.text} withoutScale />
                   <div style={{ color: theme.text }}>{locale.about}</div>
                 </div>
               </Link>
             )}
             {!checkRouterPath(router.asPath, [Pages.signIn, Pages.signUp]) && !user && (
               <Link withoutHover fullWidth theme={theme} href={PAGE_LOGIN_IN_MENU}>
                 <div className={clsx(s.menu__item, s.active)}>
+                  <LoginIcon color={theme.text} withoutScale />
                   <div style={{ color: theme.text }}>{locale.login}</div>
                 </div>
               </Link>
@@ -243,13 +262,15 @@ function AppBar({
                 className={clsx(l.wrapper, l.full__width, l.without__hover)}
               >
                 <div className={clsx(s.menu__item, s.active)}>
+                  <LogoutIcon color={theme.text} withoutScale />
                   <div style={{ color: theme.text }}>{locale.logout}</div>
                 </div>
               </div>
             )}
             {android && (
               <Link onClick={closeApp} withoutHover fullWidth theme={theme} href="#close">
                 <div className={clsx(s.menu__item, s.active)}>
+                  <CloseIcon color={theme.text} withoutScale />
                   <div style={{ color: theme.text }}>{locale.closeApp}</div>
                 </div>
               </Link>

diff --git a/packages/app/components/Settings.module.scss b/packages/app/components/Settings.module.scss
@@ -1,6 +1,7 @@
 @import '../styles/constants';
 
 $speech-select-shift: 8px;
+$settings-margin-left: 1rem;
 
 .wrapper {
   position: relative;
@@ -43,6 +44,7 @@ $speech-select-shift: 8px;
 
       .speech_button {
         margin-left: 1rem;
+        margin-top: 1rem;
       }
 
       .test_input__item {
@@ -51,17 +53,20 @@ $speech-select-shift: 8px;
 
       .lang_select {
         margin-bottom: $speech-select-shift;
+        margin: $settings-margin-left;
 
         .lang_select__voice {
-          margin-top: 1rem;
+          margin-top: 2rem;
         }
       }
 
       .speed_select {
+        position: relative;
+        width: 100%;
         display: flex;
         flex-direction: column;
         margin-bottom: $speech-select-shift;
-        margin-left: 1rem;
+        margin: $settings-margin-left;
       }
     }
 

diff --git a/packages/app/components/Translate.hooks.tsx b/packages/app/components/Translate.hooks.tsx
@@ -34,13 +34,11 @@ const request = new Request();
 export const useLanguages = ({
   undo,
   setUndo,
-  textareaRef,
   connId,
   user,
 }: {
   setUndo: React.Dispatch<React.SetStateAction<boolean>>;
   undo: boolean;
-  textareaRef: React.RefObject<HTMLTextAreaElement>;
   connId: string | null;
   user: UserCleanResult | null;
 }) => {
@@ -203,6 +201,16 @@ export const useTranslate = ({
   const [phraseToUpdate, setPhraseToUpdate] = useState<PhraseUpdateResult>(null);
   const [checkRows, setCheckRows] = useState<boolean>(false);
 
+  /**
+   * Clean other if text is empty
+   */
+  useEffect(() => {
+    if (!text) {
+      setTranslate('');
+      setRetranslate('');
+    }
+  }, [text, setTranslate, setRetranslate]);
+
   /**
    * Set edit
    */

diff --git a/packages/app/components/Translate.module.scss b/packages/app/components/Translate.module.scss
@@ -213,4 +213,8 @@
       }
     }
   }
+
+  .vert_margin {
+    height: 1rem;
+  }
 }
diff --git a/packages/app/components/Translate.tsx b/packages/app/components/Translate.tsx
@@ -14,15 +14,13 @@ import {
   useUndo,
 } from './Translate.hooks';
 import s from './Translate.module.scss';
-import p from '../styles/Page.module.scss';
 import CloseIcon from './icons/Close';
 import IconButton from './ui/IconButton';
 import Select from './ui/Select';
 import Textarea from './ui/Textarea';
 import Typography from './ui/Typography';
 import Button from './ui/Button';
 import Dialog from './ui/Dialog';
-import Checkbox from './ui/Checkbox';
 import Input from './ui/Input';
 import HelpIcon from './icons/Help';
 import Tooltip from './ui/Tooltip';
@@ -111,7 +109,7 @@ function Translate({
     setTranslate,
     oldText,
     setOldText,
-  } = useLanguages({ undo, setUndo, textareaRef, connId, user });
+  } = useLanguages({ undo, setUndo, connId, user });
 
   const {
     reTranslate,
@@ -252,6 +250,15 @@ function Translate({
                 >
                   <CopyIcon color={theme.text} withoutScale />
                 </IconButton>
+                <div className={s.vert_margin} />
+                <PlaySoundButton
+                  theme={theme}
+                  title={playSound}
+                  text={text}
+                  lang={learnLang}
+                  voiceNotFound={voiceNotFound}
+                  changeLinkTo={changeLinkTo}
+                />
               </div>
             )}
             {allowRecogn && (

diff --git a/packages/app/components/icons/ChartLine.tsx b/packages/app/components/icons/ChartLine.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function ChartLineIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Information.tsx b/packages/app/components/icons/Information.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function InformationIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0
+      13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15
+      8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14
+      9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54
+      14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45
+      12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Login.tsx b/packages/app/components/icons/Login.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function LoginIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M10,17V14H3V10H10V7L15,12L10,17M10,2H19A2,2 0 0,1 21,4V20A2,2 0 0,1 19,22H10A2,2 0 0,1
+      8,20V18H10V20H19V4H10V6H8V4A2,2 0 0,1 10,2Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Logout.tsx b/packages/app/components/icons/Logout.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function LogoutIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1
+      14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Notebook.tsx b/packages/app/components/icons/Notebook.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function NotebookIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M17,4V10L15,8L13,10V4H9V20H19V4H17M3,7V5H5V4C5,2.89 5.9,2 7,2H19C20.05,2 21,2.95
+      21,4V20C21,21.05 20.05,22 19,22H7C5.95,22 5,21.05
+      5,20V19H3V17H5V13H3V11H5V7H3M5,5V7H7V5H5M5,19H7V17H5V19M5,13H7V11H5V13Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Settings.tsx b/packages/app/components/icons/Settings.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function SettingsIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1
+      12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34
+      19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96
+      19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2
+      14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96
+      4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67
+      4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05
+      2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68
+      9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82
+      14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95
+      19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Support.tsx b/packages/app/components/icons/Support.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function SupportIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M18.72,14.76C19.07,13.91 19.26,13 19.26,12C19.26,11.28 19.15,10.59 18.96,9.95C18.31,10.1
+      17.63,10.18 16.92,10.18C13.86,10.18 11.15,8.67 9.5,6.34C8.61,8.5 6.91,10.26
+      4.77,11.22C4.73,11.47 4.73,11.74 4.73,12A7.27,7.27 0 0,0 12,19.27C13.05,19.27 14.06,19.04
+      14.97,18.63C15.54,19.72 15.8,20.26 15.78,20.26C14.14,20.81 12.87,21.08 12,21.08C9.58,21.08
+      7.27,20.13 5.57,18.42C4.53,17.38 3.76,16.11 3.33,14.73H2V10.18H3.09C3.93,6.04 7.6,2.92
+      12,2.92C14.4,2.92 16.71,3.87 18.42,5.58C19.69,6.84 20.54,8.45
+      20.89,10.18H22V14.67H22V14.69L22,14.73H21.94L18.38,18L13.08,17.4V15.73H17.91L18.72,14.76M9.27,11.77C9.57,11.77
+      9.86,11.89 10.07,12.11C10.28,12.32 10.4,12.61 10.4,12.91C10.4,13.21 10.28,13.5
+      10.07,13.71C9.86,13.92 9.57,14.04 9.27,14.04C8.64,14.04 8.13,13.54 8.13,12.91C8.13,12.28
+      8.64,11.77 9.27,11.77M14.72,11.77C15.35,11.77 15.85,12.28 15.85,12.91C15.85,13.54 15.35,14.04
+      14.72,14.04C14.09,14.04 13.58,13.54 13.58,12.91A1.14,1.14 0 0,1 14.72,11.77Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/TranslateVariant.tsx b/packages/app/components/icons/TranslateVariant.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function TranslateVariantIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M11 1H3C1.9 1 1 1.9 1 3V15L4 12H9V11C9 8.8 10.79 7 13 7V3C13 1.9 12.1 1 11 1M11 4L9.5 4C9.16
+      5.19 8.54 6.3 7.68 7.26L7.66 7.28L8.92 8.53L8.55 9.54L7 8L4.5 10.5L3.81 9.77L6.34 7.28C5.72
+      6.59 5.22 5.82 4.86 5H5.85C6.16 5.6 6.54 6.17 7 6.68C7.72 5.88 8.24 4.97 8.57 4L3
+      4V3H6.5V2H7.5V3H11V4M21 9H13C11.9 9 11 9.9 11 11V18C11 19.1 11.9 20 13 20H20L23 23V11C23 9.9
+      22.1 9 21 9M19.63 19L18.78 16.75H15.22L14.38 19H12.88L16.25 10H17.75L21.13 19H19.63M17
+      12L18.22 15.25H15.79L17 12Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/icons/Trash.tsx b/packages/app/components/icons/Trash.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconProps } from '../../types';
+import Icon from './Icon';
+
+export default function TrashIcon(props: Omit<IconProps, 'children'>) {
+  return (
+    <Icon {...props}>
+      M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z
+    </Icon>
+  );
+}
diff --git a/packages/app/components/ui/Cheep.tsx b/packages/app/components/ui/Cheep.tsx
@@ -72,6 +72,7 @@ function Cheep({
               <DotsHorisontalIcon color={theme.text} withoutScale />
             </IconButton>
             <Tooltip
+              withoutClose
               closeOnClick
               theme={theme}
               parentRef={menuRef}