Skip to content

Commit 88582a3

Browse files
LauraBeatrisLauraBeatris
committed
Extract button to generic component
1 parent d7da522 commit 88582a3

File tree

2 files changed

+94
-77
lines changed

2 files changed

+94
-77
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
7676
} as unknown as OrganizationSettingsJSONSnapshot;
7777
}
7878

79+
/**
80+
* Used to enable the Organizations feature in memory after it has been enabled in the backend
81+
* from the devtools resource, since it cannot return the updated environment due to API caching
82+
*/
7983
public __internal_enableInMemory() {
8084
this.enabled = true;
8185
}

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

Lines changed: 90 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -232,96 +232,28 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
232232
})}
233233
>
234234
{isEnabled ? (
235-
<button
236-
type='button'
235+
<PromptButton
236+
variant='outline'
237237
onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
238-
css={css`
239-
${mainCTAStyles};
240-
min-width: 100%;
241-
color: white;
242-
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
243-
box-shadow:
244-
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
245-
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
246-
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
247-
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
248-
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
249-
250-
&:hover:not(:disabled) {
251-
box-shadow:
252-
0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
253-
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
254-
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
255-
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
256-
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
257-
}
258-
259-
&:disabled {
260-
opacity: 0.6;
261-
cursor: not-allowed;
262-
}
263-
`}
264238
>
265239
Continue
266-
</button>
240+
</PromptButton>
267241
) : (
268242
<>
269-
<button
270-
type='button'
243+
<PromptButton
244+
variant='solid'
271245
onClick={handleEnableOrganizations}
272246
disabled={isLoading}
273-
css={css`
274-
${mainCTAStyles};
275-
min-width: 100%;
276-
color: white;
277-
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
278-
box-shadow:
279-
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
280-
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
281-
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
282-
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
283-
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
284-
285-
&:hover:not(:disabled) {
286-
box-shadow:
287-
0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
288-
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
289-
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
290-
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
291-
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
292-
}
293-
294-
&:disabled {
295-
opacity: 0.6;
296-
cursor: not-allowed;
297-
}
298-
`}
299247
>
300248
Enable Organizations
301-
</button>
249+
</PromptButton>
302250

303-
<button
304-
type='button'
251+
<PromptButton
252+
variant='outline'
305253
onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
306-
css={css`
307-
${mainCTAStyles};
308-
min-width: 100%;
309-
color: white;
310-
background: rgba(69, 69, 69, 0.1);
311-
border: 1px solid rgba(118, 118, 132, 0.25);
312-
313-
&:hover {
314-
box-shadow:
315-
0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
316-
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
317-
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
318-
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
319-
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
320-
}
321-
`}
322254
>
323255
I&apos;ll remove it myself
324-
</button>
256+
</PromptButton>
325257
</>
326258
)}
327259
</Flex>
@@ -361,4 +293,85 @@ const mainCTAStyles = css`
361293
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
362294
white-space: nowrap;
363295
user-select: none;
296+
min-width: 100%;
297+
color: white;
298+
transition:
299+
background 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
300+
box-shadow 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
301+
border-color 150ms cubic-bezier(0.2, 0.61, 0.1, 1);
302+
303+
&:disabled {
304+
opacity: 0.6;
305+
cursor: not-allowed;
306+
}
364307
`;
308+
309+
type PromptButtonVariant = 'solid' | 'outline';
310+
311+
type PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {
312+
variant?: PromptButtonVariant;
313+
};
314+
315+
const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
316+
const solidStyles = css`
317+
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
318+
box-shadow:
319+
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
320+
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
321+
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
322+
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
323+
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
324+
325+
&:hover:not(:disabled) {
326+
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
327+
box-shadow:
328+
0 0 3px 0 rgba(253, 224, 71, 0) inset,
329+
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
330+
0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
331+
0 0 0 1px rgba(0, 0, 0, 0.12),
332+
0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
333+
}
334+
335+
&:focus:not(:disabled) {
336+
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
337+
box-shadow:
338+
0 0 3px 0 rgba(253, 224, 71, 0) inset,
339+
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
340+
0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
341+
0 0 0 1px rgba(0, 0, 0, 0.12),
342+
0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
343+
}
344+
`;
345+
346+
const outlineStyles = css`
347+
background: rgba(69, 69, 69, 0.1);
348+
border: 1px solid rgba(118, 118, 132, 0.25);
349+
350+
&:hover:not(:disabled) {
351+
box-shadow:
352+
0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
353+
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
354+
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
355+
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
356+
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
357+
}
358+
359+
&:focus:not(:disabled) {
360+
box-shadow:
361+
0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
362+
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
363+
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
364+
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
365+
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
366+
border-color: rgba(118, 118, 132, 0.4);
367+
}
368+
`;
369+
370+
return (
371+
<button
372+
type='button'
373+
css={[mainCTAStyles, variant === 'solid' ? solidStyles : outlineStyles]}
374+
{...props}
375+
/>
376+
);
377+
};

0 commit comments

Comments
 (0)