From 7791e2480bfc4d474c4e2c51fd41545a33b2855b Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Tue, 21 Nov 2023 17:58:53 +0100 Subject: [PATCH 1/8] feat(clerk-js): Add new design on sign-in initial card --- .changeset/rich-readers-obey.md | 2 ++ .../components/SignIn/SignInStart.tsx | 25 +++++++------ .../clerk-js/src/ui.retheme/elements/Card.tsx | 35 ++++++++++--------- .../src/ui.retheme/elements/Divider.tsx | 4 +-- .../src/ui.retheme/elements/Footer.tsx | 13 +++++-- .../ui.retheme/elements/PoweredByClerk.tsx | 5 ++- .../src/ui.retheme/foundations/colors.ts | 26 ++++++++------ .../src/ui.retheme/foundations/shadows.ts | 4 +++ .../src/ui.retheme/foundations/sizes.ts | 1 + .../src/ui.retheme/foundations/typography.ts | 2 +- .../clerk-js/src/ui.retheme/icons/close.svg | 4 ++- .../src/ui.retheme/icons/logo-mark-new.svg | 7 +++- 12 files changed, 81 insertions(+), 47 deletions(-) create mode 100644 .changeset/rich-readers-obey.md diff --git a/.changeset/rich-readers-obey.md b/.changeset/rich-readers-obey.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/rich-readers-obey.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx index d5b7c2a70ea..28b587c6a8c 100644 --- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx +++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx @@ -279,7 +279,20 @@ export function _SignInStart(): JSX.Element { return ( - + + + + + + + , + ]} + > {card.error} @@ -314,16 +327,6 @@ export function _SignInStart(): JSX.Element { ) : null} - - - - - - - ); diff --git a/packages/clerk-js/src/ui.retheme/elements/Card.tsx b/packages/clerk-js/src/ui.retheme/elements/Card.tsx index 39c2e849de1..40c0c364a91 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Card.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Card.tsx @@ -12,10 +12,13 @@ import { IconButton } from './IconButton'; import { useUnsafeModalContext } from './Modal'; import { PoweredByClerkTag } from './PoweredByClerk'; -type CardProps = PropsOfComponent & React.PropsWithChildren>; +type CardProps = PropsOfComponent & + React.PropsWithChildren<{ + footerItems?: React.ReactNode[]; + }>; export const Card = React.forwardRef((props, ref) => { - const { sx, children, ...rest } = props; + const { sx, children, footerItems, ...rest } = props; const appearance = useAppearance(); const flowMetadata = useFlowMetadata(); const { branded } = useEnvironment().displayConfig; @@ -45,9 +48,9 @@ export const Card = React.forwardRef((props, ref) => position: 'relative', backgroundColor: t.colors.$colorBackground, padding: t.space.$8, - boxShadow: t.shadows.$sm, + boxShadow: t.shadows.$cardInnerDropShadow, width: t.sizes.$100, - borderRadius: `${t.radii.$xl} ${t.radii.$xl} ${t.radii.$lg} ${t.radii.$lg}`, + borderRadius: `${t.radii.$card} ${t.radii.$card} ${t.radii.$lg} ${t.radii.$lg}`, }), sx, ]} @@ -57,6 +60,9 @@ export const Card = React.forwardRef((props, ref) => {children} + {footerItems?.map((item, index) => ( + {item} + ))} {branded && ( @@ -114,8 +120,9 @@ export const BaseCard = React.forwardRef((props, willChange: 'transform, opacity, height', transitionProperty: t.transitionProperty.$common, transitionDuration: '200ms', - borderRadius: t.radii.$xl, - boxShadow: t.shadows.$cardDropShadow, + borderRadius: t.radii.$card, + boxShadow: t.shadows.$cardOuterDropShadow, + overflow: 'hidden', }), sx, ]} @@ -135,15 +142,12 @@ export const BaseCard = React.forwardRef((props, /> } sx={t => ({ + color: t.colors.$colorTextTertiary, zIndex: t.zIndices.$modal, - opacity: t.opacity.$inactive, - ':hover': { - opacity: 0.8, - }, position: 'absolute', - top: t.space.$3, + top: t.space.$none, + right: t.space.$none, padding: t.space.$3, - right: t.space.$3, })} /> )} @@ -162,13 +166,13 @@ export const CardFooter = React.forwardRef((pro elementDescriptor={descriptors.cardFooter} sx={t => ({ '>:first-of-type': { - padding: `${t.space.$4} ${t.space.$2} ${t.space.$2} ${t.space.$2}`, + padding: `${t.space.$6} ${t.space.$2} ${t.space.$4} ${t.space.$2}`, marginTop: `-${t.space.$2}`, }, '>:not(:first-of-type)': { - padding: `${t.space.$2}`, + padding: `${t.space.$4} ${t.space.$2}`, borderTop: t.borders.$normal, - borderColor: t.colors.$blackAlpha300, + borderColor: t.colors.$blackAlpha100, }, })} {...props} @@ -191,7 +195,6 @@ export const CardFooterItem = React.forwardRef ({ position: 'relative', width: '100%', - borderRadius: `0 0 ${t.radii.$xl} ${t.radii.$xl}`, backgroundColor: t.colors.$blackAlpha200, }), ]} diff --git a/packages/clerk-js/src/ui.retheme/elements/Divider.tsx b/packages/clerk-js/src/ui.retheme/elements/Divider.tsx index ce5c2e8bd38..48e79826453 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Divider.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Divider.tsx @@ -12,7 +12,7 @@ export const Divider = (props: Omit, 'elementDescr ({ margin: `0 ${t.space.$4}` })} /> @@ -28,7 +28,7 @@ const DividerLine = () => { sx={t => ({ flex: '1', height: '1px', - backgroundColor: t.colors.$blackAlpha300, + backgroundColor: t.colors.$blackAlpha200, })} /> ); diff --git a/packages/clerk-js/src/ui.retheme/elements/Footer.tsx b/packages/clerk-js/src/ui.retheme/elements/Footer.tsx index 08faf7b98b6..38546d2951a 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Footer.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Footer.tsx @@ -39,7 +39,11 @@ const FooterActionText = (props: React.PropsWithChildren): JSX.Element => { {...props} as='span' variant='smallRegular' - colorScheme='neutral' + // colorScheme='neutral' + sx={t => ({ + // TODO: Make the color theme-aware once we have dark mode colors + color: t.colors.$primary500, + })} /> ); }; @@ -49,7 +53,12 @@ const FooterActionLink = (props: PropsOfComponent): JSX.Eleme ({ + // TODO: Make the color theme-aware once we have dark mode colors + color: t.colors.$primary700, + fontWeight: t.fontWeights.$medium, + })} /> ); }; diff --git a/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx b/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx index e23bf61d1c7..9bc8be4d1aa 100644 --- a/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx @@ -40,14 +40,13 @@ export const PoweredByClerkTag = React.memo( justify='center' sx={t => ({ width: '100%', - color: t.colors.$colorTextSecondary, - padding: t.space.$2, + color: t.colors.$primary500, })} {...props} ref={ref} > ({ color: 'inherit', letterSpacing: theme.space.$none })} > Secured by diff --git a/packages/clerk-js/src/ui.retheme/foundations/colors.ts b/packages/clerk-js/src/ui.retheme/foundations/colors.ts index 6246c1bfa13..ff3960a2ed9 100644 --- a/packages/clerk-js/src/ui.retheme/foundations/colors.ts +++ b/packages/clerk-js/src/ui.retheme/foundations/colors.ts @@ -40,21 +40,27 @@ export const colors = Object.freeze({ colorText: 'black', colorTextOnPrimaryBackground: 'white', colorTextSecondary: 'rgba(0,0,0,0.65)', + colorTextTertiary: 'rgba(147,148,161,1)', colorInputText: 'black', colorShimmer: 'rgba(255, 255, 255, 0.36)', transparent: 'transparent', white: 'white', black: 'black', - primary50: '#f0f3ff', - primary100: '#d1dcff', - primary200: '#91A7F7', - primary300: '#6684F5', - primary400: '#3B62F2', - primary500: '#103FEF', - primary600: '#0D33BF', - primary700: '#0A268F', - primary800: '#07195F', - primary900: '#030D30', + primary25: '#FAFAFB', + primary50: '#F7F7F8', + primary100: '#EEEEF0', + primary150: '#E3E3E7', + primary200: '#D9D9DE', + primary300: '#B7B8C2', + primary400: '#9394A1', + primary500: '#747686', + primary600: '#5E5F6E', + primary700: '#42434D', + primary750: '#373840', + primary800: '#2F3037', + primary850: '#27272D', + primary900: '#212126', + primary950: '#131316', danger50: '#FEF3F2', danger100: '#FEE4E2', danger200: '#FECDCA', diff --git a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts index 203abda0e4f..01216e54827 100644 --- a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts +++ b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts @@ -1,6 +1,10 @@ export const shadows = Object.freeze({ /* Dashboard/Shadow 2 */ cardDropShadow: '0px 24px 48px rgba(0, 0, 0, 0.16)', + cardOuterDropShadow: + '0px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20), 0px 0px 0px 1px rgba(25, 28, 33, 0.06)', + cardInnerDropShadow: + '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06), 0px 0px 0px 1px rgba(25, 28, 33, 0.04)', boxShadow1: '0px 24px 48px rgba(0, 0, 0, 0.16)', fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)', focusRing: '0 0 0 3px {{color}}', diff --git a/packages/clerk-js/src/ui.retheme/foundations/sizes.ts b/packages/clerk-js/src/ui.retheme/foundations/sizes.ts index 0bdaa9c2e8c..a4f872f4bd2 100644 --- a/packages/clerk-js/src/ui.retheme/foundations/sizes.ts +++ b/packages/clerk-js/src/ui.retheme/foundations/sizes.ts @@ -53,6 +53,7 @@ const sizes = Object.freeze({ ...space } as const); const radii = Object.freeze({ none: '0px', circle: '50%', + card: '0.75rem', // TODO: rename to 'xl' (?) once we have the design system sm: '0.25rem', md: '0.375rem', lg: '0.5rem', diff --git a/packages/clerk-js/src/ui.retheme/foundations/typography.ts b/packages/clerk-js/src/ui.retheme/foundations/typography.ts index 44b90ffe3ce..663e5a0927f 100644 --- a/packages/clerk-js/src/ui.retheme/foundations/typography.ts +++ b/packages/clerk-js/src/ui.retheme/foundations/typography.ts @@ -25,7 +25,7 @@ const letterSpacings = Object.freeze({ } as const); const fontSizes = Object.freeze({ - '2xs': '0.6875rem', + '2xs': '0.75rem', xs: '0.8125rem', sm: '0.875rem', md: '1rem', diff --git a/packages/clerk-js/src/ui.retheme/icons/close.svg b/packages/clerk-js/src/ui.retheme/icons/close.svg index 7b53a7993dd..4c18e8a43a5 100644 --- a/packages/clerk-js/src/ui.retheme/icons/close.svg +++ b/packages/clerk-js/src/ui.retheme/icons/close.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/clerk-js/src/ui.retheme/icons/logo-mark-new.svg b/packages/clerk-js/src/ui.retheme/icons/logo-mark-new.svg index daf10d5e786..d797bc3a4fe 100644 --- a/packages/clerk-js/src/ui.retheme/icons/logo-mark-new.svg +++ b/packages/clerk-js/src/ui.retheme/icons/logo-mark-new.svg @@ -1 +1,6 @@ - + + + + + + From c5e894b00b4c084fe31ae4cde6576ba5186b9b23 Mon Sep 17 00:00:00 2001 From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com> Date: Tue, 28 Nov 2023 17:54:13 +0100 Subject: [PATCH 2/8] feat(clerk-js): Add new design on TOTP card --- .changeset/violet-birds-scream.md | 2 + .../src/ui.retheme/elements/CodeControl.tsx | 38 +++---------------- .../src/ui.retheme/elements/FieldControl.tsx | 4 +- .../src/ui.retheme/elements/Footer.tsx | 3 ++ .../clerk-js/src/ui.retheme/elements/Form.tsx | 7 ++-- .../src/ui.retheme/elements/Header.tsx | 2 +- .../ui.retheme/elements/IdentityPreview.tsx | 23 ++--------- .../elements/VerificationCodeCard.tsx | 10 ++--- .../src/ui.retheme/foundations/typography.ts | 2 +- .../src/ui.retheme/icons/pencil-edit.svg | 6 ++- .../src/ui.retheme/primitives/Button.tsx | 2 +- .../src/ui.retheme/primitives/Heading.tsx | 2 +- .../src/ui.retheme/styledSystem/common.ts | 2 +- 13 files changed, 32 insertions(+), 71 deletions(-) create mode 100644 .changeset/violet-birds-scream.md diff --git a/.changeset/violet-birds-scream.md b/.changeset/violet-birds-scream.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/violet-birds-scream.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx b/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx index e317dca77d8..52d77deba81 100644 --- a/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx @@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react'; import React, { useCallback } from 'react'; import type { LocalizationKey } from '../customizables'; -import { descriptors, Flex, Input, Spinner, Text } from '../customizables'; +import { descriptors, Flex, Input, Spinner } from '../customizables'; import { useCardState } from '../elements/contexts'; import { useLoadingStatus } from '../hooks'; import type { PropsOfComponent } from '../styledSystem'; @@ -128,29 +128,6 @@ export const OTPRoot = ({ children, ...props }: PropsWithChildren return {children}; }; -export const OTPInputLabel = () => { - const { label } = useOTPInputContext(); - return ( - - ); -}; - -export const OTPInputDescription = () => { - const { description } = useOTPInputContext(); - return ( - - ); -}; - export const OTPResendButton = () => { const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext(); @@ -165,7 +142,6 @@ export const OTPResendButton = () => { startDisabled isDisabled={otpControl.otpInputProps.feedbackType === 'success' || isLoading} showCounter={otpControl.otpInputProps.feedbackType !== 'success'} - sx={theme => ({ marginTop: theme.space.$6 })} localizationKey={resendButton} /> ); @@ -342,17 +318,13 @@ const SingleCharInput = React.forwardRef< ...common.textVariants(theme).xlargeMedium, padding: `${theme.space.$0x5} 0`, boxSizing: 'content-box', - minWidth: '1ch', - maxWidth: theme.sizes.$7, - borderRadius: theme.radii.$none, + height: theme.space.$10, + width: theme.space.$10, + borderRadius: theme.radii.$md, border: 'none', - borderBottom: theme.borders.$heavy, ...(isSuccessfullyFilled ? { borderColor: theme.colors.$success500 } : common.borderColor(theme, props)), backgroundColor: 'unset', - '&:focus': { - boxShadow: 'none', - borderColor: theme.colors.$primary500, - }, + '&:focus': {}, })} {...rest} /> diff --git a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx index 7217b81e872..84348d514b4 100644 --- a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx @@ -18,7 +18,7 @@ import { FormFieldContextProvider, sanitizeInputProps, useFormField } from '../p import type { PropsOfComponent } from '../styledSystem'; import type { useFormControl as useFormControlUtil } from '../utils'; import { useFormControlFeedback } from '../utils'; -import { OTPCodeControl, OTPInputDescription, OTPInputLabel, OTPResendButton, OTPRoot } from './CodeControl'; +import { OTPCodeControl, OTPResendButton, OTPRoot } from './CodeControl'; import { useCardState } from './contexts'; import type { FormFeedbackProps } from './FormControl'; import { FormFeedback } from './FormControl'; @@ -308,8 +308,6 @@ export const Field = { LabelIcon: FieldLabelIcon, Feedback: FieldFeedback, OTPRoot, - OTPInputLabel, - OTPInputDescription, OTPCodeControl, OTPResendButton, }; diff --git a/packages/clerk-js/src/ui.retheme/elements/Footer.tsx b/packages/clerk-js/src/ui.retheme/elements/Footer.tsx index 38546d2951a..acffdc47407 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Footer.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Footer.tsx @@ -28,6 +28,9 @@ const FooterAction = (props: FooterActionProps): JSX.Element => { elementId={descriptors.footerAction.setId(elementId)} {...rest} gap={1} + sx={t => ({ + margin: `${t.space.$none} auto`, + })} /> ); }; diff --git a/packages/clerk-js/src/ui.retheme/elements/Form.tsx b/packages/clerk-js/src/ui.retheme/elements/Form.tsx index 120371f433b..25e5c3a8122 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Form.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Form.tsx @@ -79,7 +79,7 @@ const FormSubmit = (props: PropsOfComponent) => {