🎨 style: remove overly vibrant colors and simplify UI design

- Remove colorful gradient backgrounds from dashboard panel headers in Detail page - Replace custom header styling with default Semi-UI card title styling - Remove background images and gradient overlays from all authentication pages - Simplify authentication page layouts with clean gray backgrounds - Update title text colors from white to dark gray for better contrast - Remove unnecessary z-index layering and complex positioning - Clean up unused background image imports This change creates a more professional and consistent visual appearance across the application by removing distracting visual elements.
2025-06-09 00:14:35 +08:00
parent 9dbfd1b0af
commit 587f420344
6 changed files with 15 additions and 73 deletions
--- a/web/src/components/auth/LoginForm.js
+++ b/web/src/components/auth/LoginForm.js
@@ -32,7 +32,6 @@ import OIDCIcon from '../common/logo/OIDCIcon.js';
 import WeChatIcon from '../common/logo/WeChatIcon.js';
 import LinuxDoIcon from '../common/logo/LinuxDoIcon.js';
 import { useTranslation } from 'react-i18next';
-import Background from '/example.png';

 const LoginForm = () => {
  const [inputs, setInputs] = useState({
@@ -266,7 +265,7 @@ const LoginForm = () => {
        <div className="w-full max-w-md">
          <div className="flex items-center justify-center mb-6 gap-2">
            <img src={logo} alt="Logo" className="h-10 rounded-full" />
-            <Title heading={3} className='!text-white'>{systemName}</Title>
+            <Title heading={3} className='!text-gray-800'>{systemName}</Title>
          </div>

          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
@@ -500,19 +499,8 @@ const LoginForm = () => {
  };

  return (
-    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
-      {/* 背景图片容器 - 放大并保持居中 */}
-      <div
-        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
-        style={{
-          backgroundImage: `url(${Background})`
-        }}
-      ></div>
-
-      {/* 半透明遮罩层 */}
-      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
-
-      <div className="w-full max-w-sm relative z-10">
+    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-sm">
        {showEmailLogin || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
          ? renderEmailLoginForm()
          : renderOAuthOptions()}
--- a/web/src/components/auth/PasswordResetConfirm.js
+++ b/web/src/components/auth/PasswordResetConfirm.js
@@ -4,7 +4,6 @@ import { useSearchParams, Link } from 'react-router-dom';
 import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
 import { IconMail, IconLock, IconCopy } from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
-import Background from '/example.png';

 const { Text, Title } = Typography;

@@ -79,24 +78,13 @@ const PasswordResetConfirm = () => {
  }

  return (
-    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
-      {/* 背景图片容器 - 放大并保持居中 */}
-      <div
-        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
-        style={{
-          backgroundImage: `url(${Background})`
-        }}
-      ></div>
-
-      {/* 半透明遮罩层 */}
-      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
-
-      <div className="w-full max-w-sm relative z-10">
+    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-sm">
        <div className="flex flex-col items-center">
          <div className="w-full max-w-md">
            <div className="flex items-center justify-center mb-6 gap-2">
              <img src={logo} alt="Logo" className="h-10 rounded-full" />
-              <Title heading={3} className='!text-white'>{systemName}</Title>
+              <Title heading={3} className='!text-gray-800'>{systemName}</Title>
            </div>

            <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
--- a/web/src/components/auth/PasswordResetForm.js
+++ b/web/src/components/auth/PasswordResetForm.js
@@ -5,7 +5,6 @@ import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
 import { IconMail } from '@douyinfe/semi-icons';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import Background from '/example.png';

 const { Text, Title } = Typography;

@@ -79,24 +78,13 @@ const PasswordResetForm = () => {
  }

  return (
-    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
-      {/* 背景图片容器 - 放大并保持居中 */}
-      <div
-        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
-        style={{
-          backgroundImage: `url(${Background})`
-        }}
-      ></div>
-
-      {/* 半透明遮罩层 */}
-      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
-
-      <div className="w-full max-w-sm relative z-10">
+    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-sm">
        <div className="flex flex-col items-center">
          <div className="w-full max-w-md">
            <div className="flex items-center justify-center mb-6 gap-2">
              <img src={logo} alt="Logo" className="h-10 rounded-full" />
-              <Title heading={3} className='!text-white'>{systemName}</Title>
+              <Title heading={3} className='!text-gray-800'>{systemName}</Title>
            </div>

            <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
--- a/web/src/components/auth/RegisterForm.js
+++ b/web/src/components/auth/RegisterForm.js
@@ -33,7 +33,6 @@ import WeChatIcon from '../common/logo/WeChatIcon.js';
 import TelegramLoginButton from 'react-telegram-login/src';
 import { UserContext } from '../../context/User/index.js';
 import { useTranslation } from 'react-i18next';
-import Background from '/example.png';

 const RegisterForm = () => {
  const { t } = useTranslation();
@@ -272,7 +271,7 @@ const RegisterForm = () => {
        <div className="w-full max-w-md">
          <div className="flex items-center justify-center mb-6 gap-2">
            <img src={logo} alt="Logo" className="h-10 rounded-full" />
-            <Title heading={3} className='!text-white'>{systemName}</Title>
+            <Title heading={3} className='!text-gray-800'>{systemName}</Title>
          </div>

          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
@@ -379,7 +378,7 @@ const RegisterForm = () => {
        <div className="w-full max-w-md">
          <div className="flex items-center justify-center mb-6 gap-2">
            <img src={logo} alt="Logo" className="h-10 rounded-full" />
-            <Title heading={3} className='!text-white'>{systemName}</Title>
+            <Title heading={3} className='!text-gray-800'>{systemName}</Title>
          </div>

          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
@@ -542,17 +541,8 @@ const RegisterForm = () => {
  };

  return (
-    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
-      <div
-        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
-        style={{
-          backgroundImage: `url(${Background})`
-        }}
-      ></div>
-
-      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
-
-      <div className="w-full max-w-sm relative z-10">
+    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-sm">
        {showEmailRegister || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
          ? renderEmailRegisterForm()
          : renderOAuthOptions()}
--- a/web/src/pages/Detail/index.js
+++ b/web/src/pages/Detail/index.js
@@ -784,19 +784,7 @@ const Detail = (props) => {
                bordered={false}
                className={`${group.color} border-0 !rounded-2xl w-full`}
                headerLine={true}
-                header={<div style={{ color: 'white', fontWeight: 'bold', fontSize: '16px' }}>{group.title}</div>}
-                headerStyle={{
-                  background: idx === 0
-                    ? 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
-                    : idx === 1
-                      ? 'linear-gradient(135deg, #10b981 0%, #34d399 100%)'
-                      : idx === 2
-                        ? 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)'
-                        : 'linear-gradient(135deg, #ec4899 0%, #f472b6 100%)',
-                  borderTopLeftRadius: '16px',
-                  borderTopRightRadius: '16px',
-                  padding: '12px 16px',
-                }}
+                title={group.title}
              >
                <div className="space-y-4">
                  {group.items.map((item, itemIdx) => (
--- a/web/src/pages/Setup/index.js
+++ b/web/src/pages/Setup/index.js
@@ -133,7 +133,7 @@ const Setup = () => {
  };

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="bg-gray-50">
      <Layout>
        <Layout.Content>
          <div className="flex justify-center px-4 py-8">