Skip to content

Commit c145bf9

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

File tree

9 files changed

+97
-136
lines changed

9 files changed

+97
-136
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ const Components = (props: ComponentsProps) => {
351351
};
352352

353353
componentsControls.openModal = (name, props) => {
354-
// Prevent opening enableOrganizations modal if it's already open
354+
// Prevent opening enableOrganizations prompt if it's already open
355355
// to avoid duplicate mounting when component is called multiple times
356356
if (name === 'enableOrganizationsPrompt') {
357357
setState(s => {

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

Lines changed: 9 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,9 @@
1-
import { css } from '@emotion/react';
2-
31
import { Modal } from '@/ui/elements/Modal';
42
import { InternalThemeProvider } from '@/ui/styledSystem';
53

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-
`;
4+
import { Button, Flex } from '../../../customizables';
5+
import { Portal } from '../../../elements/Portal';
6+
import { basePromptElementStyles, PromptContainer } from '../shared';
597

608
type EnableOrganizationsPromptProps = {
619
callerString: string;
@@ -68,25 +16,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
6816
canCloseModal={false}
6917
contentSx={() => ({ animation: 'unset' })}
7018
>
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-
>
19+
<PromptContainer>
9020
<Flex
9121
sx={t => ({
9222
display: 'flex',
@@ -137,7 +67,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
13767

13868
<h1
13969
css={css`
140-
${baseElementStyles};
70+
${basePromptElementStyles};
14171
color: white;
14272
font-size: 0.9rem;
14373
font-weight: 500;
@@ -149,7 +79,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
14979

15080
<p
15181
css={css`
152-
${baseElementStyles};
82+
${basePromptElementStyles};
15383
color: #c3c3c6;
15484
font-size: 0.88rem;
15585
font-weight: 400;
@@ -159,7 +89,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
15989
To use the{' '}
16090
<code
16191
css={css`
162-
${baseElementStyles};
92+
${basePromptElementStyles};
16393
color: white;
16494
`}
16595
>
@@ -173,7 +103,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
173103
<br />
174104
<a
175105
css={css`
176-
${baseElementStyles};
106+
${basePromptElementStyles};
177107
color: #a8a8ff;
178108
font-size: inherit;
179109
font-weight: 500;
@@ -217,7 +147,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
217147
I&apos;ll remove it myself
218148
</Button>
219149
</Flex>
220-
</Flex>
150+
</PromptContainer>
221151
</Modal>
222152
</Portal>
223153
);

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: 11 additions & 47 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;
@@ -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/lazyModules/components.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const componentImportPaths = {
1717
BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
1818
UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
1919
Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
20-
KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'),
20+
KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/devPrompts/KeylessPrompt'),
2121
PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'),
2222
Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
2323
SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
@@ -28,7 +28,7 @@ const componentImportPaths = {
2828
APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),
2929
OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
3030
EnableOrganizationsPrompt: () =>
31-
import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/EnableOrganizationsPrompt'),
31+
import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/devPrompts/EnableOrganizationsPrompt'),
3232
} as const;
3333

3434
export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

‎playground/app-router/src/app/layout.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import './globals.css';
2-
import { Inter } from 'next/font/google';
3-
import { ClerkProvider } from '@clerk/nextjs';
41
import { Links } from '@/common/Links';
2+
import { ClerkProvider } from '@clerk/nextjs';
3+
import { Inter } from 'next/font/google';
4+
import './globals.css';
5+
import { Test } from './test';
56

67
const inter = Inter({ subsets: ['latin'] });
78

@@ -13,10 +14,11 @@ export const metadata = {
1314
export default function RootLayout({ children }: { children: React.ReactNode }) {
1415
// console.log(auth());
1516
return (
16-
<ClerkProvider clerkJSUrl={'https://js.lclclerk.com/npm/clerk.browser.js'}>
17+
<ClerkProvider clerkJSUrl={'http://localhost:4000/npm/clerk.browser.js'}>
1718
<html lang='en'>
1819
<body className={inter.className}>
1920
<Links />
21+
<Test />
2022
<div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
2123
<h2>Root layout</h2>
2224
{children}

0 commit comments

Comments
 (0)