From c080598e71ef6fc6d53a1d26436a076ce9d6eac8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 10 Dec 2024 09:30:26 +0100
Subject: [PATCH] fix: adjust styles

---
 src/components/panel/EditPanel.tsx    | 15 ++++++++++++---
 src/components/panel/KeysPanel.tsx    |  2 +-
 src/components/panel/Panel.module.css | 21 ++++++++++++++-------
 src/components/panel/PanelEditor.tsx  |  1 +
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/panel/EditPanel.tsx b/src/components/panel/EditPanel.tsx
index ef74ceb..f2a30c7 100644
--- a/src/components/panel/EditPanel.tsx
+++ b/src/components/panel/EditPanel.tsx
@@ -69,12 +69,11 @@ const PanelEdit = () => {
                 key,
                 namespace,
                 value,
-            })  
+            })
         } catch (error) {
             const message = i18n.t('There was an error updating the key')
             showError(message)
         }
-       
     }
 
     useEffect(() => {
@@ -96,12 +95,21 @@ const PanelEdit = () => {
             <PanelHeader>
                 <div
                     style={{
+                        width: '100%',
                         display: 'flex',
                         flexDirection: 'row',
+                        alignItems: 'center',
                         justifyContent: 'space-between',
                     }}
                 >
-                    <span>{key && key}</span>
+                    <span
+                        style={{
+                            fontSize: '15px',
+                            fontWeight: '700',
+                        }}
+                    >
+                        {key && key}
+                    </span>
 
                     <Button
                         aria-label="Save"
@@ -109,6 +117,7 @@ const PanelEdit = () => {
                         onClick={handleUpdate}
                         title="Save"
                         primary
+                        small
                         loading={loading}
                     >
                         {i18n.t('Save changes')}
diff --git a/src/components/panel/KeysPanel.tsx b/src/components/panel/KeysPanel.tsx
index 6866365..01387a2 100644
--- a/src/components/panel/KeysPanel.tsx
+++ b/src/components/panel/KeysPanel.tsx
@@ -88,7 +88,7 @@ const KeysPanel = () => {
                     <PanelHeader>
                         <>
                             {' '}
-                            <b>{namespace}</b>
+                            <span>{namespace}</span>
                         </>
                     </PanelHeader>
 
diff --git a/src/components/panel/Panel.module.css b/src/components/panel/Panel.module.css
index b7ca098..47dbef8 100644
--- a/src/components/panel/Panel.module.css
+++ b/src/components/panel/Panel.module.css
@@ -7,27 +7,34 @@
     /* flex-direction: row; */
     /* font-size: 1rem; */
     display: grid;
-    grid-template-columns: 400px auto;
+    grid-template-columns: 296px auto;
     border: 1px solid var(--colors-grey300);
 }
 
 .panelHeader {
-    height: 5vh;
-    padding: 0.3em;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 0 0.5em;
     border-bottom: 1px solid var(--colors-grey300);
 }
+.panelHeader span {
+    font-size: 15px;
+    font-weight: 700;
+}
 
 .sidebar {
-    border-right: 1px solid var(--colors-grey300);
+    border-right: 1px solid var(--colors-grey400);
+    /* background: yellow; */
     /* margin-top: 0.5em */
     /* padding: 0.5em; */
-    /* width: 30%; */
+    /* width: 290px; */
     /* margin: 0.1em; */
 }
 
 .sidebarContent {
     padding: 0.5em;
-    margin-top: 0.5em;
+    margin-top: 0.2em;
     /* margin: 0; */
     /* padding: 0.3em; */
     /* width: 20%; */
@@ -72,7 +79,7 @@
 
 .main {
     display: grid;
-    grid-template-columns: 400px auto;
+    grid-template-columns: 296px auto;
 }
 
 /* --- keys */
diff --git a/src/components/panel/PanelEditor.tsx b/src/components/panel/PanelEditor.tsx
index 5fbefa0..8119ec1 100644
--- a/src/components/panel/PanelEditor.tsx
+++ b/src/components/panel/PanelEditor.tsx
@@ -10,6 +10,7 @@ type PanelEditorProps = {
 const PanelEditor = ({ value, handleChange }: PanelEditorProps) => {
     return (
         <CodeMirror
+            theme="dark"
             value={value}
             height="90vh"
             extensions={[json()]}