tiny bit of nicer styling

3 files changed, 34 insertions, 12 deletions

diff --git a/src/components/RecordTable.js b/src/components/RecordTable.js
index 22bf618..19e1a48 100644
--- a/src/components/RecordTable.js
+++ b/src/components/RecordTable.js
@@ -53,7 +53,8 @@ export default function RecordsTable({
           <div class="records-th records-col-name">Name</div>
           <div class="records-th records-col-value">Value</div>
           <div class="records-th records-col-ttl">TTL</div>
-          <div class="records-th records-col-actions"></div>
+          {/* TODO: Stop using NBSP for styling */}
+          <div class="records-th records-col-actions">+&nbsp;&nbsp;&nbsp;&nbsp;</div>
         </div>
       </div>
       <div class="records-tbody" role="rowgroup">
diff --git a/src/routes/Records.js b/src/routes/Records.js
index 448060f..86b21a3 100644
--- a/src/routes/Records.js
+++ b/src/routes/Records.js
@@ -128,6 +128,7 @@ export function Records() {
                 <th style={{ width: "24em" }}>Name</th>
                 <th style={{ width: "8em" }}>Content</th>
                 <th style={{ width: "6em" }}>TTL</th>
+                <th>+</th>
               </tr>
             </thead>
             <tbody>
@@ -172,11 +173,14 @@ export function Records() {
               </tr>
             </tbody>
           </table>
-
-          <Button secondary onClick={() => setShowModal(false)}>
-            Cancel
-          </Button>
-          <Button onClick={() => saveRecord()}>Save</Button>
+          <div style={{ display: "flex" }}>
+            <Button secondary onClick={() => setShowModal(false)}>
+              Cancel
+            </Button>
+            <Button primary onClick={() => saveRecord()}>
+              Save
+            </Button>
+          </div>
         </Modal>
       </main>
     </RequireAuth>
diff --git a/src/routes/Zones.js b/src/routes/Zones.js
index 6c434d9..35b494f 100644
--- a/src/routes/Zones.js
+++ b/src/routes/Zones.js
@@ -1,7 +1,14 @@
+import { styled } from "@stitches/react";
 import { useEffect } from "react";
 import { RequireAuth, useAuth } from "../hooks/useAuth";
 import useFetch from "../hooks/useFetch";
 
+const Card = styled("div", {
+  padding: "16px 48px",
+  border: "1px solid black",
+  flexBasis: "100%",
+});
+
 export default function Zones() {
   const auth = useAuth();
 
@@ -14,18 +21,28 @@ export default function Zones() {
   if (loading) {
     return (
       <RequireAuth>
-        <h1>Available Zones</h1>
-        <h2>Loading zones...</h2>
+        <div style={{ padding: "0px 32px" }}>
+          <h1>Available Zones</h1>
+          <h2>Loading zones...</h2>
+        </div>
       </RequireAuth>
     );
   }
 
   return (
     <RequireAuth>
-      <h1>Available Zones</h1>
-      {data.map((zone) => {
-        return <a href={"/zones/"+zone.id}>{zone.id}</a>;
-      })}
+      <div style={{ padding: "0px 32px" }}>
+        <h1>Available Zones</h1>
+        <div style={{ display: "flex" }}>
+          {data.map((zone) => {
+            return (
+              <a href={"/zones/" + zone.id}>
+                <Card>{zone.id}</Card>
+              </a>
+            );
+          })}
+        </div>
+      </div>
     </RequireAuth>
   );
 }