diff --git a/packages/website/src/components/Button/index.module.css b/packages/website/src/components/Button/index.module.css index 160fc18a6..f42a976c4 100644 --- a/packages/website/src/components/Button/index.module.css +++ b/packages/website/src/components/Button/index.module.css @@ -21,20 +21,20 @@ padding: var(--space-2) var(--space-3); } - &[data-list-child="true"] { - &:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + &[data-list-child="true"]:not(:first-child), + *:not(:first-child) > &[data-parent-list-child="true"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; - border-left-width: var(--space-0); - } + border-left-width: var(--space-0); + } - &:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &[data-list-child="true"]:not(:last-child), + *:not(:last-child) > &[data-parent-list-child="true"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; - border-right-width: var(--space-0); - } + border-right-width: var(--space-0); } svg, @@ -74,6 +74,6 @@ &[data-variant="surface"], &[data-variant="outline"] { - border: var(--space-1) solid var(--accent-6); + outline: var(--space-1) solid var(--accent-6); } } diff --git a/packages/website/src/components/Button/index.tsx b/packages/website/src/components/Button/index.tsx index 5a87e60bd..056844e5f 100644 --- a/packages/website/src/components/Button/index.tsx +++ b/packages/website/src/components/Button/index.tsx @@ -8,8 +8,10 @@ export interface ButtonProps extends ComponentProps<"button"> { radius?: `${1 | 2 | 3}` | "max"; variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline"; size?: "regular" | "minor"; - listChild?: boolean; highContrast?: boolean; // TODO: add high contrast + + listChild?: boolean; + parentListChild?: boolean; } export const LIGHT_TEXT_COLORS = new Set([ @@ -34,7 +36,9 @@ export function Button({ style, radius = "max", size = "regular", + listChild, + parentListChild, ...props }: ButtonProps) { return ( @@ -46,6 +50,7 @@ export function Button({ data-radius={radius} data-size={size} data-list-child={listChild} + data-parent-list-child={parentListChild} {...props} /> ); diff --git a/packages/website/src/components/IconButton/index.module.css b/packages/website/src/components/IconButton/index.module.css index c8ebc2710..ff249356b 100644 --- a/packages/website/src/components/IconButton/index.module.css +++ b/packages/website/src/components/IconButton/index.module.css @@ -2,4 +2,10 @@ padding: var(--space-3); aspect-ratio: 1 / 1; + + img, + svg { + width: 0.75em; + height: 0.75em; + } } diff --git a/packages/website/src/components/TankopediaLoadout/index.tsx b/packages/website/src/components/TankopediaLoadout/index.tsx index 22b214d3e..a7d727777 100644 --- a/packages/website/src/components/TankopediaLoadout/index.tsx +++ b/packages/website/src/components/TankopediaLoadout/index.tsx @@ -1,3 +1,4 @@ +import { alias } from "@blitzkit/core"; import type { Consumable, EquipmentSlot } from "@blitzkit/protos"; import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons"; import { chunk } from "lodash-es"; @@ -196,7 +197,7 @@ function ConsumableEntry({ id, consumable }: ConsumableProps) { }); }} > - +
@@ -336,12 +337,12 @@ function EquipmentOption({ return ( - + {unwrap(specificEquipment.name)} + ); }