equipment looks

packages/website/src/components/Button/index.module.css

@@ -21,20 +21,20 @@
     padding: var(--space-2) var(--space-3);
   }
 
-  &[data-list-child="true"] {
+  &[data-list-child="true"]:not(:first-child),
-    &:not(:first-child) {
+  *:not(:first-child) > &[data-parent-list-child="true"] {
-      border-top-left-radius: 0;
+    border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
 
-      border-left-width: var(--space-0);
+    border-left-width: var(--space-0);
-    }
+  }
 
-    &:not(:last-child) {
+  &[data-list-child="true"]:not(:last-child),
-      border-top-right-radius: 0;
+  *:not(:last-child) > &[data-parent-list-child="true"] {
-      border-bottom-right-radius: 0;
+    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);
   }
 }

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<Color>([
@@ -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}
     />
   );

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;
+  }
 }

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) {
             });
           }}
         >
-          <img src={`/media/consumables/${id}.webp`} />
+          <img src={alias("api", `/icons/consumables/${consumable.id}.webp`)} />
           <div className={styles.info}>
             <Text lowContrast size="minor">
               <div className={styles.entry}>
@@ -336,12 +337,12 @@ function EquipmentOption({
 
   return (
     <Tooltip tooltip={unwrap(specificEquipment.name)}>
-      <Button
+      <IconButton
         color={isSelected ? undefined : "gray"}
         variant={isSelected ? "surface" : "soft"}
         data-selected={isSelected}
         radius="1"
-        listChild
+        parentListChild
         className={styles.slot}
         onClick={() => {
           Tankopedia.mutate((draft) => {
@@ -353,8 +354,12 @@ function EquipmentOption({
           });
         }}
       >
-        <img src={`/media/equipment/${id}.webp`} />
+        <img
-      </Button>
+          className={styles.icon}
+          alt={unwrap(specificEquipment.name)}
+          src={alias("api", `/icons/equipment/${id}.webp`)}
+        />
+      </IconButton>
     </Tooltip>
   );
 }