Skip to content

Commit 8953897

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

File tree

8 files changed

+88
-101
lines changed

8 files changed

+88
-101
lines changed

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

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ 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';
6+
import { Button, Flex } from '../../../customizables';
7+
import { Portal } from '../../../elements/Portal';
8+
import { PromptContainer } from '../shared';
89

910
const baseElementStyles = css`
1011
box-sizing: border-box;
@@ -30,33 +31,6 @@ const baseElementStyles = css`
3031
text-decoration: none;
3132
`;
3233

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-
`;
59-
6034
type EnableOrganizationsPromptProps = {
6135
callerString: string;
6236
};
@@ -68,25 +42,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
6842
canCloseModal={false}
6943
contentSx={() => ({ animation: 'unset' })}
7044
>
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-
>
45+
<PromptContainer>
9046
<Flex
9147
sx={t => ({
9248
display: 'flex',
@@ -217,7 +173,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
217173
I&apos;ll remove it myself
218174
</Button>
219175
</Flex>
220-
</Flex>
176+
</PromptContainer>
221177
</Modal>
222178
</Portal>
223179
);

‎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: 7 additions & 43 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 { 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
*/
@@ -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
},
@@ -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)