tweak GameIcon component & update Vending layout

discordia-space · Nov 26, 2023 · d077489 · d077489
1 parent 13d3037
commit d077489
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/tgui/packages/tgui/components/GameIcon.tsx b/tgui/packages/tgui/components/GameIcon.tsx
@@ -1,3 +1,5 @@
+import { Box } from './Box';
+
 type GameIconProps = {
   html: string;
   className?: string;
@@ -11,7 +13,8 @@ export const GameIcon = (props: GameIconProps) => {
   const iconSrc = html.match('src=["\'](.*)["\']')![1];
 
   return (
-    <img
+    <Box
+      as="img"
       key={key}
       {...props}
       className={`game-icon ${className || ''}`}

diff --git a/tgui/packages/tgui/interfaces/Vending.tsx b/tgui/packages/tgui/interfaces/Vending.tsx
@@ -1,4 +1,4 @@
-import { capitalize } from 'common/string';
+import { capitalize } from '../../common/string';
 import { useBackend } from '../backend';
 import { BlockQuote, Box, Button, Icon, LabeledList, Modal, NoticeBox, Section, Stack } from '../components';
 import { GameIcon } from '../components/GameIcon';
@@ -138,28 +138,39 @@ const product = (product: ProductData, context: any) => {
         <Stack.Item grow>
           <Button
             fluid
-            ellipsis
-            onClick={() => act('vend', { key: product.key })}>
-            <Stack fill align="center">
-              <Stack.Item>
-                <GameIcon html={product.icon} className="Vending--game-icon" />
-              </Stack.Item>
-              <Stack.Item grow={4} textAlign="left" className="Vending--text">
-                {product.name}
-              </Stack.Item>
-              <Stack.Item grow textAlign="right" className="Vending--text">
-                {product.amount}
-                <Icon name="box" pl="0.6em" />
-              </Stack.Item>
-              {(product.price > 0 && (
+            height="100%"
+            verticalAlignContent="middle"
+            content={
+              <Stack fill align="center">
+                <Stack.Item
+                  style={{
+                    'display': 'flex',
+                    'align-items': 'center',
+                    'justify-content': 'center',
+                  }}>
+                  <GameIcon
+                    html={product.icon}
+                    className="Vending--game-icon"
+                  />
+                </Stack.Item>
+                <Stack.Item grow={4} textAlign="left" className="Vending--text">
+                  {product.name}
+                </Stack.Item>
                 <Stack.Item grow textAlign="right" className="Vending--text">
-                  {product.price}
-                  <Icon name="money-bill" pl="0.6em" />
+                  {product.amount}
+                  <Icon name="box" pl="0.6em" />
                 </Stack.Item>
-              )) ||
-                null}
-            </Stack>
-          </Button>
+                {(product.price > 0 && (
+                  <Stack.Item grow textAlign="right" className="Vending--text">
+                    {product.price}
+                    <Icon name="money-bill" pl="0.6em" />
+                  </Stack.Item>
+                )) ||
+                  null}
+              </Stack>
+            }
+            onClick={() => act('vend', { key: product.key })}
+          />
         </Stack.Item>
         {(data.isManaging && (
           <>

diff --git a/tgui/packages/tgui/styles/interfaces/Vending.scss b/tgui/packages/tgui/styles/interfaces/Vending.scss
@@ -9,8 +9,8 @@
     height: 5.9ch;
   }
   &--game-icon {
-    width: 2.5rem;
-    align-items: center;
+    height: 2.5rem;
+    width: auto;
   }
   &--modal {
     width: 30rem;