Skip to content

Commit 81ce300

Browse files
LauraBeatrisLauraBeatris
committed
Move to shared styles
1 parent 9ade3ae commit 81ce300

File tree

14 files changed

+125
-148
lines changed

14 files changed

+125
-148
lines changed

‎packages/clerk-js/src/core/clerk.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -715,7 +715,7 @@ export class Clerk implements ClerkInterface {
715715
void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
716716
};
717717

718-
public __internal_openEnableOrganizationsPrompt = (props?: __internal_EnableOrganizationsPromptProps): void => {
718+
public __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): void => {
719719
this.assertComponentsReady(this.#componentControls);
720720
void this.#componentControls
721721
.ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })

‎packages/clerk-js/src/ui/Components.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
import { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
4343
import {
4444
LazyComponentRenderer,
45+
LazyEnableOrganizationsPromptProvider,
4546
LazyImpersonationFabProvider,
4647
LazyModalRenderer,
4748
LazyOneTapRenderer,
@@ -351,7 +352,7 @@ const Components = (props: ComponentsProps) => {
351352
};
352353

353354
componentsControls.openModal = (name, props) => {
354-
// Prevent opening enableOrganizations modal if it's already open
355+
// Prevent opening enableOrganizations prompt if it's already open
355356
// to avoid duplicate mounting when component is called multiple times
356357
if (name === 'enableOrganizationsPrompt') {
357358
setState(s => {
@@ -634,12 +635,9 @@ const Components = (props: ComponentsProps) => {
634635
)}
635636

636637
{state.enableOrganizationsPromptModal && (
637-
<LazyImpersonationFabProvider globalAppearance={state.appearance}>
638-
<EnableOrganizationsPrompt
639-
callerString='useOrganization'
640-
{...state.enableOrganizationsPromptModal}
641-
/>
642-
</LazyImpersonationFabProvider>
638+
<LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>
639+
<EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />
640+
</LazyEnableOrganizationsPromptProvider>
643641
)}
644642

645643
{state.options?.__internal_keyless_claimKeylessApplicationUrl &&

packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

Lines changed: 10 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,12 @@ import { css } from '@emotion/react';
33
import { Modal } from '@/ui/elements/Modal';
44
import { InternalThemeProvider } from '@/ui/styledSystem';
55

6-
import { Button, Flex } from '../../customizables';
7-
import { Portal } from '../../elements/Portal';
8-
9-
const baseElementStyles = css`
10-
box-sizing: border-box;
11-
padding: 0;
12-
margin: 0;
13-
background: none;
14-
border: none;
15-
line-height: 1.5;
16-
font-family:
17-
-apple-system,
18-
BlinkMacSystemFont,
19-
avenir next,
20-
avenir,
21-
segoe ui,
22-
helvetica neue,
23-
helvetica,
24-
Cantarell,
25-
Ubuntu,
26-
roboto,
27-
noto,
28-
arial,
29-
sans-serif;
30-
text-decoration: none;
31-
`;
32-
33-
const mainCTAStyles = css`
34-
${baseElementStyles};
35-
display: flex;
36-
align-items: center;
37-
justify-content: center;
38-
width: 100%;
39-
height: 1.75rem;
40-
max-width: 14.625rem;
41-
padding: 0.25rem 0.625rem;
42-
border-radius: 0.375rem;
43-
font-size: 0.75rem;
44-
font-weight: 500;
45-
letter-spacing: 0.12px;
46-
color: 'white';
47-
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
48-
white-space: nowrap;
49-
user-select: none;
50-
cursor: pointer;
51-
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
52-
box-shadow:
53-
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
54-
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
55-
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
56-
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
57-
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
58-
`;
6+
import { Button, Flex } from '../../../customizables';
7+
import { Portal } from '../../../elements/Portal';
8+
import { basePromptElementStyles, PromptContainer } from '../shared';
599

6010
type EnableOrganizationsPromptProps = {
61-
callerString: string;
11+
callerName: string;
6212
};
6313

6414
const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProps) => {
@@ -68,25 +18,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
6818
canCloseModal={false}
6919
contentSx={() => ({ animation: 'unset' })}
7020
>
71-
<Flex
72-
sx={t => ({
73-
position: 'fixed',
74-
top: '50%',
75-
left: '50%',
76-
transform: 'translate(-50%, -50%)',
77-
flexDirection: 'column',
78-
gap: t.space.$1,
79-
width: 'fit-content',
80-
maxWidth: '25rem',
81-
borderRadius: '1.25rem',
82-
overflow: 'hidden',
83-
fontFamily: t.fonts.$main,
84-
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
85-
boxShadow:
86-
'0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
87-
transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
88-
})}
89-
>
21+
<PromptContainer>
9022
<Flex
9123
sx={t => ({
9224
display: 'flex',
@@ -137,7 +69,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
13769

13870
<h1
13971
css={css`
140-
${baseElementStyles};
72+
${basePromptElementStyles};
14173
color: white;
14274
font-size: 0.9rem;
14375
font-weight: 500;
@@ -149,7 +81,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
14981

15082
<p
15183
css={css`
152-
${baseElementStyles};
84+
${basePromptElementStyles};
15385
color: #c3c3c6;
15486
font-size: 0.88rem;
15587
font-weight: 400;
@@ -159,7 +91,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
15991
To use the{' '}
16092
<code
16193
css={css`
162-
${baseElementStyles};
94+
${basePromptElementStyles};
16395
color: white;
16496
`}
16597
>
@@ -173,7 +105,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
173105
<br />
174106
<a
175107
css={css`
176-
${baseElementStyles};
108+
${basePromptElementStyles};
177109
color: #a8a8ff;
178110
font-size: inherit;
179111
font-weight: 500;
@@ -217,7 +149,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
217149
I&apos;ll remove it myself
218150
</Button>
219151
</Flex>
220-
</Flex>
152+
</PromptContainer>
221153
</Modal>
222154
</Portal>
223155
);

packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/ClerkLogoIcon.tsx

File renamed without changes.

packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/KeySlashIcon.tsx

File renamed without changes.

packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx

Lines changed: 12 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import type { PropsWithChildren } from 'react';
55
import { useEffect, useMemo, useState } from 'react';
66
import { createPortal } from 'react-dom';
77

8-
import { Flex, Link } from '../../customizables';
9-
import { Portal } from '../../elements/Portal';
10-
import { InternalThemeProvider } from '../../styledSystem';
8+
import { Flex, Link } from '../../../customizables';
9+
import { Portal } from '../../../elements/Portal';
10+
import { InternalThemeProvider } from '../../../styledSystem';
11+
import { basePromptElementStyles, PromptContainer } from '../shared';
1112
import { ClerkLogoIcon } from './ClerkLogoIcon';
1213
import { KeySlashIcon } from './KeySlashIcon';
1314
import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -22,30 +23,6 @@ const buttonIdentifierPrefix = `--clerk-keyless-prompt`;
2223
const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
2324
const contentIdentifier = `${buttonIdentifierPrefix}-content`;
2425

25-
const baseElementStyles = css`
26-
box-sizing: border-box;
27-
padding: 0;
28-
margin: 0;
29-
background: none;
30-
border: none;
31-
line-height: 1.5;
32-
font-family:
33-
-apple-system,
34-
BlinkMacSystemFont,
35-
avenir next,
36-
avenir,
37-
segoe ui,
38-
helvetica neue,
39-
helvetica,
40-
Cantarell,
41-
Ubuntu,
42-
roboto,
43-
noto,
44-
arial,
45-
sans-serif;
46-
text-decoration: none;
47-
`;
48-
4926
/**
5027
* If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
5128
*/
@@ -122,7 +99,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
12299
}, [_props.copyKeysUrl]);
123100

124101
const mainCTAStyles = css`
125-
${baseElementStyles};
102+
${basePromptElementStyles};
126103
display: flex;
127104
align-items: center;
128105
justify-content: center;
@@ -150,22 +127,9 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
150127

151128
return (
152129
<Portal>
153-
<Flex
130+
<PromptContainer
154131
data-expanded={isForcedExpanded}
155-
sx={t => ({
156-
position: 'fixed',
157-
bottom: '1.25rem',
158-
right: '1.25rem',
159-
height: `${t.sizes.$10}`,
160-
minWidth: '13.4rem',
161-
paddingLeft: `${t.space.$3}`,
162-
borderRadius: '1.25rem',
163-
fontFamily: t.fonts.$main,
164-
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
165-
boxShadow:
166-
'0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
167-
transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
168-
132+
containerSx={t => ({
169133
'&[data-expanded="false"]:hover': {
170134
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
171135
},
@@ -192,7 +156,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
192156
id={buttonIdentifier}
193157
onClick={() => !claimed && setIsExpanded(prev => !prev)}
194158
css={css`
195-
${baseElementStyles};
159+
${basePromptElementStyles};
196160
width: 100%;
197161
display: flex;
198162
justify-content: space-between;
@@ -315,7 +279,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
315279
success ? 'Claim completed' : claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'
316280
}
317281
css={css`
318-
${baseElementStyles};
282+
${basePromptElementStyles};
319283
color: #d9d9d9;
320284
font-size: 0.875rem;
321285
font-weight: 500;
@@ -381,7 +345,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
381345
>
382346
<p
383347
css={css`
384-
${baseElementStyles};
348+
${basePromptElementStyles};
385349
color: #b4b4b4;
386350
font-size: 0.8125rem;
387351
font-weight: 400;
@@ -532,7 +496,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
532496
target='_blank'
533497
rel='noopener noreferrer'
534498
css={css`
535-
${baseElementStyles};
499+
${basePromptElementStyles};
536500
color: #ffffff9e;
537501
font-size: 0.75rem;
538502
transition: color 120ms ease-out;
@@ -565,7 +529,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
565529
</Flex>
566530
))}
567531
</Flex>
568-
</Flex>
532+
</PromptContainer>
569533
<BodyPortal>
570534
<a
571535
href={`#${buttonIdentifier}`}

packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts renamed to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useClerk } from '@clerk/shared/react';
22
import { useEffect, useReducer, useRef } from 'react';
33

4-
import type { Clerk } from '../../../core/clerk';
5-
import type { Environment } from '../../../core/resources';
6-
import { useEnvironment } from '../../contexts';
4+
import type { Clerk } from '../../../../core/clerk';
5+
import type { Environment } from '../../../../core/resources';
6+
import { useEnvironment } from '../../../contexts';
77

88
const THROTTLE_DURATION_MS = 10 * 1000;
99

‎packages/clerk-js/src/ui/components/devPrompts/shared.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { css } from '@emotion/react';
2+
import type { PropsWithChildren } from 'react';
3+
4+
import { Flex } from '@/ui/customizables';
5+
import type { ThemableCssProp } from '@/ui/styledSystem';
6+
7+
type PromptContainerProps = PropsWithChildren<{
8+
containerSx?: ThemableCssProp;
9+
}>;
10+
11+
/**
12+
* A container for prompt components
13+
* @internal
14+
*/
15+
export function PromptContainer({ containerSx }: PromptContainerProps) {
16+
return (
17+
<Flex
18+
sx={t => [
19+
{
20+
position: 'fixed',
21+
bottom: '1.25rem',
22+
right: '1.25rem',
23+
height: `${t.sizes.$10}`,
24+
minWidth: '13.4rem',
25+
paddingLeft: `${t.space.$3}`,
26+
borderRadius: '1.25rem',
27+
fontFamily: t.fonts.$main,
28+
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
29+
boxShadow:
30+
'0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
31+
transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
32+
},
33+
containerSx,
34+
]}
35+
/>
36+
);
37+
}
38+
39+
/**
40+
* Base styles for prompt elements, such as links, buttons, etc.
41+
* @internal
42+
*/
43+
export const basePromptElementStyles = css`
44+
box-sizing: border-box;
45+
padding: 0;
46+
margin: 0;
47+
background: none;
48+
border: none;
49+
line-height: 1.5;
50+
font-family:
51+
-apple-system,
52+
BlinkMacSystemFont,
53+
avenir next,
54+
avenir,
55+
segoe ui,
56+
helvetica neue,
57+
helvetica,
58+
Cantarell,
59+
Ubuntu,
60+
roboto,
61+
noto,
62+
arial,
63+
sans-serif;
64+
text-decoration: none;
65+
`;

‎packages/clerk-js/src/ui/customizables/parseAppearance.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ type PublicAppearanceTopLevelKey = keyof Omit<
2727
export type AppearanceCascade = {
2828
globalAppearance?: Appearance;
2929
appearance?: Appearance;
30-
appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab';
30+
appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab' | 'enableOrganizationsPrompt';
3131
};
3232

3333
export type ParsedAppearance = {

0 commit comments

Comments
 (0)