diff --git a/packages/website-ue/src/components/IconButton/index.module.css b/packages/website-ue/src/components/IconButton/index.module.css index 6c32e585f..e80c47788 100644 --- a/packages/website-ue/src/components/IconButton/index.module.css +++ b/packages/website-ue/src/components/IconButton/index.module.css @@ -3,5 +3,5 @@ aspect-ratio: 1 / 1; - font-size: 2rem; + font-size: 1.75em; } diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css index e1566c71b..ec8441172 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css +++ b/packages/website-ue/src/components/TankopediaLoadout/index.module.css @@ -1,20 +1,32 @@ .lines { display: flex; + flex-direction: column; gap: var(--space-3); .line { display: flex; - flex-direction: column; align-items: center; - gap: var(--space-2); + gap: var(--space-3); .stage { + position: relative; + img { width: 1em; height: 1em; } + + .tier { + position: absolute; + left: var(--space-2); + top: var(--space-2); + } + } + + .arrow { + display: contents; } } } diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx index c5995dfb9..73da9ca12 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx +++ b/packages/website-ue/src/components/TankopediaLoadout/index.tsx @@ -1,5 +1,5 @@ import type { UpgradeLine } from "@blitzkit/closed/protos/game/proto/legacy/blitz_static_tank_upgrade_line"; -import { CaretDownIcon } from "@radix-ui/react-icons"; +import { romanize } from "@blitzkit/core"; import { Fragment } from "react"; import { api } from "../../core/api/dynamic"; import { useAwait } from "../../hooks/useAwait"; @@ -8,6 +8,7 @@ import { Tankopedia } from "../../stores/tankopedia"; import { Heading } from "../Heading"; import { IconButton } from "../IconButton"; import { Section } from "../Section"; +import { Text } from "../Text"; import styles from "./index.module.css"; export function TankopediaLoadout() { @@ -40,12 +41,18 @@ function Line({ line }: LineProps) { return (