research costs

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

@@ -88,7 +88,7 @@
 
   &[data-variant="surface"],
   &[data-variant="soft"] {
-    background-color: var(--accent-a3);
+    background-color: var(--accent-4);
     color: var(--gray-12);
   }
 

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

@@ -1,4 +1,10 @@
 .discriminator {
+  --inset: var(--space-3);
+
+  &[data-inset="small"] {
+    --inset: var(--space-2);
+  }
+
   position: absolute;
 
   font-size: var(--font-size-minor);
@@ -8,23 +14,27 @@
 
   white-space: nowrap;
 
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+
   &[data-corner="top-right"],
   &[data-corner="bottom-right"] {
-    right: var(--space-3);
+    right: var(--inset);
   }
 
   &[data-corner="top-left"],
   &[data-corner="bottom-left"] {
-    right: var(--space-3);
+    left: var(--inset);
   }
 
   &[data-corner="top-left"],
   &[data-corner="top-right"] {
-    top: var(--space-3);
+    top: var(--inset);
   }
 
   &[data-corner="bottom-left"],
   &[data-corner="bottom-right"] {
-    bottom: var(--space-3);
+    bottom: var(--inset);
   }
 }

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

@@ -4,16 +4,19 @@ import styles from "./index.module.css";
 
 interface DiscriminatorProps extends ComponentProps<"span"> {
   corner?: `${"bottom" | "top"}-${"left" | "right"}`;
+  inset?: "small" | "regular";
 }
 
 /** Small label overlaid on the right edge of a `position: relative` parent */
 export function Discriminator({
   className,
   corner = "bottom-right",
+  inset = "regular",
   ...props
 }: DiscriminatorProps) {
   return (
     <span
+      data-inset={inset}
       data-corner={corner}
       className={classNames(styles.discriminator, className)}
       {...props}

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

@@ -145,6 +145,8 @@
     --line-thickness: var(--space-1);
     --line-border: var(--space-1) solid var(--gray-6);
 
+    margin-bottom: calc(var(--space-2) + var(--font-size-minor));
+
     display: grid;
     gap: var(--depth-gap) var(--sibling-gap);
 
@@ -214,6 +216,33 @@
         .icon {
           width: 2em;
           height: 2em;
+
+          .module[data-major="true"] & {
+            transform: scale(1.25);
+          }
+        }
+
+        .price {
+          display: flex;
+          gap: var(--space-1);
+
+          font-size: var(--font-size-minor);
+
+          position: absolute;
+          top: 100%;
+          left: 50%;
+
+          transform: translateX(-50%);
+
+          margin-top: var(--space-2);
+
+          background-color: var(--gray-2);
+
+          svg,
+          img {
+            width: 1em;
+            height: 1em;
+          }
         }
       }
     }

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

@@ -1,5 +1,6 @@
 import {
   alias,
+  formatCompact,
   MAX_SKILL_LEVEL,
   permanentSkills,
   romanize,
@@ -306,6 +307,7 @@ function ModuleNode({ unlock, module, tooltip }: ModuleNodeProps) {
       variant={isSelected ? "surface" : "soft"}
       color={isSelected ? (isTop ? "amber" : undefined) : "gray"}
       className={styles.module}
+      data-major={unlock.type === ModuleType.MODULE_TYPE_VEHICLE}
       onClick={() => {
         if (isTank) return;
 
@@ -350,18 +352,6 @@ function ModuleNode({ unlock, module, tooltip }: ModuleNodeProps) {
         });
       }}
     >
-      <Discriminator corner="top-right">{romanize(module.tier)}</Discriminator>
-
-      {/* {unlock.cost!.value > 0 && (
-        <Discriminator>
-          <Text size="minor">{formatCompact(locale, unlock.cost!.value)}</Text>
-          <img
-            alt={unlock.cost!.type}
-            src={alias("api", `/icons/currencies/${unlock.cost!.type}.webp`)}
-          />
-        </Discriminator>
-      )} */}
-
       <img
         alt={tooltip}
         src={
@@ -374,6 +364,18 @@ function ModuleNode({ unlock, module, tooltip }: ModuleNodeProps) {
         }
         className={styles.icon}
       />
+
+      <Discriminator corner="top-left">{romanize(module.tier)}</Discriminator>
+
+      {unlock.cost!.value > 0 && (
+        <div className={styles.price}>
+          <Text size="minor">{formatCompact(locale, unlock.cost!.value)}</Text>
+          <img
+            alt={unlock.cost!.type}
+            src={alias("api", `/icons/currencies/${unlock.cost!.type}.webp`)}
+          />
+        </div>
+      )}
     </IconButton>
   );