chore(site): update styles

Author: xiejay97

packages/site/executors/build-base/files/resources.json

@@ -14,6 +14,7 @@
       "Close main navigation": "Close main navigation",
       "Open anchor navigation": "Open anchor navigation",
       "Close anchor navigation": "Close anchor navigation",
+      "Change language": "Change language",
       "Light theme": "Light theme",
       "Dark theme": "Dark theme",
       "GitHub repository": "GitHub repository",
@@ -54,6 +55,7 @@
       "Close main navigation": "关闭主导航栏",
       "Open anchor navigation": "打开锚点导航栏",
       "Close anchor navigation": "关闭锚点导航栏",
+      "Change language": "改变语言",
       "Light theme": "浅色主题",
       "Dark theme": "深色主题",
       "GitHub repository": "GitHub 存储库",

packages/site/src/app/routes/layout/Header.tsx

@@ -1,12 +1,13 @@
 import type { AppTheme } from '../../App';
+import type { DDropdownItem } from '@react-devui/ui/components/dropdown';
 import type { DLang } from '@react-devui/ui/utils/types';
 
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 
 import { useStorage } from '@react-devui/hooks';
 import { DCustomIcon, GithubOutlined } from '@react-devui/icons';
-import { DMenu } from '@react-devui/ui';
+import { DDropdown, DMenu, DSeparator } from '@react-devui/ui';
 import { getClassName } from '@react-devui/utils';
 
 export interface AppHeaderProps {
@@ -24,17 +25,6 @@ export function AppHeader(props: AppHeaderProps): JSX.Element | null {
   const location = useLocation();
   const activeId = location.pathname.startsWith('/docs') ? 'docs' : location.pathname.startsWith('/components') ? 'components' : null;
 
-  const switchLang =
-    languageStorage.value === 'en-US'
-      ? {
-          label: '切换语言为中文',
-          text: '中 文',
-        }
-      : {
-          label: 'Switch language to English',
-          text: 'English',
-        };
-
   return (
     <header className="app-layout-header">
       <Link className="d-none d-md-inline-flex app-layout-header__logo-container" to="/">
@@ -81,18 +71,44 @@ export function AppHeader(props: AppHeaderProps): JSX.Element | null {
         dMode="horizontal"
         dActive={activeId}
       ></DMenu>
+      <DSeparator className="d-none d-md-inline-flex" style={{ margin: '16px 12px' }} dVertical />
       <div className="app-layout-header__button-container">
-        <button
-          className="app-layout-header__button app-layout-header__button--text"
-          aria-label={switchLang.label}
-          onClick={() => {
-            const val = languageStorage.value === 'en-US' ? 'zh-CN' : 'en-US';
-            languageStorage.set(val);
-            i18n.changeLanguage(val);
+        <DDropdown
+          dList={(
+            [
+              ['🇨🇳', '简体中文', 'zh-CN'],
+              ['🇺🇸', 'English', 'en-US'],
+            ] as [string, string, DLang][]
+          ).map<DDropdownItem<DLang>>((item) => ({
+            id: item[2],
+            label: (
+              <>
+                <div className="app-layout-header__language-item-region">{item[0]}</div>
+                <span className="app-layout-header__language-item-lng">{item[1]}</span>
+              </>
+            ),
+            type: 'item',
+          }))}
+          onItemClick={(id) => {
+            languageStorage.set(id);
+            i18n.changeLanguage(id);
           }}
         >
-          {switchLang.text}
-        </button>
+          <button
+            className="app-layout-header__button"
+            aria-label={t('Change language')}
+            onClick={() => {
+              const val = languageStorage.value === 'en-US' ? 'zh-CN' : 'en-US';
+              languageStorage.set(val);
+              i18n.changeLanguage(val);
+            }}
+          >
+            <DCustomIcon viewBox="0 0 24 24">
+              <path d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path>
+            </DCustomIcon>
+          </button>
+        </DDropdown>
         <button
           className="app-layout-header__button"
           aria-label={t(themeStorage.value === 'light' ? 'Dark theme' : 'Light theme')}

packages/site/src/styles/_app.scss

@@ -74,8 +74,7 @@ code:not(.hljs) {
   margin: 0 1px;
   font-family: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   background-color: var(--app-code-background-color);
-  /* stylelint-disable-next-line declaration-property-value-allowed-list */
-  border-radius: 2px;
+  border-radius: var(--#{$rd-prefix}border-radius);
 }
 
 h1 {
@@ -248,8 +247,7 @@ h3 {
       margin-bottom: 12px;
       text-align: center;
       background: var(--#{$rd-prefix}background-color-primary);
-      /* stylelint-disable-next-line declaration-property-value-allowed-list */
-      border-radius: 6px;
+      border-radius: var(--#{$rd-prefix}border-radius);
     }
   }
 

packages/site/src/styles/routes/layout.scss

@@ -40,39 +40,31 @@
     color: var(--#{$rd-prefix}text-color);
     text-decoration: none;
     background-color: transparent;
-    border: 1px solid var(--#{$rd-prefix}color-border);
-    /* stylelint-disable-next-line declaration-property-value-allowed-list */
-    border-radius: 8px;
-    transition: border-color var(--#{$rd-prefix}animation-duration-base) linear, color var(--#{$rd-prefix}animation-duration-base) linear,
-      background-color var(--#{$rd-prefix}animation-duration-base) linear;
+    border: none;
+    transition: color var(--#{$rd-prefix}animation-duration-base) linear;
 
     @include font-size(1.2rem);
 
     &:hover,
     &:focus {
       color: var(--#{$rd-prefix}color-primary-lighter);
-      background-color: var(--#{$rd-prefix}background-color-primary-hover);
     }
 
     &:active {
       color: var(--#{$rd-prefix}color-primary-darker);
-      background-color: var(--#{$rd-prefix}background-color-primary);
     }
 
     @include m(menu) {
       padding: 4px;
       margin-right: auto;
       border: none;
     }
+  }
 
-    @include m(text) {
-      padding: 0 11px;
-      background-color: transparent !important;
-      /* stylelint-disable-next-line declaration-property-value-allowed-list */
-      border-radius: 2px;
-
-      @include font-size(1rem);
-    }
+  @include e(language-item-region) {
+    display: inline-block;
+    margin-right: 8px;
+    font-size: 1.1em;
   }
 
   @include e(hamburger) {
@@ -88,8 +80,7 @@
       width: 28px;
       height: 2px;
       background-color: var(--#{$rd-prefix}text-color);
-      /* stylelint-disable-next-line declaration-property-value-allowed-list */
-      border-radius: 2px;
+      border-radius: 50%;
       /* stylelint-disable-next-line declaration-property-value-disallowed-list */
       transition: all 300ms linear;
       transform-origin: center;
@@ -131,7 +122,6 @@
   @include e(menu) {
     min-width: unset;
     height: 100%;
-    margin-right: 20px;
 
     &::after {
       content: none;
@@ -237,7 +227,7 @@
     text-decoration: none;
     border: 1px solid var(--#{$rd-prefix}color-border);
     /* stylelint-disable-next-line declaration-property-value-allowed-list */
-    border-radius: 10px;
+    border-radius: 8px;
 
     svg:last-child {
       margin-left: auto;