feat: phone slider

client/src/components/Icon/index.tsx

@@ -35,7 +35,7 @@ const map = {
   apikey: require('./icons/apikey.svg').default,
   save: require('./icons/save.svg').default,
   minus: require('./icons/minus.svg').default,
-  chatLight: require('./icons/light/chat.svg').default,
+  chat: require('./icons/light/chat.svg').default,
   chatFill: require('./icons/fill/chat.svg').default,
   clear: require('./icons/light/clear.svg').default,
   apiLight: require('./icons/light/appApi.svg').default,

client/src/components/Layout/navbar.tsx

@@ -26,7 +26,7 @@ const Navbar = ({ unread }: { unread: number }) => {
     () => [
       {
         label: t('navbar.Chat'),
-        icon: 'chatLight',
+        icon: 'chat',
         activeIcon: 'chatFill',
         link: `/chat?appId=${lastChatAppId}&chatId=${lastChatId}`,
         activeLink: ['/chat']

client/src/components/Layout/navbarPhone.tsx

@@ -14,7 +14,7 @@ const NavbarPhone = ({ unread }: { unread: number }) => {
     () => [
       {
         label: t('navbar.Chat'),
-        icon: 'chatLight',
+        icon: 'chat',
         link: `/chat?appId=${lastChatAppId}&chatId=${lastChatId}`,
         activeLink: ['/chat'],
         unread: 0

client/src/components/Tabs/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
-import { Box, Grid, useTheme } from '@chakra-ui/react';
+import { Box, Grid } from '@chakra-ui/react';
 import type { GridProps } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
 
 // @ts-ignore
 interface Props extends GridProps {
@@ -11,7 +12,7 @@ interface Props extends GridProps {
 }
 
 const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
-  const theme = useTheme();
+  const { t } = useTranslation();
   const sizeMap = useMemo(() => {
     switch (size) {
       case 'sm':
@@ -47,14 +48,14 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
         <Box
           key={item.id}
           py={sizeMap.inlineP}
-          borderRadius={'sm'}
           textAlign={'center'}
+          borderBottom={'2px solid transparent'}
           {...(activeId === item.id
             ? {
-                boxShadow: '0px 2px 2px rgba(137, 156, 171, 0.25)',
-                backgroundImage: theme.lgColor.primary2,
-                color: 'white',
-                cursor: 'default'
+                color: 'myBlue.700',
+                cursor: 'default',
+                fontWeight: 'bold',
+                borderBottomColor: 'myBlue.700'
               }
             : {
                 cursor: 'pointer'
@@ -64,7 +65,7 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
             onChange(item.id);
           }}
         >
-          {item.label}
+          {t(item.label) || item.label}
         </Box>
       ))}
     </Grid>