Skip to content

Commit 96a2276

Browse files
LauraBeatrisLauraBeatris
committed
Simplify navbar to drop email domain
1 parent 6ae19e6 commit 96a2276

2 files changed

Lines changed: 79 additions & 117 deletions

File tree

‎packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx‎

Lines changed: 53 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useOrganization, useUser } from '@clerk/shared/react/index';
1+
import { useOrganization } from '@clerk/shared/react/index';
22
import React from 'react';
33

44
import { useEnvironment } from '@/contexts';
5-
import { Box, Col, Flex, Hr, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
5+
import { Box, Col, Flex, Heading, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
66
import { ApplicationLogo } from '@/elements/ApplicationLogo';
77
import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
88
import { BoxIcon } from '@/icons';
@@ -23,61 +23,61 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
2323
return (
2424
<NavbarContextProvider contentRef={contentRef}>
2525
<NavBar
26+
contentRef={contentRef}
2627
header={
27-
<Flex
28-
align='center'
29-
sx={t => ({
30-
gap: t.space.$2,
31-
padding: `${t.space.$none} ${t.space.$3}`,
32-
maxWidth: '100%',
33-
})}
34-
>
35-
{hasLogo ? (
36-
<ApplicationLogo
37-
sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}
38-
/>
39-
) : (
40-
<Box
41-
sx={t => ({
42-
width: t.space.$9,
43-
height: t.space.$9,
44-
flexShrink: 0,
45-
borderRadius: t.radii.$md,
46-
backgroundColor: t.colors.$primary500,
47-
color: t.colors.$colorPrimaryForeground,
48-
display: 'flex',
49-
alignItems: 'center',
50-
justifyContent: 'center',
51-
})}
52-
aria-hidden
53-
>
54-
<Icon
55-
icon={BoxIcon}
56-
sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
28+
<Col sx={t => ({ gap: t.space.$6 })}>
29+
<Flex
30+
align='center'
31+
sx={t => ({
32+
gap: t.space.$2,
33+
padding: `${t.space.$none} ${t.space.$3}`,
34+
maxWidth: '100%',
35+
})}
36+
>
37+
{hasLogo ? (
38+
<ApplicationLogo
39+
sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}
5740
/>
58-
</Box>
59-
)}
41+
) : (
42+
<Box
43+
sx={t => ({
44+
width: t.space.$9,
45+
height: t.space.$9,
46+
flexShrink: 0,
47+
borderRadius: t.radii.$md,
48+
backgroundColor: t.colors.$primary500,
49+
color: t.colors.$colorPrimaryForeground,
50+
display: 'flex',
51+
alignItems: 'center',
52+
justifyContent: 'center',
53+
})}
54+
aria-hidden
55+
>
56+
<Icon
57+
icon={BoxIcon}
58+
sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
59+
/>
60+
</Box>
61+
)}
62+
63+
<Col sx={{ minWidth: 0 }}>
64+
<Text
65+
as='p'
66+
truncate
67+
>
68+
{applicationName}
69+
</Text>
70+
{organizationSettings.enabled && <OrganizationSidebarSubtitle />}
71+
</Col>
72+
</Flex>
6073

61-
<Col sx={{ minWidth: 0 }}>
62-
<Text
63-
as='p'
64-
truncate
65-
>
66-
{applicationName}
67-
</Text>
68-
{organizationSettings.enabled && <OrganizationSidebarSubtitle />}
69-
</Col>
70-
</Flex>
74+
<Heading
75+
as='h1'
76+
localizationKey={localizationKeys('configureSSO.navbar.title')}
77+
sx={t => ({ fontSize: t.fontSizes.$lg, padding: `${t.space.$none} ${t.space.$3}` })}
78+
/>
79+
</Col>
7180
}
72-
titleSx={t => ({ fontSize: t.fontSizes.$lg })}
73-
containerSx={{
74-
flexDirection: 'column-reverse',
75-
flex: 0,
76-
}}
77-
title={localizationKeys('configureSSO.navbar.title')}
78-
routes={[]}
79-
contentRef={contentRef}
80-
footer={<PrimaryEmailDomainFooter />}
8181
/>
8282
{children}
8383
</NavbarContextProvider>
@@ -101,31 +101,3 @@ const OrganizationSidebarSubtitle = (): JSX.Element | null => {
101101
</Text>
102102
);
103103
};
104-
105-
const PrimaryEmailDomainFooter = (): JSX.Element | null => {
106-
const { user } = useUser();
107-
const emailDomain = user?.primaryEmailAddress?.emailAddress.split('@')[1];
108-
109-
if (!emailDomain) {
110-
return null;
111-
}
112-
113-
return (
114-
<Col
115-
sx={t => ({
116-
gap: t.space.$6,
117-
padding: `${t.space.$none} ${t.space.$3}`,
118-
})}
119-
>
120-
<Hr sx={t => ({ backgroundColor: t.colors.$borderAlpha100 })} />
121-
122-
<Text
123-
as='span'
124-
truncate
125-
sx={{ textDecoration: 'underline' }}
126-
>
127-
{emailDomain}
128-
</Text>
129-
</Col>
130-
);
131-
};

‎packages/ui/src/elements/Navbar.tsx‎

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type { ElementDescriptor, ElementId } from '../customizables/elementDescr
77
import { useNavigateToFlowStart, usePopover } from '../hooks';
88
import { Menu } from '../icons';
99
import { useRouter } from '../router';
10-
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
10+
import type { PropsOfComponent } from '../styledSystem';
1111
import { animations, common, mqu } from '../styledSystem';
1212
import { colors } from '../utils/colors';
1313
import { Card } from './Card';
@@ -43,18 +43,15 @@ export type NavbarRoute = {
4343
external?: boolean;
4444
};
4545
type NavBarProps = {
46-
title: LocalizationKey;
47-
titleSx?: ThemableCssProp;
48-
containerSx?: ThemableCssProp;
46+
title?: LocalizationKey;
4947
description?: LocalizationKey;
5048
contentRef: React.RefObject<HTMLDivElement>;
51-
routes: NavbarRoute[];
49+
routes?: NavbarRoute[];
5250
header?: React.ReactNode;
53-
footer?: React.ReactNode;
5451
};
5552

5653
export const NavBar = (props: NavBarProps) => {
57-
const { contentRef, title, titleSx, containerSx, description, routes, header, footer } = props;
54+
const { contentRef, title, description, routes = [], header } = props;
5855
const { close } = useNavbarContext();
5956
const { navigate } = useRouter();
6057
const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -130,33 +127,26 @@ export const NavBar = (props: NavBarProps) => {
130127
<>
131128
<NavbarContainer
132129
title={title}
133-
titleSx={titleSx}
134-
containerSx={containerSx}
135130
description={description}
136-
footer={footer}
137131
>
138132
{header}
139133
{items}
140134
</NavbarContainer>
141135
<MobileNavbarContainer>
142136
{header}
143137
{items}
144-
{footer}
145138
</MobileNavbarContainer>
146139
</>
147140
);
148141
};
149142

150143
const NavbarContainer = (
151144
props: React.PropsWithChildren<{
152-
title: LocalizationKey | string;
153-
titleSx?: ThemableCssProp;
154-
containerSx?: ThemableCssProp;
145+
title?: LocalizationKey | string;
155146
description?: LocalizationKey | string;
156-
footer?: React.ReactNode;
157147
}>,
158148
) => {
159-
const { title, titleSx, containerSx, description, footer } = props;
149+
const { title, description } = props;
160150
return (
161151
<Col
162152
elementDescriptor={descriptors.navbar}
@@ -177,27 +167,27 @@ const NavbarContainer = (
177167
>
178168
<DevModeOverlay />
179169

180-
<Col sx={[t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` }), containerSx]}>
181-
{footer}
182-
<Col
183-
sx={t => ({
184-
gap: t.space.$0x5,
185-
padding: `${t.space.$none} ${t.space.$3}`,
186-
})}
187-
>
188-
<Heading
189-
as='h1'
190-
sx={titleSx}
191-
localizationKey={title}
192-
/>
193-
194-
{description ? (
195-
<Text
196-
colorScheme='secondary'
197-
localizationKey={description}
170+
<Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
171+
{title ? (
172+
<Col
173+
sx={t => ({
174+
gap: t.space.$0x5,
175+
padding: `${t.space.$none} ${t.space.$3}`,
176+
})}
177+
>
178+
<Heading
179+
as='h1'
180+
localizationKey={title}
198181
/>
199-
) : null}
200-
</Col>
182+
183+
{description ? (
184+
<Text
185+
colorScheme='secondary'
186+
localizationKey={description}
187+
/>
188+
) : null}
189+
</Col>
190+
) : null}
201191
{props.children}
202192
</Col>
203193

0 commit comments

Comments
 (0)