Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-20 21:32:31 -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 { absoluteLighten } from '@logto/shared';
import color from 'color'; 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 { Controller, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -24,11 +24,15 @@ const ColorForm = () => {
const isDarkModeEnabled = watch('color.isDarkModeEnabled'); const isDarkModeEnabled = watch('color.isDarkModeEnabled');
const primaryColor = watch('color.primaryColor'); const primaryColor = watch('color.primaryColor');
const darkPrimaryColor = watch('color.darkPrimaryColor');
const calculatedDarkPrimaryColor = useMemo(() => {
return absoluteLighten(color(primaryColor), 10).hex();
}, [primaryColor]);
const handleResetColor = useCallback(() => { const handleResetColor = useCallback(() => {
const darkPrimaryColor = absoluteLighten(color(primaryColor), 10); setValue('color.darkPrimaryColor', calculatedDarkPrimaryColor);
setValue('color.darkPrimaryColor', darkPrimaryColor.hex()); }, [calculatedDarkPrimaryColor, setValue]);
}, [primaryColor, setValue]);
useEffect(() => { useEffect(() => {
if (!isDirty) { if (!isDirty) {
@ -70,15 +74,17 @@ const ColorForm = () => {
)} )}
/> />
</FormField> </FormField>
<div className={styles.darkModeTip}> {calculatedDarkPrimaryColor !== darkPrimaryColor && (
{t('sign_in_exp.color.dark_mode_reset_tip')} <div className={styles.darkModeTip}>
<Button {t('sign_in_exp.color.dark_mode_reset_tip')}
type="plain" <Button
size="small" type="plain"
title="admin_console.sign_in_exp.color.reset" size="small"
onClick={handleResetColor} title="admin_console.sign_in_exp.color.reset"
/> onClick={handleResetColor}
</div> />
</div>
)}
</> </>
)} )}
</> </>