From cf0239052c404d0645b8d8b100e9b8a08f80cd70 Mon Sep 17 00:00:00 2001
From: actioninja <actioninja@gmail.com>
Date: Thu, 9 Apr 2020 19:43:51 -0700
Subject: [PATCH] wire ui

---
 tgui/packages/tgui/interfaces/Wires.js | 100 +++++++++++++------------
 1 file changed, 51 insertions(+), 49 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/Wires.js b/tgui/packages/tgui/interfaces/Wires.js
index f33b2617382..e3fcdeeebd0 100644
--- a/tgui/packages/tgui/interfaces/Wires.js
+++ b/tgui/packages/tgui/interfaces/Wires.js
@@ -1,59 +1,61 @@
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section } from '../components';
+import { Box, Button, LabeledList, Section, Layout } from '../components';
 
-export const Wires = props => {
-  const { act, data } = useBackend(props);
+export const Wires = (props, context) => {
+  const { act, data } = useBackend(context);
   const wires = data.wires || [];
   const statuses = data.status || [];
   return (
-    <Fragment>
-      <Section>
-        <LabeledList>
-          {wires.map(wire => (
-            <LabeledList.Item
-              key={wire.color}
-              className="candystripe"
-              label={wire.color}
-              labelColor={wire.color}
-              color={wire.color}
-              buttons={(
-                <Fragment>
-                  <Button
-                    content={wire.cut ? 'Mend' : 'Cut'}
-                    onClick={() => act('cut', {
-                      wire: wire.color,
-                    })} />
-                  <Button
-                    content="Pulse"
-                    onClick={() => act('pulse', {
-                      wire: wire.color,
-                    })} />
-                  <Button
-                    content={wire.attached ? 'Detach' : 'Attach'}
-                    onClick={() => act('attach', {
-                      wire: wire.color,
-                    })} />
-                </Fragment>
-              )}>
-              {!!wire.wire && (
-                <i>
-                  ({wire.wire})
-                </i>
-              )}
-            </LabeledList.Item>
-          ))}
-        </LabeledList>
-      </Section>
-      {!!statuses.length && (
+    <Layout>
+      <Layout.Content>
         <Section>
-          {statuses.map(status => (
-            <Box key={status}>
-              {status}
-            </Box>
-          ))}
+          <LabeledList>
+            {wires.map(wire => (
+              <LabeledList.Item
+                key={wire.color}
+                className="candystripe"
+                label={wire.color}
+                labelColor={wire.color}
+                color={wire.color}
+                buttons={(
+                  <Fragment>
+                    <Button
+                      content={wire.cut ? 'Mend' : 'Cut'}
+                      onClick={() => act('cut', {
+                        wire: wire.color,
+                      })} />
+                    <Button
+                      content="Pulse"
+                      onClick={() => act('pulse', {
+                        wire: wire.color,
+                      })} />
+                    <Button
+                      content={wire.attached ? 'Detach' : 'Attach'}
+                      onClick={() => act('attach', {
+                        wire: wire.color,
+                      })} />
+                  </Fragment>
+                )}>
+                {!!wire.wire && (
+                  <i>
+                    ({wire.wire})
+                  </i>
+                )}
+              </LabeledList.Item>
+            ))}
+          </LabeledList>
         </Section>
-      )}
-    </Fragment>
+        {!!statuses.length && (
+          <Section>
+            {statuses.map(status => (
+              <Box key={status}>
+                {status}
+              </Box>
+            ))}
+          </Section>
+        )}
+      </Layout.Content>
+    </Layout>
   );
 };