From c5a17d895000b296e5bc07f9d08878de659f2266 Mon Sep 17 00:00:00 2001
From: Jesse Vincent <jesse@keyboard.io>
Date: Thu, 8 Feb 2024 13:26:16 -0800
Subject: [PATCH] Clean up border rendering on Keyboard104 and spacing on the
 color and hamburger menu in the overview on the editor page

---
 src/renderer/screens/Editor/Keyboard104.js    | 13 ++---------
 .../screens/Editor/Sidebar/Overview.js        | 22 +++++++++++++------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/renderer/screens/Editor/Keyboard104.js b/src/renderer/screens/Editor/Keyboard104.js
index eaec0ea71..3056661ba 100644
--- a/src/renderer/screens/Editor/Keyboard104.js
+++ b/src/renderer/screens/Editor/Keyboard104.js
@@ -75,16 +75,7 @@ const KeySelector = (props) => {
     return (
       <Tooltip title={tooltipText} placement="top">
         <g onClick={onClick} className="key" data-key-code={key.code}>
-          <rect
-            x={x}
-            y={y}
-            rx={2}
-            width={width}
-            height={height}
-            stroke={stroke}
-            strokeWidth={1.55}
-            fill={buttonColor}
-          />
+          <rect x={x} y={y} rx={2} width={width} height={height} stroke={stroke} strokeWidth={2} fill={buttonColor} />
 
           <text
             x={x + width / 2}
@@ -103,7 +94,7 @@ const KeySelector = (props) => {
 
   return (
     <svg
-      viewBox={"0 0 " + Math.round(23 * keycapunit).toString() + " " + Math.round(6.5 * keycapunit).toString()}
+      viewBox={"0 0 " + Math.round(23 * keycapunit + 1).toString() + " " + Math.round(6.5 * keycapunit + 1).toString()}
       xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMin meet"
       className={props.className}
diff --git a/src/renderer/screens/Editor/Sidebar/Overview.js b/src/renderer/screens/Editor/Sidebar/Overview.js
index 336eec4b3..9ebe88d8c 100644
--- a/src/renderer/screens/Editor/Sidebar/Overview.js
+++ b/src/renderer/screens/Editor/Sidebar/Overview.js
@@ -135,7 +135,7 @@ const Overview = (props) => {
       const color = colormap.palette[colorIndex];
 
       colorWidget = (
-        <TableCell size="small" padding="none">
+        <TableCell size="small" padding="none" sx={{ width: (theme) => theme.spacing(3) }}>
           <Avatar
             sx={{ width: (theme) => theme.spacing(3), height: (theme) => theme.spacing(3) }}
             variant="square"
@@ -165,7 +165,7 @@ const Overview = (props) => {
           </Typography>
         </TableCell>
         {showColors && colorWidget}
-        <TableCell size="small" sx={{ pr: "0.5rem", py: 0 }}>
+        <TableCell size="small" sx={{ pl: 0, pr: "0.5rem", py: 0 }}>
           {HamburgerMenu(index)}
         </TableCell>
       </TableRow>
@@ -194,12 +194,20 @@ const Overview = (props) => {
             <Tooltip title={t("editor.overview.help")}>
               <TableHead>
                 <TableRow>
-                  <TableCell sx={{ pl: "1rem", py: 0 }} size="small" width="3">
-                    {t("components.layerRaw")}
+                  <TableCell sx={{ pl: "1rem", py: 0 }} size="small" width="3" align="left">
+                    <Typography sx={{ fontSize: "0.8rem" }}>{t("components.layerRaw")}</Typography>
+                  </TableCell>
+                  <TableCell size="small" align="left">
+                    <Typography sx={{ fontSize: "0.8rem" }}>
+                      {t("editor.overview.key", { index: selectedKey })}
+                    </Typography>
                   </TableCell>
-                  <TableCell size="small">{t("editor.overview.key", { index: selectedKey })} </TableCell>
-                  {showColors && <TableCell>{t("editor.overview.color")}</TableCell>}
-                  <TableCell size="small" sx={{ pr: "1rem", py: 0 }} />
+                  {showColors && (
+                    <TableCell size="small" padding="none" sx={{ width: (theme) => theme.spacing(3) }}>
+                      <Typography sx={{ fontSize: "0.8rem" }}>{t("editor.overview.color")}</Typography>
+                    </TableCell>
+                  )}
+                  <TableCell size="small" sx={{ pl: 0, pr: "1rem", py: 0 }} />
                 </TableRow>
               </TableHead>
             </Tooltip>