refactor(console): replace theme selector with toggle in sie preview (#3260)

2024-12-16 20:26:19 -05:00 · 2023-03-02 13:58:00 +08:00 · 2023-03-02 13:58:00 +08:00 · cae97fb87a
commit cae97fb87a
parent 0ffb8749c5
14 changed files with 100 additions and 48 deletions
--- a/packages/console/src/assets/images/moon.svg
+++ b/packages/console/src/assets/images/moon.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4268 8.66669C14.3305 8.58714 14.2139 8.53622 14.0901 8.51972C13.9664 8.50322 13.8405 8.5218 13.7268 8.57335C13.0218 8.89594 12.2553 9.06198 11.4801 9.06002C10.046 9.05829 8.67074 8.48965 7.65418 7.47809C6.63763 6.46653 6.06222 5.09409 6.05342 3.66002C6.05646 3.21057 6.1124 2.76305 6.22009 2.32669C6.24294 2.21038 6.23437 2.09008 6.19526 1.97819C6.15615 1.8663 6.08792 1.76685 5.99759 1.69011C5.90725 1.61336 5.7981 1.56208 5.68136 1.54156C5.56461 1.52104 5.44451 1.53201 5.33342 1.57335C4.28831 2.04329 3.3798 2.77119 2.69326 3.68867C2.00672 4.60616 1.56468 5.6831 1.40866 6.81834C1.25264 7.95358 1.38776 9.10985 1.80134 10.1785C2.21491 11.2472 2.89337 12.1932 3.77296 12.9277C4.65255 13.6621 5.70441 14.1609 6.82972 14.3772C7.95503 14.5935 9.11686 14.5202 10.2061 14.1642C11.2953 13.8081 12.2761 13.1811 13.0564 12.3419C13.8366 11.5027 14.3908 10.4789 14.6668 9.36669C14.7004 9.23935 14.6955 9.10491 14.6528 8.98033C14.6101 8.85575 14.5314 8.74661 14.4268 8.66669ZM8.09342 13.1267C6.9746 13.1188 5.88556 12.7653 4.97542 12.1145C4.06528 11.4638 3.37853 10.5476 3.00921 9.49144C2.63989 8.43529 2.60605 7.29081 2.91232 6.21469C3.21859 5.13857 3.84999 4.18342 4.72009 3.48002V3.66002C4.72186 5.45234 5.43463 7.17075 6.702 8.43811C7.96936 9.70548 9.68777 10.4183 11.4801 10.42C11.9507 10.4217 12.4201 10.3726 12.8801 10.2734C12.42 11.1437 11.7311 11.8719 10.8875 12.3794C10.044 12.887 9.07788 13.1546 8.09342 13.1534V13.1267Z" fill="currentColor"/>
+</svg>
--- a/packages/console/src/assets/images/sun.svg
+++ b/packages/console/src/assets/images/sun.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33325 7.99998C3.33325 7.82317 3.26301 7.6536 3.13799 7.52858C3.01297 7.40355 2.8434 7.33331 2.66659 7.33331H1.99992C1.82311 7.33331 1.65354 7.40355 1.52851 7.52858C1.40349 7.6536 1.33325 7.82317 1.33325 7.99998C1.33325 8.17679 1.40349 8.34636 1.52851 8.47138C1.65354 8.59641 1.82311 8.66665 1.99992 8.66665H2.66659C2.8434 8.66665 3.01297 8.59641 3.13799 8.47138C3.26301 8.34636 3.33325 8.17679 3.33325 7.99998ZM3.75992 11.3333L3.28659 11.8066C3.16242 11.9316 3.09272 12.1005 3.09272 12.2766C3.09272 12.4528 3.16242 12.6217 3.28659 12.7466C3.41149 12.8708 3.58046 12.9405 3.75659 12.9405C3.93271 12.9405 4.10168 12.8708 4.22659 12.7466L4.69992 12.2733C4.80914 12.1458 4.86621 11.9817 4.85973 11.8139C4.85325 11.6462 4.78369 11.487 4.66496 11.3683C4.54623 11.2495 4.38707 11.18 4.21929 11.1735C4.0515 11.167 3.88745 11.2241 3.75992 11.3333ZM7.99992 3.33331C8.17673 3.33331 8.3463 3.26307 8.47132 3.13805C8.59635 3.01303 8.66659 2.84346 8.66659 2.66665V1.99998C8.66659 1.82317 8.59635 1.6536 8.47132 1.52858C8.3463 1.40355 8.17673 1.33331 7.99992 1.33331C7.82311 1.33331 7.65354 1.40355 7.52851 1.52858C7.40349 1.6536 7.33325 1.82317 7.33325 1.99998V2.66665C7.33325 2.84346 7.40349 3.01303 7.52851 3.13805C7.65354 3.26307 7.82311 3.33331 7.99992 3.33331ZM11.7733 4.89331C11.9481 4.89258 12.1157 4.82314 12.2399 4.69998L12.7133 4.22665C12.783 4.16688 12.8397 4.09334 12.8797 4.01063C12.9198 3.92792 12.9422 3.83783 12.9458 3.74602C12.9493 3.6542 12.9339 3.56265 12.9003 3.4771C12.8668 3.39155 12.816 3.31385 12.751 3.24888C12.686 3.18391 12.6084 3.13307 12.5228 3.09955C12.4373 3.06604 12.3457 3.05057 12.2539 3.05411C12.1621 3.05766 12.072 3.08015 11.9893 3.12016C11.9066 3.16018 11.833 3.21686 11.7733 3.28665L11.3333 3.75998C11.2091 3.88489 11.1394 4.05386 11.1394 4.22998C11.1394 4.4061 11.2091 4.57507 11.3333 4.69998C11.4508 4.81689 11.6076 4.88581 11.7733 4.89331ZM3.77325 4.69998C3.89743 4.82314 4.06503 4.89258 4.23992 4.89331C4.32766 4.89382 4.41463 4.877 4.49586 4.84383C4.57708 4.81065 4.65096 4.76177 4.71325 4.69998C4.83742 4.57507 4.90711 4.4061 4.90711 4.22998C4.90711 4.05386 4.83742 3.88489 4.71325 3.75998L4.23992 3.28665C4.1782 3.22405 4.10475 3.17422 4.02377 3.14001C3.9428 3.1058 3.85587 3.08787 3.76797 3.08725C3.68006 3.08663 3.59289 3.10333 3.51144 3.1364C3.42999 3.16947 3.35585 3.21826 3.29325 3.27998C3.23066 3.3417 3.18083 3.41515 3.14662 3.49612C3.1124 3.5771 3.09448 3.66403 3.09386 3.75193C3.09261 3.92947 3.16193 4.10023 3.28659 4.22665L3.77325 4.69998ZM13.9999 7.33331H13.3333C13.1564 7.33331 12.9869 7.40355 12.8618 7.52858C12.7368 7.6536 12.6666 7.82317 12.6666 7.99998C12.6666 8.17679 12.7368 8.34636 12.8618 8.47138C12.9869 8.59641 13.1564 8.66665 13.3333 8.66665H13.9999C14.1767 8.66665 14.3463 8.59641 14.4713 8.47138C14.5963 8.34636 14.6666 8.17679 14.6666 7.99998C14.6666 7.82317 14.5963 7.6536 14.4713 7.52858C14.3463 7.40355 14.1767 7.33331 13.9999 7.33331ZM12.2399 11.3333C12.1133 11.2629 11.9671 11.2356 11.8236 11.2557C11.68 11.2757 11.5469 11.342 11.4445 11.4445C11.342 11.547 11.2757 11.6801 11.2556 11.8236C11.2355 11.9672 11.2628 12.1133 11.3333 12.24L11.8066 12.7133C11.9315 12.8375 12.1005 12.9072 12.2766 12.9072C12.4527 12.9072 12.6217 12.8375 12.7466 12.7133C12.8708 12.5884 12.9404 12.4194 12.9404 12.2433C12.9404 12.0672 12.8708 11.8982 12.7466 11.7733L12.2399 11.3333ZM7.99992 4.33331C7.27472 4.33331 6.56581 4.54836 5.96283 4.95126C5.35985 5.35416 4.88988 5.92681 4.61236 6.59681C4.33484 7.2668 4.26223 8.00405 4.40371 8.71531C4.54519 9.42657 4.8944 10.0799 5.40719 10.5927C5.91999 11.1055 6.57332 11.4547 7.28459 11.5962C7.99585 11.7377 8.7331 11.6651 9.40309 11.3875C10.0731 11.11 10.6457 10.6401 11.0486 10.0371C11.4515 9.43409 11.6666 8.72518 11.6666 7.99998C11.6648 7.02806 11.2779 6.09645 10.5907 5.4092C9.90345 4.72195 8.97184 4.33508 7.99992 4.33331ZM7.99992 10.3333C7.53843 10.3333 7.0873 10.1965 6.70359 9.94008C6.31987 9.68369 6.0208 9.31927 5.8442 8.89291C5.6676 8.46655 5.62139 7.99739 5.71142 7.54477C5.80145 7.09215 6.02368 6.67639 6.35 6.35006C6.67633 6.02374 7.09209 5.80151 7.54471 5.71148C7.99733 5.62145 8.46649 5.66766 8.89285 5.84426C9.31921 6.02086 9.68363 6.31993 9.94001 6.70365C10.1964 7.08736 10.3333 7.53849 10.3333 7.99998C10.3333 8.61882 10.0874 9.21231 9.64983 9.6499C9.21225 10.0875 8.61876 10.3333 7.99992 10.3333ZM7.99992 12.6666C7.82311 12.6666 7.65354 12.7369 7.52851 12.8619C7.40349 12.9869 7.33325 13.1565 7.33325 13.3333V14C7.33325 14.1768 7.40349 14.3464 7.52851 14.4714C7.65354 14.5964 7.82311 14.6666 7.99992 14.6666C8.17673 14.6666 8.3463 14.5964 8.47132 14.4714C8.59635 14.3464 8.66659 14.1768 8.66659 14V13.3333C8.66659 13.1565 8.59635 12.9869 8.47132 12.8619C8.3463 12.7369 8.17673 12.6666 7.99992 12.6666Z" fill="currentColor"/>
+</svg>
--- a/packages/console/src/components/ToggleThemeButton/index.module.scss
+++ b/packages/console/src/components/ToggleThemeButton/index.module.scss
@ -0,0 +1,32 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  .button {
+    padding: _.unit(2);
+  }
+
+  .icon {
+    color: var(--color-text-secondary);
+  }
+
+  &.large {
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &.medium {
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.small {
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
--- a/packages/console/src/components/ToggleThemeButton/index.tsx
+++ b/packages/console/src/components/ToggleThemeButton/index.tsx
@ -0,0 +1,46 @@
+import { AppearanceMode } from '@logto/schemas';
+import classNames from 'classnames';
+
+import Moon from '@/assets/images/moon.svg';
+import Sun from '@/assets/images/sun.svg';
+
+import type { Props as ButtonProps } from '../Button';
+import Button from '../Button';
+import * as styles from './index.module.scss';
+
+type Mode = Omit<AppearanceMode, AppearanceMode.SyncWithSystem>;
+
+type Props = {
+  value: Mode;
+  onToggle: (value: Mode) => void;
+  className?: string;
+  iconClassName?: string;
+  size?: ButtonProps['size'];
+};
+
+const ToggleThemeButton = ({
+  value,
+  onToggle,
+  className,
+  iconClassName,
+  size = 'medium',
+}: Props) => {
+  const ThemeIcon = value === AppearanceMode.LightMode ? Sun : Moon;
+
+  return (
+    <div className={classNames(styles.container, styles[size])}>
+      <Button
+        size={size}
+        className={classNames(styles.button, className)}
+        icon={<ThemeIcon className={classNames(styles.icon, iconClassName)} />}
+        onClick={() => {
+          onToggle(
+            value === AppearanceMode.LightMode ? AppearanceMode.DarkMode : AppearanceMode.LightMode
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export default ToggleThemeButton;
--- a/packages/console/src/pages/SignInExperience/components/Preview/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/Preview/index.module.scss
@ -21,10 +21,12 @@
      display: flex;
      align-items: center;

-      > * {
+      .language {
        width: 112px;
+      }

-        &:first-child {
+      > * {
+        &:not(:last-child) {
          margin-right: _.unit(2);
        }
      }
--- a/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
@ -12,6 +12,7 @@ import useSWR from 'swr';
 import PhoneInfo from '@/assets/images/phone-info.svg';
 import Select from '@/components/Select';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import ToggleThemeButton from '@/components/ToggleThemeButton';
 import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider';
 import type { RequestError } from '@/hooks/use-api';
 import useUiLanguages from '@/hooks/use-ui-languages';
@ -26,33 +27,20 @@ type Props = {
 const Preview = ({ signInExperience, className }: Props) => {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const [language, setLanguage] = useState<LanguageTag>('en');
-  const [mode, setMode] = useState<AppearanceMode>(AppearanceMode.LightMode);
+  const [mode, setMode] = useState<Omit<AppearanceMode, AppearanceMode.SyncWithSystem>>(
+    AppearanceMode.LightMode
+  );
  const [platform, setPlatform] = useState<'desktopWeb' | 'mobile' | 'mobileWeb'>('desktopWeb');
  const { data: allConnectors } = useSWR<ConnectorResponse[], RequestError>('api/connectors');
  const previewRef = useRef<HTMLIFrameElement>(null);
  const { customPhrases, languages } = useUiLanguages();
  const { userEndpoint } = useContext(AppEndpointsContext);

-  const modeOptions = useMemo(() => {
-    const light = { value: AppearanceMode.LightMode, title: t('sign_in_exp.preview.light') };
-    const dark = { value: AppearanceMode.DarkMode, title: t('sign_in_exp.preview.dark') };
-
-    if (!signInExperience?.color.isDarkModeEnabled) {
-      return [light];
-    }
-
-    return [light, dark];
-  }, [signInExperience, t]);
-
  useEffect(() => {
-    if (!modeOptions[0]) {
-      return;
+    if (!signInExperience?.color.isDarkModeEnabled) {
+      setMode(AppearanceMode.LightMode);
    }
-
-    if (!modeOptions.some(({ value }) => value === mode)) {
-      setMode(modeOptions[0].value);
-    }
-  }, [modeOptions, mode]);
+  }, [mode, signInExperience]);

  const availableLanguageOptions = useMemo(() => {
    const availableLanguageTags =
@ -141,7 +129,11 @@ const Preview = ({ signInExperience, className }: Props) => {
      <div className={styles.header}>
        <div className={styles.title}>{t('sign_in_exp.preview.title')}</div>
        <div className={styles.selects}>
+          {signInExperience?.color.isDarkModeEnabled && (
+            <ToggleThemeButton value={mode} size="small" onToggle={setMode} />
+          )}
          <Select
+            className={styles.language}
            size="small"
            value={language}
            options={availableLanguageOptions}
@ -151,16 +143,6 @@ const Preview = ({ signInExperience, className }: Props) => {
              }
            }}
          />
-          <Select
-            size="small"
-            value={mode}
-            options={modeOptions}
-            onChange={(value) => {
-              if (value) {
-                setMode(value);
-              }
-            }}
-          />
        </div>
      </div>
      <TabNav className={styles.nav}>
@ -199,7 +181,7 @@ const Preview = ({ signInExperience, className }: Props) => {
        )}
      >
        <div className={styles.deviceWrapper}>
-          <div className={classNames(styles.device, styles[mode])}>
+          <div className={classNames(styles.device, styles[String(mode)])}>
            {platform !== 'desktopWeb' && (
              <div className={styles.topBar}>
                <div className={styles.time}>{format(Date.now(), 'HH:mm')}</div>
--- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
@ -166,8 +166,6 @@ const sign_in_exp = {
  },
  preview: {
    title: 'Vorschau',
-    dark: 'Dunkel',
-    light: 'Hell',
    native: 'Nativ',
    desktop_web: 'Desktop Web',
    mobile_web: 'Mobil Web',
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@ -160,8 +160,6 @@ const sign_in_exp = {
  },
  preview: {
    title: 'Sign-in preview',
-    dark: 'Dark',
-    light: 'Light',
    native: 'Native',
    desktop_web: 'Desktop Web',
    mobile_web: 'Mobile Web',
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@ -162,8 +162,6 @@ const sign_in_exp = {
  },
  preview: {
    title: "Aperçu de l'expérience de connexion",
-    dark: 'Sombre',
-    light: 'Clair',
    native: 'Natif',
    desktop_web: 'Web ordinateur',
    mobile_web: 'Web mobile',
--- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
@ -155,8 +155,6 @@ const sign_in_exp = {
  },
  preview: {
    title: '로그인 화면 미리보기',
-    dark: '다크',
-    light: '라이트',
    native: 'Native',
    desktop_web: 'Desktop 웹',
    mobile_web: 'Mobile 웹',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
@ -162,8 +162,6 @@ const sign_in_exp = {
  },
  preview: {
    title: 'Visualização de login',
-    dark: 'Escuro',
-    light: 'Claro',
    native: 'Native',
    desktop_web: 'Desktop Web',
    mobile_web: 'Mobile Web',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@ -160,8 +160,6 @@ const sign_in_exp = {
  },
  preview: {
    title: 'Pre-visualização do login',
-    dark: 'Escuro',
-    light: 'Claro',
    native: 'Nativo',
    desktop_web: 'Web computador',
    mobile_web: 'Web móvel',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@ -161,8 +161,6 @@ const sign_in_exp = {
  },
  preview: {
    title: 'Oturum Açma Önizlemesi',
-    dark: 'Koyu',
-    light: 'Açık',
    native: 'Doğal',
    desktop_web: 'Masaüstü Web',
    mobile_web: 'Mobil Web',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@ -151,8 +151,6 @@ const sign_in_exp = {
  },
  preview: {
    title: '登录预览',
-    dark: '深色',
-    light: '浅色',
    native: '移动原生',
    desktop_web: '桌面网页',
    mobile_web: '移动网页',