apply some changes from PR review

tgui/packages/tgui/interfaces/RndConsoleComponents/DeconstructionMenu.js

@@ -19,16 +19,15 @@ export const DeconstructionMenu = (properties, context) => {
 
   if (!loaded_item) {
     return (
-      <Box>
+      <Section title="Deconstruction Menu">
         No item loaded. Standing by...
-      </Box>
+      </Section>
     );
   }
 
   return (
-    <Section noTopPadding>
-      <h3>Deconstruction Menu:</h3>
-      <Box>Name: {loaded_item.name}</Box>
+    <Section noTopPadding title="Deconstruction Menu">
+      <Box mt="10px">Name: {loaded_item.name}</Box>
       <Box mt="10px">
         <h3>Origin Tech:</h3>
       </Box>

tgui/packages/tgui/interfaces/RndConsoleComponents/LatheMaterials.js

@@ -13,31 +13,28 @@ export const LatheMaterials = (properties, context) => {
   } = data;
 
   return (
-    <Box mb="10px">
-      <Box color="yellow">
-        <Table>
-          <Table.Row>
-            <Table.Cell bold>Material Amount:</Table.Cell>
-            <Table.Cell>{total_materials}</Table.Cell>
-            {max_materials ? (
-              <Table.Cell>
-                {" / " + max_materials}
-              </Table.Cell>
-            ) : null}
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell bold>Chemical Amount:</Table.Cell>
-            <Table.Cell>{total_chemicals}</Table.Cell>
-            {max_chemicals ? (
-              <Table.Cell>
-                {" / " + max_chemicals}
+    <Box mb="10px" color="yellow">
+      <Table width="auto">
+        <Table.Row>
+          <Table.Cell bold>Material Amount:</Table.Cell>
+          <Table.Cell>{total_materials}</Table.Cell>
+          {max_materials ? (
+            <Table.Cell>
+              {" / " + max_materials}
+            </Table.Cell>
+          ) : null}
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell bold>Chemical Amount:</Table.Cell>
+          <Table.Cell>{total_chemicals}</Table.Cell>
+          {max_chemicals ? (
+            <Table.Cell>
+              {" / " + max_chemicals}
 
-              </Table.Cell>
-            ) : null}
-          </Table.Row>
-        </Table>
-      </Box>
+            </Table.Cell>
+          ) : null}
+        </Table.Row>
+      </Table>
     </Box>
-
   );
 };

tgui/packages/tgui/interfaces/RndConsoleComponents/LatheSearch.js

@@ -1,21 +1,12 @@
-import { useBackend, useLocalState } from "../../backend";
-import { Input } from "../../components";
+import { useBackend } from "../../backend";
+import { Box, Input } from "../../components";
 
 export const LatheSearch = (properties, context) => {
   const { act } = useBackend(context);
-
-  const [inputValue, setInputValue] = useLocalState(context, 'inputValue', '');
-
-  const onSubmit = e => {
-    e.preventDefault();
-    act('search', { to_search: inputValue });
-  };
-
   return (
-    <form onSubmit={onSubmit}>
-      <Input
-        onInput={(e, value) => setInputValue(value)} />
-      <button type="submit">Search</button>
-    </form>
+    <Box>
+      <Input placeholder="Search..."
+        onChange={(e, value) => act('search', { to_search: value })} />
+    </Box>
   );
 };

tgui/packages/tgui/interfaces/RndConsoleComponents/RndNavbar.js

@@ -2,7 +2,7 @@ import { RndRoute, RndNavButton } from "./index";
 import { Box } from "../../components";
 
 export const RndNavbar = () => (
-  <Box>
+  <Box className="RndConsole__RndNavbar">
     <RndRoute menu={n => n !== 0} render={() => (
       <RndNavButton menu={0} submenu={0} icon="reply" content="Main Menu" />
     )} />

tgui/packages/tgui/styles/interfaces/RndConsole.scss

@@ -31,3 +31,10 @@
     padding: .3em .75em;
   }
 }
+
+.RndConsole__RndNavbar {
+  .Button {
+    // add padding between navbar and contents when any button is visible
+    margin-bottom: 10px;
+  }
+}