Skip to content

refactor: stabilize theme.roles #11969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 1, 2024
Merged

refactor: stabilize theme.roles #11969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0085ff7
boof
aslilac Jan 31, 2024
d2c3a2a
🧹
aslilac Jan 31, 2024
1bda773
⛙
aslilac Jan 31, 2024
73972ea
Merge branch 'main' into stabilize-theme-roles
aslilac Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions site/src/components/ActiveUserChart/ActiveUserChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
{
label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
data: chartData,
pointBackgroundColor: theme.experimental.roles.active.outline,
pointBorderColor: theme.experimental.roles.active.outline,
borderColor: theme.experimental.roles.active.outline,
pointBackgroundColor: theme.roles.active.outline,
pointBorderColor: theme.roles.active.outline,
borderColor: theme.roles.active.outline,
},
],
}}
Expand Down
42 changes: 21 additions & 21 deletions site/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,19 @@ const styles = {
},

enabledBadge: (theme) => ({
border: `1px solid ${theme.experimental.roles.success.outline}`,
backgroundColor: theme.experimental.roles.success.background,
color: theme.experimental.roles.success.text,
border: `1px solid ${theme.roles.success.outline}`,
backgroundColor: theme.roles.success.background,
color: theme.roles.success.text,
}),
errorBadge: (theme) => ({
border: `1px solid ${theme.experimental.roles.error.outline}`,
backgroundColor: theme.experimental.roles.error.background,
color: theme.experimental.roles.error.text,
border: `1px solid ${theme.roles.error.outline}`,
backgroundColor: theme.roles.error.background,
color: theme.roles.error.text,
}),
warnBadge: (theme) => ({
border: `1px solid ${theme.experimental.roles.warning.outline}`,
backgroundColor: theme.experimental.roles.warning.background,
color: theme.experimental.roles.warning.text,
border: `1px solid ${theme.roles.warning.outline}`,
backgroundColor: theme.roles.warning.background,
color: theme.roles.warning.text,
}),
} satisfies Record<string, Interpolation<Theme>>;

Expand Down Expand Up @@ -97,9 +97,9 @@ export const EnterpriseBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.experimental.roles.info.background,
border: `1px solid ${theme.experimental.roles.info.outline}`,
color: theme.experimental.roles.info.text,
backgroundColor: theme.roles.info.background,
border: `1px solid ${theme.roles.info.outline}`,
color: theme.roles.info.text,
}),
]}
>
Expand All @@ -114,9 +114,9 @@ export const PreviewBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.experimental.roles.preview.outline}`,
backgroundColor: theme.experimental.roles.preview.background,
color: theme.experimental.roles.preview.text,
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
}),
]}
>
Expand All @@ -131,9 +131,9 @@ export const AlphaBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.experimental.roles.preview.outline}`,
backgroundColor: theme.experimental.roles.preview.background,
color: theme.experimental.roles.preview.text,
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
}),
]}
>
Expand All @@ -148,9 +148,9 @@ export const DeprecatedBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.experimental.roles.danger.outline}`,
backgroundColor: theme.experimental.roles.danger.background,
color: theme.experimental.roles.danger.text,
border: `1px solid ${theme.roles.danger.outline}`,
backgroundColor: theme.roles.danger.background,
color: theme.roles.danger.text,
}),
]}
>
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,10 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({

const styles = {
callout: (theme) => ({
backgroundColor: theme.experimental.roles.danger.background,
border: `1px solid ${theme.experimental.roles.danger.outline}`,
backgroundColor: theme.roles.danger.background,
border: `1px solid ${theme.roles.danger.outline}`,
borderRadius: theme.shape.borderRadius,
color: theme.experimental.roles.danger.text,
color: theme.roles.danger.text,
padding: "8px 16px",
}),
} satisfies Record<string, Interpolation<Theme>>;
16 changes: 8 additions & 8 deletions site/src/components/Dialogs/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,24 +72,24 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
const styles = {
dangerButton: (theme) => ({
"&.MuiButton-contained": {
backgroundColor: theme.experimental.roles.danger.fill.solid,
borderColor: theme.experimental.roles.danger.fill.outline,
backgroundColor: theme.roles.danger.fill.solid,
borderColor: theme.roles.danger.fill.outline,

"&:not(.MuiLoadingButton-loading)": {
color: theme.experimental.roles.danger.fill.text,
color: theme.roles.danger.fill.text,
},

"&:hover:not(:disabled)": {
backgroundColor: theme.experimental.roles.danger.hover.fill.solid,
borderColor: theme.experimental.roles.danger.hover.fill.outline,
backgroundColor: theme.roles.danger.hover.fill.solid,
borderColor: theme.roles.danger.hover.fill.outline,
},

"&.Mui-disabled": {
backgroundColor: theme.experimental.roles.danger.disabled.background,
borderColor: theme.experimental.roles.danger.disabled.outline,
backgroundColor: theme.roles.danger.disabled.background,
borderColor: theme.roles.danger.disabled.outline,

"&:not(.MuiLoadingButton-loading)": {
color: theme.experimental.roles.danger.disabled.fill.text,
color: theme.roles.danger.disabled.fill.text,
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/HelpTooltip/HelpTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ const styles = {
display: "flex",
alignItems: "center",
...(theme.typography.body2 as CSSObject),
color: theme.experimental.roles.active.fill.outline,
color: theme.roles.active.fill.outline,
}),

linkIcon: {
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/InfoTooltip/InfoTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import type { ThemeRole } from "theme/experimental";
import type { ThemeRole } from "theme/roles";

interface InfoTooltipProps {
type?: ThemeRole;
Expand All @@ -22,7 +22,7 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
type = "info",
}) => {
const theme = useTheme();
const iconColor = theme.experimental.roles[type].outline;
const iconColor = theme.roles[type].outline;

return (
<HelpTooltip>
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/LastSeen/LastSeen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
// Since the agent reports on a 10m interval,
// the last_used_at can be inaccurate when recent.
message = "Now";
color = theme.experimental.roles.success.fill.solid;
color = theme.roles.success.fill.solid;
} else if (t.isAfter(now.subtract(3, "day"))) {
color = theme.experimental.l2.text;
} else if (t.isAfter(now.subtract(1, "month"))) {
color = theme.experimental.roles.warning.fill.solid;
color = theme.roles.warning.fill.solid;
} else if (t.isAfter(now.subtract(100, "year"))) {
color = theme.experimental.roles.error.fill.solid;
color = theme.roles.error.fill.solid;
} else {
message = "Never";
}
Expand Down
8 changes: 4 additions & 4 deletions site/src/components/PaginationWidget/PageButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,14 +74,14 @@ const BasePageButton: FC<BasePageButtonProps> = ({
<Button
css={
highlighted && {
borderColor: theme.experimental.roles.active.outline,
backgroundColor: theme.experimental.roles.active.background,
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,

// Override the hover state with active colors, but not hover
// colors because clicking won't do anything.
"&:hover": {
borderColor: theme.experimental.roles.active.outline,
backgroundColor: theme.experimental.roles.active.background,
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
},
}
}
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Paywall/Paywall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ const styles = {
maxWidth: 920,
margin: "auto",
padding: 24,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.experimental.roles.active.background})`,
border: `1px solid ${theme.experimental.roles.active.fill.outline}`,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
border: `1px solid ${theme.roles.active.fill.outline}`,
borderRadius: 8,
gap: 32,
}),
Expand Down Expand Up @@ -115,7 +115,7 @@ const styles = {
fontWeight: 500,
},
featureIcon: (theme) => ({
color: theme.experimental.roles.active.fill.outline,
color: theme.roles.active.fill.outline,
}),
feature: {
display: "flex",
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Pill/Pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import {
type ReactNode,
useMemo,
} from "react";
import type { ThemeRole } from "theme/experimental";
import type { ThemeRole } from "theme/roles";

export type PillProps = HTMLAttributes<HTMLDivElement> & {
icon?: ReactNode;
type?: ThemeRole;
};

const themeStyles = (type: ThemeRole) => (theme: Theme) => {
const palette = theme.experimental.roles[type];
const palette = theme.roles[type];
return {
backgroundColor: palette.background,
borderColor: palette.outline,
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
<Stack direction="row" spacing={1} alignItems="center">
<ErrorIcon
css={{ width: 16, height: 16 }}
htmlColor={theme.experimental.roles.error.outline}
htmlColor={theme.roles.error.outline}
/>
{children}
</Stack>
Expand Down
4 changes: 2 additions & 2 deletions site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
display: flex;
align-items: center;
padding: 12px;
background-color: ${theme.experimental.roles[type].background};
background-color: ${theme.roles[type].background};
`;

const textColor = theme.experimental.roles[type].text;
const textColor = theme.roles[type].text;

if (messages.length === 1) {
return (
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/resources/AgentMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ const styles = {
},

metadataValueSuccess: (theme) => ({
color: theme.experimental.roles.success.fill.outline,
color: theme.roles.success.fill.outline,
}),

metadataValueError: (theme) => ({
Expand Down
18 changes: 11 additions & 7 deletions site/src/modules/resources/XRayScanAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import { Interpolation, Theme } from "@emotion/react";
import Button from "@mui/material/Button";
import { JFrogXrayScan } from "api/typesGenerated";
import { type Interpolation, type Theme } from "@emotion/react";
import { type FC } from "react";
import type { JFrogXrayScan } from "api/typesGenerated";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { FC } from "react";

export const XRayScanAlert: FC<{ scan: JFrogXrayScan }> = ({ scan }) => {
interface XRayScanAlertProps {
scan: JFrogXrayScan;
}

export const XRayScanAlert: FC<XRayScanAlertProps> = ({ scan }) => {
return (
<div role="alert" css={styles.root}>
<ExternalImage
Expand Down Expand Up @@ -91,13 +95,13 @@ const styles = {
},
},
critical: (theme) => ({
color: theme.experimental.roles.error.fill.solid,
color: theme.roles.error.fill.solid,
}),
high: (theme) => ({
color: theme.experimental.roles.warning.fill.solid,
color: theme.roles.warning.fill.solid,
}),
medium: (theme) => ({
color: theme.experimental.roles.notice.fill.solid,
color: theme.roles.notice.fill.solid,
}),
link: {
marginLeft: "auto",
Expand Down
4 changes: 2 additions & 2 deletions site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@ const styles = {
}),

activeTag: (theme) => ({
borderColor: theme.experimental.roles.active.outline,
backgroundColor: theme.experimental.roles.active.background,
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
}),

description: (theme) => ({
Expand Down
18 changes: 9 additions & 9 deletions site/src/modules/workspaces/WorkspaceBuildLogs/Logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,29 +130,29 @@ const styles = {
padding: "0 32px",

"&.error": {
backgroundColor: theme.experimental.roles.error.background,
color: theme.experimental.roles.error.text,
backgroundColor: theme.roles.error.background,
color: theme.roles.error.text,

"& .dashed-line": {
backgroundColor: theme.experimental.roles.error.outline,
backgroundColor: theme.roles.error.outline,
},
},

"&.debug": {
backgroundColor: theme.experimental.roles.info.background,
color: theme.experimental.roles.info.text,
backgroundColor: theme.roles.info.background,
color: theme.roles.info.text,

"& .dashed-line": {
backgroundColor: theme.experimental.roles.info.outline,
backgroundColor: theme.roles.info.outline,
},
},

"&.warn": {
backgroundColor: theme.experimental.roles.warning.background,
color: theme.experimental.roles.warning.text,
backgroundColor: theme.roles.warning.background,
color: theme.roles.warning.text,

"& .dashed-line": {
backgroundColor: theme.experimental.roles.warning.outline,
backgroundColor: theme.roles.warning.outline,
},
},
}),
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({

const styles = {
icon: (theme) => ({
color: theme.experimental.roles.notice.outline,
color: theme.roles.notice.outline,
}),

container: {
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export const WorkspaceStatusText: FC<WorkspaceStatusBadgeProps> = ({
css={(theme) => ({
fontWeight: 600,
color: type
? theme.experimental.roles[type].fill.solid
? theme.roles[type].fill.solid
: theme.experimental.l1.text,
})}
>
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import TableCell from "@mui/material/TableCell";
import { type FC, useState } from "react";
import userAgentParser from "ua-parser-js";
import type { AuditLog } from "api/typesGenerated";
import { type ThemeRole } from "theme/experimental";
import { type ThemeRole } from "theme/roles";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const styles = {
}),

providerConnectedLabelIcon: (theme) => ({
color: theme.experimental.roles.success.fill.solid,
color: theme.roles.success.fill.solid,
fontSize: 16,
}),
} as Record<string, Interpolation<Theme>>;
Loading