Coverted UI over to use <Table> for aesthetic reasons

code/modules/assembly/signaler.dm

@@ -70,7 +70,7 @@
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
 		var/ui_width = 280
-		var/ui_height = 134
+		var/ui_height = 132
 		ui = new(user, src, ui_key, "signaler", name, ui_width, ui_height, master_ui, state)
 		ui.open()
 

tgui-next/packages/tgui/interfaces/Signaler.js

@@ -1,4 +1,4 @@
-import { NumberInput, Button, Section, LabeledList } from '../components';
+import { Table, NumberInput, Button, Section } from '../components';
 import { useBackend } from '../backend';
 import { toFixed } from 'common/math';
 
@@ -13,54 +13,64 @@ export const Signaler = props => {
 
   return (
     <Section>
-      <LabeledList>
+      <Table>
-        <LabeledList.Item label="Frequency">
+        <Table.Row>
-          <NumberInput
+          <Table.Cell color="label">
-            animate
+            Frequency:
-            unit="kHz"
+          </Table.Cell>
-            step={0.2}
+          <Table.Cell collapsing>
-            stepPixelSize={6}
+            <NumberInput
-            minValue={minFrequency / 10}
+              animate
-            maxValue={maxFrequency / 10}
+              unit="kHz"
-            value={frequency / 10}
+              step={0.2}
-            format={value => toFixed(value, 1)}
+              stepPixelSize={6}
-            width={13}
+              minValue={minFrequency / 10}
-            onDrag={(e, value) => act('freq', {
+              maxValue={maxFrequency / 10}
-              freq: value,
+              value={frequency / 10}
-            })} />
+              format={value => toFixed(value, 1)}
-          <Button
+              width={13}
-            ml={0.5}
+              onDrag={(e, value) => act('freq', {
-            icon="sync"
+                freq: value,
-            content="Reset"
+              })} />
-            onClick={() => act('reset', {
+            <Button
-              reset: "freq",
+              ml={0.5}
-            })} />
+              icon="sync"
-        </LabeledList.Item>
+              content="Reset"
-        <LabeledList.Item label="Code">
+              onClick={() => act('reset', {
-          <NumberInput
+                reset: "freq",
-            animate
+              })} />
-            step={1}
+          </Table.Cell>
-            stepPixelSize={6}
+        </Table.Row>
-            minValue={1}
+        <Table.Row lineHeight={5}>
-            maxValue={100}
+          <Table.Cell color="label">
-            value={code}
+            Code:
-            width={13}
+          </Table.Cell>
-            onDrag={(e, value) => act('code', {
+          <Table.Cell collapsing>
-              code: value,
+            <NumberInput
-            })} />
+              animate
-          <Button
+              step={1}
-            ml={0.5}
+              stepPixelSize={6}
-            icon="sync"
+              minValue={1}
-            content="Reset"
+              maxValue={100}
-            onClick={() => act('reset', {
+              value={code}
-              reset: "code",
+              width={13}
-            })} />
+              onDrag={(e, value) => act('code', {
-        </LabeledList.Item>
+                code: value,
-      </LabeledList>
+              })} />
+            <Button
+              ml={0.5}
+              icon="sync"
+              content="Reset"
+              onClick={() => act('reset', {
+                reset: "code",
+              })} />
+          </Table.Cell>
+        </Table.Row>
+      </Table>
       <Button
-        mt={1}
+        mt={0.2}
         mb={-0.2}
-        width={37.4}
+        fluid
         icon="arrow-up"
         content="Send Signal"
         textAlign="center"