feat(clerk-js): Update Development notice to match designs

clerk · Jul 12, 2024 · e4f6058 · e4f6058
1 parent f3a3fe6
commit e4f6058
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -1,6 +1,6 @@
 import { useClerk } from '@clerk/shared/react';
 
-import { useCreateOrganizationContext } from '../../contexts';
+import { useCreateOrganizationContext, useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { Card, useCardState, withCardStateProvider } from '../../elements';
 import { CreateOrganizationForm } from './CreateOrganizationForm';
@@ -10,10 +10,13 @@ export const CreateOrganizationPage = withCardStateProvider(() => {
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
   const card = useCardState();
+  const { isDevelopmentOrStaging } = useEnvironment();
 
   return (
     <Card.Root sx={t => ({ width: t.sizes.$108 })}>
-      <Card.Content sx={t => ({ padding: `${t.space.$4} ${t.space.$5} ${t.space.$6}` })}>
+      <Card.Content
+        sx={t => ({ padding: `${t.space.$4} ${t.space.$5} ${isDevelopmentOrStaging() ? t.space.$12 : t.space.$6}` })}
+      >
         <Card.Alert>{card.error}</Card.Alert>
         <CreateOrganizationForm
           skipInvitationScreen={skipInvitationScreen}

diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -3,19 +3,23 @@ import React from 'react';
 import { useEnvironment } from '../../contexts';
 import { Col, Flex, Icon, Link, Text } from '../../customizables';
 import { LogoMark } from '../../icons';
-import type { PropsOfComponent } from '../../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import { DevModeNotice } from '../DevModeNotice';
 import { Card } from '.';
 
 export const CardClerkAndPagesTag = React.memo(
   React.forwardRef<
     HTMLDivElement,
-    PropsOfComponent<typeof Flex> & { withFooterPages?: boolean; withDevModeNotice?: boolean }
+    PropsOfComponent<typeof Flex> & {
+      withFooterPages?: boolean;
+      withDevModeNotice?: boolean;
+      devModeNoticeSx?: ThemableCssProp;
+    }
   >((props, ref) => {
-    const { sx, withFooterPages = false, withDevModeNotice = false, ...rest } = props;
+    const { sx, withFooterPages = false, withDevModeNotice = false, devModeNoticeSx, ...rest } = props;
     const { displayConfig } = useEnvironment();
 
-    if (!(displayConfig.branded || withFooterPages)) {
+    if (!(displayConfig.branded || withFooterPages) && !withDevModeNotice) {
       return null;
     }
 
@@ -62,7 +66,7 @@ export const CardClerkAndPagesTag = React.memo(
           {withFooterPages && <Card.FooterLinks />}
         </Flex>
 
-        {withDevModeNotice && <DevModeNotice />}
+        {withDevModeNotice && <DevModeNotice sx={devModeNoticeSx} />}
       </Col>
     );
   }),

diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -10,7 +10,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { Close } from '../../icons';
-import { type PropsOfComponent } from '../../styledSystem';
+import type { PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
 import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
 import { IconButton } from '../IconButton';
@@ -25,6 +25,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
   const { maintenanceMode } = useEnvironment();
   const card = useCardState();
   const { t } = useLocalizations();
+  const { isDevelopmentOrStaging } = useEnvironment();
 
   return (
     <Flex
@@ -44,7 +45,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: `${t.space.$8} ${t.space.$10}`,
+          padding: `${t.space.$8} ${t.space.$10} ${isDevelopmentOrStaging() ? t.space.$12 : t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),
@@ -84,13 +85,14 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       {children}
 
       <DevModeNotice
-        sx={{
+        sx={t => ({
           position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
           textAlign: 'center',
-        }}
+          padding: t.space.$3,
+        })}
       />
     </Flex>
   );

diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -39,7 +39,6 @@ export const DevModeNotice = (props: DevModeNoticeProps) => {
         t => ({
           color: t.colors.$warning500,
           fontWeight: t.fontWeights.$semibold,
-          whiteSpace: 'nowrap',
           padding: t.space.$1x5,
         }),
         sx,

diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -5,7 +5,7 @@ import { Col, Flex, Flow, useAppearance } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
 import { animations, common } from '../styledSystem';
 import { colors } from '../utils';
-import { Card } from '.';
+import { Card, DevModeOverlay } from '.';
 
 const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Card.Content>>((props, ref) => {
   return (
@@ -87,9 +87,18 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       ]}
       {...rest}
     >
+      <DevModeOverlay />
       {children}
 
-      {shouldShowTagOrLinks && <Card.ClerkAndPagesTag withFooterPages />}
+      {shouldShowTagOrLinks && (
+        <Card.ClerkAndPagesTag
+          withFooterPages
+          withDevModeNotice
+          devModeNoticeSx={t => ({
+            padding: t.space.$none,
+          })}
+        />
+      )}
     </Col>
   );
 };