Move to shared styles

Author: LauraBeatris

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

@@ -715,7 +715,7 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
-  public __internal_openEnableOrganizationsPrompt = (props?: __internal_EnableOrganizationsPromptProps): void => {
+  public __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls
       .ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })

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

@@ -42,6 +42,7 @@ import {
 import { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
 import {
   LazyComponentRenderer,
+  LazyEnableOrganizationsPromptProvider,
   LazyImpersonationFabProvider,
   LazyModalRenderer,
   LazyOneTapRenderer,
@@ -351,7 +352,7 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.openModal = (name, props) => {
-      // Prevent opening enableOrganizations modal if it's already open
+      // Prevent opening enableOrganizations prompt if it's already open
       // to avoid duplicate mounting when component is called multiple times
       if (name === 'enableOrganizationsPrompt') {
         setState(s => {
@@ -634,12 +635,9 @@ const Components = (props: ComponentsProps) => {
         )}
 
         {state.enableOrganizationsPromptModal && (
-          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
-            <EnableOrganizationsPrompt
-              callerString='useOrganization'
-              {...state.enableOrganizationsPromptModal}
-            />
-          </LazyImpersonationFabProvider>
+          <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>
+            <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />
+          </LazyEnableOrganizationsPromptProvider>
         )}
 
         {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

@@ -3,62 +3,12 @@ import { css } from '@emotion/react';
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
-import { Button, Flex } from '../../customizables';
-import { Portal } from '../../elements/Portal';
-
-const baseElementStyles = css`
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  line-height: 1.5;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    avenir next,
-    avenir,
-    segoe ui,
-    helvetica neue,
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  text-decoration: none;
-`;
-
-const mainCTAStyles = css`
-  ${baseElementStyles};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 1.75rem;
-  max-width: 14.625rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.12px;
-  color: 'white';
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-  box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-    0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-    0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-`;
+import { Flex } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { basePromptElementStyles, PromptContainer } from '../shared';
 
 type EnableOrganizationsPromptProps = {
-  callerString: string;
+  callerName: string;
 };
 
 const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProps) => {
@@ -68,30 +18,24 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
         canCloseModal={false}
         contentSx={() => ({ animation: 'unset' })}
       >
-        <Flex
-          sx={t => ({
-            position: 'fixed',
+        <PromptContainer
+          sx={() => ({
             top: '50%',
             left: '50%',
+            bottom: 'auto',
+            right: 'auto',
+            padding: 'unset',
             transform: 'translate(-50%, -50%)',
             flexDirection: 'column',
-            gap: t.space.$1,
-            width: 'fit-content',
-            maxWidth: '25rem',
-            borderRadius: '1.25rem',
-            overflow: 'hidden',
-            fontFamily: t.fonts.$main,
-            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-            boxShadow:
-              '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);',
-            transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+            height: 'fit-content',
           })}
         >
           <Flex
             sx={t => ({
               display: 'flex',
               flexDirection: 'column',
-              padding: `${t.space.$3} ${t.space.$4}`,
+              padding: `${t.space.$5} ${t.space.$6}`,
+              paddingBottom: t.space.$4,
               gap: t.space.$2,
             })}
           >
@@ -137,96 +81,167 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
 
               <h1
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: white;
-                  font-size: 0.9rem;
+                  font-size: 0.875rem;
                   font-weight: 500;
                 `}
               >
                 Organizations feature required
               </h1>
             </Flex>
 
-            <p
-              css={css`
-                ${baseElementStyles};
-                color: #c3c3c6;
-                font-size: 0.88rem;
-                font-weight: 400;
-                line-height: 1.125rem;
-              `}
+            <Flex
+              sx={t => ({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: t.space.$0x5,
+              })}
             >
-              To use the{' '}
-              <code
+              <span
                 css={css`
-                  ${baseElementStyles};
-                  color: white;
+                  ${basePromptElementStyles};
+                  color: #b4b4b4;
+                  font-size: 0.8125rem;
+                  font-weight: 400;
+                  line-height: 1rem;
                 `}
               >
-                useOrganization
-              </code>{' '}
-              hook,
-              <br />
-              you’ll need to enable the Organizations feature
-              <br />
-              for your app first.
-              <br />
+                To use the{' '}
+                <code
+                  css={css`
+                    ${basePromptElementStyles};
+                    color: white;
+                  `}
+                >
+                  useOrganization
+                </code>{' '}
+                hook,
+                <br />
+                you’ll need to enable the Organizations feature
+                <br />
+                for your app first.
+              </span>
+
               <a
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: #a8a8ff;
                   font-size: inherit;
                   font-weight: 500;
                   line-height: 1rem;
+                  font-size: 0.8125rem;
                 `}
                 href='https://clerk.com/docs/guides/organizations'
                 target='_blank'
                 rel='noopener noreferrer'
+                tabIndex={-1}
               >
                 Learn more about this add-on.
               </a>
-            </p>
+            </Flex>
           </Flex>
 
-          <Flex
-            sx={() => ({
-              borderBottom: '1px solid rgba(255, 255, 255, 0.10)',
-              background: 'rgba(0, 0, 0, 0.80)',
-              overflow: 'hidden',
-              width: '100%',
-              height: '1px',
-            })}
+          <span
+            css={css`
+              height: 1px;
+              background-color: #151515;
+              width: 100%;
+              box-shadow: 0px 1px 0px 0px #424242;
+            `}
           />
 
           <Flex
             sx={t => ({
-              paddingLeft: `${t.space.$4}`,
-              paddingRight: `${t.space.$4}`,
-              paddingTop: `${t.space.$3}`,
-              paddingBottom: `${t.space.$5}`,
+              padding: `${t.space.$4} ${t.space.$6}`,
               flexDirection: 'column',
               gap: t.space.$3,
               justifyContent: 'center',
             })}
           >
-            <Button variant='solid'>Enable Organizations</Button>
-            <Button
-              variant='bordered'
-              sx={t => ({ color: t.colors.$white })}
+            <button
+              type='button'
+              css={css`
+                ${mainCTAStyles};
+                min-width: 100%;
+                color: white;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+                box-shadow:
+                  0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                  0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                  0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+                  0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+                  0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
+
+                &:hover {
+                  box-shadow:
+                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                }
+              `}
+            >
+              Enable Organizations
+            </button>
+
+            <button
+              type='button'
+              css={css`
+                ${mainCTAStyles};
+                min-width: 100%;
+                color: white;
+                background: rgba(69, 69, 69, 0.1);
+                border: 1px solid rgba(118, 118, 132, 0.25);
+
+                &:hover {
+                  box-shadow:
+                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                }
+              `}
             >
               I&apos;ll remove it myself
-            </Button>
+            </button>
           </Flex>
-        </Flex>
+        </PromptContainer>
       </Modal>
     </Portal>
   );
 };
 
+/**
+ * A prompt that allows the user to enable the Organizations feature for their development instance
+ * @internal
+ */
 export const EnableOrganizationsPrompt = (props: EnableOrganizationsPromptProps) => {
   return (
     <InternalThemeProvider>
       <EnableOrganizationsPromptInternal {...props} />
     </InternalThemeProvider>
   );
 };
+
+const mainCTAStyles = css`
+  ${basePromptElementStyles};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 1.75rem;
+  max-width: 14.625rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.12px;
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
+  white-space: nowrap;
+  user-select: none;
+`;