Improves Identification Computer Card Skins UX + fixes unselectable NTC card skin (#31307)

* ImageButton

* icon from DM

* fixes NTC skin

* resized window

* build

* test

code/game/machinery/computer/id_card_console.dm

@@ -123,7 +123,8 @@ GLOBAL_VAR_INIT(time_last_changed_position, 0)
 	for(var/skin in card_skins)
 		formatted.Add(list(list(
 			"display_name" = get_skin_desc(skin),
-			"skin" = skin)))
+			"skin" = skin,
+			"icon" = 'icons/obj/card.dmi')))
 	return formatted
 
 /obj/machinery/computer/card/AltClick(mob/user)

code/game/objects/items/cards_ids.dm

@@ -956,7 +956,7 @@
 	override_name = 1
 
 /proc/get_station_card_skins()
-	return list("data", "id", "gold", "silver", "security", "detective", "warden", "internalaffairsagent", "medical", "coroner", "chemist", "virologist", "paramedic", "psychiatrist", "geneticist", "research", "roboticist", "quartermaster", "cargo", "shaftminer", "engineering", "atmostech", "captain", "HoP", "HoS", "CMO", "RD", "CE", "assistant", "clown", "mime", "botanist", "librarian", "chaplain", "bartender", "chef", "janitor", "rainbow", "prisoner", "explorer", "nct")
+	return list("data", "id", "gold", "silver", "security", "detective", "warden", "internalaffairsagent", "medical", "coroner", "chemist", "virologist", "paramedic", "psychiatrist", "geneticist", "research", "roboticist", "quartermaster", "cargo", "shaftminer", "engineering", "atmostech", "captain", "HoP", "HoS", "CMO", "RD", "CE", "assistant", "clown", "mime", "botanist", "librarian", "chaplain", "bartender", "chef", "janitor", "rainbow", "prisoner", "explorer", "nctrainer")
 
 /proc/get_centcom_card_skins()
 	return list("centcom", "blueshield", "magistrate", "ntrep", "ERT_leader", "ERT_empty", "ERT_security", "ERT_engineering", "ERT_medical", "ERT_janitorial", "ERT_paranormal", "deathsquad", "commander", "syndie", "TDred", "TDgreen")

tgui/packages/tgui/interfaces/CardComputer/card_details.tsx

@@ -1,8 +1,9 @@
-import { Box, Button, Dropdown, LabeledList, Section } from 'tgui-core/components';
-import { CardSkin, IdCard } from './types';
-import { useBackend } from '../../backend';
+import { Box, Button, Dropdown, ImageButton, LabeledList, Section } from 'tgui-core/components';
 import { BooleanLike } from 'tgui-core/react';
 
+import { useBackend } from '../../backend';
+import { CardSkin, IdCard } from './types';
+
 type CardInformationProps = {
   card?: IdCard;
 };
@@ -44,29 +45,32 @@ type CardSkinsProps = {
 export const CardSkins = (props: CardSkinsProps) => {
   const { act } = useBackend();
   const { card_skins, card, is_centcom, all_centcom_skins } = props;
+
   return (
     <Section title="Card Skins">
       {card_skins.map((v) => (
-        <Button
+        <ImageButton
           selected={card?.current_skin === v.skin}
           key={v.skin}
+          tooltip={v.display_name}
+          dmIcon={v.icon}
+          dmIconState={v.skin}
           onClick={() => act('set_card_skin', { skin_target: v.skin })}
-        >
-          {v.display_name}
-        </Button>
+        />
       ))}
       {!!is_centcom && (
         <Box>
           {Array.isArray(all_centcom_skins) &&
             all_centcom_skins.map((v) => (
-              <Button
+              <ImageButton
                 selected={card?.current_skin === v.skin}
                 key={v.skin}
+                tooltip={v.display_name}
+                dmIcon={v.icon}
+                dmIconState={v.skin}
                 color="purple"
                 onClick={() => act('set_card_skin', { skin_target: v.skin })}
-              >
-                {v.display_name}
-              </Button>
+              />
             ))}
         </Box>
       )}

tgui/packages/tgui/interfaces/CardComputer/index.tsx

@@ -1,15 +1,15 @@
 import { Button, Icon, Section, Stack, Table, Tabs } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 import { useBackend } from '../../backend';
 import { Window } from '../../layouts';
 import { AccessList } from '../common/AccessList';
-import { BooleanLike } from 'tgui-core/react';
-import { CardComputerRecord, CardSkin, DepartmentPerson, IdCard, JobNames, JobSlotData } from './types';
-import { CardComputerJobTransfer } from './job_transfer';
-import { CardComputerJobPriority } from './job_priority';
 import { AccessRegion } from '../common/AccessList';
-import { CardComputerRecordsLog } from './records_log';
 import { AuthBlock } from './auth_block';
+import { CardComputerJobPriority } from './job_priority';
+import { CardComputerJobTransfer } from './job_transfer';
+import { CardComputerRecordsLog } from './records_log';
+import { CardComputerRecord, CardSkin, DepartmentPerson, IdCard, JobNames, JobSlotData } from './types';
 
 export const SlashedIcon = (props: { title: string; name: string; text: string }) => {
   const { title, name, text } = props;
@@ -230,7 +230,7 @@ export const CardComputer = () => {
   }
 
   return (
-    <Window width={800} height={800}>
+    <Window width={760} height={800}>
       <Window.Content scrollable>
         <Stack fill vertical>
           <Stack.Item>

tgui/packages/tgui/interfaces/CardComputer/types.tsx

@@ -3,6 +3,7 @@ import { BooleanLike } from 'tgui-core/react';
 export type CardSkin = {
   display_name: string;
   skin: string;
+  icon: string;
 };
 
 export type IdCard = {