From 82a768156dfcf2ba8a5637b7ae251b92bbdf453b Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Mon, 19 Aug 2024 16:41:37 -0700 Subject: [PATCH 1/2] feat(ui): Initial support for elements appearance prop --- .../ui/src/components/sign-in/sign-in.tsx | 2 +- .../src/components/sign-in/steps/get-help.tsx | 3 +- .../ui/src/contexts/AppearanceContext.tsx | 58 ++++++++++++++++++- packages/ui/src/contexts/index.ts | 2 +- packages/ui/src/global.css | 3 + .../app/sign-in/[[...sign-in]]/page.tsx | 2 +- .../ui/theme-builder/app/theme-builder.tsx | 7 ++- 7 files changed, 69 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx index 582bd415f26..da0050ecd6f 100644 --- a/packages/ui/src/components/sign-in/sign-in.tsx +++ b/packages/ui/src/components/sign-in/sign-in.tsx @@ -23,7 +23,7 @@ import { type Appearance, AppearanceProvider } from '~/contexts'; * bulletproof a11y. */ export function SignIn({ appearance }: { appearance?: Appearance }) { - const [showHelp, setShowHelp] = React.useState(false); + const [showHelp, setShowHelp] = React.useState(true); return ( diff --git a/packages/ui/src/components/sign-in/steps/get-help.tsx b/packages/ui/src/components/sign-in/steps/get-help.tsx index 5aed9426b60..b7cef6e9745 100644 --- a/packages/ui/src/components/sign-in/steps/get-help.tsx +++ b/packages/ui/src/components/sign-in/steps/get-help.tsx @@ -13,7 +13,7 @@ import { LinkButton } from '~/primitives/link'; export function SignInGetHelp() { const { t } = useLocalizations(); const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig(); - const { layout } = useAppearance().parsedAppearance; + const { layout, elements } = useAppearance().parsedAppearance; const isDev = useDevModeWarning(); const supportEmail = useSupportEmail(); const { setShowHelp } = useGetHelp(); @@ -37,6 +37,7 @@ export function SignInGetHelp() { {t('signIn.alternativeMethods.getHelp.title')} {t('signIn.alternativeMethods.getHelp.content')} +

Demo