Skip to content

Commit 93b30df

Browse files
aslilacaslilac
committed
oh no
1 parent a96bd6c commit 93b30df

File tree

29 files changed

+359
-287
lines changed

29 files changed

+359
-287
lines changed

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import Drawer from "@mui/material/Drawer";
22
import IconButton from "@mui/material/IconButton";
33
import Divider from "@mui/material/Divider";
44
import Skeleton from "@mui/material/Skeleton";
5-
import Box from "@mui/material/Box";
65
import Menu from "@mui/material/Menu";
76
import Button from "@mui/material/Button";
87
import MenuItem from "@mui/material/MenuItem";
@@ -332,19 +331,19 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
332331
}}
333332
>
334333
{selectedProxy ? (
335-
<Box display="flex" gap={1} alignItems="center">
336-
<Box width={16} height={16} lineHeight={0}>
334+
<div css={{ display: "flex", gap: 8, alignItems: "center" }}>
335+
<div css={{ width: 16, height: 16, lineHeight: 0 }}>
337336
<img
338337
src={selectedProxy.icon_url}
339338
alt=""
340339
css={{ objectFit: "contain", width: "100%", height: "100%" }}
341340
/>
342-
</Box>
341+
</div>
343342
<ProxyStatusLatency
344343
latency={latencies?.[selectedProxy.id]?.latencyMS}
345344
isLoading={proxyLatencyLoading(selectedProxy)}
346345
/>
347-
</Box>
346+
</div>
348347
) : (
349348
"Select Proxy"
350349
)}

‎site/src/components/EmptyState/EmptyState.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import Box from "@mui/material/Box";
21
import Typography from "@mui/material/Typography";
32
import type { FC, ReactNode } from "react";
43

54
export interface EmptyStateProps {
65
/** Text Message to display, placed inside Typography component */
76
message: string;
87
/** Longer optional description to display below the message */
9-
description?: string | React.ReactNode;
8+
description?: string | ReactNode;
109
cta?: ReactNode;
1110
className?: string;
1211
image?: ReactNode;
@@ -20,13 +19,15 @@ export interface EmptyStateProps {
2019
* EmptyState's props extend the [Material UI Box component](https://material-ui.com/components/box/)
2120
* that you can directly pass props through to to customize the shape and layout of it.
2221
*/
23-
export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
24-
props,
25-
) => {
26-
const { message, description, cta, image, ...boxProps } = props;
27-
22+
export const EmptyState: FC<EmptyStateProps> = ({
23+
message,
24+
description,
25+
cta,
26+
image,
27+
...attrs
28+
}) => {
2829
return (
29-
<Box
30+
<div
3031
css={{
3132
overflow: "hidden",
3233
display: "flex",
@@ -38,7 +39,7 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
3839
padding: "80px 40px",
3940
position: "relative",
4041
}}
41-
{...boxProps}
42+
{...attrs}
4243
>
4344
<Typography variant="h5" css={{ fontSize: 24 }}>
4445
{message}
@@ -59,6 +60,6 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
5960
)}
6061
{cta && <div css={{ marginTop: 32 }}>{cta}</div>}
6162
{image}
62-
</Box>
63+
</div>
6364
);
6465
};

‎site/src/components/Filter/filter.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -607,9 +607,8 @@ function SearchMenu<TOption extends { label: string; value: string }>({
607607
color: theme.palette.text.secondary,
608608
}}
609609
/>
610-
<Box
610+
<input
611611
tabIndex={-1}
612-
component="input"
613612
type="text"
614613
placeholder="Search..."
615614
autoFocus

‎site/src/components/HelpTooltip/HelpTooltip.tsx

Lines changed: 59 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,26 @@
11
import Link from "@mui/material/Link";
22
// This is used as base for the main HelpTooltip component
33
// eslint-disable-next-line no-restricted-imports -- Read above
4-
import Popover, { PopoverProps } from "@mui/material/Popover";
4+
import Popover, { type PopoverProps } from "@mui/material/Popover";
55
import HelpIcon from "@mui/icons-material/HelpOutline";
66
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
77
import {
88
createContext,
99
useContext,
1010
useRef,
1111
useState,
12-
FC,
13-
PropsWithChildren,
12+
type FC,
13+
type PropsWithChildren,
14+
type HTMLAttributes,
15+
type ReactNode,
1416
} from "react";
1517
import { Stack } from "components/Stack/Stack";
16-
import Box, { BoxProps } from "@mui/material/Box";
1718
import { type CSSObject, css as className } from "@emotion/css";
1819
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
1920

2021
type Icon = typeof HelpIcon;
2122

2223
type Size = "small" | "medium";
23-
export interface HelpTooltipProps {
24-
// Useful to test on storybook
25-
open?: boolean;
26-
size?: Size;
27-
icon?: Icon;
28-
iconClassName?: string;
29-
buttonClassName?: string;
30-
}
3124

3225
export const HelpTooltipContext = createContext<
3326
{ open: boolean; onClose: () => void } | undefined
@@ -45,9 +38,17 @@ const useHelpTooltip = () => {
4538
return helpTooltipContext;
4639
};
4740

48-
export const HelpPopover: FC<
49-
PopoverProps & { onOpen: () => void; onClose: () => void }
50-
> = ({ onOpen, onClose, children, ...props }) => {
41+
interface HelpPopoverProps extends PopoverProps {
42+
onOpen: () => void;
43+
onClose: () => void;
44+
}
45+
46+
export const HelpPopover: FC<HelpPopoverProps> = ({
47+
onOpen,
48+
onClose,
49+
children,
50+
...props
51+
}) => {
5152
const theme = useTheme();
5253

5354
return (
@@ -86,7 +87,17 @@ export const HelpPopover: FC<
8687
);
8788
};
8889

89-
export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
90+
export interface HelpTooltipProps {
91+
// Useful to test on storybook
92+
open?: boolean;
93+
size?: Size;
94+
icon?: Icon;
95+
iconClassName?: string;
96+
buttonClassName?: string;
97+
children?: ReactNode;
98+
}
99+
100+
export const HelpTooltip: FC<HelpTooltipProps> = ({
90101
children,
91102
open = false,
92103
size = "medium",
@@ -161,12 +172,26 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
161172
);
162173
};
163174

164-
export const HelpTooltipTitle: FC<PropsWithChildren> = ({ children }) => {
165-
return <h4 css={styles.title}>{children}</h4>;
175+
export const HelpTooltipTitle: FC<HTMLAttributes<HTMLHeadingElement>> = ({
176+
children,
177+
...attrs
178+
}) => {
179+
return (
180+
<h4 css={styles.title} {...attrs}>
181+
{children}
182+
</h4>
183+
);
166184
};
167185

168-
export const HelpTooltipText = (props: BoxProps) => {
169-
return <Box component="p" css={styles.text} {...props} />;
186+
export const HelpTooltipText: FC<HTMLAttributes<HTMLParagraphElement>> = ({
187+
children,
188+
...attrs
189+
}) => {
190+
return (
191+
<p css={styles.text} {...attrs}>
192+
{children}
193+
</p>
194+
);
170195
};
171196

172197
export const HelpTooltipLink: FC<PropsWithChildren<{ href: string }>> = ({
@@ -181,13 +206,19 @@ export const HelpTooltipLink: FC<PropsWithChildren<{ href: string }>> = ({
181206
);
182207
};
183208

184-
export const HelpTooltipAction: FC<
185-
PropsWithChildren<{
186-
icon: Icon;
187-
onClick: () => void;
188-
ariaLabel?: string;
189-
}>
190-
> = ({ children, icon: Icon, onClick, ariaLabel }) => {
209+
interface HelpTooltipActionProps {
210+
children?: ReactNode;
211+
icon: Icon;
212+
onClick: () => void;
213+
ariaLabel?: string;
214+
}
215+
216+
export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
217+
children,
218+
icon: Icon,
219+
onClick,
220+
ariaLabel,
221+
}) => {
191222
const tooltip = useHelpTooltip();
192223

193224
return (
@@ -206,9 +237,7 @@ export const HelpTooltipAction: FC<
206237
);
207238
};
208239

209-
export const HelpTooltipLinksGroup: FC<PropsWithChildren<unknown>> = ({
210-
children,
211-
}) => {
240+
export const HelpTooltipLinksGroup: FC<PropsWithChildren> = ({ children }) => {
212241
return (
213242
<Stack spacing={1} css={styles.linksGroup}>
214243
{children}

‎site/src/components/Loader/Loader.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
import Box, { BoxProps } from "@mui/material/Box";
21
import CircularProgress from "@mui/material/CircularProgress";
3-
import { FC } from "react";
2+
import { type FC, type HTMLAttributes } from "react";
43

5-
export const Loader: FC<{ size?: number } & BoxProps> = ({
6-
size = 26,
7-
...boxProps
8-
}) => {
4+
interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
5+
size?: number;
6+
}
7+
8+
export const Loader: FC<LoaderProps> = ({ size = 26, ...attrs }) => {
99
return (
10-
<Box
11-
p={4}
12-
width="100%"
13-
display="flex"
14-
alignItems="center"
15-
justifyContent="center"
10+
<div
11+
css={{
12+
padding: 4,
13+
width: "100%",
14+
display: "flex",
15+
alignItems: "center",
16+
justifyContent: "center",
17+
}}
1618
data-testid="loader"
17-
{...boxProps}
19+
{...attrs}
1820
>
1921
<CircularProgress size={size} />
20-
</Box>
22+
</div>
2123
);
2224
};

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

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
import Box from "@mui/material/Box";
21
import Typography from "@mui/material/Typography";
32
import { type FC, type ReactNode } from "react";
43
import { type Interpolation, type Theme } from "@emotion/react";
54
import { EnterpriseBadge } from "components/Badges/Badges";
65
import { Stack } from "components/Stack/Stack";
76

87
export interface PaywallProps {
8+
children?: ReactNode;
99
message: string;
10-
description?: string | React.ReactNode;
10+
description?: string | ReactNode;
1111
cta?: ReactNode;
1212
}
1313

14-
export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
15-
const { message, description, cta } = props;
16-
14+
export const Paywall: FC<PaywallProps> = ({ message, description, cta }) => {
1715
return (
18-
<Box css={styles.root}>
19-
<div css={styles.header}>
16+
<div css={styles.root}>
17+
<div css={{ marginBottom: 24 }}>
2018
<Stack direction="row" alignItems="center" justifyContent="center">
2119
<Typography variant="h5" css={styles.title}>
2220
{message}
@@ -35,7 +33,7 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
3533
)}
3634
</div>
3735
{cta}
38-
</Box>
36+
</div>
3937
);
4038
};
4139

@@ -52,9 +50,6 @@ const styles = {
5250
border: `1px solid ${theme.palette.divider}`,
5351
borderRadius: 8,
5452
}),
55-
header: {
56-
marginBottom: 24,
57-
},
5853
title: {
5954
fontWeight: 600,
6055
fontFamily: "inherit",
@@ -65,10 +60,4 @@ const styles = {
6560
maxWidth: 420,
6661
lineHeight: "160%",
6762
},
68-
enterpriseChip: (theme) => ({
69-
background: theme.palette.success.dark,
70-
color: theme.palette.success.contrastText,
71-
border: `1px solid ${theme.palette.success.light}`,
72-
fontSize: 13,
73-
}),
7463
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)