Skip to content

Remove usages of red for non-destructive, reversible UI #1272

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

Open
sloria wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove usages of red for non-destructive, reversible UI #1272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion ui/src/components/alerts/details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export function AlertDetailsContent({
{/** HEADER */}
<Group justify="space-between">
<Text fz="h1">{fmtUpperCamelcase(alert.data.type)}</Text>
<ActionIcon size="lg" variant="filled" color="red" onClick={close}>
<ActionIcon size="lg" variant="subtle" color="dimmed" onClick={close}>
<ICONS.Clear size="1.3rem" />
</ActionIcon>
</Group>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/docker/container-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ export default function ContainerSelector({
{clearable && (
<ActionIcon
size="sm"
variant="filled"
color="red"
variant="subtle"
color="dimmed"
onClick={(e) => {
e.stopPropagation();
onSelect?.("");
Expand Down
6 changes: 3 additions & 3 deletions ui/src/components/docker/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const DOCKER_LINK_ICONS: {
: noContainers
? ["none", "host", "bridge"].includes(name)
? "None"
: "Critical"
: "Neutral"
: "Good";
return <ICONS.Network size={size} color={hexColorByIntention(intention)} />;
},
Expand All @@ -92,7 +92,7 @@ export const DOCKER_LINK_ICONS: {
const noContainers = !name
? false
: containers.every((container) => container.image_id !== name);
const intention = !name ? "Warning" : noContainers ? "Critical" : "Good";
const intention = !name ? "Warning" : noContainers ? "Neutral" : "Good";
return <ICONS.Image size={size} color={hexColorByIntention(intention)} />;
},
Volume: ({ serverId, name, size = "1rem" }) => {
Expand All @@ -101,7 +101,7 @@ export const DOCKER_LINK_ICONS: {
const noContainers = !name
? false
: containers.every((container) => !container.volumes?.includes(name));
const intention = !name ? "Warning" : noContainers ? "Critical" : "Good";
const intention = !name ? "Warning" : noContainers ? "Neutral" : "Good";
return <ICONS.Volume size={size} color={hexColorByIntention(intention)} />;
},
};
6 changes: 3 additions & 3 deletions ui/src/components/log-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,8 @@ export function LogSectionInner({
{terms.map((term, index) => (
<Button
key={term}
variant="filled"
color="red"
variant="outline"
color="dimmed"
rightSection={<ICONS.Remove size="1rem" />}
onClick={() => setTerms(terms.filter((_, i) => i !== index))}
>
Expand All @@ -157,7 +157,7 @@ export function LogSectionInner({
rightSection={
<ActionIcon
onClick={clearSearch}
color="red"
color="dimmed"
disabled={!terms.length}
>
<ICONS.Delete size="1rem" />
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/stack-service-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ export default function StackServiceSelector({
{clearable && (
<ActionIcon
size="sm"
variant="filled"
color="red"
variant="subtle"
color="dimmed"
onClick={(e) => {
e.stopPropagation();
onSelect?.("");
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/tags/filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function TagsFilter() {
<>
<Group gap="xs" visibleFrom="xs">
{tags.length > 0 && (
<ActionIcon color="red" onClick={clear_tags} opacity={0.7}>
<ActionIcon color="dimmed" onClick={clear_tags}>
<ICONS.Clear size="1rem" />{" "}
</ActionIcon>
)}
Expand Down Expand Up @@ -51,7 +51,7 @@ export default function TagsFilter() {
/>

{tags.length > 0 && (
<ActionIcon color="red" onClick={clear_tags} opacity={0.7}>
<ActionIcon color="dimmed" onClick={clear_tags}>
<ICONS.Clear size="1rem" />{" "}
</ActionIcon>
)}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/updates/details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export function UpdateDetailsContent({ id }: { id: string }) {
{fmtOperation(update.operation)}{" "}
{!versionIsNone(update.version) && fmtVersion(update.version)}
</Text>
<ActionIcon size="lg" variant="filled" color="red" onClick={close}>
<ActionIcon size="lg" variant="subtle" color="dimmed" onClick={close}>
<ICONS.Clear size="1.3rem" />
</ActionIcon>
</Group>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/alerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ export default function Alerts() {
{/* RESET */}
<ActionIcon
onClick={() => setParams({})}
variant="filled"
color="red"
variant="subtle"
color="dimmed"
disabled={!params.size}
>
<ICONS.Clear size="1rem" />
Expand Down
1 change: 0 additions & 1 deletion ui/src/pages/profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ export default function Profile() {
onCheckedChange={(external_skip_2fa) =>
updateExternalSkip2fa({ external_skip_2fa })
}
redDisabled={false}
/>
)}
</Group>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/swarm/config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function SwarmConfig() {
intent={intent}
state={
!inUse && (
<Badge variant="filled" color="red">
<Badge variant="filled" color="blue">
Unused
</Badge>
)
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/swarm/secret/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function SwarmSecret() {
intent={intent}
state={
!inUse && (
<Badge variant="filled" color="red">
<Badge variant="filled" color="blue">
Unused
</Badge>
)
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/updates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ export default function Updates() {
{/* RESET */}
<ActionIcon
onClick={() => setParams({})}
variant="filled"
color="red"
variant="subtle"
color="dimmed"
disabled={!params.size}
>
<ICONS.Clear size="1rem" />
Expand Down
4 changes: 2 additions & 2 deletions ui/src/resources/alerter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const AlerterComponents: RequiredResourceComponents<
const color =
enabled === undefined || noColor
? undefined
: hexColorByIntention(enabled ? "Good" : "Critical");
: hexColorByIntention(enabled ? "Good" : "Neutral");
return <ICONS.Alerter size={size} color={color} />;
},

Expand All @@ -71,7 +71,7 @@ export const AlerterComponents: RequiredResourceComponents<
type="Alerter"
id={id}
resource={alerter}
intent={alerter?.info.enabled ? "Good" : "Critical"}
intent={alerter?.info.enabled ? "Good" : "Neutral"}
icon={ICONS.Alerter}
name={alerter?.name}
state={alerter?.info.enabled ? "Enabled" : "Disabled"}
Expand Down
4 changes: 2 additions & 2 deletions ui/src/resources/selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ export default function ResourceSelector({
{clearable && (
<ActionIcon
size="sm"
variant="filled"
color="red"
variant="subtle"
color="dimmed"
onClick={(e) => {
e.stopPropagation();
onSelect?.("");
Expand Down
2 changes: 1 addition & 1 deletion ui/src/resources/server/docker/images.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function ServerImages({
name={row.original.name}
id={row.original.id}
extra={
!row.original.in_use && <Badge color="red">Unused</Badge>
!row.original.in_use && <Badge color="blue">Unused</Badge>
}
/>
),
Expand Down
2 changes: 1 addition & 1 deletion ui/src/resources/server/docker/networks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function ServerNetworks({
) ? (
<Badge>System</Badge>
) : (
!row.original.in_use && <Badge color="red">Unused</Badge>
!row.original.in_use && <Badge color="blue">Unused</Badge>
)
}
/>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/resources/server/docker/volumes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function ServerVolumes({
serverId={id}
name={row.original.name}
extra={
!row.original.in_use && <Badge color="red">Unused</Badge>
!row.original.in_use && <Badge color="blue">Unused</Badge>
}
/>
),
Expand Down
2 changes: 1 addition & 1 deletion ui/src/resources/swarm/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function SwarmConfig({
clearable={false}
/>
{!disabled && (
<ActionIcon variant="filled" color="red">
<ActionIcon variant="subtle" color="dimmed">
<ICONS.Remove
size="1rem"
onClick={() =>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/resources/swarm/docker/configs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function SwarmConfigs({
name={row.original.Name}
extra={
!row.original.InUse && (
<Badge variant="filled" color="red">
<Badge variant="filled" color="blue">
Unused
</Badge>
)
Expand Down
2 changes: 1 addition & 1 deletion ui/src/resources/swarm/docker/secrets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function SwarmSecrets({
name={row.original.Name}
extra={
!row.original.InUse && (
<Badge variant="filled" color="red">
<Badge variant="filled" color="blue">
Unused
</Badge>
)
Expand Down
4 changes: 1 addition & 3 deletions ui/src/ui/enable-switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Badge, Group, GroupProps, Switch, SwitchProps } from "@mantine/core";
export interface EnableSwitchProps extends SwitchProps {
checked?: boolean;
onCheckedChange?: (checked: boolean) => void;
redDisabled?: boolean;
labelProps?: GroupProps;
}

Expand All @@ -14,7 +13,6 @@ export default function EnableSwitch({
onChange,
onCheckedChange,
disabled,
redDisabled = true,
labelProps,
...props
}: EnableSwitchProps) {
Expand All @@ -27,7 +25,7 @@ export default function EnableSwitch({
<Group gap="sm" wrap="nowrap" {...labelProps}>
{label}
<Badge
color={checked ? color : redDisabled ? "red" : "gray"}
color={checked ? color : "gray"}
opacity={disabled ? 0.7 : 1}
style={{ cursor: disabled ? undefined : "pointer" }}
>
Expand Down
Loading