Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): hide reset description on dark-mode primary color matched (#1394)

Browse source
This commit is contained in:
Xiao Yijun 2022-07-04 11:44:27 +08:00 committed by GitHub
parent 2ad6e57db0
commit de8f476b37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/console/src/pages/SignInExperience/components/ColorForm.tsx
View file

@ -1,6 +1,6 @@
import { absoluteLighten } from '@logto/shared';
import color from 'color';
import React, { useCallback, useEffect } from 'react';
import React, { useCallback, useEffect, useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
@ -24,11 +24,15 @@ const ColorForm = () => {
const isDarkModeEnabled = watch('color.isDarkModeEnabled');
const primaryColor = watch('color.primaryColor');
const darkPrimaryColor = watch('color.darkPrimaryColor');
const calculatedDarkPrimaryColor = useMemo(() => {
return absoluteLighten(color(primaryColor), 10).hex();
}, [primaryColor]);
const handleResetColor = useCallback(() => {
const darkPrimaryColor = absoluteLighten(color(primaryColor), 10);
setValue('color.darkPrimaryColor', darkPrimaryColor.hex());
}, [primaryColor, setValue]);
setValue('color.darkPrimaryColor', calculatedDarkPrimaryColor);
}, [calculatedDarkPrimaryColor, setValue]);
useEffect(() => {
if (!isDirty) {
@ -70,15 +74,17 @@ const ColorForm = () => {
)}
/>
</FormField>
<div className={styles.darkModeTip}>
{t('sign_in_exp.color.dark_mode_reset_tip')}
<Button
type="plain"
size="small"
title="admin_console.sign_in_exp.color.reset"
onClick={handleResetColor}
/>
</div>
{calculatedDarkPrimaryColor !== darkPrimaryColor && (
<div className={styles.darkModeTip}>
{t('sign_in_exp.color.dark_mode_reset_tip')}
<Button
type="plain"
size="small"
title="admin_console.sign_in_exp.color.reset"
onClick={handleResetColor}
/>
</div>
)}
</>
)}
</>