diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index e2d09dc4b192f..195db1bd7d5e6 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -86,6 +86,9 @@ rules: - argsIgnorePattern: "^_" varsIgnorePattern: "^_" ignoreRestSiblings: true + "@typescript-eslint/no-empty-interface": + - error + - allowSingleExtends: true "brace-style": "off" "curly": ["error", "all"] "eslint-comments/require-description": "error" @@ -113,19 +116,15 @@ rules: no-restricted-imports: - error - paths: - - name: "@material-ui/core" - message: - "Use path imports to avoid pulling in unused modules. See: - https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@material-ui/icons" + - name: "@mui/material" message: "Use path imports to avoid pulling in unused modules. See: https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@material-ui/styles" + - name: "@mui/icons-material" message: "Use path imports to avoid pulling in unused modules. See: https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@material-ui/core/Avatar" + - name: "@mui/material/Avatar" message: "You should use the Avatar component provided on components/Avatar/Avatar" diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index 648d69e3acabd..62c80dcb50ad5 100644 --- a/site/.storybook/preview.jsx +++ b/site/.storybook/preview.jsx @@ -1,5 +1,5 @@ -import CssBaseline from "@material-ui/core/CssBaseline" -import ThemeProvider from "@material-ui/styles/ThemeProvider" +import CssBaseline from "@mui/material/CssBaseline" +import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles" import { createMemoryHistory } from "history" import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom" import { dark } from "../src/theme" @@ -10,10 +10,12 @@ const history = createMemoryHistory() export const decorators = [ (Story) => ( - - - - + + + + + + ), (Story) => { return ( diff --git a/site/mui.d.ts b/site/mui.d.ts new file mode 100644 index 0000000000000..c8a44d589102d --- /dev/null +++ b/site/mui.d.ts @@ -0,0 +1,25 @@ +import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles" + +declare module "@mui/styles/defaultTheme" { + interface DefaultTheme extends Theme {} +} + +declare module "@mui/material/styles" { + interface TypeBackground { + paperLight: string + } + + interface Palette { + neutral: PaletteColor + } + + interface PaletteOptions { + neutral?: PaletteColorOptions + } +} + +declare module "@mui/material/Button" { + interface ButtonPropsColorOverrides { + neutral: true + } +} diff --git a/site/package.json b/site/package.json index c956d8faca0ba..ee9c45ff83f34 100644 --- a/site/package.json +++ b/site/package.json @@ -30,12 +30,15 @@ "dependencies": { "@emoji-mart/data": "1.0.5", "@emoji-mart/react": "1.0.1", + "@emotion/react": "^11.10.8", + "@emotion/styled": "^11.10.8", "@fontsource/ibm-plex-mono": "4.5.10", "@fontsource/inter": "4.5.11", - "@material-ui/core": "4.12.1", - "@material-ui/icons": "4.5.1", - "@material-ui/lab": "4.0.0-alpha.42", "@monaco-editor/react": "4.5.0", + "@mui/icons-material": "^5.11.16", + "@mui/lab": "^5.0.0-alpha.129", + "@mui/material": "^5.12.3", + "@mui/styles": "^5.12.3", "@tanstack/react-query": "4.22.4", "@testing-library/react-hooks": "8.0.1", "@types/color-convert": "2.0.0", @@ -72,7 +75,7 @@ "react-dom": "18.2.0", "react-headless-tabs": "6.0.3", "react-helmet-async": "1.3.0", - "react-i18next": "12.1.1", + "react-i18next": "12.2.2", "react-markdown": "8.0.3", "react-router-dom": "6.4.1", "react-syntax-highlighter": "15.5.0", diff --git a/site/src/app.tsx b/site/src/app.tsx index 21f2690644376..af58e5641b2b0 100644 --- a/site/src/app.tsx +++ b/site/src/app.tsx @@ -1,5 +1,4 @@ -import CssBaseline from "@material-ui/core/CssBaseline" -import ThemeProvider from "@material-ui/styles/ThemeProvider" +import CssBaseline from "@mui/material/CssBaseline" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { AuthProvider } from "components/AuthProvider/AuthProvider" import { FC, PropsWithChildren } from "react" @@ -9,6 +8,7 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary" import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar" import { dark } from "./theme" import "./theme/globalFonts" +import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles" const queryClient = new QueryClient({ defaultOptions: { @@ -24,17 +24,19 @@ const queryClient = new QueryClient({ export const AppProviders: FC = ({ children }) => { return ( - - - - - - {children} - - - - - + + + + + + + {children} + + + + + + ) } diff --git a/site/src/components/AlertBanner/AlertBanner.stories.tsx b/site/src/components/AlertBanner/AlertBanner.stories.tsx index 967e331b31167..ccfa093e93826 100644 --- a/site/src/components/AlertBanner/AlertBanner.stories.tsx +++ b/site/src/components/AlertBanner/AlertBanner.stories.tsx @@ -1,9 +1,9 @@ import { Story } from "@storybook/react" import { AlertBanner } from "./AlertBanner" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" import { mockApiError } from "testHelpers/entities" import { AlertBannerProps } from "./alertTypes" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" export default { title: "components/AlertBanner", diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx index 937d0d5b6a5d1..2311793974a14 100644 --- a/site/src/components/AlertBanner/AlertBanner.tsx +++ b/site/src/components/AlertBanner/AlertBanner.tsx @@ -1,7 +1,7 @@ import { useState, FC, Children } from "react" -import Collapse from "@material-ui/core/Collapse" +import Collapse from "@mui/material/Collapse" import { Stack } from "components/Stack/Stack" -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { colors } from "theme/colors" import { useTranslation } from "react-i18next" import { getErrorDetail, getErrorMessage } from "api/errors" @@ -9,6 +9,7 @@ import { Expander } from "components/Expander/Expander" import { Severity, AlertBannerProps } from "./alertTypes" import { severityConstants } from "./severityConstants" import { AlertBannerCtas } from "./AlertBannerCtas" +import { Theme } from "@mui/material/styles" /** * @param children: the children to be displayed in the alert @@ -96,6 +97,7 @@ interface StyleProps { const useStyles = makeStyles((theme) => ({ alertContainer: (props) => ({ + ...theme.typography.body2, borderColor: severityConstants[props.severity].color, border: `1px solid ${colors.orange[7]}`, borderRadius: theme.shape.borderRadius, @@ -104,13 +106,13 @@ const useStyles = makeStyles((theme) => ({ textAlign: "left", "& > span": { - paddingTop: `${theme.spacing(0.25)}px`, + paddingTop: theme.spacing(0.25), }, // targeting the alert icon rather than the expander icon "& svg:nth-child(2)": { - marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit", - marginRight: `${theme.spacing(1)}px`, + marginTop: props.hasDetail ? theme.spacing(1) : "inherit", + marginRight: theme.spacing(1), }, }), diff --git a/site/src/components/AlertBanner/AlertBannerCtas.tsx b/site/src/components/AlertBanner/AlertBannerCtas.tsx index e430f5ae4fcd4..0758ec5d2e9da 100644 --- a/site/src/components/AlertBanner/AlertBannerCtas.tsx +++ b/site/src/components/AlertBanner/AlertBannerCtas.tsx @@ -1,8 +1,8 @@ import { FC } from "react" import { AlertBannerProps } from "./alertTypes" import { Stack } from "components/Stack/Stack" -import Button from "@material-ui/core/Button" -import RefreshIcon from "@material-ui/icons/Refresh" +import Button from "@mui/material/Button" +import RefreshIcon from "@mui/icons-material/Refresh" import { useTranslation } from "react-i18next" type AlertBannerCtasProps = Pick< @@ -29,12 +29,7 @@ export const AlertBannerCtas: FC = ({ {/* retry CTA */} {retry && (
-
@@ -42,7 +37,7 @@ export const AlertBannerCtas: FC = ({ {/* close CTA */} {dismissible && ( - )} diff --git a/site/src/components/AlertBanner/alertTypes.ts b/site/src/components/AlertBanner/alertTypes.ts index f4004830913fb..004b2d36dfa44 100644 --- a/site/src/components/AlertBanner/alertTypes.ts +++ b/site/src/components/AlertBanner/alertTypes.ts @@ -5,7 +5,7 @@ export type Severity = "warning" | "error" | "info" export interface AlertBannerProps { severity: Severity - text?: string + text?: JSX.Element | string error?: ApiError | Error | unknown actions?: ReactElement[] dismissible?: boolean diff --git a/site/src/components/AlertBanner/severityConstants.tsx b/site/src/components/AlertBanner/severityConstants.tsx index bb8dfc21e04aa..7924c1a491b82 100644 --- a/site/src/components/AlertBanner/severityConstants.tsx +++ b/site/src/components/AlertBanner/severityConstants.tsx @@ -1,6 +1,6 @@ -import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined" -import ErrorOutlineOutlinedIcon from "@material-ui/icons/ErrorOutlineOutlined" -import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined" +import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined" +import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined" +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined" import { colors } from "theme/colors" import { Severity } from "./alertTypes" import { ReactElement } from "react" diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx index 5b2b582634dfd..5e3dee464298d 100644 --- a/site/src/components/AppLink/AppLink.tsx +++ b/site/src/components/AppLink/AppLink.tsx @@ -1,8 +1,8 @@ -import CircularProgress from "@material-ui/core/CircularProgress" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" -import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline" +import CircularProgress from "@mui/material/CircularProgress" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/styles" +import Tooltip from "@mui/material/Tooltip" +import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline" import { PrimaryAgentButton } from "components/Resources/AgentButton" import { FC } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx index c218e8892d2a3..748f67130aa3d 100644 --- a/site/src/components/AppLink/AppPreviewLink.tsx +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { Stack } from "components/Stack/Stack" import { FC } from "react" import * as TypesGen from "api/typesGenerated" diff --git a/site/src/components/AppLink/BaseIcon.tsx b/site/src/components/AppLink/BaseIcon.tsx index f0ab07658574f..775b0ec920844 100644 --- a/site/src/components/AppLink/BaseIcon.tsx +++ b/site/src/components/AppLink/BaseIcon.tsx @@ -1,6 +1,6 @@ import { WorkspaceApp } from "api/typesGenerated" import { FC } from "react" -import ComputerIcon from "@material-ui/icons/Computer" +import ComputerIcon from "@mui/icons-material/Computer" export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => { return app.icon ? ( diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx index 635d03bc8d7de..9e3f86aa44b86 100644 --- a/site/src/components/AppLink/ShareIcon.tsx +++ b/site/src/components/AppLink/ShareIcon.tsx @@ -1,8 +1,8 @@ -import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined" -import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined" -import LaunchOutlinedIcon from "@material-ui/icons/LaunchOutlined" +import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined" +import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined" +import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined" import * as TypesGen from "../../api/typesGenerated" -import Tooltip from "@material-ui/core/Tooltip" +import Tooltip from "@mui/material/Tooltip" import { useTranslation } from "react-i18next" export interface ShareIconProps { diff --git a/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx index 4e20ee9541be5..7680a98d60163 100644 --- a/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx +++ b/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx @@ -1,7 +1,7 @@ import { FC } from "react" import { AuditLog } from "api/typesGenerated" import { Link as RouterLink } from "react-router-dom" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { Trans, useTranslation } from "react-i18next" import { BuildAuditDescription } from "./BuildAuditDescription" diff --git a/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx index 0bce7f981ca71..41c0cfc7ef7bb 100644 --- a/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx +++ b/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx @@ -2,7 +2,7 @@ import { Trans, useTranslation } from "react-i18next" import { AuditLog } from "api/typesGenerated" import { FC } from "react" import { Link as RouterLink } from "react-router-dom" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({ auditLog, diff --git a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx index bcb6dd7920793..4ebeffcaf9bf6 100644 --- a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx +++ b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { AuditLog } from "api/typesGenerated" import { colors } from "theme/colors" import { MONOSPACE_FONT_FAMILY } from "theme/constants" diff --git a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx index 4e75cb7a747ef..136c280b85bb7 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx @@ -1,9 +1,9 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { ComponentMeta, Story } from "@storybook/react" import { MockAuditLog, diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx index c052d5de43fc6..322f6fc2a2f41 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.tsx @@ -1,6 +1,6 @@ -import Collapse from "@material-ui/core/Collapse" -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" +import Collapse from "@mui/material/Collapse" +import { makeStyles } from "@mui/styles" +import TableCell from "@mui/material/TableCell" import { AuditLog } from "api/typesGenerated" import { CloseDropdown, @@ -11,11 +11,11 @@ import { Stack } from "components/Stack/Stack" import { TimelineEntry } from "components/Timeline/TimelineEntry" import { UserAvatar } from "components/UserAvatar/UserAvatar" import { useState } from "react" -import { PaletteIndex } from "theme/palettes" import userAgentParser from "ua-parser-js" import { AuditLogDiff, determineGroupDiff } from "./AuditLogDiff" import { useTranslation } from "react-i18next" import { AuditLogDescription } from "./AuditLogDescription" +import { PaletteIndex } from "theme/theme" const httpStatusColor = (httpStatus: number): PaletteIndex => { // redirects are successful diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index aedeb8d1a27ff..c7b2fc1513230 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -1,6 +1,6 @@ import { Story } from "@storybook/react" import { Avatar, AvatarIcon, AvatarProps } from "./Avatar" -import PauseIcon from "@material-ui/icons/PauseOutlined" +import PauseIcon from "@mui/icons-material/PauseOutlined" export default { title: "components/Avatar", diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 02e6964d39359..20eb1f1ab2203 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,9 +1,7 @@ // This is the only place MuiAvatar can be used // eslint-disable-next-line no-restricted-imports -- Read above -import MuiAvatar, { - AvatarProps as MuiAvatarProps, -} from "@material-ui/core/Avatar" -import { makeStyles } from "@material-ui/core/styles" +import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar" +import { makeStyles } from "@mui/styles" import { FC } from "react" import { combineClasses } from "utils/combineClasses" import { firstLetter } from "./firstLetter" diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 324a1d828060d..135dba4de6c43 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -1,7 +1,7 @@ import { Avatar } from "components/Avatar/Avatar" import { FC, PropsWithChildren } from "react" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" export interface AvatarDataProps { title: string | JSX.Element @@ -43,6 +43,7 @@ const useStyles = makeStyles((theme) => ({ root: { minHeight: theme.spacing(5), // Make it predictable for the skeleton width: "100%", + lineHeight: "150%", }, info: { @@ -57,8 +58,7 @@ const useStyles = makeStyles((theme) => ({ subtitle: { fontSize: 12, color: theme.palette.text.secondary, - lineHeight: "140%", - marginTop: 2, + lineHeight: "150%", maxWidth: 540, }, })) diff --git a/site/src/components/AvatarData/AvatarDataSkeleton.tsx b/site/src/components/AvatarData/AvatarDataSkeleton.tsx index d9994aa68e983..a519dd8ca49b4 100644 --- a/site/src/components/AvatarData/AvatarDataSkeleton.tsx +++ b/site/src/components/AvatarData/AvatarDataSkeleton.tsx @@ -1,11 +1,11 @@ import { FC } from "react" import { Stack } from "components/Stack/Stack" -import { Skeleton } from "@material-ui/lab" +import Skeleton from "@mui/material/Skeleton" export const AvatarDataSkeleton: FC = () => { return ( - + diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx deleted file mode 100644 index 38e803979b4f1..0000000000000 --- a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Story } from "@storybook/react" -import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow" -import { BuildingIcon } from "../Icons/BuildingIcon" -import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon" -import { BorderedMenu, BorderedMenuProps } from "./BorderedMenu" - -export default { - title: "components/BorderedMenu", - component: BorderedMenu, -} - -const Template: Story = (args: BorderedMenuProps) => ( - - - - -) - -export const UserVariant = Template.bind({}) -UserVariant.args = { - variant: "user-dropdown", - open: true, -} diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx index 226115ab4bb63..9190845107fbd 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.tsx @@ -1,5 +1,5 @@ -import Popover, { PopoverProps } from "@material-ui/core/Popover" -import { makeStyles } from "@material-ui/core/styles" +import Popover, { PopoverProps } from "@mui/material/Popover" +import { makeStyles } from "@mui/styles" import { FC, PropsWithChildren } from "react" type BorderedMenuVariant = "user-dropdown" diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 2d71ece661449..fa67df6cf999e 100644 --- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -1,7 +1,6 @@ -import ListItem from "@material-ui/core/ListItem" -import { makeStyles } from "@material-ui/core/styles" -import SvgIcon from "@material-ui/core/SvgIcon" -import CheckIcon from "@material-ui/icons/Check" +import ListItem from "@mui/material/ListItem" +import { makeStyles } from "@mui/styles" +import CheckIcon from "@mui/icons-material/Check" import { FC } from "react" import { NavLink } from "react-router-dom" import { ellipsizeText } from "../../utils/ellipsizeText" @@ -14,8 +13,6 @@ interface BorderedMenuRowProps { active?: boolean /** Optional description that appears beneath the title */ description?: string - /** An SvgIcon that will be rendered to the left of the title */ - Icon: typeof SvgIcon /** URL path */ path: string /** Required title of this row */ @@ -28,7 +25,7 @@ interface BorderedMenuRowProps { export const BorderedMenuRow: FC< React.PropsWithChildren -> = ({ active, description, Icon, path, title, variant, onClick }) => { +> = ({ active, description, path, title, variant, onClick }) => { const styles = useStyles() return ( @@ -41,7 +38,6 @@ export const BorderedMenuRow: FC< >
- {title} {active && }
@@ -66,7 +62,7 @@ const iconSize = 20 const useStyles = makeStyles((theme) => ({ root: { cursor: "pointer", - padding: `0 ${theme.spacing(1)}px`, + padding: `0 ${theme.spacing(1)}`, "&:hover": { backgroundColor: "unset", @@ -86,7 +82,7 @@ const useStyles = makeStyles((theme) => ({ }, }, rootGutters: { - padding: `0 ${theme.spacing(1.5)}px`, + padding: `0 ${theme.spacing(1.5)}`, }, content: { borderRadius: theme.shape.borderRadius, diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx index dd5d0743131ca..e095bda76a32e 100644 --- a/site/src/components/BuildsTable/BuildAvatar.tsx +++ b/site/src/components/BuildsTable/BuildAvatar.tsx @@ -1,13 +1,14 @@ -import Badge from "@material-ui/core/Badge" -import { Theme, useTheme, withStyles } from "@material-ui/core/styles" +import Badge from "@mui/material/Badge" +import { useTheme, withStyles } from "@mui/styles" import { FC } from "react" -import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined" -import PauseOutlined from "@material-ui/icons/PauseOutlined" -import DeleteOutlined from "@material-ui/icons/DeleteOutlined" +import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined" +import PauseOutlined from "@mui/icons-material/PauseOutlined" +import DeleteOutlined from "@mui/icons-material/DeleteOutlined" import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated" import { getDisplayWorkspaceBuildStatus } from "utils/workspace" -import { PaletteIndex } from "theme/palettes" import { Avatar, AvatarProps } from "components/Avatar/Avatar" +import { PaletteIndex } from "theme/theme" +import { Theme } from "@mui/material/styles" interface StylesBadgeProps { type: PaletteIndex diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index ecc6b71530c6a..8cf0a1122c8ce 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" +import { makeStyles } from "@mui/styles" +import TableCell from "@mui/material/TableCell" import { WorkspaceBuild } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { TimelineEntry } from "components/Timeline/TimelineEntry" diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 9ccd57d4ea675..2ea2dca2dda6a 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -1,9 +1,9 @@ -import Box from "@material-ui/core/Box" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableRow from "@material-ui/core/TableRow" +import Box from "@mui/material/Box" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableRow from "@mui/material/TableRow" import { Timeline } from "components/Timeline/Timeline" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx index b078aa8f44290..e7af0b9d3226b 100644 --- a/site/src/components/CodeBlock/CodeBlock.tsx +++ b/site/src/components/CodeBlock/CodeBlock.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { FC, Fragment, ReactElement } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index 2a730181a1f76..5c8c17e11e6c5 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -1,8 +1,9 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" import { CopyButton } from "../CopyButton/CopyButton" +import { Theme } from "@mui/material/styles" export interface CodeExampleProps { code: string @@ -30,7 +31,7 @@ export const CodeExample: FC> = ({
) @@ -51,26 +52,14 @@ const useStyles = makeStyles((theme) => ({ fontFamily: MONOSPACE_FONT_FAMILY, fontSize: 14, borderRadius: theme.shape.borderRadius, - padding: props.inline ? "0px" : theme.spacing(0.5), + padding: theme.spacing(1), + lineHeight: "150%", }), - code: (props) => ({ - padding: ` - ${props.inline ? 0 : theme.spacing(0.5)}px - ${theme.spacing(0.75)}px - ${props.inline ? 0 : theme.spacing(0.5)}px - ${props.inline ? theme.spacing(1) : theme.spacing(2)}px - `, + code: { + padding: theme.spacing(0, 1), width: "100%", display: "flex", alignItems: "center", wordBreak: "break-all", - }), - button: (props) => ({ - border: 0, - minWidth: props.inline ? 30 : 42, - minHeight: props.inline ? 30 : 42, - borderRadius: theme.shape.borderRadius, - padding: props.inline ? theme.spacing(0.4) : undefined, - background: "transparent", - }), + }, })) diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index 82c9dd0890705..e7aa3228e545e 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -1,7 +1,7 @@ -import IconButton from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" -import Check from "@material-ui/icons/Check" +import IconButton from "@mui/material/Button" +import { makeStyles } from "@mui/styles" +import Tooltip from "@mui/material/Tooltip" +import Check from "@mui/icons-material/Check" import { useClipboard } from "hooks/useClipboard" import { combineClasses } from "../../utils/combineClasses" import { FileCopyIcon } from "../Icons/FileCopyIcon" @@ -42,6 +42,7 @@ export const CopyButton: React.FC> = ({ onClick={copyToClipboard} size="small" aria-label={Language.ariaLabel} + variant="text" > {isCopied ? ( diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index 79959dc015f4a..8f3b279d1ff29 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" +import { makeStyles } from "@mui/styles" +import Tooltip from "@mui/material/Tooltip" import { useClickable } from "hooks/useClickable" import { useClipboard } from "hooks/useClipboard" import { FC, HTMLProps } from "react" diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index 3d00304c1efdd..f675f87de07f5 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { FormikContextType, useFormik } from "formik" import { FC } from "react" import * as Yup from "yup" @@ -62,7 +62,7 @@ export const CreateUserForm: FC< return (
- + diff --git a/site/src/components/DAUChart/DAUChart.tsx b/site/src/components/DAUChart/DAUChart.tsx index cf81090cd4e91..1ccfa00114b4e 100644 --- a/site/src/components/DAUChart/DAUChart.tsx +++ b/site/src/components/DAUChart/DAUChart.tsx @@ -1,5 +1,5 @@ -import { Theme } from "@material-ui/core/styles" -import useTheme from "@material-ui/styles/useTheme" +import { Theme } from "@mui/material/styles" +import useTheme from "@mui/styles/useTheme" import * as TypesGen from "api/typesGenerated" import { CategoryScale, diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx index d27d24356f76e..3835ef5935e62 100644 --- a/site/src/components/Dashboard/DashboardLayout.tsx +++ b/site/src/components/Dashboard/DashboardLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { useMachine } from "@xstate/react" import { UpdateCheckResponse } from "api/typesGenerated" import { DeploymentBanner } from "components/DeploymentBanner/DeploymentBanner" diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx index a99d5a34ef42d..8a3173f1f45b9 100644 --- a/site/src/components/DeploySettingsLayout/Badges.tsx +++ b/site/src/components/DeploySettingsLayout/Badges.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { Stack } from "components/Stack/Stack" import { PropsWithChildren, FC } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx index 3b04e4fce2575..d0c15de104390 100644 --- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx +++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { Margins } from "components/Margins/Margins" import { Stack } from "components/Stack/Stack" import { Sidebar } from "./Sidebar" diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx index d70d759f1a857..1c0209979ca42 100644 --- a/site/src/components/DeploySettingsLayout/Fieldset.tsx +++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx @@ -1,21 +1,31 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/styles" import { FC, ReactNode, FormEventHandler } from "react" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" export const Fieldset: FC<{ children: ReactNode title: string | JSX.Element + subtitle?: string | JSX.Element validation?: string | JSX.Element | false button?: JSX.Element | false onSubmit: FormEventHandler isSubmitting?: boolean -}> = ({ title, children, validation, button, onSubmit, isSubmitting }) => { +}> = ({ + title, + subtitle, + children, + validation, + button, + onSubmit, + isSubmitting, +}) => { const styles = useStyles() return (
{title}
+ {subtitle &&
{subtitle}
}
{children}