refactor: change menu style

Author: ramzini22

src/components/menu/index.module.css

@@ -25,7 +25,6 @@ html {
     grid-template-rows: auto;
     cursor: pointer;
     color: white;
-    font-size: 12px;
 }
 
 .menu_item:hover {
@@ -40,4 +39,12 @@ html {
     display: grid;
     justify-content: center;
     align-items: center;
+}
+
+.menu_item_inner_text{
+    font-size: 14px;
+
+    @media(width < 600px) {
+        font-size: 12px;
+    }
 }

src/components/menu/index.tsx

@@ -31,7 +31,7 @@ export const Menu = memo(() => {
                 <div className={styles.menu_item_inner}>
                     <MdDeleteOutline size={24} />
                 </div>
-                <div className={'text_translate'}>{t('delete_chats')}</div>
+                <div className={`text_translate ${styles.menu_item_inner_text}`}>{t('delete_chats')}</div>
             </div>
             <div
                 className={`${styles.menu_item} ${activeTab === 'messages' && styles.menu_item_active}`}
@@ -43,7 +43,7 @@ export const Menu = memo(() => {
                 <div className={styles.menu_item_inner}>
                     <GoMail size={24} />
                 </div>
-                <div className={'text_translate'}>{t('messages')}</div>
+                <div className={`text_translate ${styles.menu_item_inner_text}`}>{t('messages')}</div>
             </div>
             <div
                 className={`${styles.menu_item} ${activeTab === 'language' && styles.menu_item_active}`}
@@ -55,7 +55,7 @@ export const Menu = memo(() => {
                 <div className={styles.menu_item_inner}>
                     <GrLanguage size={20} />
                 </div>
-                <div className={'text_translate'}>{t('language')}</div>
+                <div className={`text_translate ${styles.menu_item_inner_text}`}>{t('language')}</div>
             </div>
         </div>
     );