Skip to content

Commit 42d40da

Browse files
aslilacaslilac
committed
Merge branch 'no-sx' into colorful-rebased
2 parents f99fad0 + 761a4cf commit 42d40da

File tree

82 files changed

+1420
-1511
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+1420
-1511
lines changed

‎site/.eslintrc.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ rules:
142142
- name: "@mui/material/Typography"
143143
message:
144144
"You should use the native HTML elements as span, p, h1, h2, h3..."
145+
- name: "@mui/material/Box"
146+
message: "You should use a <div> instead"
145147
no-unused-vars: "off"
146148
"object-curly-spacing": "off"
147149
react-hooks/exhaustive-deps: warn

‎site/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
"@mui/icons-material": "5.14.0",
4141
"@mui/lab": "5.0.0-alpha.129",
4242
"@mui/material": "5.14.0",
43-
"@mui/styles": "5.14.0",
4443
"@mui/system": "5.14.0",
4544
"@mui/utils": "5.14.11",
4645
"@vitejs/plugin-react": "4.1.0",

‎site/pnpm-lock.yaml

Lines changed: 1 addition & 108 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/App.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,14 @@ export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
3838
);
3939
};
4040

41-
export const AppProviders = ({
42-
children,
43-
queryClient = defaultQueryClient,
44-
}: {
41+
interface AppProvidersProps {
4542
children: ReactNode;
4643
queryClient?: QueryClient;
44+
}
45+
46+
export const AppProviders: FC<AppProvidersProps> = ({
47+
children,
48+
queryClient = defaultQueryClient,
4749
}) => {
4850
return (
4951
<HelmetProvider>

‎site/src/components/ActiveUserChart/ActiveUserChart.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import Box from "@mui/material/Box";
2-
import { Theme } from "@mui/material/styles";
3-
import useTheme from "@mui/styles/useTheme";
41
import {
52
CategoryScale,
63
Chart as ChartJS,
@@ -22,7 +19,8 @@ import {
2219
HelpTooltipText,
2320
} from "components/HelpTooltip/HelpTooltip";
2421
import dayjs from "dayjs";
25-
import { FC } from "react";
22+
import { useTheme } from "@emotion/react";
23+
import { type FC } from "react";
2624
import { Line } from "react-chartjs-2";
2725
import annotationPlugin from "chartjs-plugin-annotation";
2826

@@ -42,7 +40,7 @@ ChartJS.register(
4240
const USER_LIMIT_DISPLAY_THRESHOLD = 60;
4341

4442
export interface ActiveUserChartProps {
45-
data: { date: string; amount: number }[];
43+
data: Array<{ date: string; amount: number }>;
4644
interval: "day" | "week";
4745
userLimit: number | undefined;
4846
}
@@ -52,7 +50,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
5250
interval,
5351
userLimit,
5452
}) => {
55-
const theme: Theme = useTheme();
53+
const theme = useTheme();
5654

5755
const labels = data.map((val) => dayjs(val.date).format("YYYY-MM-DD"));
5856
const chartData = data.map((val) => val.amount);
@@ -137,9 +135,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
137135
);
138136
};
139137

140-
export const ActiveUsersTitle = () => {
138+
export const ActiveUsersTitle: FC = () => {
141139
return (
142-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
140+
<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
143141
Active Users
144142
<HelpTooltip size="small">
145143
<HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
@@ -148,7 +146,7 @@ export const ActiveUsersTitle = () => {
148146
considered an active user. e.g. apps, web terminal, SSH
149147
</HelpTooltipText>
150148
</HelpTooltip>
151-
</Box>
149+
</div>
152150
);
153151
};
154152

‎site/src/components/Alert/Alert.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import { useState, FC, ReactNode } from "react";
1+
import {
2+
useState,
3+
type FC,
4+
type ReactNode,
5+
type PropsWithChildren,
6+
} from "react";
27
import Collapse from "@mui/material/Collapse";
38
// eslint-disable-next-line no-restricted-imports -- It is the base component
4-
import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert";
9+
import MuiAlert, {
10+
type AlertProps as MuiAlertProps,
11+
} from "@mui/material/Alert";
512
import Button from "@mui/material/Button";
6-
import Box from "@mui/material/Box";
713

814
export type AlertProps = MuiAlertProps & {
915
actions?: ReactNode;
@@ -32,7 +38,7 @@ export const Alert: FC<AlertProps> = ({
3238
<Collapse in>
3339
<MuiAlert
3440
{...alertProps}
35-
sx={{ textAlign: "left", ...alertProps.sx }}
41+
css={{ textAlign: "left" }}
3642
severity={severity}
3743
action={
3844
<>
@@ -62,15 +68,13 @@ export const Alert: FC<AlertProps> = ({
6268
);
6369
};
6470

65-
export const AlertDetail = ({ children }: { children: ReactNode }) => {
71+
export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
6672
return (
67-
<Box
68-
component="span"
69-
color={(theme) => theme.palette.text.secondary}
70-
fontSize={13}
73+
<span
74+
css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
7175
data-chromatic="ignore"
7276
>
7377
{children}
74-
</Box>
78+
</span>
7579
);
7680
};

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import MuiAvatar, {
55
} from "@mui/material/Avatar";
66
import { type FC, useId } from "react";
77
import { css, type Interpolation, type Theme } from "@emotion/react";
8-
import { Box } from "@mui/system";
98
import { visuallyHidden } from "@mui/utils";
109

1110
export type AvatarProps = MuiAvatarProps & {
@@ -80,6 +79,8 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
8079
const hookId = useId();
8180
const avatarId = `${hookId}-avatar`;
8281

82+
// We use a `visuallyHidden` element instead of setting `alt` to avoid
83+
// splatting the text out on the screen if the image fails to load.
8384
return (
8485
<>
8586
<img
@@ -88,9 +89,9 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
8889
css={{ maxWidth: "50%" }}
8990
aria-labelledby={avatarId}
9091
/>
91-
<Box id={avatarId} sx={visuallyHidden}>
92+
<div id={avatarId} css={{ ...visuallyHidden }}>
9293
{alt}
93-
</Box>
94+
</div>
9495
</>
9596
);
9697
};

0 commit comments

Comments
 (0)