|
|
@@ -7,7 +7,7 @@ import SearchPopup from './SearchPopup';
|
|
|
import SettingsPopup from './SettingsPopup';
|
|
|
|
|
|
// hooks
|
|
|
-import {useState} from 'react';
|
|
|
+import React, {useState} from 'react';
|
|
|
import useStoreRoute from '@hooks/useStoreRoute';
|
|
|
import {useShopProvider} from '@contexts/shopContext';
|
|
|
import symbol_m from "@assets/symbol-mobile.svg";
|
|
|
@@ -15,12 +15,15 @@ import symbol from "@assets/symbol-defs.svg";
|
|
|
import {ReactComponent as TabGift} from '@assets/tabicon/gift.svg';
|
|
|
import {ReactComponent as TabWithdraw} from '@assets/tabicon/withdraw.svg';
|
|
|
import {ReactComponent as TabPay} from '@assets/tabicon/pay.svg';
|
|
|
+import shopIcon from '@assets/tabicon/deposit.png';
|
|
|
import {ReactComponent as TabMessage} from '@assets/tabicon/message.svg';
|
|
|
import {ReactComponent as TabSett} from '@assets/tabicon/sett.svg';
|
|
|
import {ROUTE_PATH} from "@constants/routes";
|
|
|
import {useSelector} from "react-redux";
|
|
|
import {getMailNew} from "@features/mailSlice";
|
|
|
import {checkIsStandalone} from "@utils/helpers";
|
|
|
+import {useThemeProvider} from "@contexts/themeContext";
|
|
|
+import {APP_THEME} from "@constants/app";
|
|
|
const i18n=global.i18n;
|
|
|
|
|
|
const BottomNav = () => {
|
|
|
@@ -29,7 +32,8 @@ const BottomNav = () => {
|
|
|
const isStoreRoute = useStoreRoute();
|
|
|
const {setCartOpen} = useShopProvider();
|
|
|
const mailNew=useSelector(getMailNew);
|
|
|
- const isStandalone=checkIsStandalone()
|
|
|
+ const isStandalone=checkIsStandalone();
|
|
|
+ const {theme} = useThemeProvider();
|
|
|
|
|
|
// return (
|
|
|
// <div className={styles.container}>
|
|
|
@@ -65,49 +69,65 @@ const BottomNav = () => {
|
|
|
// )
|
|
|
return (
|
|
|
<div className={`${styles.container} ${isStandalone?styles.container_full:''}`}>
|
|
|
+ <svg aria-hidden="true" focusable="false" style={{width:0,height:0,position:"absolute"}}>
|
|
|
+ <linearGradient id="gradient-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
|
+ <stop offset="0%" stopColor="#fffee7"/>
|
|
|
+ <stop offset="50%" stopColor="#e4f6ee"/>
|
|
|
+ <stop offset="100%" stopColor="#d6fede"/>
|
|
|
+ </linearGradient>
|
|
|
+ <linearGradient id="gradient-vertical-dark" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
|
+ <stop offset="0%" stopColor="#807f74"/>
|
|
|
+ <stop offset="50%" stopColor="#757c77" />
|
|
|
+ <stop offset="100%" stopColor="#386b42" />
|
|
|
+ </linearGradient>
|
|
|
+ </svg>
|
|
|
<NavLink className={styles.button} to={ROUTE_PATH.PROMOTION}>
|
|
|
{/*<svg className={"icon"}>*/}
|
|
|
{/* <use xlinkHref={`${ticon_gift}#gift`} />*/}
|
|
|
{/*</svg>*/}
|
|
|
- <TabGift className={styles.icon}/>
|
|
|
- <span>{i18n.t("tab.promotion")}</span>
|
|
|
+ {/*<TabGift className={styles.icon}/>*/}
|
|
|
+ <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
|
|
|
+ <use xlinkHref={`${symbol}#icon_Giftbox`}/>
|
|
|
+ </svg>
|
|
|
+ <span className={styles.bottomtxt}>{i18n.t("tab.promotion")}</span>
|
|
|
</NavLink>
|
|
|
<NavLink className={styles.button} to={ROUTE_PATH.SAQUE} aria-label="Home">
|
|
|
{/*<svg className={"icon"}>*/}
|
|
|
{/* <use xlinkHref={`${symbol_m}#icon_Home_1`} />*/}
|
|
|
{/*</svg>*/}
|
|
|
- <TabWithdraw className={styles.icon}/>
|
|
|
- <span>{i18n.t("tab.withdraw")}</span>
|
|
|
+ {/*<TabWithdraw className={styles.icon}/>*/}
|
|
|
+ <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
|
|
|
+ <use xlinkHref={`${symbol}#icon_WithDraw`}/>
|
|
|
+ </svg>
|
|
|
+ <span className={styles.bottomtxt}>{i18n.t("tab.withdraw")}</span>
|
|
|
</NavLink>
|
|
|
- <NavLink className={styles.button} to={ROUTE_PATH.PAY}>
|
|
|
- <div className={styles['wallet-tabbar-wrap']}>
|
|
|
- <div className={styles['in-1']}>
|
|
|
- <div className={styles['in-2']}>
|
|
|
- {/*<svg className={"icon"}>*/}
|
|
|
- {/* <use xlinkHref={`${symbol_m}#icon_Promotions`} />*/}
|
|
|
- {/*</svg>*/}
|
|
|
- <TabPay className={styles.icon_yellow}/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span className={styles.yellow_txt}>{i18n.t("tab.deposit")}</span>
|
|
|
+ <NavLink className={styles.button} style={{width:"25%"}} to={ROUTE_PATH.PAY}>
|
|
|
+ <img src={shopIcon} style={{width:"8rem",marginTop:"-2.3rem",stroke:"#24262b 4px"}}/>
|
|
|
+
|
|
|
+ <span className={`${styles.yellow_txt} ${styles.bottomtxt}`} style={{lineHeight:"1.5rem"}}>{i18n.t("tab.deposit")}</span>
|
|
|
</NavLink>
|
|
|
<NavLink className={styles.button} to={ROUTE_PATH.MESSAGE}>
|
|
|
{
|
|
|
- mailNew>0?(<div className={styles["dont-badge"]}></div>):(<></>)
|
|
|
+ mailNew > 0 ? (<div className={styles["dont-badge"]}></div>) : (<></>)
|
|
|
}
|
|
|
{/*<svg className={"icon"}>*/}
|
|
|
{/* <use xlinkHref={`${symbol_m}#icon_Account`} />*/}
|
|
|
{/*</svg>*/}
|
|
|
- <TabMessage className={styles.icon}/>
|
|
|
- <span>{i18n.t("tab.message")}</span>
|
|
|
+ {/*<TabMessage className={styles.icon}/>*/}
|
|
|
+ <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
|
|
|
+ <use xlinkHref={`${symbol}#icon_Mail`}/>
|
|
|
+ </svg>
|
|
|
+ <span className={styles.bottomtxt}>{i18n.t("tab.message")}</span>
|
|
|
</NavLink>
|
|
|
<NavLink className={styles.button} to={ROUTE_PATH.CUSTOMER}>
|
|
|
{/*<svg className={"icon"}>*/}
|
|
|
{/* <use xlinkHref={`${symbol}#icon_Chat`} />*/}
|
|
|
{/*</svg>*/}
|
|
|
- <TabSett className={styles.icon}></TabSett>
|
|
|
- <span>{i18n.t("tab.service")}</span>
|
|
|
+ {/*<TabSett className={styles.icon}></TabSett>*/}
|
|
|
+ <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
|
|
|
+ <use xlinkHref={`${symbol}#icon_Support`}/>
|
|
|
+ </svg>
|
|
|
+ <span className={styles.bottomtxt}>{i18n.t("tab.service")}</span>
|
|
|
</NavLink>
|
|
|
</div>
|
|
|
)
|