diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx index f06f02b8f7..54beefc061 100644 --- a/site/src/components/Filter/Filter.tsx +++ b/site/src/components/Filter/Filter.tsx @@ -1,8 +1,12 @@ -import { useTheme } from "@emotion/react"; -import Skeleton, { type SkeletonProps } from "@mui/material/Skeleton"; -import type { Breakpoint } from "@mui/system/createTheme"; import { ExternalLinkIcon, SlidersHorizontal } from "lucide-react"; -import { type FC, type ReactNode, useEffect, useRef, useState } from "react"; +import { + type ComponentProps, + type FC, + type ReactNode, + useEffect, + useRef, + useState, +} from "react"; import { getValidationErrorMessage, hasError, @@ -19,7 +23,9 @@ import { DropdownMenuTrigger, } from "#/components/DropdownMenu/DropdownMenu"; import { SearchField } from "#/components/SearchField/SearchField"; +import { Skeleton, type SkeletonProps } from "#/components/Skeleton/Skeleton"; import { useDebouncedFunction } from "#/hooks/debounce"; +import { cn } from "#/utils/cn"; type PresetFilter = { name: string; @@ -132,13 +138,9 @@ const stringifyFilter = (filterValue: FilterValues): string => { const BaseSkeleton: FC = ({ children, ...skeletonProps }) => { return ( ({ - backgroundColor: theme.palette.background.paper, - borderRadius: "6px", - })} + className="bg-surface-tertiary rounded-md w-52" > {children} @@ -149,7 +151,7 @@ export const MenuSkeleton: FC = () => { return ; }; -type FilterProps = { +type FilterProps = ComponentProps<"div"> & { filter: ReturnType; optionsSkeleton: ReactNode; isLoading: boolean; @@ -159,13 +161,6 @@ type FilterProps = { error?: unknown; options?: ReactNode; presets: PresetFilter[]; - - /** - * The CSS media query breakpoint that defines when the UI will try - * displaying all options on one row, regardless of the number of options - * present - */ - singleRowBreakpoint?: Breakpoint; }; export const Filter: FC = ({ @@ -178,9 +173,9 @@ export const Filter: FC = ({ learnMoreLabel2, learnMoreLink2, presets, - singleRowBreakpoint = "lg", + className, + ...props }) => { - const theme = useTheme(); // Storing local copy of the filter query so that it can be updated more // aggressively without re-renders rippling out to the rest of the app every // single time. Exists for performance reasons - not really a good way to @@ -205,16 +200,8 @@ export const Filter: FC = ({ return (
{isLoading ? ( <> diff --git a/site/src/components/PaginationWidget/PaginationAmount.tsx b/site/src/components/PaginationWidget/PaginationAmount.tsx index a8d53da276..04bdeaba10 100644 --- a/site/src/components/PaginationWidget/PaginationAmount.tsx +++ b/site/src/components/PaginationWidget/PaginationAmount.tsx @@ -1,6 +1,6 @@ -import { useTheme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; import type { FC } from "react"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; +import { cn } from "#/utils/cn"; type PaginationHeaderProps = { paginationUnitLabel: string; @@ -22,23 +22,15 @@ export const PaginationAmount: FC = ({ countIsCapped, className, }) => { - const theme = useTheme(); - return (
{totalRecords !== undefined ? ( <> diff --git a/site/src/components/Skeleton/Skeleton.tsx b/site/src/components/Skeleton/Skeleton.tsx index 729a45a835..811e28ea6f 100644 --- a/site/src/components/Skeleton/Skeleton.tsx +++ b/site/src/components/Skeleton/Skeleton.tsx @@ -18,7 +18,7 @@ const skeletonVariants = cva("bg-surface-tertiary animate-pulse", { }, }); -type SkeletonProps = React.ComponentProps<"div"> & +export type SkeletonProps = React.ComponentProps<"div"> & VariantProps & { /** Width in pixels (number) or any CSS value (string). */ width?: number | string; diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx index eb0e6bda20..49f66efe37 100644 --- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx +++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx @@ -1,4 +1,3 @@ -import Skeleton from "@mui/material/Skeleton"; import { type FC, useState } from "react"; import { Link } from "react-router"; import { toast } from "sonner"; @@ -16,6 +15,7 @@ import { DropdownMenuTrigger, } from "#/components/DropdownMenu/DropdownMenu"; import { Latency } from "#/components/Latency/Latency"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import type { ProxyContextValue } from "#/contexts/ProxyContext"; import { useAuthenticated } from "#/hooks/useAuthenticated"; import { sortProxiesByLatency } from "./proxyUtils"; diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx index f0ec7e65a3..e193c20b5e 100644 --- a/site/src/modules/resources/AgentDevcontainerCard.tsx +++ b/site/src/modules/resources/AgentDevcontainerCard.tsx @@ -1,4 +1,3 @@ -import Skeleton from "@mui/material/Skeleton"; import { Container, ExternalLinkIcon } from "lucide-react"; import type { FC } from "react"; import { useMutation, useQueryClient } from "react-query"; @@ -26,6 +25,7 @@ import { DialogHeader, DialogTitle, } from "#/components/Dialog/Dialog"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Spinner } from "#/components/Spinner/Spinner"; import { Tooltip, @@ -374,18 +374,8 @@ export const AgentDevcontainerCard: FC = ({ {showSubAgentAppsPlaceholders && (
- - + +
)}
diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx index c753915b06..7668a9d718 100644 --- a/site/src/modules/resources/AgentMetadata.tsx +++ b/site/src/modules/resources/AgentMetadata.tsx @@ -1,4 +1,3 @@ -import Skeleton from "@mui/material/Skeleton"; import dayjs from "dayjs"; import { type FC, @@ -15,6 +14,7 @@ import type { WorkspaceAgent, WorkspaceAgentMetadata, } from "#/api/typesGenerated"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Stack } from "#/components/Stack/Stack"; import { Tooltip, @@ -141,18 +141,18 @@ const AgentMetadataSkeleton: FC = () => { return (
- - + +
- - + +
- - + +
); diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx index ea78e5d6ad..da50afde07 100644 --- a/site/src/modules/resources/AgentRow.tsx +++ b/site/src/modules/resources/AgentRow.tsx @@ -1,5 +1,4 @@ import Collapse from "@mui/material/Collapse"; -import Skeleton from "@mui/material/Skeleton"; import { CopyIcon, EllipsisIcon, @@ -37,6 +36,7 @@ import { } from "#/components/DropdownMenu/DropdownMenu"; import { ExternalImage } from "#/components/ExternalImage/ExternalImage"; import type { Line } from "#/components/Logs/LogLine"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Tabs, TabsContent, @@ -426,18 +426,8 @@ export const AgentRow: FC = ({ {agent.status === "connecting" && !isExternalAgent && (
- - + +
)} diff --git a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx index 6332200d34..196e276846 100644 --- a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx +++ b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx @@ -1,13 +1,14 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; +import { useTheme } from "@emotion/react"; import { InfoIcon } from "lucide-react"; import type { WorkspaceBuild } from "#/api/typesGenerated"; import { BuildIcon } from "#/components/BuildIcon/BuildIcon"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Tooltip, TooltipContent, TooltipTrigger, } from "#/components/Tooltip/Tooltip"; +import { cn } from "#/utils/cn"; import { createDayString } from "#/utils/createDayString"; import { buildReasonLabels, @@ -21,26 +22,20 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => { const statusType = getDisplayWorkspaceBuildStatus(theme, build).type; return ( -
+
-
+
{build.transition} by{" "} @@ -63,12 +58,7 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => { )}
-
+
{createDayString(build.created_at)}
@@ -78,22 +68,12 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => { export const WorkspaceBuildDataSkeleton = () => { return ( -
+
-
- - +
+ +
); }; - -const styles = { - root: { - display: "flex", - flexDirection: "row", - alignItems: "center", - gap: 12, - lineHeight: "1.5", - }, -} satisfies Record>; diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx index a43e413390..be131ad45a 100644 --- a/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx +++ b/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx @@ -1,5 +1,3 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; import { saveAs } from "file-saver"; import JSZip from "jszip"; import { type FC, useEffect, useMemo, useRef, useState } from "react"; @@ -13,7 +11,9 @@ import { ConfirmDialog, type ConfirmDialogProps, } from "#/components/Dialogs/ConfirmDialog/ConfirmDialog"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Stack } from "#/components/Stack/Stack"; +import { cn } from "#/utils/cn"; type DownloadLogsDialogProps = Pick< ConfirmDialogProps, @@ -34,8 +34,6 @@ export const DownloadLogsDialog: FC = ({ onClose, download = saveAs, }) => { - const theme = useTheme(); - const buildLogsQuery = useQuery({ ...buildLogs(workspace), enabled: open, @@ -132,7 +130,7 @@ export const DownloadLogsDialog: FC = ({ downloadTimeoutIdRef.current = window.setTimeout(() => { setIsDownloading(false); - }, theme.transitions.duration.leavingScreen); + }, 200); } catch (error) { setIsDownloading(false); toast.error(`Error downloading workspace "${workspace.name}" logs.`, { @@ -155,7 +153,7 @@ export const DownloadLogsDialog: FC = ({ )} -
    +
      {allFiles.map((f) => ( ; const DownloadingItem: FC = ({ file, giveUpTimeMs }) => { - const theme = useTheme(); const [isWaiting, setIsWaiting] = useState(true); useEffect(() => { @@ -197,24 +194,34 @@ const DownloadingItem: FC = ({ file, giveUpTimeMs }) => { const { baseName, fileExtension } = extractFileNameInfo(file.name); return ( -
    • +
    • - {baseName} - .{fileExtension} + + {baseName} + + .{fileExtension} - + {file.blob ? ( humanBlobSize(file.blob.size) ) : isWaiting ? ( ) : ( -

      Not available

      +

      + Not available +

      )}
      • @@ -264,56 +271,3 @@ function extractFileNameInfo(filename: string): FileNameInfo { fileExtension: filename.slice(periodIndex + 1), }; } - -const styles = { - list: { - listStyle: "none", - padding: 0, - margin: 0, - display: "flex", - flexDirection: "column", - gap: 8, - }, - - listItem: { - width: "100%", - display: "flex", - justifyContent: "space-between", - alignItems: "center", - columnGap: "32px", - }, - - listItemPrimary: (theme) => ({ - fontWeight: 500, - color: theme.palette.text.primary, - display: "flex", - flexFlow: "row nowrap", - columnGap: 0, - overflow: "hidden", - }), - - listItemPrimaryBaseName: { - minWidth: 0, - flexShrink: 1, - overflow: "hidden", - textOverflow: "ellipsis", - }, - - listItemPrimaryFileExtension: { - flexShrink: 0, - }, - - listItemSecondary: { - flexShrink: 0, - fontSize: 14, - whiteSpace: "nowrap", - }, - - notAvailableText: (theme) => ({ - display: "flex", - flexFlow: "row nowrap", - alignItems: "center", - columnGap: "4px", - color: theme.palette.text.disabled, - }), -} satisfies Record>; diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx index 7d11aa911f..444e23e882 100644 --- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx +++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx @@ -1,6 +1,5 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { useTheme } from "@emotion/react"; import Link from "@mui/material/Link"; -import Skeleton from "@mui/material/Skeleton"; import { InfoIcon, RotateCcwIcon } from "lucide-react"; import { type FC, type ReactNode, useState } from "react"; import { useQuery } from "react-query"; @@ -18,6 +17,7 @@ import { HelpPopoverTitle, HelpPopoverTrigger, } from "#/components/HelpPopover/HelpPopover"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { linkToTemplate, useLinks } from "#/modules/navigation"; import { useWorkspaceUpdate, @@ -40,13 +40,22 @@ export const WorkspaceOutdatedTooltip: FC = ({ {children ? ( - + ({ + color: theme.roles.notice.outline, + })} + size={14} + /> {children} ) : ( - + ({ + color: theme.roles.notice.outline, + })} + /> Outdated info )} @@ -92,9 +101,11 @@ const WorkspaceOutdatedTooltipContent: FC = ({ This workspace version is outdated and a newer version is available. -
      +
      -
      New version
      +
      + New version +
      {activeVersion ? ( = ({
      -
      Message
      +
      Message
      {activeVersion ? ( activeVersion.message || "No message" @@ -135,23 +146,3 @@ const WorkspaceOutdatedTooltipContent: FC = ({ ); }; - -const styles = { - icon: (theme) => ({ - color: theme.roles.notice.outline, - }), - - container: { - display: "flex", - flexDirection: "column", - gap: 8, - paddingTop: 8, - paddingBottom: 8, - fontSize: 13, - }, - - bold: (theme) => ({ - color: theme.palette.text.primary, - fontWeight: 600, - }), -} satisfies Record>; diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx index 456b86f81c..4047555487 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx @@ -1,5 +1,4 @@ import Collapse from "@mui/material/Collapse"; -import Skeleton from "@mui/material/Skeleton"; import sortBy from "lodash/sortBy"; import uniqBy from "lodash/uniqBy"; import { type FC, useState } from "react"; @@ -10,6 +9,7 @@ import type { } from "#/api/typesGenerated"; import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown"; import { Button } from "#/components/Button/Button"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { calcDuration, formatTime, diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 8496baeed6..886235fb83 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -1,6 +1,5 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { useTheme } from "@emotion/react"; import MuiLink from "@mui/material/Link"; -import Skeleton from "@mui/material/Skeleton"; import { PlusIcon, RotateCwIcon } from "lucide-react"; import type { FC } from "react"; import Confetti from "react-confetti"; @@ -13,6 +12,7 @@ import { SettingsHeaderDescription, SettingsHeaderTitle, } from "#/components/SettingsHeader/SettingsHeader"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Spinner } from "#/components/Spinner/Spinner"; import { Stack } from "#/components/Stack/Stack"; import { @@ -112,9 +112,7 @@ const LicensesSettingsPageView: FC = ({
      - {isLoading && ( - - )} + {isLoading && } {!isLoading && licenses && licenses?.length > 0 && ( @@ -139,13 +137,13 @@ const LicensesSettingsPageView: FC = ({ )} {!isLoading && licenses?.length === 0 && ( -
      +
      - + You don't have any licenses! - + You're missing out on high availability, RBAC, quotas, and much more. Contact{" "} sales or{" "} @@ -195,27 +193,4 @@ const LicensesSettingsPageView: FC = ({ ); }; -const styles = { - title: { - fontSize: 16, - }, - - root: (theme) => ({ - minHeight: 240, - display: "flex", - alignItems: "center", - justifyContent: "center", - borderRadius: 8, - border: `1px solid ${theme.palette.divider}`, - padding: 48, - }), - - description: (theme) => ({ - color: theme.palette.text.secondary, - textAlign: "center", - maxWidth: 464, - marginTop: 8, - }), -} satisfies Record>; - export default LicensesSettingsPageView; diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index e4c57af952..f2ce1b63dd 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -1,5 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; import { ChevronRightIcon, PlusIcon } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router"; @@ -12,6 +10,7 @@ import { Button } from "#/components/Button/Button"; import { ChooseOne, Cond } from "#/components/Conditionals/ChooseOne"; import { EmptyState } from "#/components/EmptyState/EmptyState"; import { PaywallPremium } from "#/components/Paywall/PaywallPremium"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Table, TableBody, @@ -154,7 +153,7 @@ const GroupRow: FC = ({ group }) => { -
      +
      @@ -181,14 +180,3 @@ const TableLoader: FC = () => { ); }; - -const styles = { - arrowRight: (theme) => ({ - color: theme.palette.text.secondary, - width: 20, - height: 20, - }), - arrowCell: { - display: "flex", - }, -} satisfies Record>; diff --git a/site/src/pages/HealthPage/DismissWarningButton.tsx b/site/src/pages/HealthPage/DismissWarningButton.tsx index f67931868c..43f48ac869 100644 --- a/site/src/pages/HealthPage/DismissWarningButton.tsx +++ b/site/src/pages/HealthPage/DismissWarningButton.tsx @@ -1,10 +1,10 @@ -import Skeleton from "@mui/material/Skeleton"; import { BellIcon, BellOffIcon } from "lucide-react"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { toast } from "sonner"; import { healthSettings, updateHealthSettings } from "#/api/queries/debug"; import type { HealthSection } from "#/api/typesGenerated"; import { Button } from "#/components/Button/Button"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Spinner } from "#/components/Spinner/Spinner"; export const DismissWarningButton = (props: { healthcheck: HealthSection }) => { @@ -18,14 +18,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => { const dismissMutation = useMutation(updateHealthSettings(queryClient)); if (!healthSettingsQuery.data) { - return ( - - ); + return ; } const { dismissed_healthchecks } = healthSettingsQuery.data; diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx index 24209e2a3a..7f195bb91f 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx @@ -1,5 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; import { EllipsisVertical, PlusIcon } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router"; @@ -14,6 +12,7 @@ import { } from "#/components/DropdownMenu/DropdownMenu"; import { EmptyState } from "#/components/EmptyState/EmptyState"; import { PaywallPremium } from "#/components/Paywall/PaywallPremium"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { Stack } from "#/components/Stack/Stack"; import { Table, @@ -64,8 +63,8 @@ export const CustomRolesPageView: FC = ({ justifyContent="space-between" > -

      Custom Roles

      - +

      Custom Roles

      + Create custom roles to grant users a tailored set of granular permissions. @@ -88,8 +87,8 @@ export const CustomRolesPageView: FC = ({ onDeleteRole={onDeleteRole} /> -

      Built-In Roles

      - +

      Built-In Roles

      + Built-in roles have predefined permissions. You cannot edit or delete built-in roles. @@ -262,18 +261,3 @@ const TableLoader = () => { ); }; - -const styles = { - secondary: (theme) => ({ - color: theme.palette.text.secondary, - }), - tableHeader: () => ({ - marginBottom: 0, - fontSize: 18, - }), - tableDescription: (theme) => ({ - fontSize: 14, - color: theme.palette.text.secondary, - lineHeight: "160%", - }), -} satisfies Record>; diff --git a/site/src/pages/TasksPage/UsersCombobox.tsx b/site/src/pages/TasksPage/UsersCombobox.tsx index a27b80e78f..21976643b7 100644 --- a/site/src/pages/TasksPage/UsersCombobox.tsx +++ b/site/src/pages/TasksPage/UsersCombobox.tsx @@ -1,4 +1,3 @@ -import Skeleton from "@mui/material/Skeleton"; import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import { type FC, useState } from "react"; import { keepPreviousData, useQuery } from "react-query"; @@ -19,6 +18,7 @@ import { PopoverContent, PopoverTrigger, } from "#/components/Popover/Popover"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { useDebouncedValue } from "#/hooks/debounce"; import { useAuthenticated } from "#/hooks/useAuthenticated"; import { cn } from "#/utils/cn"; diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index 4f8b6fef37..fea556928d 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -1,5 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { @@ -29,12 +27,14 @@ import { import { EmptyState } from "#/components/EmptyState/EmptyState"; import { ExternalImage } from "#/components/ExternalImage/ExternalImage"; import { LastSeen } from "#/components/LastSeen/LastSeen"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { TableCell, TableRow } from "#/components/Table/Table"; import { TableLoaderSkeleton, TableRowSkeleton, } from "#/components/TableLoader/TableLoader"; import { AISeatCell } from "#/modules/users/AISeatCell"; +import { cn } from "#/utils/cn"; import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell"; import { UserGroupsCell } from "./UserGroupsCell"; @@ -187,10 +187,10 @@ export const UsersTableBody: FC = ({
      {user.status}
      {(user.status === "active" || user.status === "dormant") && ( @@ -283,27 +283,27 @@ const LoginType: FC = ({ authMethods, value }) => { if (value === "password") { displayName = "Password"; - icon = ; + icon = ; } else if (value === "none") { displayName = "None"; - icon = ; + icon = ; } else if (value === "github") { displayName = "GitHub"; - icon = ; + icon = ; } else if (value === "token") { displayName = "Token"; - icon = ; + icon = ; } else if (value === "oidc") { displayName = authMethods.oidc.signInText === "" ? "OIDC" : authMethods.oidc.signInText; icon = authMethods.oidc.iconUrl === "" ? ( - + ) : ( Open ID Connect icon ); } @@ -315,18 +315,3 @@ const LoginType: FC = ({ authMethods, value }) => {
      ); }; - -const styles = { - icon: { - width: 14, - height: 14, - }, - - status: { - textTransform: "capitalize", - }, - - suspended: (theme) => ({ - color: theme.palette.text.secondary, - }), -} satisfies Record>; diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx index 48ee715aaa..c5dea936bc 100644 --- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx +++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx @@ -1,5 +1,3 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import Skeleton from "@mui/material/Skeleton"; import type { FC } from "react"; import type { WorkspaceResource } from "#/api/typesGenerated"; import { @@ -7,6 +5,7 @@ import { SidebarCaption, SidebarItem, } from "#/components/FullPageLayout/Sidebar"; +import { Skeleton } from "#/components/Skeleton/Skeleton"; import { getResourceIconPath } from "#/utils/workspace"; type ResourcesSidebarProps = { @@ -22,21 +21,11 @@ export const ResourcesSidebar: FC = ({ isSelected, resources, }) => { - const theme = useTheme(); - return ( Resources {failed && ( -

      +

      Your workspace build failed, so the necessary resources couldn't be created.

      @@ -53,7 +42,7 @@ export const ResourcesSidebar: FC = ({ onClick={() => onChange(r)} isActive={isSelected(r)} key={r.id} - css={styles.root} + className="leading-normal flex items-center gap-3" >
      = ({
      {r.name} - - {r.type} - + {r.type}
      ))} @@ -76,7 +63,7 @@ export const ResourcesSidebar: FC = ({ const ResourceSidebarItemSkeleton: FC = () => { return ( -
      +
      @@ -85,12 +72,3 @@ const ResourceSidebarItemSkeleton: FC = () => {
      ); }; - -const styles = { - root: { - lineHeight: "1.5", - display: "flex", - alignItems: "center", - gap: 12, - }, -} satisfies Record>;