Skip to content

Commit 605a34d

Browse files
aslilacaslilac
committed
🧹
1 parent fbe1c25 commit 605a34d

File tree

2 files changed

+90
-86
lines changed

2 files changed

+90
-86
lines changed

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 86 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -44,81 +44,6 @@ export const Language = {
4444
deployment: "Deployment",
4545
};
4646

47-
const styles = {
48-
desktopNavItems: (theme) => css`
49-
display: none;
50-
51-
${theme.breakpoints.up("md")} {
52-
display: flex;
53-
}
54-
`,
55-
mobileMenuButton: (theme) => css`
56-
${theme.breakpoints.up("md")} {
57-
display: none;
58-
}
59-
`,
60-
wrapper: (theme) => css`
61-
position: relative;
62-
display: flex;
63-
justify-content: space-between;
64-
align-items: center;
65-
66-
${theme.breakpoints.up("md")} {
67-
justify-content: flex-start;
68-
}
69-
`,
70-
drawerHeader: {
71-
padding: 16,
72-
paddingTop: 32,
73-
paddingBottom: 32,
74-
},
75-
logo: (theme) => css`
76-
align-items: center;
77-
display: flex;
78-
height: ${navHeight}px;
79-
color: ${theme.palette.text.primary};
80-
padding: 16px;
81-
82-
// svg is for the Coder logo, img is for custom images
83-
& svg,
84-
& img {
85-
height: 100%;
86-
object-fit: contain;
87-
}
88-
`,
89-
drawerLogo: {
90-
padding: 0,
91-
maxHeight: 40,
92-
},
93-
item: {
94-
padding: 0,
95-
},
96-
link: (theme) => css`
97-
align-items: center;
98-
color: ${colors.gray[6]};
99-
display: flex;
100-
flex: 1;
101-
font-size: 16px;
102-
padding: 12px 16px;
103-
text-decoration: none;
104-
transition: background-color 0.15s ease-in-out;
105-
106-
&.active {
107-
color: ${theme.palette.text.primary};
108-
font-weight: 500;
109-
}
110-
111-
&:hover {
112-
background-color: ${theme.palette.action.hover};
113-
}
114-
115-
${theme.breakpoints.up("md")} {
116-
height: ${navHeight}px;
117-
padding: 0 24px;
118-
}
119-
`,
120-
} satisfies Record<string, Interpolation<Theme>>;
121-
12247
interface NavItemsProps {
12348
children?: ReactNode;
12449
className?: string;
@@ -183,6 +108,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
183108
canViewAllUsers,
184109
proxyContextValue,
185110
}) => {
111+
const theme = useTheme();
186112
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
187113

188114
return (
@@ -243,15 +169,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
243169
canViewAllUsers={canViewAllUsers}
244170
/>
245171

246-
<div
247-
css={{
248-
display: "flex",
249-
marginLeft: "auto",
250-
gap: 16,
251-
alignItems: "center",
252-
paddingRight: 16,
253-
}}
254-
>
172+
<div css={styles.navMenus}>
255173
{proxyContextValue && (
256174
<ProxyMenu proxyContextValue={proxyContextValue} />
257175
)}
@@ -465,3 +383,87 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
465383
</>
466384
);
467385
};
386+
387+
const styles = {
388+
desktopNavItems: (theme) => css`
389+
display: none;
390+
391+
${theme.breakpoints.up("md")} {
392+
display: flex;
393+
}
394+
`,
395+
mobileMenuButton: (theme) => css`
396+
${theme.breakpoints.up("md")} {
397+
display: none;
398+
}
399+
`,
400+
navMenus: (theme) => ({
401+
display: "flex",
402+
gap: 16,
403+
alignItems: "center",
404+
paddingRight: 16,
405+
[theme.breakpoints.up("md")]: {
406+
marginLeft: "auto",
407+
},
408+
}),
409+
wrapper: (theme) => css`
410+
position: relative;
411+
display: flex;
412+
justify-content: space-between;
413+
align-items: center;
414+
415+
${theme.breakpoints.up("md")} {
416+
justify-content: flex-start;
417+
}
418+
`,
419+
drawerHeader: {
420+
padding: 16,
421+
paddingTop: 32,
422+
paddingBottom: 32,
423+
},
424+
logo: (theme) => css`
425+
align-items: center;
426+
display: flex;
427+
height: ${navHeight}px;
428+
color: ${theme.palette.text.primary};
429+
padding: 16px;
430+
431+
// svg is for the Coder logo, img is for custom images
432+
& svg,
433+
& img {
434+
height: 100%;
435+
object-fit: contain;
436+
}
437+
`,
438+
drawerLogo: {
439+
padding: 0,
440+
maxHeight: 40,
441+
},
442+
item: {
443+
padding: 0,
444+
},
445+
link: (theme) => css`
446+
align-items: center;
447+
color: ${colors.gray[6]};
448+
display: flex;
449+
flex: 1;
450+
font-size: 16px;
451+
padding: 12px 16px;
452+
text-decoration: none;
453+
transition: background-color 0.15s ease-in-out;
454+
455+
&.active {
456+
color: ${theme.palette.text.primary};
457+
font-weight: 500;
458+
}
459+
460+
&:hover {
461+
background-color: ${theme.palette.action.hover};
462+
}
463+
464+
${theme.breakpoints.up("md")} {
465+
height: ${navHeight}px;
466+
padding: 0 24px;
467+
}
468+
`,
469+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,12 @@ const styles = {
4545
fontSize: 24,
4646
margin: 0,
4747
},
48-
description: {
48+
description: (theme) => ({
4949
marginTop: 16,
5050
fontFamily: "inherit",
5151
maxWidth: 420,
5252
lineHeight: "160%",
53-
},
53+
color: theme.palette.text.secondary,
54+
fontSize: 14,
55+
}),
5456
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)