style: login page dark style

src/assets/images/noise-bg.svg

@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080">
-  <filter id="noiseFilter">
-    <feTurbulence 
-      type="fractalNoise" 
-      baseFrequency="0.6" 
-      numOctaves="2" 
-      stitchTiles="stitch"
-    />
-    <feColorMatrix 
-      type="matrix" 
-      values="1 0 0 0 0
-              0 1 0 0 0
-              0 0 1 0 0
-              0 0 0 0.2 0" />
-    <feGaussianBlur stdDeviation="0.6" />
-  </filter>
-  <rect width="100%" height="100%" fill="#181818"/>
-  <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
-</svg>
-

src/components/echarts/config.ts

@@ -40,7 +40,7 @@ export default function useChartConfig() {
       tickLineColor: token.colorSplit,
       axislabelColor: token.colorTextTertiary,
       gaugeBgColor: token.colorFillSecondary,
-      gaugeSplitLineColor: isDarkTheme ? '#ccc' : 'rgba(255, 255, 255, 1)',
+      gaugeSplitLineColor: isDarkTheme ? '#999' : 'rgba(255, 255, 255, 1)',
       colorBgContainerHover: isDarkTheme ? '#424242' : '#fff'
     };
   }, [userSettings.theme, isDarkTheme]);

src/pages/login/components/login-form.tsx

@@ -198,7 +198,7 @@ const LoginForm = () => {
             />
           </Form.Item>
           <Form.Item noStyle name="autoLogin" valuePropName="checked">
-            <Checkbox style={{ marginLeft: 5, marginBottom: 16 }}>
+            <Checkbox style={{ marginLeft: 5, marginBottom: 20 }}>
               <span style={{ color: 'var(--ant-color-text-secondary)' }}>
                 {' '}
                 {intl.formatMessage({ id: 'common.login.rember' })}

src/pages/login/index.tsx

@@ -1,5 +1,5 @@
 import Bg2 from '@/assets/images/bg-2.png';
-import GridBg from '@/assets/images/noise-bg.svg';
+import NoiseBg from '@/assets/images/noise_texture.png';
 import { userAtom } from '@/atoms/user';
 import Footer from '@/components/footer';
 import useUserSettings from '@/hooks/use-user-settings';
@@ -22,11 +22,12 @@ const Wrapper = styled.div<{ $isDarkTheme: boolean }>`
   z-index: -1;
   background: ${({ $isDarkTheme }) =>
     $isDarkTheme
-      ? `url(${GridBg}) center center no-repeat`
+      ? `radial-gradient(#404040 0%, #292929 40%, #141414 100%),url(${NoiseBg}) center center repeat`
       : `url(${Bg2}) center center no-repeat`};
   background-size: ${({ $isDarkTheme }) =>
-    $isDarkTheme ? '100% 100%' : 'cover'};
+    $isDarkTheme ? 'contain' : 'cover'};
   opacity: ${({ $isDarkTheme }) => ($isDarkTheme ? 1 : 0.6)};
+  background-blend-mode: color-burn;
 `;
 
 const Box = styled.div`
@@ -38,13 +39,14 @@ const Box = styled.div`
 `;
 
 const FormWrapper = styled.div`
+  position: relative;
   margin: 0 auto;
   border-radius: var(--border-radius-modal);
   width: max-content;
   height: max-content;
-  padding: 32px;
+  padding: 40px;
   background-color: var(--color-modal-content-bg);
-  box-shadow: var(--ant-box-shadow-secondary);
+
   .field-wrapper {
     background-color: transparent !important;
   }