feat: updated /ownedtanks to new design

src/components/Tanks/components/Column.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+export interface RootProps {
+  children: ReactNode;
+}
+
+export function Column({ children }: RootProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        flex: 1,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Tanks/components/Item.tsx

@@ -1,38 +1,62 @@
-import { TANK_ICONS } from '../../../core/blitz/tankopedia.js';
+import {
+  TANK_ICONS,
+  TANK_ICONS_PREMIUM,
+} from '../../../core/blitz/tankopedia.js';
+import { theme, themeAmber } from '../../../stitches.config.js';
 
 export interface ItemProps {
-  icon?: string;
+  image?: string;
   type?: string;
   name: string;
+  isPremium?: boolean;
 }
 
-export function Item({ icon, type, name }: ItemProps) {
+export function Item({ image, type, name, isPremium }: ItemProps) {
   return (
     <div
       style={{
-        flex: 1,
-        minWidth: 128,
-        height: 128,
         display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
+        height: 32,
+        paddingLeft: 8,
+        paddingRight: 8,
         overflow: 'hidden',
+        alignItems: 'center',
+        borderRadius: 4,
+        backgroundColor: isPremium
+          ? themeAmber.colors.componentInteractive
+          : theme.colors.componentInteractive,
       }}
     >
-      {icon && <img src={icon} style={{ flex: 1, objectFit: 'contain' }} />}
-
-      <div style={{ display: 'flex', margin: 'auto', gap: 4 }}>
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          overflow: 'hidden',
+        }}
+      >
         {type && (
-          <img src={TANK_ICONS[type]} style={{ width: 14, height: 14 }} />
+          <img
+            src={isPremium ? TANK_ICONS_PREMIUM[type] : TANK_ICONS[type]}
+            style={{ width: 14, height: 14 }}
+          />
         )}
-
         <span
-          style={{ fontSize: 16, textAlign: 'center', whiteSpace: 'nowrap' }}
+          style={{
+            fontSize: 16,
+            whiteSpace: 'nowrap',
+            color: isPremium
+              ? themeAmber.colors.textLowContrast
+              : theme.colors.textHighContrast,
+          }}
         >
           {name}
         </span>
       </div>
+
+      {image && <img src={image} style={{ flex: 1 }} />}
     </div>
   );
 }

src/components/Tanks/components/Root.tsx

@@ -9,10 +9,7 @@ export function Root({ children }: RootProps) {
     <div
       style={{
         display: 'flex',
-        flexWrap: 'wrap',
-        gap: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
+        gap: 8,
       }}
     >
       {children}

src/components/Tanks/index.ts

@@ -1,2 +1,3 @@
+export * from './components/Column.js';
 export * from './components/Item.js';
 export * from './components/Root.js';