style: ajust dark theme

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -18,12 +18,15 @@ interface RequestTokenInnerProps {
   }[];
   xAxisData: string[];
 }
+
+const labelFormatter = (v: any) => {
+  return dayjs(v).format('MM-DD');
+};
+
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   const { requestData, tokenData, xAxisData } = props;
   const intl = useIntl();
-  const labelFormatter = (v: any) => {
-    return dayjs(v).format('MM-DD');
-  };
+
   return (
     <CardWrapper style={{ width: '100%' }}>
       <Row style={{ width: '100%' }}>

src/pages/llmodels/components/instance-item.tsx

@@ -174,7 +174,7 @@ const RenderWorkerDownloading = (props: {
         showInfo={false}
         type="circle"
         size={16}
-        strokeColor="var(--color-progress-green)"
+        strokeColor="var(--ant-color-success)"
         percent={
           _.find(rayActors, (item: any) => item.download_progress < 100)
             ?.download_progress || 0

src/pages/llmodels/style/search-result.less

@@ -20,7 +20,7 @@
   left: 0;
   right: 0;
   padding-inline: @padding;
-  background: var(--color-white-1);
+  background: var(--ant-color-bg-elevated);
   padding-bottom: 10px;
 
   .filter {

src/pages/llmodels/style/separator.less

@@ -12,7 +12,7 @@
     transform: rotate(45deg);
     border-left: none;
     border-bottom: none;
-    background-color: var(--color-white-1);
+    background-color: var(--ant-color-bg-elevated);
     z-index: 100;
     clip-path: polygon(0 -1px, 24px 0, 24px 23px);
   }

src/pages/llmodels/style/title-wrapper.less

@@ -12,7 +12,7 @@
   padding-top: 10px;
   margin-bottom: 0;
   font-weight: var(--font-weight-bold);
-  background-color: var(--color-white-1);
+  background-color: var(--ant-color-bg-elevated);
 
   .title {
     font-weight: var(--font-weight-bold);

src/pages/login/index.tsx

@@ -1,15 +1,53 @@
+import Bg2 from '@/assets/images/bg-2.png';
 import { userAtom } from '@/atoms/user';
 import Footer from '@/components/footer';
 import useUserSettings from '@/hooks/use-user-settings';
 import { useModel } from '@umijs/max';
-import { ConfigProvider } from 'antd';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
+import styled from 'styled-components';
 import LoginForm from './components/login-form';
 import PasswordForm from './components/password-form';
-import styles from './components/styles.less';
 import { checkDefaultPage } from './utils';
 
+const Wrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  min-height: 100vh;
+  z-index: -1;
+  background: url(${Bg2}) center center no-repeat;
+  background-size: cover;
+  opacity: 0.6;
+`;
+
+const Box = styled.div`
+  padding-top: 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+`;
+
+const FormWrapper = styled.div`
+  margin: 0 auto;
+  border-radius: var(--border-radius-modal);
+  width: max-content;
+  height: max-content;
+  padding: 32px;
+  background-color: rgba(255, 255, 255, 90%);
+
+  .field-wrapper {
+    background-color: transparent !important;
+  }
+
+  .ant-input-outlined.ant-input-status-error:not(.ant-input-disabled) {
+    background-color: transparent !important;
+  }
+`;
+
 const Login = () => {
   const { themeData } = useUserSettings();
   const [userInfo, setUserInfo] = useAtom(userAtom);
@@ -36,15 +74,15 @@ const Login = () => {
   }, []);
 
   return (
-    <ConfigProvider componentSize="large" theme={themeData}>
-      <div className="login-wrapper"></div>
-      <div className={styles.box}>
-        <div className={styles['login-form-wrapper']}>
+    <div>
+      <Wrapper></Wrapper>
+      <Box>
+        <FormWrapper>
           {userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
-        </div>
+        </FormWrapper>
         <Footer />
-      </div>
-    </ConfigProvider>
+      </Box>
+    </div>
   );
 };