icons

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

@@ -30,22 +30,38 @@
     font-size: 2em;
   }
 
-  &[data-list-child="true"]:not(:first-child),
+  &[data-list-child="horizontal"]:not(:first-child),
-  *:not(:first-child) > &[data-parent-list-child="true"] {
+  *:not(:first-child) > &[data-parent-list-child="horizontal"] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
     border-left-width: var(--space-0);
   }
 
-  &[data-list-child="true"]:not(:last-child),
+  &[data-list-child="horizontal"]:not(:last-child),
-  *:not(:last-child) > &[data-parent-list-child="true"] {
+  *:not(:last-child) > &[data-parent-list-child="horizontal"] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
     border-right-width: var(--space-0);
   }
 
+  &[data-list-child="vertical"]:not(:first-child),
+  *:not(:first-child) > &[data-parent-list-child="vertical"] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    border-top-width: var(--space-0);
+  }
+
+  &[data-list-child="vertical"]:not(:last-child),
+  *:not(:last-child) > &[data-parent-list-child="vertical"] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    border-bottom-width: var(--space-0);
+  }
+
   svg,
   img {
     width: 1em;
@@ -60,6 +76,10 @@
 
   &[data-variant="solid"] {
     background-color: var(--accent-8);
+
+    &[data-high-contrast="true"] {
+      background-color: var(--accent-12);
+    }
   }
 
   &[data-variant="surface"],

packages/website/src/components/Button/index.tsx

@@ -10,8 +10,8 @@ export interface ButtonProps extends ComponentProps<"button"> {
   size?: "regular" | "minor" | "major";
   highContrast?: boolean;
 
-  listChild?: boolean;
+  listChild?: "horizontal" | "vertical";
-  parentListChild?: boolean;
+  parentListChild?: "horizontal" | "vertical";
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SidebarIconButton.tsx

@@ -1,44 +0,0 @@
-import { Flex, IconButton, type FlexProps } from "@radix-ui/themes";
-import type { ComponentProps, CSSProperties } from "react";
-
-type SidebarIconButtonProps = ComponentProps<typeof IconButton> & {
-  selected: boolean;
-  src: string;
-  alt: string;
-  imageStyle?: CSSProperties;
-};
-
-export function SidebarIconGroup({ style, ...props }: FlexProps) {
-  return (
-    <Flex
-      direction="column"
-      overflow="hidden"
-      style={{ borderRadius: "var(--radius-full)", ...style }}
-      {...props}
-    />
-  );
-}
-
-export function SidebarIconButton({
-  selected,
-  src,
-  alt,
-  imageStyle,
-  ...props
-}: SidebarIconButtonProps) {
-  return (
-    <IconButton
-      color={selected ? undefined : "gray"}
-      variant="soft"
-      size={{ initial: "2", sm: "3" }}
-      radius="none"
-      {...props}
-    >
-      <img
-        alt={alt}
-        src={src}
-        style={{ width: "50%", height: "50%", ...imageStyle }}
-      />
-    </IconButton>
-  );
-}

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -42,15 +42,15 @@ import { ModuleButton } from "../../../../ModuleButtons/ModuleButton";
 import { ScreenshotButton } from "../../../../ScreenshotButton";
 import { SmallTankIcon } from "../../../../SmallTankIcon";
 import type { ThicknessRange } from "../../../../StaticArmor";
+import {
+  SidebarIconButton,
+  SidebarIconGroup,
+} from "../../../../TankopediaSidebarIconButtons";
 import { SkinSwitcher } from "../../../../TankopediaSkinSwitcher";
 import { TankSearch } from "../../../../TankSearch";
 import { CustomShellButton } from "./components/CustomShellButton";
 import { DynamicArmorSwitcher } from "./components/DynamicArmorSwitcher";
 import { QuickInputs } from "./components/QuickInputs";
-import {
-  SidebarIconButton,
-  SidebarIconGroup,
-} from "./components/SidebarIconButton";
 import { SpallLinerSwitcher } from "./components/SpallLinerSwitcher";
 import { Thicknesses } from "./components/Thicknesses";
 

packages/website/src/components/TankopediaLoadout/index.tsx

@@ -256,7 +256,7 @@ function Shells() {
                 radius="1"
                 color={isSelected ? undefined : "gray"}
                 variant={isSelected ? "surface" : "soft"}
-                parentListChild
+                parentListChild="horizontal"
                 onClick={() => {
                   Tankopedia.mutate((draft) => {
                     draft.protagonist.shell = candidate.id;
@@ -605,7 +605,7 @@ function EquipmentOption({
         color={isSelected ? undefined : "gray"}
         variant={isSelected ? "surface" : "soft"}
         radius="1"
-        parentListChild
+        parentListChild="horizontal"
         className={styles.slot}
         onClick={() => {
           Tankopedia.mutate((draft) => {

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

@@ -0,0 +1,4 @@
+.sidebar-icon-group {
+  display: flex;
+  flex-direction: column;
+}

packages/website/src/components/TankopediaSidebarIconButtons/index.tsx

@@ -0,0 +1,43 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import type { ButtonProps } from "../Button";
+import { IconButton } from "../IconButton";
+import styles from "./index.module.css";
+
+type SidebarIconButtonProps = ButtonProps & {
+  selected: boolean;
+  src: string;
+  alt: string;
+};
+
+export function SidebarIconGroup({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      className={classNames(styles["sidebar-icon-group"], className)}
+      {...props}
+    />
+  );
+}
+
+// TODO: sunset this
+export function SidebarIconButton({
+  selected,
+  src,
+  alt,
+  ...props
+}: SidebarIconButtonProps) {
+  return (
+    <IconButton
+      parentListChild="vertical"
+      color={selected ? undefined : "gray"}
+      variant="soft"
+      size="major"
+      {...props}
+    >
+      <img alt={alt} src={src} />
+    </IconButton>
+  );
+}

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

@@ -15,4 +15,8 @@
   &[data-visible="true"] {
     transform: translate(0, -50%);
   }
+
+  .camouflage-icon {
+    border-radius: 50%;
+  }
 }

packages/website/src/components/TankopediaSkinSwitcher/index.tsx

@@ -6,7 +6,7 @@ import { DuelModule, useDuel } from "../../hooks/useDuel";
 import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { Tankopedia } from "../../stores/tankopedia";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
-import { SidebarIconButton } from "../Tankopedia/HeroSection/components/Options/components/SidebarIconButton";
+import { IconButton } from "../IconButton";
 import { Tooltip } from "../Tooltip";
 import styles from "./index.module.css";
 
@@ -35,30 +35,22 @@ export function TankopediaSkinSwitcher() {
       className={styles["skin-switcher"]}
       data-visible={disturbed && requestedDisplay === TankopediaDisplay.Model}
     >
-      {skins.map((camouflage, index) => {
+      {skins.map((camouflage) => {
         const name = unwrap(camouflage.name!).replace(
           "%(camo_num)",
           SKIN_NUMBER,
         );
-        const top = index === 0 ? "var(--radius-full)" : "0";
+
-        const bottom = index === skins.length - 1 ? "var(--radius-full)" : "0";
+        const selected = skin === camouflage.id;
 
         return (
           <Tooltip key={camouflage.id} tooltip={name} side="left">
-            <SidebarIconButton
+            <IconButton
-              selected={skin === camouflage.id}
+              parentListChild="vertical"
-              alt={name}
+              color={selected ? undefined : "gray"}
-              src={alias("api", `/icons/camouflages/${camouflage.id}.webp`)}
+              variant={selected ? "solid" : "soft"}
-              size={{ initial: "3", sm: "4" }}
+              highContrast={selected}
-              radius="full"
+              size="major"
-              style={{
-                borderRadius: `${top} ${top} ${bottom} ${bottom}`,
-              }}
-              imageStyle={{
-                width: "70%",
-                height: "70%",
-                borderRadius: "50%",
-              }}
               onClick={() => {
                 Tankopedia.mutate((draft) => {
                   draft.requestedSkin =
@@ -67,7 +59,13 @@ export function TankopediaSkinSwitcher() {
                       : camouflage.id;
                 });
               }}
-            />
+            >
+              <img
+                className={styles["camouflage-icon"]}
+                alt={name}
+                src={alias("api", `/icons/camouflages/${camouflage.id}.webp`)}
+              />
+            </IconButton>
           </Tooltip>
         );
       })}

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

@@ -5,9 +5,6 @@
     display: none;
 
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
 
     z-index: 1;
     background-color: var(--gray-12);
@@ -15,9 +12,24 @@
     border-radius: var(--space-3);
 
     padding: var(--space-2) var(--space-3);
-    margin-bottom: var(--space-3);
 
     white-space: nowrap;
+
+    &[data-side="top"] {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+
+      margin-bottom: var(--space-3);
+    }
+
+    &[data-side="left"] {
+      top: 50%;
+      right: 100%;
+      transform: translateY(-50%);
+
+      margin-right: var(--space-3);
+    }
   }
 
   &:hover {

packages/website/src/components/Tooltip/index.tsx

@@ -4,12 +4,15 @@ import styles from "./index.module.css";
 interface Props {
   children: ReactNode;
   tooltip: string;
+  side?: "top" | "left";
 }
 
-export function Tooltip({ children, tooltip }: Props) {
+export function Tooltip({ children, tooltip, side = "top" }: Props) {
   return (
     <div className={styles.tooltip}>
-      <div className={styles.text}>{tooltip}</div>
+      <div className={styles.text} data-side={side}>
+        {tooltip}
+      </div>
       {children}
     </div>
   );