From bb852ef6d20d65c87c4c0eaa5659e21a736c19b9 Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Sun, 10 Aug 2025 17:21:05 +0800
Subject: [PATCH] fix: improve dark mode UI consistency in signin page (#23684)

---
 .../components/base/select/locale-signin.tsx  | 61 +++++++++++++++++++
 web/app/signin/_header.tsx                    |  4 +-
 web/app/signin/assets/github-dark.svg         | 17 ++++++
 .../{normalForm.tsx => normal-form.tsx}       |  9 ++-
 .../{oneMoreStep.tsx => one-more-step.tsx}    |  0
 web/app/signin/page.module.css                |  4 ++
 web/app/signin/page.tsx                       |  4 +-
 7 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 web/app/components/base/select/locale-signin.tsx
 create mode 100644 web/app/signin/assets/github-dark.svg
 rename web/app/signin/{normalForm.tsx => normal-form.tsx} (96%)
 rename web/app/signin/{oneMoreStep.tsx => one-more-step.tsx} (100%)

diff --git a/web/app/components/base/select/locale-signin.tsx b/web/app/components/base/select/locale-signin.tsx
new file mode 100644
index 0000000000..48dbee1ca3
--- /dev/null
+++ b/web/app/components/base/select/locale-signin.tsx
@@ -0,0 +1,61 @@
+'use client'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { Fragment } from 'react'
+import { GlobeAltIcon } from '@heroicons/react/24/outline'
+
+type ISelectProps = {
+  items: Array<{ value: string; name: string }>
+  value?: string
+  className?: string
+  onChange?: (value: string) => void
+}
+
+export default function LocaleSigninSelect({
+  items,
+  value,
+  onChange,
+}: ISelectProps) {
+  const item = items.filter(item => item.value === value)[0]
+
+  return (
+    <div className="w-56 text-right">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover">
+            <GlobeAltIcon className="mr-1 h-5 w-5" aria-hidden="true" />
+            {item?.name}
+          </MenuButton>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg focus:outline-none">
+            <div className="px-1 py-1 ">
+              {items.map((item) => {
+                return <MenuItem key={item.value}>
+                  <button
+                    className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-[active]:bg-state-base-hover'}
+                    onClick={(evt) => {
+                      evt.preventDefault()
+                      onChange && onChange(item.value)
+                    }}
+                  >
+                    {item.name}
+                  </button>
+                </MenuItem>
+              })}
+
+            </div>
+
+          </MenuItems>
+        </Transition>
+      </Menu>
+    </div>
+  )
+}
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 03e05924b8..731a229b8e 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 import { useContext } from 'use-context-selector'
-import Select from '@/app/components/base/select/locale'
+import LocaleSigninSelect from '@/app/components/base/select/locale-signin'
 import Divider from '@/app/components/base/divider'
 import { languages } from '@/i18n-config/language'
 import type { Locale } from '@/i18n-config'
@@ -33,7 +33,7 @@ const Header = () => {
         />
         : <DifyLogo size='large' />}
       <div className='flex items-center gap-1'>
-        <Select
+        <LocaleSigninSelect
           value={locale}
           items={languages.filter(item => item.supported)}
           onChange={(value) => {
diff --git a/web/app/signin/assets/github-dark.svg b/web/app/signin/assets/github-dark.svg
new file mode 100644
index 0000000000..bfa1fdd4c9
--- /dev/null
+++ b/web/app/signin/assets/github-dark.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_131_1011)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0003 0.5C9.15149 0.501478 6.39613 1.51046 4.22687 3.34652C2.05761 5.18259 0.615903 7.72601 0.159545 10.522C-0.296814 13.318 0.261927 16.1842 1.73587 18.6082C3.20981 21.0321 5.50284 22.8558 8.20493 23.753C8.80105 23.8636 9.0256 23.4941 9.0256 23.18C9.0256 22.8658 9.01367 21.955 9.0097 20.9592C5.6714 21.6804 4.96599 19.5505 4.96599 19.5505C4.42152 18.1674 3.63464 17.8039 3.63464 17.8039C2.54571 17.065 3.71611 17.0788 3.71611 17.0788C4.92227 17.1637 5.55616 18.3097 5.55616 18.3097C6.62521 20.1333 8.36389 19.6058 9.04745 19.2976C9.15475 18.5251 9.46673 17.9995 9.8105 17.7012C7.14383 17.4008 4.34204 16.3774 4.34204 11.8054C4.32551 10.6197 4.76802 9.47305 5.57801 8.60268C5.45481 8.30236 5.04348 7.08923 5.69524 5.44143C5.69524 5.44143 6.7027 5.12135 8.9958 6.66444C10.9627 6.12962 13.0379 6.12962 15.0047 6.66444C17.2958 5.12135 18.3013 5.44143 18.3013 5.44143C18.9551 7.08528 18.5437 8.29841 18.4205 8.60268C19.2331 9.47319 19.6765 10.6218 19.6585 11.8094C19.6585 16.3912 16.8507 17.4008 14.1801 17.6952C14.6093 18.0667 14.9928 18.7918 14.9928 19.9061C14.9928 21.5026 14.9789 22.7868 14.9789 23.18C14.9789 23.4981 15.1955 23.8695 15.8035 23.753C18.5059 22.8557 20.7992 21.0317 22.2731 18.6073C23.747 16.183 24.3055 13.3163 23.8486 10.5201C23.3917 7.7238 21.9493 5.18035 19.7793 3.34461C17.6093 1.50886 14.8533 0.500541 12.0042 0.5H12.0003Z" fill="#ffffff"/>
+<path d="M4.54444 17.6321C4.5186 17.6914 4.42322 17.7092 4.34573 17.6677C4.26823 17.6262 4.21061 17.5491 4.23843 17.4879C4.26625 17.4266 4.35964 17.4108 4.43714 17.4523C4.51463 17.4938 4.57424 17.5729 4.54444 17.6321Z" fill="#ffffff"/>
+<path d="M5.03123 18.1714C4.99008 18.192 4.943 18.1978 4.89805 18.1877C4.8531 18.1776 4.81308 18.1523 4.78483 18.1161C4.70734 18.0331 4.69143 17.9185 4.75104 17.8671C4.81066 17.8157 4.91797 17.8395 4.99546 17.9224C5.07296 18.0054 5.09084 18.12 5.03123 18.1714Z" fill="#ffffff"/>
+<path d="M5.50425 18.857C5.43072 18.9084 5.30553 18.857 5.23598 18.7543C5.21675 18.7359 5.20146 18.7138 5.19101 18.6893C5.18056 18.6649 5.17517 18.6386 5.17517 18.612C5.17517 18.5855 5.18056 18.5592 5.19101 18.5347C5.20146 18.5103 5.21675 18.4882 5.23598 18.4698C5.3095 18.4204 5.4347 18.4698 5.50425 18.5705C5.57379 18.6713 5.57578 18.8057 5.50425 18.857V18.857Z" fill="#ffffff"/>
+<path d="M6.14612 19.5207C6.08054 19.5939 5.94741 19.5741 5.83812 19.4753C5.72883 19.3765 5.70299 19.2422 5.76857 19.171C5.83414 19.0999 5.96727 19.1197 6.08054 19.2165C6.1938 19.3133 6.21566 19.4496 6.14612 19.5207V19.5207Z" fill="#ffffff"/>
+<path d="M7.04617 19.9081C7.01637 20.001 6.88124 20.0425 6.74612 20.003C6.611 19.9635 6.52158 19.8528 6.54741 19.758C6.57325 19.6631 6.71036 19.6197 6.84747 19.6631C6.98457 19.7066 7.07201 19.8113 7.04617 19.9081Z" fill="#ffffff"/>
+<path d="M8.02783 19.9752C8.02783 20.072 7.91656 20.155 7.77349 20.1569C7.63042 20.1589 7.51318 20.0799 7.51318 19.9831C7.51318 19.8863 7.62445 19.8033 7.76752 19.8013C7.91059 19.7993 8.02783 19.8764 8.02783 19.9752Z" fill="#ffffff"/>
+<path d="M8.9419 19.8232C8.95978 19.92 8.86042 20.0207 8.71735 20.0445C8.57428 20.0682 8.4491 20.0109 8.43121 19.916C8.41333 19.8212 8.51666 19.7185 8.65576 19.6928C8.79485 19.6671 8.92401 19.7264 8.9419 19.8232Z" fill="#ffffff"/>
+</g>
+<defs>
+<clipPath id="clip0_131_1011">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/web/app/signin/normalForm.tsx b/web/app/signin/normal-form.tsx
similarity index 96%
rename from web/app/signin/normalForm.tsx
rename to web/app/signin/normal-form.tsx
index f8c973a13f..51046fbd06 100644
--- a/web/app/signin/normalForm.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -144,11 +144,10 @@ const NormalForm = () => {
           </div>
 
           {showORLine && <div className="relative mt-6">
-            <div className="absolute inset-0 flex items-center" aria-hidden="true">
-              <div className='h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
-            </div>
-            <div className="relative flex justify-center">
-              <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('login.or')}</span>
+            <div className="flex items-center">
+              <div className="h-px flex-1 bg-gradient-to-r from-background-gradient-mask-transparent to-divider-regular"></div>
+              <span className="system-xs-medium-uppercase px-3 text-text-tertiary">{t('login.or')}</span>
+              <div className="h-px flex-1 bg-gradient-to-l from-background-gradient-mask-transparent to-divider-regular"></div>
             </div>
           </div>}
           {
diff --git a/web/app/signin/oneMoreStep.tsx b/web/app/signin/one-more-step.tsx
similarity index 100%
rename from web/app/signin/oneMoreStep.tsx
rename to web/app/signin/one-more-step.tsx
diff --git a/web/app/signin/page.module.css b/web/app/signin/page.module.css
index 72ce7fbd8a..e9759b23a8 100644
--- a/web/app/signin/page.module.css
+++ b/web/app/signin/page.module.css
@@ -2,6 +2,10 @@
   background: center/contain url('./assets/github.svg') no-repeat;
 }
 
+html[data-theme="dark"] .githubIcon {
+  background: center/contain url('./assets/github-dark.svg') no-repeat;
+}
+
 .googleIcon {
   background: center/contain url('./assets/google.svg') no-repeat;
 }
diff --git a/web/app/signin/page.tsx b/web/app/signin/page.tsx
index f2ef17c487..60fee366df 100644
--- a/web/app/signin/page.tsx
+++ b/web/app/signin/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useSearchParams } from 'next/navigation'
-import OneMoreStep from './oneMoreStep'
-import NormalForm from './normalForm'
+import OneMoreStep from './one-more-step'
+import NormalForm from './normal-form'
 
 const SignIn = () => {
   const searchParams = useSearchParams()