Cereja 换皮

src/App.js

@@ -81,6 +81,8 @@ import WInstallBox from "@widgets/WInstallBox";
 import WMaintainBox from "@widgets/WMaintainBox";
 import WAreaSelect from "@widgets/WAreaSelect";
 import {APP_SITE} from "@constants/app";
+import { lime, purple } from '@mui/material/colors';
+
 const objInfo={
     gameID:0
 }
@@ -115,6 +117,14 @@ const App = () => {
     const firstPayMulti=useSelector(getFirstPayMulti);
     const muiTheme = createTheme({
         direction: direction,
+        palette:{
+            yellow:{
+                main:'#f4a738',
+                light: '#f4a738',
+                dark:'#f4a738',
+                contrastText:'#f4a738'
+            }
+        }
     });
 
     const cacheRtl = createCache({

src/assets/singlesvg/btnclose.svg

@@ -0,0 +1,16 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="36px" height="36px" viewBox="0 0 36 36">
+<defs>
+<linearGradient id="PSgrad_0" x1="0%" x2="0%" y1="100%" y2="0%">
+  <stop offset="0%" stop-color="rgb(140,110,72)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(255,225,168)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(134, 127, 100)"
+ d="M22.225,17.982 L34.263,30.021 C35.435,31.192 35.435,33.092 34.263,34.263 C33.092,35.435 31.192,35.435 30.021,34.263 L17.983,22.225 L6.093,34.114 C4.931,35.276 3.047,35.276 1.885,34.114 C0.723,32.952 0.723,31.069 1.885,29.907 L13.775,18.017 L1.737,5.979 C0.565,4.807 0.565,2.908 1.737,1.736 C2.908,0.565 4.808,0.565 5.979,1.736 L18.017,13.775 L29.938,1.854 C31.100,0.692 32.984,0.692 34.145,1.854 C35.307,3.016 35.307,4.900 34.145,6.062 L22.225,17.982 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M22.225,17.982 L34.263,30.021 C35.435,31.192 35.435,33.092 34.263,34.263 C33.092,35.435 31.192,35.435 30.021,34.263 L17.983,22.225 L6.093,34.114 C4.931,35.276 3.047,35.276 1.885,34.114 C0.723,32.952 0.723,31.069 1.885,29.907 L13.775,18.017 L1.737,5.979 C0.565,4.807 0.565,2.908 1.737,1.736 C2.908,0.565 4.808,0.565 5.979,1.736 L18.017,13.775 L29.938,1.854 C31.100,0.692 32.984,0.692 34.145,1.854 C35.307,3.016 35.307,4.900 34.145,6.062 L22.225,17.982 Z"/>
+</svg>

src/assets/singlesvg/mobile-password.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#3BC117" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+<svg fill="#867f64" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 	 width="800px" height="800px" viewBox="0 0 210 256" enable-background="new 0 0 210 256" xml:space="preserve">
 <path d="M174.55,144.5L174.55,144.5c-1.4-4-5-6.5-9.2-6.5H159V23c0-11.708-9.292-21-21-21H25C12.57,2,2,12.57,2,25v183
 	c0,11.9,10.95,22,22.75,22l114.213,0c1.207,0,2.27,0.984,2.18,2.188c-0.095,1.266-1.153,1.812-2.393,1.812h-45.5L128,254h80
@@ -10,4 +10,4 @@
 	l14.868,3.003l9.08-9.08c8.791,1.917,18.377-0.506,25.25-7.38c10.708-10.708,10.744-28.036,0-38.78s-28-10.636-38.672,0.036
 	c-6.801,6.801-9.297,16.315-7.452,25.033L32.59,130.438l0.506,19.535L53.68,148.49z M108.232,75.922
 	c-2.351-2.351-2.388-6.222,0-8.61s6.222-2.388,8.61,0s2.388,6.222,0,8.61C114.418,78.345,110.584,78.273,108.232,75.922z"/>
-</svg>
+</svg>

src/assets/singlesvg/store-email.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#3BC117" version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+<svg fill="#867f64" version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
-    <path fill="#3BC117" d="M22.667 4.667h-13.333c-4 0-6.667 2-6.667 6.667v9.333c0 4.667 2.667 6.667 6.667 6.667h13.333c4 0 6.667-2 6.667-6.667v-9.333c0-4.667-2.667-6.667-6.667-6.667zM23.293 12.787l-4.173 3.333c-0.88 0.707-2 1.053-3.12 1.053s-2.253-0.347-3.12-1.053l-4.173-3.333c-0.427-0.347-0.493-0.987-0.16-1.413 0.347-0.427 0.973-0.507 1.4-0.16l4.173 3.333c1.013 0.813 2.733 0.813 3.747 0l4.173-3.333c0.427-0.347 1.067-0.28 1.4 0.16 0.347 0.427 0.28 1.067-0.147 1.413z"></path></svg>
+    <path fill="#867f64" d="M22.667 4.667h-13.333c-4 0-6.667 2-6.667 6.667v9.333c0 4.667 2.667 6.667 6.667 6.667h13.333c4 0 6.667-2 6.667-6.667v-9.333c0-4.667-2.667-6.667-6.667-6.667zM23.293 12.787l-4.173 3.333c-0.88 0.707-2 1.053-3.12 1.053s-2.253-0.347-3.12-1.053l-4.173-3.333c-0.427-0.347-0.493-0.987-0.16-1.413 0.347-0.427 0.973-0.507 1.4-0.16l4.173 3.333c1.013 0.813 2.733 0.813 3.747 0l4.173-3.333c0.427-0.347 1.067-0.28 1.4 0.16 0.347 0.427 0.28 1.067-0.147 1.413z"></path></svg>

src/assets/singlesvg/store-pass.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 	 width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
 <style type="text/css">
-	.stone_een{fill:#3BC117;}
+	.stone_een{fill:#867f64;}
 </style>
 <path class="stone_een" d="M9.184,4C9.597,2.837,10.696,2,12,2h8c1.304,0,2.403,0.837,2.816,2H9.184z M27.651,8.314l-1.495,14.198
 	c-0.099,0.937-0.632,1.774-1.44,2.258l-7.173,4.304c-0.475,0.285-1.009,0.427-1.544,0.427s-1.068-0.142-1.543-0.427L7.283,24.77
@@ -33,4 +33,4 @@
 	c-0.029,0.274,0.17,0.521,0.445,0.549c0.018,0.002,0.035,0.003,0.053,0.003c0.253,0,0.47-0.191,0.497-0.448L25.354,11.034z
 	 M25.662,8.105c0.029-0.274-0.17-0.521-0.445-0.549C24.949,7.523,24.696,7.726,24.668,8l-0.104,0.995
 	c-0.029,0.274,0.17,0.521,0.445,0.549c0.018,0.002,0.035,0.003,0.053,0.003c0.253,0,0.47-0.191,0.497-0.448L25.662,8.105z"/>
-</svg>
+</svg>

src/assets/singlesvg/store-phone.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#3BC117" version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+<svg fill="#867f64" version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
-    <path d="M21.653 2.667h-11.307c-3.68 0-5.013 1.333-5.013 5.080v16.507c0 3.747 1.333 5.080 5.013 5.080h11.293c3.693 0 5.027-1.333 5.027-5.080v-16.507c0-3.747-1.333-5.080-5.013-5.080zM16 25.733c-1.28 0-2.333-1.053-2.333-2.333s1.053-2.333 2.333-2.333c1.28 0 2.333 1.053 2.333 2.333s-1.053 2.333-2.333 2.333zM18.667 8.333h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path></svg>
+    <path d="M21.653 2.667h-11.307c-3.68 0-5.013 1.333-5.013 5.080v16.507c0 3.747 1.333 5.080 5.013 5.080h11.293c3.693 0 5.027-1.333 5.027-5.080v-16.507c0-3.747-1.333-5.080-5.013-5.080zM16 25.733c-1.28 0-2.333-1.053-2.333-2.333s1.053-2.333 2.333-2.333c1.28 0 2.333 1.053 2.333 2.333s-1.053 2.333-2.333 2.333zM18.667 8.333h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path></svg>

src/components/AntSwitch/index.jsx

@@ -20,15 +20,16 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
         transform: 'translateX(-2px)',
         '&.Mui-checked': {
             transform: 'translateX(12px)',
-            color: 'var(--primary-color)',
+            color: '#f4a738',
             '& + .MuiSwitch-track': {
                 opacity: 1,
-                backgroundColor: '#3bc11733',
+                backgroundColor: '#413020',
             },
         },
     },
     '& .MuiSwitch-thumb': {
-        boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+        // boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+        boxShadow: 'inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48)',
         width: 12,
         height: 12,
         borderRadius: 6,

src/components/GameList/styles.module.scss

@@ -46,7 +46,7 @@
       width: 5rem;
       height: .375rem;
       border-radius: var(--border-radius);
-      background-color: #31343c;
+      background-color: #302317;
       position: relative;
       margin: 0 .3125rem;
       & .green{
@@ -56,7 +56,7 @@
         border-radius: var(--border-radius);
         top: 0;
         max-width: 100%;
-        background-color: var(--primary-color);
+        background-color: #ee902b;
       }
     }
   }
@@ -66,15 +66,18 @@
     align-items: center;
     justify-content: center;
     & .more_btn{
-      background: var(--nav-item-hover);
+      //background: var(--nav-item-hover);
+      background: #302317;
       border-radius: var(--border-radius);
       height: 44px;
       line-height: 44px;
       min-width: 148px;
       width: auto;
       margin: 0 auto;
-      font-weight: 600;
-      color: var(--header);
+      font-size: 1rem;
+      font-weight: bold;
+      //color: var(--header);
+      color: var(--text);
       &:disabled{
         opacity: .5;
         cursor: default;

src/components/GameSmallList/styles.module.scss

@@ -1,6 +1,9 @@
 .list_container{
   //margin-top: 2.75rem;
+  display: flex;
+  flex-direction: column;
   position: relative;
+  gap: 0.25rem;
   & .grid_top{
     display: flex;
     flex-direction: row;
@@ -9,18 +12,19 @@
     width: 100%;
     //margin-bottom: 0.625rem;
     & .grid_tit{
-      font-size: 1.25rem;
-      font-weight: 600;
+      //font-size: 1.25rem;
+      font-size: 0.92rem;
+      font-weight: 700;
       align-items: center;
-      height: 2rem;
-      line-height: 2rem;
+      //height: 2rem;
+      //line-height: 2rem;
       display: flex;
-      color: var(--header);
-      gap: 0.5rem;
+      color: var(--text);
+      gap: 0.25rem;
       svg{
-        width: 1.4rem;
-        height: 1.4rem;
-        fill: var(--header);
+        width: 0.95rem;
+        height: 0.95rem;
+        fill: var(--text);
       }
     }
     & .grid_nav{
@@ -32,10 +36,10 @@
         display: block;
         color: var(--primary-color);
         padding: 0 .625rem;
-        height: 2.25rem;
-        line-height: 2.25rem;
-        font-size: .875rem;
-        font-weight: 400;
+        //height: 2.25rem;
+        //line-height: 2.25rem;
+        font-size: 0.92rem;
+        font-weight: 600;
       }
       & .slide_btn{
         width: 2.25rem;
@@ -80,6 +84,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     padding-top: .75rem;
+    margin-top: -0.75rem;
   }
   & .grid_list_m{
     //--grid-gap: .75rem;
@@ -118,6 +123,7 @@
       gap: .75rem;
       transition: all var(--transition);
       padding-top: .75rem;
+      margin-top: -0.75rem;
       & .grid_row{
         display: grid;
         gap:.75rem;

src/components/GameTabs/index.jsx

@@ -52,16 +52,17 @@ const GameTabs=({data})=>{
     const renderMask=(item,index,len)=>{
         if (item.tabtype!==tabIndex)return (<></>);
         let mask=(<></>);
-        if (index===0){
-            mask=(<img className={styles.mask_first} src={tabin_1}/>)
-        }
-        else if (index===len-1){
-            mask=(<img className={styles.mask_last} src={tabin_1}/>)
-        }
-        else
-        {
-            mask=(<img className={styles.mask_center} src={tabin_2}/>)
-        }
+        // if (index===0){
+        //     mask=(<img className={styles.mask_first} src={tabin_1}/>)
+        // }
+        // else if (index===len-1){
+        //     mask=(<img className={styles.mask_last} src={tabin_1}/>)
+        // }
+        // else
+        // {
+        //     mask=(<img className={styles.mask_center} src={tabin_2}/>)
+        // }
+        mask=(<img className={styles.mask_center} src={tabin_1}/>)
         return (
             <div className={styles.tab_mask}>
                 {mask}

src/components/GameTabs/styles.module.scss

@@ -6,9 +6,9 @@
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
-    border-radius: var(--border-radius);
-    border: 1px solid #23190b;
-    padding: 0.15rem;
+    //border-radius: var(--border-radius);
+    //border: 1px solid #23190b;
+    //padding: 0.15rem;
     width: fit-content;
     max-width: 100%;
     overflow-x: auto;
@@ -18,41 +18,42 @@
     //gap: .75rem;
     & .tab_item{
       position: relative;
-      background: linear-gradient(to bottom, #30200e,#2a1f0e,#48381d);
-      border-top: 1px solid rgba(64, 41, 19, 0.9);
-      border-bottom: 1px solid rgb(129, 99, 54);
-      border-left: 1px solid #47341a;
-      border-right: 1px solid #24170c;
+      //background: linear-gradient(to bottom, #30200e,#2a1f0e,#48381d);
+      //border-top: 1px solid rgba(64, 41, 19, 0.9);
+      //border-bottom: 1px solid rgb(129, 99, 54);
+      //border-left: 1px solid #47341a;
+      //border-right: 1px solid #24170c;
       &_first{
-        border-top-left-radius: var(--border-radius);
-        border-bottom-left-radius:var(--border-radius);
-        border-left: 1px solid #45351b !important;
+        //border-top-left-radius: var(--border-radius);
+        //border-bottom-left-radius:var(--border-radius);
+        //border-left: 1px solid #45351b !important;
       }
       &_last{
-        border-top-right-radius: var(--border-radius);
-        border-bottom-right-radius:var(--border-radius);
-        border-right: 1px solid #45351b !important;
+        //border-top-right-radius: var(--border-radius);
+        //border-bottom-right-radius:var(--border-radius);
+        //border-right: 1px solid #45351b !important;
       }
       & .tab_mask{
         position: absolute;
         inset: 0;
         z-index: 0;
         pointer-events: none;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
         & .mask_center{
           object-fit: fill;
           position: absolute;
           top: 0;
-          left: -19%;
-          width: 133%;
-          height: 2.05rem;
+          width: auto;
+          height: 2.75rem;
         }
         & .mask_first{
           object-fit: fill;
           position: absolute;
           top: 0;
-          left: -18%;
-          width: 133%;
-          height: 2.05rem;
+          width: auto;
+          height: 2.75rem;
         }
         & .mask_last{
           transform: scaleX(-1);
@@ -70,29 +71,29 @@
         justify-content: center;
         position: relative;
         padding: 0.45rem 1rem;
-        font-size: 0.825rem;
+        font-size: 1rem;
         font-weight: 400;
         white-space: nowrap;
-        color: #867f64;
+        color: var(--text);
         width: auto;
         z-index: 1;
         &:hover,&.active{
           //background: var(--nav-item-hover);
-          //color: var(--header);
-          color: #FFFFFF;
+          color: var(--header);
           text-shadow: 0px 2px 1px rgba(69, 42, 26, 0.44);
           font-weight: 600;
           & .icon{
             //fill: var(--header);
             fill: #f5e67f;
+            filter: drop-shadow(0 0 0.1rem rgba(194, 133, 15, 0.74));
           }
         }
         & .icon{
           margin-right: .375rem;
-          width: 1.2em;
-          height: 1.2em;
-          //fill: var(--text);
-          fill: #867f64;
+          width: 1rem;
+          height: 1rem;
+          fill: var(--text);
+          //fill: #867f64;
         }
       }
     }

src/components/Loading/LoadingCircular.jsx

@@ -23,11 +23,11 @@ const LoadingCircular=()=>{
             {
                 isShow? (
                     <div className={`loading-circular ${showMask?'loading-circular_mask':''}`}>
-                        <CircularProgress color="success" size={40} thickness={4}/>
+                        <CircularProgress color="yellow" size={40} thickness={4}/>
                     </div>
                 ):(<></>)
             }
         </>
     )
 }
-export default LoadingCircular;
+export default LoadingCircular;

src/components/LoadingScreen.jsx

@@ -22,7 +22,8 @@ const LoadingScreen = ({...props}) => {
         if (global.website===APP_SITE.SITE_24680){
             return (<Lottie animationData={logo} lottieRef={loadRef}/>);
         }
-        return (<CircularProgress color="success" size={40} thickness={5}/>)
+        return (<CircularProgress color="yellow" size={40} thickness={5}/>)
+        // return (<CircularProgress color="#f4a738" size={40} thickness={5}/>)
     }
     return (
         <Spring {...props} className="d-flex align-items-center justify-content-center flex-1 w-100 h-100">

src/components/Logo/index.jsx

@@ -28,9 +28,21 @@ const Logo = ({size = 'md'}) => {
         logourl=isMobile()?(theme===APP_THEME.DARK?logo_small_black:logo_small_light):(theme===APP_THEME.DARK?logo_dark:logo_light);
         return logourl;
     }
+    const renderLogoImg=()=>{
+        let img_style=styles.logo_img;
+        if (isMobile()){
+            img_style=styles.logo_img_m;
+            if (size==='xl'){
+                img_style=styles.logo_img_m_xl;
+            }
+        }
+        return (
+            <img className={img_style} src={getLogoUrl()}/>
+        )
+    }
     return (
         <NavLink className={`${styles.logo} ${styles[size]}`} to="/">
-            <img className={`${isMobile()?styles.logo_img_m:styles.logo_img}`} src={getLogoUrl()}/>
+            {renderLogoImg()}
         </NavLink>
     )
 }

src/components/Logo/styles.module.scss

@@ -30,6 +30,10 @@
         //    height: 1.94rem;
         //}
     }
+    .logo_img_m_xl{
+        width: auto;
+        height: 2.7rem;
+    }
 
     &.sm {
         font-size: 19px;

src/components/Popup.jsx

@@ -6,6 +6,8 @@ import loadable from '@loadable/component'
 import Fade from '@mui/material/Fade';
 import Grow from '@mui/material/Grow';
 import {ClickAwayListener} from '@mui/base/ClickAwayListener';
+import {ReactComponent as CloseIcon} from "@assets/singlesvg/btnclose.svg";
+
 
 // lazy loading components
 const Modal = loadable(() => import('@mui/material/Modal'));
@@ -19,7 +21,8 @@ const Popup = ({open, onClose, children, popupClass}) => {
                         <Grow in={open} timeout={500}>
                             <div className={`${popupClass || ''} popup card card-padded`} style={{minHeight: 'unset'}}>
                                 <button className="popup_close" onClick={onClose} aria-label="Close popup">
-                                    <i className="icon-xmark"/>
+                                    {/*<i className="icon-xmark"/>*/}
+                                    <CloseIcon/>
                                 </button>
                                 {children}
                             </div>

src/components/RadioBtn/styles.module.scss

@@ -5,10 +5,10 @@
   gap: 0.5rem;
   &.active{
     & .circle{
-      border: solid .13rem var(--primary-color);
+      border: solid .13rem var(--yellow);
       opacity: 1;
       & .dot{
-        background-color: var(--primary-color);
+        background-color: var(--yellow);
       }
     }
   }

src/components/SmallLoading/index.jsx

@@ -1,5 +1,5 @@
 import styles from './styles.module.scss';
-const SmallLoading=({fill = "#3BC117"})=>{
+const SmallLoading=({fill = "#f4a738"})=>{
     return (
         <div className={styles.loading}>
             <svg viewBox="0 0 84 24" fill={fill}>

src/components/SubScreen/index.jsx

@@ -9,6 +9,7 @@ import {useThemeProvider} from "@contexts/themeContext";
 import CSSTransition from "react-transition-group/CSSTransition";
 import useEdgeGesture from "@hooks/useEdgeGesture";
 import {toast} from "react-toastify";
+import {ReactComponent as BackArrow} from "@assets/singlesvg/back_arrow.svg";
 const i18n=global.i18n;
 
 const SubScreen=({open,onClose,children,route,timeout=500,level=0,header,...props})=>{
@@ -49,10 +50,13 @@ const SubScreen=({open,onClose,children,route,timeout=500,level=0,header,...prop
                 <button className={styles.close} onClick={()=>{
                     close();
                 }}>
-                    <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
+                    {/*<SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>*/}
+                    <BackArrow className={styles.arrow}/>
                 </button>
                 <div className={styles.hcontent}>
-                    {i18n.t(title)}
+                    <span className={styles.title}>
+                         {i18n.t(title)}
+                    </span>
                 </div>
             </div>
         )

src/components/SubScreen/styles.module.scss

@@ -41,12 +41,14 @@
     justify-content: flex-start;
     //background:var(--widget);
     width: 100%;
-    min-height: 3.75rem;
+    //min-height: 3.75rem;
+    min-height: 3.1rem;
   }
   & .content{
     width: 100%;
     overflow: auto;
-    margin-top: 3.75rem;
+    //margin-top: 3.75rem;
+    margin-top: 3.1rem;
   }
 }
 .header{
@@ -54,32 +56,53 @@
   flex-direction: row;
   align-items: center;
   width:100%;
-  background: var(--widget);
-  border-bottom: 1px solid var(--border);
-  box-shadow:var(--widget-shadow);
+  //background: var(--widget);
+  background: #3e1b16;
+  //border-bottom: 1px solid var(--border);
+  //box-shadow:var(--widget-shadow);
   position:relative;
-  height:3.75rem;
-  padding: 0px 10px;
+  height:3.1rem;
+  padding: 0px 0.25rem;
+  &::before{
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(to bottom, rgba(183, 88, 65, 0.26), rgba(183, 88, 65, 0.01));
+    z-index: 0;
+  }
   & .close{
     display: flex;
     align-items: center;
-    position:fixed;
-    height: 3.75rem;
-    width: 2rem;
+    justify-content: center;
+    position:absolute;
+    height: 2.6rem;
+    width: 2.6rem;
+    z-index: 2;
+    border-radius: 50%;
+    background-color: rgb(38, 18, 12);
+    border: 1px solid rgb(81, 40, 23);
     & .arrow{
-      width: 1.4rem;
-      height: 1.8em;
-      transform: rotate(-180deg);
-      fill: var(--text);
+      width: 2.13rem;
+      height: 2.15rem;
+      margin-left: -0.3rem;
     }
   }
   & .hcontent {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: 1;
+    position:absolute;
+    inset: 0;
+    z-index: 1;
     font-size: 1rem;
     font-weight: 600;
     color: var(--header);
+    & .title{
+      font-size: 1.37rem;
+      background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
   }
 }

src/layout/Footer/styles.module.scss

@@ -12,10 +12,19 @@
   width: 100%;
   padding: 48px 0;
   border-top: 1px solid var(--divider);
+  border-image: linear-gradient(
+                  to right,
+                  rgba(128, 121, 96, 0),  /* 左边透明 */
+                  rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                  rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                  rgba(128, 121, 96, 0)  /* 右边透明 */
+  );
+  border-image-slice: 1;
   .tit{
     margin: 0;
     font-size: 18px;
-    color: var(--header);
+    font-weight: bold;
+    color: var(--text);
   }
   color: var(--text);
   gap: 0.5rem;

src/layout/Navbar/index.jsx

@@ -32,6 +32,7 @@ import {toast} from "react-toastify";
 import LazyImgix from "@components/Imgix/LazyImgix";
 import {APP_SITE} from "@constants/app";
 import coinIcon from "@assets/lvicon/USD.black.png";
+import SvgIcon from "@components/SvgIcon";
 const i18n=global.i18n;
 
 const StyledToggleGroup= styled(ToggleButtonGroup)`
@@ -45,7 +46,8 @@ const StyledToggle=styled(ToggleButton)`
     border-radius: var(--border-radius) !important;
     padding: 0px !important;
     &:hover, &:focus ,&.Mui-selected, &.active {
-      background-color: var(--nav-item-hover) !important;
+      //background-color: var(--nav-item-hover) !important;
+        background-color: transparent !important;
       a {
         color: var(--header);
         font-weight: 600;
@@ -57,7 +59,7 @@ const StyledToggle=styled(ToggleButton)`
     a {
         display: flex;
         align-items: center;
-        color: var(--text);
+        color: #be9562;
         padding: 12px !important;
         transition: all var(--transition);
         font-family: var(--heading-font);
@@ -68,7 +70,7 @@ const StyledToggle=styled(ToggleButton)`
             justify-content: center;
             width: 18px;
             height: 18px;
-            fill: var(--text);
+            fill: #be9562;
         }
     }
 `;
@@ -130,7 +132,7 @@ const DesktopSignInUp=()=>{
     const isLogin=useSelector(isLogined);
     const {setIsShowLang} = useThemeProvider();
     return (
-        <div className="d-flex align-items-center justify-content-end">
+        <div className="d-flex align-items-center justify-content-end g-8">
             {/*<IconButton aria-label="search">*/}
             {/*    <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>*/}
             {/*        <use xlinkHref={`${symbol}#icon_Search`} />*/}
@@ -185,8 +187,9 @@ const DesktopNav = () => {
 const MobileSignInUp=()=>{
     const navigate=useNavigate();
     const isLogin=useSelector(isLogined);
+    if (isLogin)return (<></>);
     return (
-        <div className="d-flex align-items-center justify-content-end">
+        <div className={styles.header_right}>
             {
                 !isLogin?(
                     <>
@@ -542,9 +545,10 @@ const PageHeader = () => {
                     <button className={`${styles['mb-top-navigate-item']}  ${pathname==='/'?active:''}`} onClick={()=>{
                         changePath('/');
                     }}>
-                        <svg className={"icon"}>
-                            <use xlinkHref={`${symbol_m}#icon_Home`} />
-                        </svg>
+                        {/*<svg className={"icon"}>*/}
+                        {/*    <use xlinkHref={`${symbol_m}#icon_Home`} />*/}
+                        {/*</svg>*/}
+                        <SvgIcon className={"icon"} herf={"icon_Home"}></SvgIcon>
                         <span>{i18n.t("links.home")}</span>
                     </button>
                     {
@@ -552,9 +556,10 @@ const PageHeader = () => {
                             <button key={index} className={`${styles['mb-top-navigate-item']} ${checkNavActive(link.lv)?active:''}`} onClick={()=>{
                                 changePath(link.path);
                             }}>
-                                <svg className={"icon"}>
-                                    <use xlinkHref={`${symbol_m}#${link.icon}`} />
-                                </svg>
+                                {/*<svg className={"icon"}>*/}
+                                {/*    <use xlinkHref={`${symbol_m}#${link.icon}`} />*/}
+                                {/*</svg>*/}
+                                <SvgIcon className={"icon"} herf={link.icon}></SvgIcon>
                                 <span>{i18n.t(link.title)}</span>
                             </button>
                         ))

src/layout/Navbar/styles.module.scss

@@ -1,3 +1,4 @@
+@import "../../styles/vars";
 .appbar{
   display: flex;
   flex-direction: column;
@@ -26,17 +27,26 @@
 .header{
   position: relative;
   //height:100%;
-  height:2.49rem;
+  height:3.1rem;
   width:100%;
   padding: 0px 40px;
   //background: var(--widget);
-  background: linear-gradient(to right, #3d1915, #582a1e, #3d1915);
+  //background: linear-gradient(to right, #3d1915, #582a1e, #3d1915);
   //border-bottom: 1px solid var(--border);
-  border-bottom: 0.05rem solid #4c1a0e;
+  background: #3e1b16;
+  //border-bottom: 0.05rem solid #4c1a0e;
   padding-left:85px;
   box-shadow:var(--widget-shadow);
   pointer-events: auto;
   transition: padding .3s ease;
+  &::before{
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(to bottom, rgba(183, 88, 65, 0.26), rgba(183, 88, 65, 0.01));
+    z-index: 0;
+    pointer-events: none;
+  }
   &.nav_open{
     //padding-left:270px;
     padding-left:16.9rem;
@@ -45,7 +55,7 @@
     //position:fixed;
     //position: absolute;
     position: relative;
-    height:2.49rem;
+    height:3.1rem;
     padding: 0px 0px;
     z-index: 2;
     pointer-events: auto;
@@ -54,17 +64,29 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    position: absolute;
+    z-index: 1;
     padding: 0 0.5rem;
     gap: 0.4rem;
   }
+  & .header_right{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    padding: 0 0.5rem;
+    gap: 0.5rem;
+  }
 }
 .header_room{
   display: flex;
   //position: fixed;
   //position: absolute;
   position: relative;
-  height: 4.75rem !important;
-  background-color:var(--widget);
+  height: 2.11rem !important;
+  //background-color:var(--widget);
   z-index:1;
   padding: 0.75rem;
   margin-bottom: -1.15rem;
@@ -98,27 +120,35 @@
 .btn_sign_in{
   //padding: 12px 5px !important;
   width: 7rem !important;
-  height:2.75rem !important;
-  margin-right: 0.5rem !important;
+  height:2.2rem !important;
+  //margin-right: 0.5rem !important;
+  font-size: 1.1rem !important;
   font-weight: 600 !important;
+  color: #331811 !important;
+  background-color: #94734b !important;
+  box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.3);
   &_mobile{
-    background-color: var(--nav-item-hover) !important;
-    width: 5.8rem !important;
-    height:2rem !important;
+    //background-color: var(--nav-item-hover) !important;
+    width: 6.5rem !important;
+    height:2.1rem !important;
   }
 }
 .btn_sign_up{
   width: 7rem !important;
-  height:2.75rem !important;
+  height:2.2rem !important;
   text-transform:none !important;
   color:#fff !important;
-  background-color: rgba(29,128,58,0.7) !important;
-  background-image:conic-gradient(from 1turn,rgba(88,175,16,1),rgba(29,128,58,1));
+  //background-color: rgba(29,128,58,0.7) !important;
+  //background-image:conic-gradient(from 1turn,rgba(88,175,16,1),rgba(29,128,58,1));
+  background-color: #f4a738 !important;
+  font-size: 1.1rem !important;
   font-weight: 600 !important;
   margin-right: 1.5rem !important;
+  box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
+  //box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.3);
   &_mobile{
-    width: 5.8rem !important;
-    height:2rem !important;
+    width: 6.5rem !important;
+    height:2.1rem !important;
     margin-right: 0.1rem !important;
   }
 }
@@ -139,17 +169,26 @@
   align-items: center;
   justify-content: center;
   &.active{
-    background-color: var(--nav-item-hover);
+    //background-color: var(--nav-item-hover);
+    svg{
+      fill: #f5e67f;
+      filter: drop-shadow(0 0 0.1rem rgba(194, 133, 15, 0.74));
+    }
+    span{
+      color:#FFFFFF;
+      font-weight: 800;
+    }
   }
   span{
     margin-left: 0.375rem;
     font-size: 1rem;
-    color: var(--header);
+    color: var(--text);
     font-weight: 600;
   }
   svg{
-    width: 1.28rem;
-    height: 1.28rem;
+    width: 1rem;
+    height: 1rem;
+    fill: var(--text);
   }
 }
 .user_info{
@@ -157,7 +196,8 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  position: relative;
+  position: absolute;
+  right: 0;
   height: 100%;
   gap: 0.5rem;
   padding:0 0.5rem;
@@ -165,13 +205,17 @@
   border-top-left-radius: 3rem;
   background-color: rgba(100, 54, 27, 0.86);
   transition: padding .3s ease;
-  min-width: 53%;
+  min-width: 20%;
+  @media screen and (max-width: $width-mobile-max) {
+    min-width: 53%;
+  }
   & .info_right{
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 0.3rem;
     & .nick{
+      font-size: 0.97rem;
       color: #FFFFFF;
       max-width: 3.5rem;
       white-space: nowrap; /* 防止文本换行 */
@@ -187,10 +231,10 @@
       background-color: #4a2d13;
       border: 1px solid #76502b;
       padding: 0.05rem;
-      min-width: 1.9rem;
-      min-height: 1.9rem;
+      min-width: 2.55rem;
+      min-height: 2.55rem;
       & .avatar{
-        height: 1.9rem;
+        height: 2.55rem;
         width: auto;
         border-radius: 50%;
       }
@@ -203,11 +247,11 @@
     gap: 0.1rem;
     & .coin{
       margin-top: 0.2rem;
-      width: 2.03rem;
+      width: 2.27rem;
       height: auto;
     }
     & .score{
-      font-size: 0.9rem;
+      font-size: 0.97rem;
       color: #FFFFFF;
     }
   }

src/layout/Sidebar/index.jsx

@@ -417,7 +417,7 @@ const Sidebar = () => {
             <StyledBlock open={open}>
                 {/*{renderLogout()}*/}
                 <MTooltip disableHoverListener={open} title={i18n.t("links.live_support")} arrow placement="right">
-                    <StyledButton open={open} className="h4" fill={"#3bc117"} onClick={()=>{
+                    <StyledButton open={open} className="h4" fill={"#867f64"} onClick={()=>{
                         navigate(ROUTE_PATH.CUSTOMER);
                     }}>
                         <SvgIcon className={"icon"} herf={"icon_Support"}/>
@@ -499,7 +499,7 @@ const Sidebar = () => {
                 {renderLine()}
                 {renderLinkBlocks()}
                 {renderSuport()}
-                {renderThemeTabs()}
+                {/*{renderThemeTabs()}*/}
             </>
         )
     }
@@ -539,7 +539,7 @@ const Sidebar = () => {
                     boxShadow:'var(--widget-shadow);',
                 },
                 "& .MuiModal-backdrop":{
-                    backgroundColor:'rgba(0,0,0,0)',
+                    backgroundColor:'rgba(0,0,0,0.5)',
                 }
             }} variant="temporary" onClose={()=>{
                 setOpen(false);
@@ -549,7 +549,7 @@ const Sidebar = () => {
                     {
                         open?(
                             <div className={'logo_con_m'}>
-                                <Logo/>
+                                <Logo size={'xl'}/>
                             </div>
                         ):<></>
                     }

src/styles/_elements.scss

@@ -499,6 +499,10 @@ a {
             font-size: 1.4rem;
             color: var(--header);
         }
+        svg{
+            width: 1rem;
+            height: 1rem;
+        }
     }
     &-big{
         max-width: 40vw;
@@ -708,8 +712,9 @@ a {
         font-weight: 600;
         &::placeholder {
             font-weight: 500;
-            color: var(--header);
-            opacity: 0.6;
+            //color: var(--text);
+            opacity: 0.8;
+            color: var(--placeholder);
         }
     }
 }
@@ -724,14 +729,17 @@ a {
     width: 100%;
     min-height: 2.75rem;
     color: #fff;
-    background-color: #1d803ab3;
-    background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
+    //background-color: #1d803ab3;
+    //background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
+    background-color: #f4a738;
     user-select: none;
     border-radius: var(--border-radius);
     font-weight: 700;
     cursor: pointer;
     transition: transform .2s cubic-bezier(.36,.66,.04,1);
     text-transform: capitalize;
+    box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
+    font-size: 1rem;
 }
 .button-gray{
     display: flex;
@@ -740,8 +748,9 @@ a {
     position: relative;
     width: 100%;
     min-height: 2.75rem;
-    color: #fff;
-    background: #3C404A;
+    color: #331811;
+    //background: #3C404A;
+    background: #94734b;
     user-select: none;
     border-radius: var(--border-radius);
     font-weight: 700;

src/styles/_global.scss

@@ -67,7 +67,7 @@ body {
     .layout {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
+        gap: 0.25rem;
     }
 
     @media screen and (min-width: 768px) {
@@ -200,6 +200,14 @@ input, input::placeholder {
     width: 100%;
     border-top: 1px solid var(--divider);
     margin: 12px 0;
+    border-image: linear-gradient(
+                    to right,
+                    rgba(128, 121, 96, 0),  /* 左边透明 */
+                    rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                    rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                    rgba(128, 121, 96, 0)  /* 右边透明 */
+    );
+    border-image-slice: 1;
 }
 @keyframes rotate {
     from {

src/styles/_utils.scss

@@ -165,6 +165,9 @@
 .p-relative {
     position: relative;
 }
+.p-absolute {
+    position: absolute;
+}
 
 .z-2 {
     z-index: 2;

src/styles/_vars.scss

@@ -11,14 +11,16 @@ $width-desktop-big-max:1564px;
     --widget-scale: 0px;
     --body-light: #FAFAF8;
     //--body-dark: #000;
-    --body-dark: #1b1c20;
+    --body-dark: #1a120c;
     --widget-light: #fff;
     //--widget-dark: #111312;
-    --widget-dark: #24262B;
+    //--widget-dark: #24262B;
+    --widget-dark: #271d14;
     --standard-light:#fff;
-    --standard-dark: #1C1E22;
+    //--standard-dark: #1C1E22;
+    --standard-dark: #1a130d;
     --text-light: #585954;
-    --text-dark: #8ea2ab;
+    --text-dark: #867f64;
     --border-light: #E0E5D5;
     --border-dark: #24292b;
     --header-light: #292B23;
@@ -57,7 +59,7 @@ $width-desktop-big-max:1564px;
     --main-sidebar-width: 0;
     --header-active: 0px;
     --card-padding: 20px;
-    --primary-color: #3BC117;
+    --primary-color: #64844e;
     --border-radius: .25rem;
     --nav-item-h:46px;
     --mask-blur:linear-gradient(to bottom,transparent,#2E3035);
@@ -71,11 +73,12 @@ $width-desktop-big-max:1564px;
     --zindex-popup:1300;
     --zindex-effect:1400;
     --zindex-install:1500;
-    --coin-yellow:#edc349;
+    --coin-yellow:#b2953e;
     //--progressierBg
     --progressierBg:var(--widget) !important;
     --progressierTxt: var(--text) !important;
     --progressierBackdrop: rgba(0,0,0,0.40) !important;
+    --yellow:#f4a738;
 }
 
 //@media screen and (min-width: 414px) {

src/styles/theme.js

@@ -13,7 +13,7 @@ export default createGlobalStyle`
     })};
     --widget-grid-bg: ${theme('theme', {
         light: 'var(--widget-light)',
-        dark: '#2f3035',
+        dark: 'var(--widget-dark)',
     })};
     --widget-shadow: ${theme('theme', {
       light: '0 1px 8px rgba(110, 110, 110, .1)',
@@ -35,6 +35,10 @@ export default createGlobalStyle`
       light: 'var(--header-light)',
       dark: 'var(--header-dark)',
     })};
+    --header-yellow: ${theme('theme', {
+      light: 'var(--header-light)',
+      dark: '#aa9b5d',
+    })};
     --header-invert: ${theme('theme', {
         light: 'var(--header-dark)',
         dark: 'var(--header-light)',
@@ -49,7 +53,7 @@ export default createGlobalStyle`
     })};
     --highlight: ${theme('theme', {
       light: 'var(--olive)',
-      dark: 'var(--accent)',
+      dark: 'var(--yellow)',
     })};
     --highlight-invert: ${theme('theme', {
         light: 'var(--accent)',
@@ -73,7 +77,7 @@ export default createGlobalStyle`
     })};
     --placeholder: ${theme('theme', {
         light: '#8C9876',
-        dark: '#999999'
+        dark: '#5e4531'
     })};
     --score-alt: ${theme('theme', {
         light: 'var(--border)',
@@ -85,15 +89,15 @@ export default createGlobalStyle`
     })};
     --nav-item-bg:${theme('theme', {
         light: '#f6f7fb',
-        dark: '#191a1f'
+        dark: '#120d09'
     })};
     --nav-item-top:${theme('theme',{
         light:'#f6f7fc',
-        dark:'#25262c'
+        dark:'#271d14'
     })};
     --nav-item-hover:${theme('theme',{
         light:'rgba(236,236,245,0.5)',
-        dark:'rgba(69,70,80,0.5)'
+        dark:'rgba(112,77,40,0.3)'
     })};
     --widget-bg: ${theme('theme', {
         light: '#f6f7fb',
@@ -105,23 +109,28 @@ export default createGlobalStyle`
     })};
     --card-bg: ${theme('theme', {
         light: '#FFFFFF',
-        dark: '#2f3036',
+        // dark: '#2f3036',
+        dark: '#271d14'
     })};
       --card-bg-2: ${theme('theme', {
           light: 'rgba(130,130,130,0.3)',
-          dark: '#31343c',
+          dark: '#271d14',
       })};
       --card-bg-3: ${theme('theme', {
           light: 'rgba(55,58,63,0.3)',
-          dark: '#373a3f',
+          dark: '#271d14',
       })};
     --card-line: ${theme('theme', {
         light: 'rgba(0,0,0,.05)',
-        dark: 'rgba(255,255,255,.05)',
+        dark: 'rgba(128, 121, 96,1)',
     })};
     --pay-btn-bg: ${theme('theme', {
         light: '#FFFFFF',
-        dark:'rgba(69,70,80,0.5)'
+        dark:'rgba(39,29,20,1)'
+    })};
+    --pay-btn-border: ${theme('theme', {
+        light: '#FFFFFF',
+        dark:'rgba(78,54,34,0.5)'
     })};
     --progressierElement: ${theme('theme', {
         light: '#fafafa !important',

src/ui/SidebarTrigger/styles.module.scss

@@ -38,12 +38,12 @@
     border-width: 0.05rem;
     border-color: rgb(81, 40, 23);
     border-radius: 50%;
-    background-color: rgb(38, 18, 12);
-    width: 2.18rem;
-    height: 2.18rem;
+    background-color: #26120c;
+    width: 2.6rem;
+    height: 2.6rem;
     transition: right var(--transition);
     & .icon{
-        height: 0.95rem;
+        height: 1.2rem;
         width: auto;
     }
 }

src/widgets/LoginForm/index.jsx

@@ -40,6 +40,7 @@ import {validateCountryPhone, validateEmail} from "@utils/helpers";
 import {CircularProgress} from "@mui/material";
 import area from "@db/area";
 import SvgIcon from "@components/SvgIcon";
+import tab_focus from "@assets/gametabs/tabin_1.png";
 
 const i18n=global.i18n;
 const TYPE_LOGIN="login";
@@ -339,6 +340,11 @@ const LoginForm = ({close}) => {
                                     if(type===TYPE_LOGIN)setLoginType(item.type);
                                     else if (type===TYPE_REGISTER)setRegType(item.type);
                                 }}>
+                                {
+                                    ltype===item.type?(
+                                        <img className={styles.tab_focus} src={tab_focus}/>
+                                    ):(<></>)
+                                }
                                 <span>{i18n.t(item.label)}</span>
                             </button>
                         )

src/widgets/LoginForm/styles.module.scss

@@ -80,6 +80,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    & .tab_focus{
+      position: absolute;
+      z-index: 1;
+      height: 1.8rem;
+      width: auto;
+      bottom: 0rem;
+    }
     span{
       position: relative;
       z-index: 2;
@@ -88,16 +95,6 @@
       color: var(--text);
     }
     &.active{
-      &:after{
-        content: " ";
-        width: 100%;
-        height: 1.375rem;
-        border-bottom: 1px solid var(--primary-color);
-        background: linear-gradient(180deg, rgba(59, 193, 23, 0) 0%, rgba(59, 193, 23, 0) .01%, rgba(59, 193, 23, .2) 100%);
-        position: absolute;
-        left: 0;
-        bottom: 0;
-      }
       span{
         color: var(--header);
         font-weight: 600;

src/widgets/ModuleGroup/styles.module.scss

@@ -1,7 +1,8 @@
 .container{
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  //gap: 1rem;
+  gap: 0.5rem;
   margin-top:1.25rem;
   margin-bottom: 2rem;
 }

src/widgets/UserSettings/index.jsx

@@ -140,7 +140,9 @@ const UserSettings=()=>{
                 <div className={styles.user_con}>
                     <div className={styles.user_info}>
                         {/*<LazyImage wrapperClassName={styles.avatar} src={user.img} alt={"avatar"}></LazyImage>*/}
-                        <LazyImgix className={styles.avatar} src={user.img} alt={"avatar"} width={100}></LazyImgix>
+                        <div className={styles.avatar_con}>
+                            <LazyImgix className={styles.avatar} src={user.img} alt={"avatar"} width={100}></LazyImgix>
+                        </div>
                         <div className={`${styles.user_info} ${styles.info}`}>
                             <div className={styles.info_item}>
                                 <div className={styles.name}>{user.NickName}</div>
@@ -405,7 +407,7 @@ const UserSettings=()=>{
                 {renderItemArea()}
                 {renderItemLang()}
                 {/*{renderItemGender()}*/}
-                {renderItemTheme()}
+                {/*{renderItemTheme()}*/}
             </div>
         )
     }
@@ -414,7 +416,7 @@ const UserSettings=()=>{
             <>
                 {
                     isLogin?(
-                        <button className={`button-gray ${styles.logout}`} onClick={()=>{
+                        <button className={`button-green ${styles.logout}`} onClick={()=>{
                             if (logoutStatus===REQ_STATUS.LOADING)return;
                             dispatch(reqLogout());
                         }}>

src/widgets/UserSettings/styles.module.scss

@@ -22,8 +22,8 @@
   gap: 1.2rem;
 }
 .logout{
-  background: var(--card-bg);
-  color: var(--text);
+  //background: var(--card-bg);
+  //color: var(--text);
   height: 3rem;
 }
 .user_con{
@@ -86,11 +86,22 @@
     height: 3.1rem;
   }
 }
+.avatar_con{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 6rem;
+  height: 6rem;
+  background-color: #412711;
+  border-radius: 50%;
+  border: 2px solid #553c24;
+}
 .avatar{
-  width: 4rem;
+  width: 5.5rem;
   border-radius: 50%;
   img{
-    width: 4rem;
+    width: 5.5rem;
     height: auto;
     border-radius: 50%;
   }
@@ -102,10 +113,11 @@
   color: var(--header);
   font-weight: 600;
   gap: .25rem;
+  width: auto !important;
   & .info_item{
     display: flex;
     align-items: center;
-    gap: .4rem;
+    gap: .1rem;
     //justify-content: space-between;
     width: 100%;
     padding: 0 0.7rem 0 0;
@@ -122,13 +134,15 @@
     font-weight: 600;
   }
   & .icon_golds{
-    width: 1.2rem;
-    height: 1.2rem;
+    width: 1.8rem;
+    height: 1.8rem;
+    margin-top: 0.2rem;
   }
   & .golds{
     font-size: 1rem;
     font-weight: 600;
-    color: #edc349;
+    //color: #edc349;
+    color: var(--header);
   }
   & .icon_copy{
     width: 1.2rem;
@@ -164,7 +178,8 @@
     font-size: 1rem;
     display: flex;
     align-items: center;
-    color: var(--header);
+    //color: var(--header);
+    color:var(--text);
     gap: 0.525rem;
     text-align: left;
     & .icon{

src/widgets/WAgent/index.jsx

@@ -131,7 +131,7 @@ const WAgent=({close})=>{
                             <img src={policy_icon}/>
                             {i18n.t("agent.base.title_policy")}
                         </div>
-                        <button className={`${styles.title} ${styles.text_white}`} onClick={()=>{
+                        <button className={`${styles.title}`} onClick={()=>{
                             navigate(ROUTE_PATH.AGENT_POLICY);
                         }}>
                             {i18n.t("agent.base.details")}
@@ -157,7 +157,7 @@ const WAgent=({close})=>{
             <div className={"d-flex flex-column g-1"}>
                 <div className={`${styles.info_item} ${styles.info_item_top}`}>
                     <div className={styles.title_con}>
-                        <div className={`${styles.title} ${styles.text_white}`}>
+                        <div className={`${styles.title}`}>
                             <div className={styles.base_icon}>
                                 <img src={rank_icon}/>
                             </div>
@@ -255,7 +255,7 @@ const WAgent=({close})=>{
             <div className={"d-flex flex-column g-1"}>
                 <div className={`${styles.info_item} ${styles.info_item_top}`}>
                     <div className={styles.title_con}>
-                        <div className={`${styles.title} ${styles.text_white}`}>
+                        <div className={`${styles.title}`}>
                             <div className={styles.base_icon}>
                                 <img src={tree_icon}/>
                             </div>
@@ -312,13 +312,13 @@ const WAgent=({close})=>{
             <div className={"d-flex flex-column g-1"}>
                 <div className={`${styles.info_item} ${styles.info_item_top}`}>
                     <div className={styles.title_con}>
-                        <div className={`${styles.title} ${styles.text_white}`}>
+                        <div className={`${styles.title}`}>
                             <div className={styles.base_icon}>
                                 <img src={getDollerIcon()}/>
                             </div>
                             {i18n.t("agent.bonus.title_bonus")}
                         </div>
-                        <button className={`${styles.title} ${styles.text_white}`} onClick={()=>{
+                        <button className={`${styles.title}`} onClick={()=>{
                             navigate(ROUTE_PATH.AGENT_HISTORY);
                         }}>
                             <div className={styles.text_line}></div>
@@ -327,7 +327,7 @@ const WAgent=({close})=>{
                         </button>
                     </div>
                 </div>
-                <div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
+                <div className={`${styles.info_item_title} ${styles.info_item_title_middle}`}>
                     <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_date")}</span>
                     <div className={styles.text_line}></div>
                     <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_commision")}</span>
@@ -353,4 +353,4 @@ const WAgent=({close})=>{
         </div>
     )
 }
-export default WAgent;
+export default WAgent;

src/widgets/WAgent/styles.module.scss

@@ -40,7 +40,7 @@
   color: var(--header);
 }
 .text_green{
-  color: var(--primary-color) !important;
+  color: var(--yellow) !important;
 }
 .icon{
   width: 1.4rem;
@@ -50,7 +50,7 @@
 .arrow{
   width: 1.2rem;
   height: 1.2rem;
-  fill: var(--header);
+  fill: var(--text);
 }
 .title_con{
   display: flex;
@@ -68,7 +68,8 @@
 .text_line{
   width: 1px;
   height: 1.8rem;
-  background-color: var(--card-line);
+  //background-color: var(--card-line);
+  background-color: rgba(244, 196, 140, 0.1);
 }
 .base_con{
   display: flex;
@@ -93,7 +94,7 @@
         position: relative;
         width: 100%;
         min-height: 3rem;
-        background-color: var(--card-bg);
+        background-color: var(--nav-item-bg);
         padding: 0.5rem 1rem;
         border-radius: var(--border-radius);
         gap: 0.5rem;
@@ -118,7 +119,16 @@
       margin-top: 0.5rem;
       width: 100%;
       height: 1px;
-      background-color: var(--card-line);
+      //background-color: var(--card-line);
+      border-top: 1px solid var(--card-line);
+      border-image: linear-gradient(
+                      to right,
+                      rgba(128, 121, 96, 0),  /* 左边透明 */
+                      rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                      rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                      rgba(128, 121, 96, 0)  /* 右边透明 */
+      );
+      border-image-slice: 1;
     }
   }
 }
@@ -130,11 +140,13 @@
   height: 3rem;
 }
 .info_item_top{
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.04) 100%);
+  background-color: #271d14;
+  //background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.04) 100%);
   border-radius: 0.3rem 0.3rem 0 0;
 }
 .info_item_middle{
-  background: rgba(255, 255, 255, 0.04);
+  //background: rgba(255, 255, 255, 0.04);
+  background-color: #271d14;
 }
 .info_item_bottom{
   background: rgba(255, 255, 255, 0.04);
@@ -149,10 +161,11 @@
   height: 3rem;
 }
 .info_item_title_middle{
-  background: rgba(255, 255, 255, 0.08);
+  //background: rgba(255, 255, 255, 0.08);
+  background-color: #271d14;
 }
 .sub_data_item{
-  color: var(--header);
+  color: var(--text);
   width: 30%;
   white-space: nowrap;
   overflow: hidden;
@@ -179,10 +192,12 @@
   width: 80%;
   height: 2.2rem;
   color: #fff;
-  background-color: #1d803ab3;
-  background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
+  //background-color: #1d803ab3;
+  //background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
+  background-color: #f4a738;
+  box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
   user-select: none;
   border-radius: var(--border-radius);
   font-weight: 700;
   cursor: pointer;
-}
+}

src/widgets/WCashWheel/WCashWheelHeader.jsx

@@ -10,6 +10,7 @@ import {localStorageGet, localStorageSet} from "@utils/helpers";
 import {LOCAL_WHEEL_RETAIN} from "@constants/localkey";
 import {ROUTE_PATH} from "@constants/routes";
 import {useNavigate} from "react-router";
+import {ReactComponent as BackArrow} from "@assets/singlesvg/back_arrow.svg";
 const i18n=global.i18n;
 const WCashWheelHeader=({...props})=>{
     const route=props.route;
@@ -48,7 +49,9 @@ const WCashWheelHeader=({...props})=>{
         return (
             <div className={styles.header}>
                 <div className={styles.hcontent}>
-                    {i18n.t(title)}
+                    <span className={styles.title}>
+                         {i18n.t(title)}
+                    </span>
                 </div>
                 <div className={styles.top}>
                     <div className={styles.left}>
@@ -56,7 +59,8 @@ const WCashWheelHeader=({...props})=>{
                             close();
                             // onCheckClose();
                         }}>
-                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
+                            {/*<SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>*/}
+                            <BackArrow className={styles.arrow}/>
                         </button>
                     </div>
                     <div className={styles.right}>

src/widgets/WCashWheel/WPopInfo/styles.module.scss

@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #6ddf39;
+    color: var(--coin-yellow);
   }
 }
 .cash_main_con{
@@ -96,12 +96,15 @@
     //font-size: 1rem;
     color: var(--header);
     & .need_txt{
-      color: #6ddf39;
+      //color: #6ddf39;
+      color: var(--coin-yellow);
       font-family: "SWISSC-BT";
     }
   }
   & .btn_invite{
-    background: rgb(109, 223, 57);
+    background-color: #f4a738;
+    box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
+    //background: rgb(109, 223, 57);
     color: rgb(255, 255, 255);
     padding: 0.6rem 2rem;
     width: 90%;
@@ -139,13 +142,13 @@
       & .coins_con{
         display: flex;
         align-items: center;
-        color: #6ddf39;
+        color: var(--coin-yellow);
         gap: 0.5rem;
         & .unit{
           display: flex;
           align-items: center;
           justify-content: center;
-          background-color: #6ddf39;
+          background-color: var(--yellow);
           width: 1.5rem;
           height: 1.5rem;
           border-radius: 50%;

src/widgets/WCashWheel/WRetainPop/styles.module.scss

@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #6ddf39;
+    color: var(--yellow);
     font-size: 1.3rem;
   }
   & .tips{
@@ -85,7 +85,8 @@
     //font-size: 1rem;
     color: var(--header);
     & .need_txt{
-      color: #6ddf39;
+      //color: #6ddf39;
+      color: var(--coin-yellow);
       font-family: "SWISSC-BT";
     }
   }
@@ -100,7 +101,9 @@
     padding: 0.6rem;
     font-size: 1.1rem;
     color: #fff;
-    background: rgb(109, 223, 57);
+    //background: rgb(109, 223, 57);
+    background-color: #f4a738;
+    box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
     border-radius: var(--border-radius);
   }
   & .giveup_btn{

src/widgets/WCashWheel/WShare/styles.module.scss

@@ -50,7 +50,7 @@
     padding:0.5rem 1rem;
     color: var(--header);
     border-radius: var(--border-radius);
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--nav-item-bg);
     gap: 0.5rem;
     & .copy{
       color: #40a1de;

src/widgets/WCashWheel/WWheel/styles.module.scss

@@ -119,7 +119,7 @@
   align-items: center;
   gap: 0.5rem;
   margin-top: -1rem;
-  color: rgb(135, 149, 177);
+  color: var(--text);
   font-size: 0.9rem;
   font-weight: 600;
   & .text{
@@ -133,7 +133,7 @@
 .share_bar{
   display: flex;
   flex-direction: row;
-  background-color: var(--standard);
+  background-color: var(--nav-item-bg);
   border-radius: var(--border-radius);
   padding: 0.75rem 1rem;
   width: 100%;

src/widgets/WCashWheel/styles.module.scss

@@ -32,7 +32,7 @@
   }
   align-items: center;
   justify-content: center;
-  background-color: var(--standard);
+  background-color: #271d14;
   border-radius: 0.8rem;
   gap: 1rem;
   & .have_cash{
@@ -47,13 +47,14 @@
     & .cash_text{
       font-size: 2.1rem;
       font-family: "Roboto";
-      color: #6ddf38;
+      color: #fff;
     }
     & .cash_btn{
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #efb423 linear-gradient(90deg, #49a319, #2b8b2f);
+      background: #f4a738;
+      box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
       border-radius: .8rem;
       padding: 0.4rem 0.7rem;
       color: var(--header);
@@ -109,7 +110,7 @@
     //font-size: 1rem;
     color: var(--header);
     & .need_txt{
-      color: #6ddf39;
+      color: var(--coin-yellow);
       font-family: "SWISSC-BT";
     }
   }
@@ -131,7 +132,7 @@
     justify-content: space-around;
     width: 100%;
     border-radius: var(--border-radius);
-    background-color: var(--standard);
+    background-color: var(--nav-item-bg);
     button{
       display: flex;
       align-items: center;
@@ -173,13 +174,13 @@
       & .coins_con{
         display: flex;
         align-items: center;
-        color: #6ddf39;
+        color: var(--coin-yellow);
         gap: 0.5rem;
         & .unit{
           display: flex;
           align-items: center;
           justify-content: center;
-          background-color: #6ddf39;
+          background-color: var(--yellow);
           width: 1.5rem;
           height: 1.5rem;
           border-radius: 50%;
@@ -218,7 +219,10 @@
   flex-direction: column;
   gap: 1rem;
   & .title{
-    color: var(--header);
+    //color: var(--header);
+    background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
     font-size: 1rem;
   }
   & .content{
@@ -236,13 +240,13 @@
       gap: 1rem;
       & .tips{
         font-size: 0.9rem;
-        color: #6ddf39;
+        color: var(--coin-yellow);
       }
       & .cash{
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #fd2626;
+        color: #b2953e;
         font-size: 2.8rem;
         font-weight: 700;
         font-family: "Roboto";
@@ -254,19 +258,19 @@
       flex-direction: column;
       gap: 1rem;
       font-size: 0.9rem;
-      color: var(--header);
+      color: var(--text);
       & .step_content{
         display: flex;
         flex-direction: column;
         position: relative;
         padding: 1rem;
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: #221911;
         border-radius: 0.8rem;
         gap: 0.5rem;
         & .step_item{
           display: flex;
           align-items: center;
-          color: #4b4f5d;
+          color: #483f31;
           font-size: 0.8rem;
           z-index: 2;
           &:before{
@@ -277,11 +281,11 @@
             width: 0.5rem;
             height: 0.5rem;
             border-radius: 50%;
-            background-color: #4b4f5d;
+            background-color: #483f31;
             margin-right: 0.8rem;
           }
           &.active{
-            color: #6ddf39;
+            color: var(--text);
             &:before{
               content: "\e937";
               font-size: 0.5rem;
@@ -290,7 +294,7 @@
               width: 1rem;
               height: 1rem;
               border-radius: 50%;
-              background-color: #6ddf39;
+              background-color: #f4a738;
               margin-left: -0.25rem;
               color:#fff;
             }
@@ -299,7 +303,7 @@
         &:after{
           content: "";
           position: absolute;
-          border-left: 0.08rem dotted #3cc517;
+          border-left: 0.08rem dotted #f4a738;
           top: 1.6rem;
           bottom: 1.6rem;
           left: 1.2rem;
@@ -313,7 +317,9 @@
       color: var(--header);
       font-size: 1.2rem;
       font-weight: 600;
-      background: rgb(109, 223, 57);
+      //background: rgb(109, 223, 57);
+      background-color: #f4a738;
+      box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
     }
   }
 }
@@ -322,19 +328,28 @@
   flex-direction: row;
   align-items: center;
   width:100%;
-  background: var(--widget);
-  border-bottom: 1px solid var(--border);
-  box-shadow:var(--widget-shadow);
+  //background: var(--widget);
+  //border-bottom: 1px solid var(--border);
+  //box-shadow:var(--widget-shadow);
+  background: #3e1b16;
   position:relative;
-  height:3.75rem;
-  padding: 0px 10px;
+  height:3.1rem;
+  padding: 0px 0.25rem;
+  z-index: 1;
+  &::before{
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(to bottom, rgba(183, 88, 65, 0.26), rgba(183, 88, 65, 0.01));
+    z-index: 0;
+  }
   & .top{
     display: flex;
     align-items: center;
-    position:fixed;
+    position:absolute;
     justify-content: space-between;
-    left: 10px;
-    right: 10px;
+    left: 0.25rem;
+    right: 0.25rem;
     & .left{
       display: flex;
       align-items: center;
@@ -342,13 +357,18 @@
       & .close{
         display: flex;
         align-items: center;
-        height: 3.75rem;
-        width: 2rem;
+        justify-content: center;
+        position:absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        z-index: 2;
+        border-radius: 50%;
+        background-color: rgb(38, 18, 12);
+        border: 1px solid rgb(81, 40, 23);
         & .arrow{
-          width: 1.4rem;
-          height: 1.8em;
-          transform: rotate(-180deg);
-          fill: var(--text);
+          width: 2.13rem;
+          height: 2.15rem;
+          margin-left: -0.3rem;
         }
       }
       & .user{
@@ -397,10 +417,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
     flex: 1;
     font-size: 1rem;
     font-weight: 600;
     color: var(--header);
+    & .title{
+      font-size: 1.37rem;
+      background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
   }
 }
 

src/widgets/WCheckIn/index.jsx

@@ -14,37 +14,49 @@ import SmallLoading from "@components/SmallLoading";
 import {formatTime, localStorageGet, localStorageSet} from "@utils/helpers";
 import {getPopFirst} from "@features/mainSlice";
 import {getFirstPayMulti} from "@features/paySlice";
+import title_en from "@assets/checkIn/title_en.png";
+import title_pt from "@assets/checkIn/title_pt.png";
+import title_es from "@assets/checkIn/title_es.png";
+import title_ru from "@assets/checkIn/title_ru.png";
+import title_zh from "@assets/checkIn/title_zh.png";
 const i18n=global.i18n;
 const imgList={
     1:{
         src:require("@assets/checkIn/1.png"),
-        height:"3.2rem"
+        height:"2.8rem"
     },
     2:{
         src:require("@assets/checkIn/1.png"),
-        height:"3.2rem"
+        height:"2.8rem"
     },
     3:{
         src:require("@assets/checkIn/2.png"),
-        height:"3.6rem"
+        height:"3rem"
     },
     4:{
         src:require("@assets/checkIn/3.png"),
-        height:"3.9rem"
+        height:"3.5rem"
     },
     5:{
         src:require("@assets/checkIn/3.png"),
-        height:"3.9rem"
+        height:"3.5rem"
     },
     6:{
         src:require("@assets/checkIn/4.png"),
-        height:"4.3rem"
+        height:"3.7rem"
     },
     7:{
         src:require("@assets/checkIn/5.png"),
         height:"3.7rem"
     }
 }
+const titleMap={
+    en:title_en,
+    pt:title_pt,
+    es:title_es,
+    ru:title_ru,
+    tw:title_zh,
+}
 const objInfo={
     timer:null
 }
@@ -135,6 +147,12 @@ const WCheckIn = ({close}) => {
             callback:onCheckInCB
         }));
     }
+    const getTitleImg=()=>{
+        let lang=i18n.language;
+        let imgSrc=titleMap[lang];
+        if (imgSrc==null)imgSrc=titleMap.en;
+        return imgSrc;
+    }
     const renderBonusList=()=>{
         let RewardDay=checkInData.RewardDay;
         if(RewardDay==null)RewardDay=[];
@@ -228,7 +246,10 @@ const WCheckIn = ({close}) => {
             <Grow in={open} timeout={500}>
             <div className={styles.check_con}>
                     <div className={styles.title_con}>
-                        {i18n.t("CheckIn.title")}
+                        <div className={styles.title}>
+                            {/*{i18n.t("CheckIn.title")}*/}
+                            <img src={getTitleImg()}/>
+                        </div>
                         <button className={styles.close} onClick={onClose}>
                             <img src={closeImg} alt="close"/>
                         </button>
@@ -262,4 +283,4 @@ const WCheckIn = ({close}) => {
         </>
     )
 }
-export default WCheckIn;
+export default WCheckIn;

src/widgets/WCheckIn/styles.module.scss

@@ -1,4 +1,4 @@
-//$bg:"./../../assets/checkIn/com_tc_sm_di.jpg";
+$bg:"./../../assets/checkIn/com_tc_sm_di.png";
 $top_bg:"./../../assets/checkIn/img_sz_tc_di.png";
 $item_bg:"./../../assets/checkIn/bg_item_small.png";
 $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
@@ -28,10 +28,11 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
   flex-direction: column;
   width: 100%;
   aspect-ratio: 689/654;
-  //background: url($bg);
+  background: url($bg);
   //border-radius: var(--border-radius);
   //background: var(--widget);
-  background-image: linear-gradient(to bottom, #034039, #148943);
+  //background-image: linear-gradient(to bottom, #271d14, #522d15);
+  //background-color: #271d14;
   background-size: 100% 100%;
   pointer-events: auto;
   overflow-x: hidden;
@@ -42,12 +43,18 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
     justify-content: center;
     position: relative;
     width: 100%;
-    aspect-ratio: 689/89;
-    background: url($top_bg) no-repeat;
+    aspect-ratio: 689/40;
+    //background: url($top_bg) no-repeat;
     background-size: 89% 100%;
-    color:#FFFF5B;
+    //color:#FFFF5B;
     font-size: 1.5rem;
     font-weight: 600;
+    & .title{
+      img{
+        height: 2.98rem;
+        width: auto;
+      }
+    }
     & .close{
       display:flex;
       align-items: center;
@@ -60,7 +67,7 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
       right: 0;
       img{
         width: auto;
-        height: 44%;
+        height: 40%;
       }
     }
   }
@@ -77,13 +84,13 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 0.3rem;
+  gap: 0.5rem;
   & .item_con{
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    aspect-ratio: 732/216;
+    aspect-ratio: 732/225;
     & .item{
       position: relative;
       height: 100%;
@@ -109,7 +116,8 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
           height: 2.4rem;
           font-size: 0.9rem;
           font-weight: 600;
-          color: #fff;
+          color: #fcdb8d;
+          margin-top: -0.4rem;
         }
         & .img_con{
           display: flex;
@@ -135,25 +143,25 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
       }
     }
     & .item_1{
-      aspect-ratio: 130/178;
+      aspect-ratio: 130*1.2/225;
     }
     & .item_2{
-      aspect-ratio: 130/178;
+      aspect-ratio: 130*1.2/225;
     }
     & .item_3{
-      aspect-ratio: 150/178;
+      aspect-ratio: 150*1.2/225;
     }
     & .item_4{
-      aspect-ratio: 165/178;
+      aspect-ratio: 165*1.2/225;
     }
     & .item_5{
-      aspect-ratio: 182/178;
+      aspect-ratio: 182*1.2/225;
     }
     & .item_6{
-      aspect-ratio: 200/178;
+      aspect-ratio: 200*1.2/225;
     }
     & .item_7{
-      aspect-ratio: 205/178;
+      aspect-ratio: 205*1.2/225;
     }
   }
 }
@@ -168,7 +176,7 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
     align-items: center;
     width: 48%;
     height: 3rem;
-    border-radius: 3rem;
+    border-radius: var(--border-radius);
     font-size: 1rem;
     font-weight: 600;
     color: #fff;
@@ -182,12 +190,14 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
     }
   }
   & .btn_blue{
-    background-color: #4b9bf2;
+    background-color: #389ef4;
     text-shadow: -1px -1px 0 #3A72BC, 1px -1px 0 #3A72BC, -1px 1px 0 #3A72BC, ;
+    box-shadow: inset 0 0 0.47rem 0.38rem rgba(52, 163, 233, 0.48);
   }
   & .btn_yellow{
-    background-color: #ffb142;
+    background-color: #f4a738;
     text-shadow: -1px -1px 0 #C66A30, 1px -1px 0 #C66A30, -1px 1px 0 #C66A30, ;
+    box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
   }
   & .img_coin{
     margin-left: 0.5rem;
@@ -217,4 +227,4 @@ $item_bg_focus:"./../../assets/checkIn/img_item_mask_small.png";
       font-weight: 600;
     }
   }
-}
+}

src/widgets/WCustomerService/styles.module.scss

@@ -21,7 +21,7 @@
     padding: 1rem;
     & .title{
       font-size: 0.95rem;
-      color: var(--header);
+      color: var(--text);
     }
     & .text{
       font-size: 0.95rem;
@@ -37,7 +37,7 @@
 }
 .tips{
   color: var(--coin-yellow);
-  opacity: 0.9;
+  //opacity: 0.9;
 }
 .btn_base{
   display: flex;
@@ -60,20 +60,27 @@
   }
 }
 .ws_btn{
-  background-image: linear-gradient(135deg,  rgba(42, 184, 83, 0.7) 0%, rgb(47, 208, 94) 100%);
+  background-color: #2ec85b;
+  //background-image: linear-gradient(135deg,  rgba(42, 184, 83, 0.7) 0%, rgb(47, 208, 94) 100%);
+  box-shadow: inset 0 0 0.47rem 0.38rem rgba(44, 149, 76, 0.48);
   padding: 0.55rem 1.6rem;
 }
 .tg_btn{
-  background-image: linear-gradient(135deg,  rgb(66, 135, 194) 0%, rgb(85, 162, 229) 100%);
+  background-color: #519cdd;
+  //background-image: linear-gradient(135deg,  rgb(66, 135, 194) 0%, rgb(85, 162, 229) 100%);
+  box-shadow: inset 0 0 0.47rem 0.38rem rgba(68, 137, 197, 0.48);
   padding: 0.55rem 1.6rem;
 }
 .copy_btn{
   padding: 0.5rem 1.2rem;
-  background-image: linear-gradient(135deg,  rgb(66, 135, 194) 0%, rgb(85, 162, 229) 100%);
+  //background-image: linear-gradient(135deg,  rgb(66, 135, 194) 0%, rgb(85, 162, 229) 100%);
+  background-color: #519cdd;
+  box-shadow: inset 0 0 0.47rem 0.38rem rgba(68, 137, 197, 0.48);
 }
 .write_btn{
   padding: 0.55rem 1.6rem;
-  background-color: #a9a335;
+  background-color: #f4a738;
+  box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
   & .icon{
     width: 1.5rem;
     height: 1.5rem;
@@ -81,6 +88,14 @@
 }
 .line{
   border-top: 1px solid var(--card-line);
+  border-image: linear-gradient(
+                  to right,
+                  rgba(128, 121, 96, 0),  /* 左边透明 */
+                  rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                  rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                  rgba(128, 121, 96, 0)  /* 右边透明 */
+  );
+  border-image-slice: 1;
 }
 .report_con{
   display: flex;
@@ -96,8 +111,8 @@
     color: var(--header);
     &::placeholder {
       font-weight: 500;
-      color: var(--header);
-      opacity: 0.6;
+      color: var(--placeholder);
+      //opacity: 0.8;
     }
   }
 }

src/widgets/WDeposit/BR/BRCPFSave/BRCPFSave.jsx

@@ -58,7 +58,7 @@ const BRCPFSave = ({}) => {
         }} open={isShow}>
             <div className={styles.container}>
                 <span className={styles.title}>{i18n.t("deposit.cpf_save_br.modifyInfoTitle")}</span>
-                <span className={styles.tips}>{i18n.t("deposit.cpf_save_br.cpfTips")}</span>
+                <span className={styles.tips_1}>{i18n.t("deposit.cpf_save_br.cpfTips")}</span>
                 <form autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                     onSubmitCPF(data);
                 })}>
@@ -68,7 +68,7 @@ const BRCPFSave = ({}) => {
                                 render={({field: {ref, onChange, value}, fieldState: {error}}) => (
                                     <div className={styles.form_item}>
                                         <div className={styles.cpf_input}>
-                                            <div className={styles.title}>
+                                            <div className={styles.title_1}>
                                                 <img src={cpf_card_img}/>
                                                 CPF:
                                             </div>
@@ -96,4 +96,4 @@ const BRCPFSave = ({}) => {
         </Popup>
     )
 }
-export default BRCPFSave;
+export default BRCPFSave;

src/widgets/WDeposit/BR/BRCPFSave/styles.module.scss

@@ -10,14 +10,22 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    color: var(--header);
+    //color: var(--header);
+    background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: center;
     font-weight: 600;
-    font-size: 1.05rem;
+    font-size: 1.35rem;
   }
   & .tips{
     color: var(--coin-yellow);
     text-align: center;
   }
+  & .tips_1{
+    color: var(--text);
+    text-align: center;
+  }
   & .l_form {
     display: flex;
     flex-direction: column;
@@ -33,18 +41,18 @@
         flex-direction: row;
         width: 100%;
         gap: 0.5rem;
-        & .title{
+        & .title_1{
           display: flex;
           flex-direction: row;
           gap: 0.5rem;
           font-size: 1rem;
-          color: var(--header);
+          color: var(--text);
           img{
-            width: 1.3rem;
-            height: auto;
+            width: 1.7rem;
+            height: 1.58rem;
           }
         }
       }
     }
   }
-}
+}

src/widgets/WDeposit/BR/BRDeposit.jsx

@@ -21,12 +21,16 @@ import {ROUTE_PATH} from "@constants/routes";
 import RadioBtn from "@components/RadioBtn";
 import img_bonus from "@assets/pay/topup_bonus.png";
 import styled from 'styled-components/macro';
-import {formatCurrency, formatTime, stringFormat} from "@utils/helpers";
+import {formatCurrency, formatTime, numFormatter, stringFormat} from "@utils/helpers";
 import {APP_COUNTRY_CODE} from "@constants/app";
 import RUPaytypeSelect from "@widgets/WDeposit/RU/RUPaytypeSelect";
 import BRCPFSave from "@widgets/WDeposit/BR/BRCPFSave/BRCPFSave";
 import {Swiper, SwiperSlide} from "swiper/react";
 import {Autoplay} from "swiper/modules";
+import btn_mask_0 from "@assets/pay/btn_mask_0.png";
+import btn_mask_1 from "@assets/pay/btn_mask_1.png";
+import flag_bg from "@assets/pay/flag_bg.png"
+import USD from "@assets/lvicon/USD.black.png";
 const i18n=global.i18n;
 const PPBanner=styled.div`
     background: url(${img_bonus});
@@ -332,6 +336,7 @@ const BRDeposit=()=>{
                             }
                         }
                         let extra="+"+Math.floor(give*100/price)+'%';
+                        let mask_img=selectedID === item.id?btn_mask_1:btn_mask_0;
                         return (
                             <button key={index}
                                     className={`${styles.list_btn} ${selectedID === item.id ? styles.active : ''}`}
@@ -339,6 +344,7 @@ const BRDeposit=()=>{
                                         setSelectedID(item.id);
                                     }}
                             >
+                                <img src={mask_img} className={styles.mask}/>
                                 <div>{global.DOLLAR}</div>
                                 {/*<div>{item.money}</div>*/}
                                 <div>{formatCurrency(item.money,i18n.getCurrLangKey())}</div>
@@ -498,10 +504,23 @@ const BRDeposit=()=>{
             return (<></>)
         }
     }
+    const renderUserInfo=()=>{
+        if (!isLogin)return;
+        return (
+            <div className={styles.user_info}>
+                <div>{i18n.t("deposit.uid")+""+user.GameID}</div>
+                <div className={styles.gold_con}>
+                    <img className={styles.icon_golds} src={USD}/>
+                    <div className={styles.golds}>{global.DOLLAR + "" + numFormatter(user.Score)}</div>
+                </div>
+            </div>
+        );
+    }
     return (
         <Spring type="slideUp" className={styles.container}>
             {/*{renderFirst()}*/}
             {renderMultiFirst()}
+            {renderUserInfo()}
             {renderDeposits()}
             {renderPromotions()}
             {renderDepositBtn()}

src/widgets/WDeposit/BR/styles.module.scss

@@ -11,12 +11,13 @@
   flex-direction: column;
   position: relative;
   border-radius: 0.44rem;
-  border: 1px solid #346f41;
+  //border: 1px solid #346f41;
   //border: 1px solid #fb80f0;
   //background-image: linear-gradient(135deg, #faf8de 0%, #f79315 100%);
   //background-image: linear-gradient(135deg,  #f29e1f 0%, #d0b552 100%);
   //background-image: linear-gradient(135deg,  #234e33 0%, #346f41 100%);
-  background-image: linear-gradient(135deg,  #1d803ab3 0%, rgba(29, 128, 58, 1) 100%);
+  background: #3a1a18;
+  background-image: linear-gradient(0deg,  rgba(202, 145, 72, 0.62) 0%, rgba(121, 68, 52, 0.62) 50%, rgba(77, 56, 37, 0.62) 100%);
   //background-image: linear-gradient(135deg,  #bd1995 0%, #eb61dd 100%);
   width: 100%;
   height: 12rem;
@@ -24,21 +25,23 @@
     padding: 1.2rem;
     position: relative;
     & .title{
-      color: #fff;
+      color: #bf8b61;
       font-size: 1.2rem;
       font-weight: 700;
     }
     & .price_btn{
       margin-top: 0.8rem;
-      border-radius: 3rem;
+      border-radius: var(--border-radius);
       font-size: 1.2rem;
       font-weight: 600;
       padding: 0.3rem 0rem;
       width: 7rem;
       color: #fff;
-      background: linear-gradient(0deg, #f17e0a 0%, #faea93 100%);
-      border: 1px solid #f0c461;
-      text-shadow: -1px -1px 0 #987233, 1px -1px 0 #987233, -1px 1px 0 #987233, ;
+      //background: linear-gradient(0deg, #f17e0a 0%, #faea93 100%);
+      background: #f4a738;
+      //border: 1px solid #f0c461;
+      //text-shadow: -1px -1px 0 #987233, 1px -1px 0 #987233, -1px 1px 0 #987233, ;
+      box-shadow: inset 0 0 0.47rem 0.38rem rgba(233, 133, 52, 0.48);
     }
     & .price_con_offset{
       margin-top: 1rem;
@@ -56,7 +59,7 @@
           content: attr(data-title);
           position: absolute;
           //background-image: linear-gradient(to bottom,#fffd5a 0%,#fffd5a 30%,#fffdea 60%,#ffb643 70%);
-          background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          background-image: linear-gradient(to bottom,#fff9e5 0%,#fff9e5 30%,#ffe466 60%,#ebb238 70%);
           background-clip: text;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
@@ -73,7 +76,8 @@
         &::before{
           content: attr(data-title);
           position: absolute;
-          background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          //background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          background-image: linear-gradient(to bottom,#fff9e5 0%,#fff9e5 30%,#ffe466 60%,#ebb238 70%);
           background-clip: text;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
@@ -97,7 +101,8 @@
           content: attr(data-title);
           position: absolute;
           //background-image: linear-gradient(to bottom,#fffd5a 0%,#fffd5a 30%,#fffdea 60%,#ffb643 70%);
-          background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          //background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          background-image: linear-gradient(to bottom,#fff9e5 0%,#fff9e5 30%,#ffe466 60%,#ebb238 70%);
           background-clip: text;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
@@ -116,8 +121,8 @@
         font-size: 1.8rem;
       }
       & .label{
-        color: #fff448;
-        font-weight: 500;
+        color: #f6da8d;
+        font-weight: 700;
       }
       & .origin{
         position: relative;
@@ -156,14 +161,14 @@
     img{
       position: absolute;
       z-index: 1;
-      right: 10%;
+      right: 0%;
       height: 3.5rem;
       width: auto;
     }
     & .text{
       position: absolute;
       z-index: 2;
-      color: #f0f786;
+      color: #f6da8d;
       font-size: 1rem;
       font-weight: 600;
     }
@@ -182,7 +187,8 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    background-color: var(--pay-btn-bg);
+    //background-color: var(--pay-btn-bg);
+    background-color: var(--nav-item-bg);
     padding: 0.8rem;
     border-radius: var(--border-radius);
     & .left{
@@ -194,7 +200,7 @@
       gap: 0.5rem;
       & .label{
         font-weight: 800;
-        color: #edc349;
+        color: #cd9d29;
       }
     }
     & .right{
@@ -215,25 +221,33 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
     & .list_btn{
       position: relative;
-      border-radius: var(--border-radius);
+      border-radius: 0.35rem;
       background-color: var(--pay-btn-bg);
+      border: 1px solid var(--pay-btn-border);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.6rem;
-      font-size: 1rem;
+      font-size: 1.1rem;
       font-weight: 500;
       color: var(--text);
       overflow: hidden;
-      min-height: 2rem;
+      min-height: 3.2rem;
+      & .mask{
+        position: absolute;
+        z-index: 0;
+        height: 2.88rem;
+        width: auto;
+        bottom: 0;
+      }
       & .flag{
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         border-width: 0 2rem 2rem 0;
-        border-color: transparent rgba(0, 0, 0, 0.2) transparent transparent;
+        border-color: transparent #a8712b transparent transparent;
         border-style: solid;
         & .text{
           width: 2rem;
@@ -243,15 +257,16 @@
           transform: rotate(45deg);
           font-size: 0.65rem;
           font-weight: 700;
-          color: var(--text);
+          color: var(--header);
         }
       }
       &.active{
-        border: 1px solid var(--primary-color);
+        border: 1px solid #b8863a;
+        background-color: #704d28;
         color: var(--header);
         font-weight: 700;
         & .flag{
-          border-color: transparent #1d803a transparent transparent;
+          border-color: transparent #a8712b transparent transparent;
           & .text{
             font-weight: 800;
             color: var(--header);
@@ -325,3 +340,26 @@
     }
   }
 }
+.user_info{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.9rem;
+  & .gold_con{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    & .icon_golds{
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-top: 0.2rem;
+    }
+    & .golds{
+      //font-size: 0.875rem;
+      //font-weight: 600;
+      color:var(--header);
+    }
+  }
+}

src/widgets/WDeposit/DepositHeader.jsx

@@ -7,6 +7,8 @@ import USD from "@assets/lvicon/USD.black.png";
 import {numFormatter} from "@utils/helpers";
 import {useNavigate} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
+import {ReactComponent as BackArrow} from "@assets/singlesvg/back_arrow.svg";
+
 const i18n=global.i18n;
 const DepositHeader=({...props})=>{
     const route=props.route;
@@ -19,26 +21,29 @@ const DepositHeader=({...props})=>{
         return (
             <div className={styles.header}>
                 <div className={styles.hcontent}>
-                    {i18n.t(title)}
+                    <span className={styles.title}>
+                         {i18n.t(title)}
+                    </span>
                 </div>
                 <div className={styles.top}>
                     <div className={styles.left}>
                         <button className={styles.close} onClick={()=>{
                             close();
                         }}>
-                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
+                            {/*<SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>*/}
+                            <BackArrow className={styles.arrow}/>
                         </button>
-                        {
-                           !isLogin?(<></>):(
-                               <div className={styles.user}>
-                                   <div className={styles.uid}>{i18n.t("deposit.uid")+""+user.GameID}</div>
-                                   <div className={styles.gold_con}>
-                                       <img className={styles.icon_golds} src={USD}/>
-                                       <div className={styles.golds}>{global.DOLLAR+""+numFormatter(user.Score)}</div>
-                                   </div>
-                               </div>
-                           )
-                        }
+                        {/*{*/}
+                        {/*   !isLogin?(<></>):(*/}
+                        {/*       <div className={styles.user}>*/}
+                        {/*           <div className={styles.uid}>{i18n.t("deposit.uid")+""+user.GameID}</div>*/}
+                        {/*           <div className={styles.gold_con}>*/}
+                        {/*               <img className={styles.icon_golds} src={USD}/>*/}
+                        {/*               <div className={styles.golds}>{global.DOLLAR+""+numFormatter(user.Score)}</div>*/}
+                        {/*           </div>*/}
+                        {/*       </div>*/}
+                        {/*   )*/}
+                        {/*}*/}
                     </div>
                     <div className={styles.right}>
                         <button className={styles.right_btn}>

src/widgets/WDeposit/styles.module.scss

@@ -10,19 +10,28 @@
   flex-direction: row;
   align-items: center;
   width:100%;
-  background: var(--widget);
-  border-bottom: 1px solid var(--border);
-  box-shadow:var(--widget-shadow);
+  //background: var(--widget);
+  background: #3e1b16;
+  //border-bottom: 1px solid var(--border);
+  //box-shadow:var(--widget-shadow);
   position:relative;
-  height:3.75rem;
-  padding: 0px 10px;
+  height:3.1rem;
+  padding: 0px 0.25rem;
+  &::before{
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(to bottom, rgba(183, 88, 65, 0.26), rgba(183, 88, 65, 0.01));
+    z-index: 0;
+  }
   & .top{
     display: flex;
     align-items: center;
-    position:fixed;
+    position:absolute;
     justify-content: space-between;
     left: 10px;
     right: 10px;
+    z-index: 2;
     & .left{
       display: flex;
       align-items: center;
@@ -30,13 +39,18 @@
       & .close{
         display: flex;
         align-items: center;
-        height: 3.75rem;
-        width: 2rem;
+        justify-content: center;
+        position:absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        z-index: 2;
+        border-radius: 50%;
+        background-color: rgb(38, 18, 12);
+        border: 1px solid rgb(81, 40, 23);
         & .arrow{
-          width: 1.4rem;
-          height: 1.8em;
-          transform: rotate(-180deg);
-          fill: var(--text);
+          width: 2.13rem;
+          height: 2.15rem;
+          margin-left: -0.3rem;
         }
       }
       & .user{
@@ -85,9 +99,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: absolute;
+    inset: 0;
     flex: 1;
     font-size: 1rem;
     font-weight: 600;
     color: var(--header);
+    & .title{
+      font-size: 1.37rem;
+      background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
   }
 }

src/widgets/WEditProfile/styles.module.scss

@@ -23,7 +23,7 @@
     width: 35%;
     height: auto;
     border-radius: 50%;
-    border: solid .25rem rgba(151, 151, 151, .15);
+    border: solid .25rem #4e361f;
     img{
       width: 100%;
       height: auto;
@@ -76,10 +76,10 @@
       &.active{
         img{
           border-radius: 50%;
-          border: solid .15rem var(--primary-color);
+          border: solid .15rem var(--yellow);
         }
         border-radius: 50%;
-        border: solid .15rem var(--primary-color);
+        border: solid .15rem var(--yellow);
       }
     }
   }
@@ -110,10 +110,10 @@
     gap: 0.5rem;
     &.active{
       & .circle{
-        border: solid .13rem var(--primary-color);
+        border: solid .13rem var(--yellow);
         opacity: 1;
         & .dot{
-          background-color: var(--primary-color);
+          background-color: var(--yellow);
         }
       }
     }

src/widgets/WLangSelect/index.jsx

@@ -80,7 +80,7 @@ const WLangSelect=()=>{
                                height: "50%",
                                boxSizing: "border-box",
                                overflow:'visible !important',
-                               backgroundColor:'var(--standard);',
+                               backgroundColor:'var(--widget);',
                                boxShadow:'var(--widget-shadow);',
                                borderTopLeftRadius:'1rem',
                                borderTopRightRadius:'1rem'

src/widgets/WLangSelect/styles.module.scss

@@ -9,22 +9,31 @@
   width: 100%;
   height: 100%;
   padding: 1.5rem;
-  gap: 1.5rem;
+  gap: 1rem;
   & .header{
     display: flex;
+    align-items: center;
     width: 100%;
     font-weight: 600;
     font-size: 1rem;
-    color: var(--header);
+    color: var(--text);
     gap: 0.5rem;
     & .icon{
-      width: 1.4rem;
-      height: 1.4rem;
+      width: 1.1rem;
+      height: 1.1rem;
       fill: var(--text);
     }
   }
   & .line{
     border-top: 1px solid var(--card-line);
+    border-image: linear-gradient(
+                    to right,
+                    rgba(128, 121, 96, 0),  /* 左边透明 */
+                    rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                    rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                    rgba(128, 121, 96, 0)  /* 右边透明 */
+    );
+    border-image-slice: 1;
   }
   & .content{
     display: flex;
@@ -48,7 +57,7 @@
   border-radius: var(--border-radius);
   color: var(--text);
   &.active{
-    background: var(--nav-item-top);
+    background: rgba(26, 19, 13, 0.4);
     color: var(--header);
     font-weight: 600;
   }

src/widgets/WMail/styles.module.scss

@@ -96,6 +96,14 @@
     & .item_line{
       width: 100%;
       border-top: 1px solid var(--card-line);
+      border-image: linear-gradient(
+                      to right,
+                      rgba(128, 121, 96, 0),  /* 左边透明 */
+                      rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                      rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                      rgba(128, 121, 96, 0)  /* 右边透明 */
+      );
+      border-image-slice: 1;
     }
   }
   & .actions{
@@ -111,7 +119,7 @@
   color: var(--text);
   font-size: 1rem;
   & .empty_img{
-    opacity: 0.6;
+    //opacity: 0.6;
     margin-top: 50%;
     width: 45%;
     height: auto;

src/widgets/WPaymentOrder/BR/styles.module.scss

@@ -16,7 +16,7 @@
   & .logo{
     width: 1.4rem;
     height: 1.4rem;
-    fill: var(--primary-color);
+    fill: var(--text);
   }
 }
 .order_info{

src/widgets/WPaymentOrder/WOrderHeader/WOrderHeader.jsx

@@ -1,11 +1,13 @@
 import styles from "./styles.module.scss";
 import SvgIcon from "@components/SvgIcon";
 import MXHeaderRight from "@widgets/WPaymentOrder/WOrderHeader/MXHeaderRight";
+import {ReactComponent as BackArrow} from "@assets/singlesvg/back_arrow.svg";
 const i18n=global.i18n;
 const WOrderHeader = ({...props})=>{
     const route=props.route;
     const close=props.close;
     const renderRight=()=>{
+        // return <MXHeaderRight/>
         let areaItem=global.getLocalAreaItem();
         if (areaItem!=null){
             if (areaItem.code==="mx"){
@@ -19,14 +21,17 @@ const WOrderHeader = ({...props})=>{
         return (
             <div className={styles.header}>
                 <div className={styles.hcontent}>
-                    {i18n.t(title)}
+                    <span className={styles.title}>
+                        {i18n.t(title)}
+                    </span>
                 </div>
                 <div className={styles.top}>
                     <div className={styles.left}>
                         <button className={styles.close} onClick={() => {
                             close();
                         }}>
-                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
+                            {/*<SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>*/}
+                            <BackArrow className={styles.arrow}/>
                         </button>
                     </div>
                     {renderRight()}
@@ -40,4 +45,4 @@ const WOrderHeader = ({...props})=>{
         </div>
     )
 }
-export default WOrderHeader;
+export default WOrderHeader;

src/widgets/WPaymentOrder/WOrderHeader/styles.module.scss

@@ -3,19 +3,28 @@
   flex-direction: row;
   align-items: center;
   width:100%;
-  background: var(--widget);
-  border-bottom: 1px solid var(--border);
-  box-shadow:var(--widget-shadow);
+  //background: var(--widget);
+  background: #3e1b16;
+  //border-bottom: 1px solid var(--border);
+  //box-shadow:var(--widget-shadow);
   position:relative;
-  height:3.75rem;
-  padding: 0px 10px;
+  height:3.1rem;
+  padding: 0px 0.25rem;
+  &::before{
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(to bottom, rgba(183, 88, 65, 0.26), rgba(183, 88, 65, 0.01));
+    z-index: 0;
+  }
   & .top{
     display: flex;
     align-items: center;
-    position:fixed;
+    position:absolute;
     justify-content: space-between;
-    left: 10px;
-    right: 10px;
+    left: .25rem;
+    right: .25rem;
+    z-index: 1;
     & .left{
       display: flex;
       align-items: center;
@@ -23,13 +32,18 @@
       & .close{
         display: flex;
         align-items: center;
-        height: 3.75rem;
-        width: 2rem;
+        justify-content: center;
+        position:absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        z-index: 2;
+        border-radius: 50%;
+        background-color: rgb(38, 18, 12);
+        border: 1px solid rgb(81, 40, 23);
         & .arrow{
-          width: 1.4rem;
-          height: 1.8em;
-          transform: rotate(-180deg);
-          fill: var(--text);
+          width: 2.13rem;
+          height: 2.15rem;
+          margin-left: -0.3rem;
         }
       }
     }
@@ -38,10 +52,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: absolute;
+    inset: 0;
+    z-index: 0;
     flex: 1;
     font-size: 1rem;
     font-weight: 600;
     color: var(--header);
+    & .title{
+      font-size: 1.37rem;
+      background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
   }
 }
 .mx_right{
@@ -89,4 +113,4 @@
       }
     }
   }
-}
+}

src/widgets/WSaveAccount/index.jsx

@@ -9,6 +9,8 @@ import html2canvas from "html2canvas";
 import Fade from "@mui/material/Fade";
 import Grow from "@mui/material/Grow";
 import Modal from "@mui/material/Modal";
+import {ReactComponent as CloseIcon} from "@assets/singlesvg/btnclose.svg";
+
 const i18n=global.i18n;
 const WSaveAccount = () => {
     const [isShow, setIsShow] = useState(false);
@@ -56,14 +58,15 @@ const WSaveAccount = () => {
                     <Grow in={isShow} timeout={500}>
                         <div id={"saveAccount"} className={`popup card card-padded`} style={{minHeight: 'unset'}}>
                             <button className="popup_close" onClick={hide} aria-label="Close popup">
-                                <i className="icon-xmark"/>
+                                {/*<i className="icon-xmark"/>*/}
+                                <CloseIcon/>
                             </button>
                             <div className={styles.container}>
                                 <span className={styles.title}>
                                     {i18n.t("saveAccount.title")}
                                 </span>
                                 <div className={styles.item_con}>
-                                    <span className={styles.title}>{i18n.t("saveAccount.account")}</span>
+                                    <span className={styles.sub_title}>{i18n.t("saveAccount.account")}</span>
                                     <div className={"input-control"}>
                                         <div className={styles.item}>
                                             <span>{account}</span>
@@ -78,7 +81,7 @@ const WSaveAccount = () => {
                                     </div>
                                 </div>
                                 <div className={styles.item_con}>
-                                    <span className={styles.title}>{i18n.t("saveAccount.password")}</span>
+                                    <span className={styles.sub_title}>{i18n.t("saveAccount.password")}</span>
                                     <div className={"input-control"}>
                                         <div className={styles.item}>
                                             <span>{password}</span>
@@ -104,4 +107,4 @@ const WSaveAccount = () => {
         </Modal>
     )
 }
-export default WSaveAccount;
+export default WSaveAccount;

src/widgets/WSaveAccount/styles.module.scss

@@ -9,18 +9,21 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    color: var(--header);
-    font-weight: 600;
-    font-size: 1rem;
+    //color: var(--header);
+    background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+    font-size: 1.12rem;
   }
   .item_con{
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    & .title{
+    & .sub_title{
       display: flex;
       justify-content: flex-start;
-      font-size: 1rem;
+      font-size: 1.12rem;
       color: var(--text);
     }
     & .item{
@@ -45,4 +48,4 @@
     justify-content: center;
     color: var(--coin-yellow);
   }
-}
+}

src/widgets/WSecurity/index.jsx

@@ -53,7 +53,7 @@ const WSecurity = ({ close }) => {
     return (
         <div className={styles.container}>
             <Spring className={styles.content} type={"slideUp"}>
-                <div className={`${styles.title_con} ${styles.title}`}>
+                <div className={`${styles.title_con} ${styles.title_y}`}>
                     {i18n.t("security.title")}
                 </div>
                 <div className={styles.line}></div>
@@ -90,4 +90,4 @@ const WSecurity = ({ close }) => {
         </div>
     )
 }
-export default WSecurity;
+export default WSecurity;

src/widgets/WSecurity/styles.module.scss

@@ -13,8 +13,13 @@
   background-color: var(--card-bg-2);
   padding: 1rem;
   border: 1px solid #98a7b514;
+  & .title_y{
+    color: var(--header-yellow);
+    font-size: 1rem;
+    font-weight: 600;
+  }
   & .title{
-    color: var(--header);
+    color: var(--text);
     font-size: 1rem;
     font-weight: 600;
   }
@@ -26,6 +31,14 @@
   }
   & .line{
     border-top: 1px solid var(--card-line);
+    border-image: linear-gradient(
+                    to right,
+                    rgba(128, 121, 96, 0),  /* 左边透明 */
+                    rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                    rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                    rgba(128, 121, 96, 0)  /* 右边透明 */
+    );
+    border-image-slice: 1;
   }
   & .item{
     display: flex;
@@ -49,4 +62,4 @@
       height: 2.25rem;
     }
   }
-}
+}

src/widgets/WWithdraw/BR/BRWithdraw.jsx

@@ -15,6 +15,8 @@ import {reqWithdrawBaseInfo, reqWithdrawInfo, reqWithdrawPayout} from "@features
 import {REQ_STATUS} from "@api/config";
 import {toast} from "react-toastify";
 import {APP_COUNTRY_CODE} from "@constants/app";
+import btn_mask_0 from "@assets/pay/btn_mask_0.png";
+import btn_mask_1 from "@assets/pay/btn_mask_1.png";
 const i18n=global.i18n;
 const BRWithdraw=()=>{
     const user=useSelector(getUserInfo);
@@ -198,6 +200,7 @@ const BRWithdraw=()=>{
                     {
                         addBtnParam.map((item,index)=>{
                             let label=item===-1?i18n.t("withdraw.main.btn_all"):global.DOLLAR+" "+formatCurrency(item,locales);
+                            let mask_img=addIndex===index?btn_mask_1:btn_mask_0;
                             return (
                                 <button key={index}
                                         className={`${styles.grid_btn} ${addIndex===index?styles.active:''}`}
@@ -207,8 +210,10 @@ const BRWithdraw=()=>{
                                             let addIndx=Number(value)===fvalue?index:-1;
                                             if (addIndx!==-1)setWdValue(fvalue);
                                             setAddIndex(addIndx);
+                                            // setAddIndex(index);
                                         }}
                                 >
+                                    <img className={styles.mask} src={mask_img}/>
                                     {label}
                                 </button>
                             )

src/widgets/WWithdraw/BR/styles.module.scss

@@ -27,15 +27,23 @@
   }
 }
 .title{
-  color: var(--header);
+  color: var(--text);
   font-size: 1rem;
 }
 .money{
-  color: var(--coin-yellow);
+  color: var(--header);
   font-size: 1rem;
 }
 .line{
   border-top: 1px solid var(--card-line);
+  border-image: linear-gradient(
+                  to right,
+                  rgba(128, 121, 96, 0),  /* 左边透明 */
+                  rgba(128, 121, 96, 0.4) 45%,  /* 中间不透明 */
+                  rgba(128, 121, 96, 0.4) 55%,  /* 中间不透明 */
+                  rgba(128, 121, 96, 0)  /* 右边透明 */
+  );
+  border-image-slice: 1;
 }
 
 .select_con{
@@ -46,6 +54,7 @@
     position: relative;
     border-radius: var(--border-radius);
     background-color: var(--pay-btn-bg);
+    border: 1px solid var(--pay-btn-border);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -56,15 +65,25 @@
     color: var(--text);
     overflow: hidden;
     min-height: 2rem;
+    & .mask{
+      position: absolute;
+      z-index: 0;
+      height: 2.88rem;
+      width: auto;
+      bottom: 0;
+    }
     &.active{
-      border: 1px solid var(--primary-color);
+      //border: 1px solid var(--primary-color);
+      border: 1px solid #b8863a;
+      background-color: #704d28;
       color: var(--header);
       font-weight: 700;
     }
   }
 }
 .input_con{
-  background-color: var(--pay-btn-bg);
+  //background-color: var(--pay-btn-bg);
+  background-color: var(--nav-item-bg);
   gap: 1rem;
   font-size: 1rem;
 }
@@ -93,9 +112,9 @@
     & .icon{
       width: 1.4em;
       height: 1.4em;
-      fill: var(--primary-color);
+      fill: var(--yellow);
       path{
-        fill: var(--primary-color);
+        fill: var(--yellow);
       }
     }
   }
@@ -107,7 +126,7 @@
     gap: 0.6rem;
     & .title{
       font-size: 0.9rem;
-      color: var(--header);
+      color: var(--text);
     }
     & .active
     {
@@ -134,7 +153,7 @@
   & .logo{
     width: 1.4rem;
     height: 1.4rem;
-    fill: var(--primary-color);
+    fill: var(--text);
   }
 }
 .accout_form{
@@ -165,10 +184,10 @@
     gap: 0.5rem;
     &.active{
       & .circle{
-        border: solid .13rem var(--primary-color);
+        border: solid .13rem var(--yellow);
         opacity: 1;
         & .dot{
-          background-color: var(--primary-color);
+          background-color: var(--yellow);
         }
       }
     }

src/widgets/WWithdraw/PassBox/styles.module.scss

@@ -3,10 +3,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: var(--header);
+    color: var(--coin-yellow);
     gap: 1.5rem;
     & .title{
       font-size: 1.1rem;
+      background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
     & .help_con{
       margin-top: -0.6rem;
@@ -27,7 +30,7 @@
         & .icon{
           width: 1.4rem;
           height: 1.4rem;
-          fill: #3bc117;
+          fill: var(--primary-color);
         }
       }
     }

src/widgets/WWithdraw/PassEdit/WDPassEdit.jsx

@@ -304,7 +304,6 @@ const WDPassEdit=({close})=>{
         // let InsurePass=Number(user.InsurePass);
         // if (InsurePass===1)return renderSuccess();
         // else return renderForm();
-
         if (showType===0)return renderForm();
         else return renderSuccess();
     }

src/widgets/WWithdraw/PassEdit/styles.module.scss

@@ -22,14 +22,14 @@
   gap: 1rem;
   & .title{
     font-size: 1rem;
-    color: var(--header);
+    color: var(--text);
   }
   & .password{
     display: flex;
     flex-direction: column;
     //font-size: 0.8rem;
     gap: 0.5rem;
-    color: var(--header);
+    color: var(--text);
   }
   & .btn_con{
     margin-top: 1rem;
@@ -43,7 +43,7 @@
   width: 100%;
   gap: 1rem;
   font-size: 0.9rem;
-  color: var(--header);
+  color: var(--text);
   text-align: center;
   & .title{
     font-size: 1.1rem;

src/widgets/WWithdraw/WWithdrawRecord/styles.module.scss

@@ -38,7 +38,7 @@
         & .logo{
           width: 1.4rem;
           height: 1.4rem;
-          fill: var(--primary-color);
+          fill: var(--text);
         }
       }
       & .title{
@@ -137,4 +137,4 @@
       }
     }
   }
-}
+}

src/widgets/WWithdraw/WWithdrawRules/styles.module.scss

@@ -19,4 +19,4 @@
       color: var(--coin-yellow);
     }
   }
-}
+}

src/widgets/WWithdraw/WithdrawHeader.jsx

@@ -4,6 +4,7 @@ import {useNavigate} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
 import {useState} from "react";
 import WWithdrawRules from "@widgets/WWithdraw/WWithdrawRules/WWithdrawRules";
+import {ReactComponent as BackArrow} from "@assets/singlesvg/back_arrow.svg";
 const i18n=global.i18n;
 const WithdrawHeader=({...props})=>{
     const route=props.route;
@@ -15,14 +16,15 @@ const WithdrawHeader=({...props})=>{
         return (
             <div className={styles.header}>
                 <div className={styles.hcontent}>
-                    {i18n.t(title)}
+                    <span className={styles.title}>{i18n.t(title)}</span>
                 </div>
                 <div className={styles.top}>
                     <div className={styles.left}>
                         <button className={styles.close} onClick={()=>{
                             close();
                         }}>
-                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
+                            {/*<SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>*/}
+                            <BackArrow className={styles.arrow}/>
                         </button>
                     </div>
                     <div className={styles.right}>

src/widgets/WWithdraw/styles.module.scss

@@ -8,39 +8,57 @@
   flex-direction: row;
   align-items: center;
   width:100%;
-  background: var(--widget);
-  border-bottom: 1px solid var(--border);
-  box-shadow:var(--widget-shadow);
+  background: #3e1b16;
+  //background: var(--widget);
+  //border-bottom: 1px solid var(--border);
+  //box-shadow:var(--widget-shadow);
   position:relative;
-  height:3.75rem;
-  padding: 0px 10px;
+  height:3.1rem;
+  padding: 0px 0.25rem;
+  &::before{
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(to bottom, rgba(183, 88, 65, 0.26), rgba(183, 88, 65, 0.01));
+    z-index: 0;
+  }
   & .top{
     display: flex;
     align-items: center;
-    position:fixed;
+    position:absolute;
     justify-content: space-between;
-    left: 10px;
-    right: 10px;
+    inset: 0;
     & .left{
       display: flex;
       align-items: center;
+      position: absolute;
+      left: 0.25rem;
+      z-index: 2;
       gap: 0.25rem;
       & .close{
         display: flex;
         align-items: center;
-        height: 3.75rem;
-        width: 2rem;
+        justify-content: center;
+        position:absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        z-index: 2;
+        border-radius: 50%;
+        background-color: rgb(38, 18, 12);
+        border: 1px solid rgb(81, 40, 23);
         & .arrow{
-          width: 1.4rem;
-          height: 1.8em;
-          transform: rotate(-180deg);
-          fill: var(--text);
+          width: 2.13rem;
+          height: 2.15rem;
+          margin-left: -0.3rem;
         }
       }
     }
     & .right{
       display: flex;
       align-items: center;
+      position: absolute;
+      right: 0.25rem;
+      z-index: 2;
       & .right_btn{
         display: flex;
         align-items: center;
@@ -59,9 +77,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: 1;
+    position:absolute;
+    inset: 0;
+    z-index: 1;
     font-size: 1rem;
     font-weight: 600;
     color: var(--header);
+    pointer-events: none;
+    & .title{
+      font-size: 1.37rem;
+      background: linear-gradient(to bottom, #ffe1a8, #8c6e48);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
   }
 }