From 837c3fcca71e3f54bf29927d0f8bae46db80774e Mon Sep 17 00:00:00 2001
From: nicetoolbox <nicetoolbox@protonmail.com>
Date: Wed, 30 Sep 2020 00:43:57 -0700
Subject: [PATCH] apply some changes from PR review

---
 .../DeconstructionMenu.js                     |  9 ++--
 .../RndConsoleComponents/LatheMaterials.js    | 45 +++++++++----------
 .../RndConsoleComponents/LatheSearch.js       | 21 +++------
 .../RndConsoleComponents/RndNavbar.js         |  2 +-
 .../tgui/styles/interfaces/RndConsole.scss    |  7 +++
 5 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/RndConsoleComponents/DeconstructionMenu.js b/tgui/packages/tgui/interfaces/RndConsoleComponents/DeconstructionMenu.js
index ba6dd776bf8..c37c7c27567 100644
--- a/tgui/packages/tgui/interfaces/RndConsoleComponents/DeconstructionMenu.js
+++ b/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>
diff --git a/tgui/packages/tgui/interfaces/RndConsoleComponents/LatheMaterials.js b/tgui/packages/tgui/interfaces/RndConsoleComponents/LatheMaterials.js
index 568d547c8aa..d20e0155a0e 100644
--- a/tgui/packages/tgui/interfaces/RndConsoleComponents/LatheMaterials.js
+++ b/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>
-
   );
 };
diff --git a/tgui/packages/tgui/interfaces/RndConsoleComponents/LatheSearch.js b/tgui/packages/tgui/interfaces/RndConsoleComponents/LatheSearch.js
index 8cfaaefa26e..541e88fc2ba 100644
--- a/tgui/packages/tgui/interfaces/RndConsoleComponents/LatheSearch.js
+++ b/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>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/RndConsoleComponents/RndNavbar.js b/tgui/packages/tgui/interfaces/RndConsoleComponents/RndNavbar.js
index 9d44736cb53..8086e9857f9 100644
--- a/tgui/packages/tgui/interfaces/RndConsoleComponents/RndNavbar.js
+++ b/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" />
     )} />
diff --git a/tgui/packages/tgui/styles/interfaces/RndConsole.scss b/tgui/packages/tgui/styles/interfaces/RndConsole.scss
index 30ce9013d73..3555443969f 100644
--- a/tgui/packages/tgui/styles/interfaces/RndConsole.scss
+++ b/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;
+  }
+}