fix: adjust styles

dhis2 · Dec 10, 2024 · c080598 · c080598
1 parent 59877d9
commit c080598
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git 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,19 +95,29 @@ 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"
                         name="save"
                         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
@@ -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
@@ -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
@@ -10,6 +10,7 @@ type PanelEditorProps = {
 const PanelEditor = ({ value, handleChange }: PanelEditorProps) => {
     return (
         <CodeMirror
+            theme="dark"
             value={value}
             height="90vh"
             extensions={[json()]}