From eb29b2d8eebc8695f231c77a0c5ec4591dfc34d0 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 22 Nov 2021 11:21:34 +0300
Subject: [PATCH] Styling Editor and Extensions pages

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+preferences/editor.tsx      | 9 ++++++---
 src/renderer/components/+preferences/preferences.tsx | 6 +++---
 src/renderer/components/switch/form-switcher.tsx     | 2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/+preferences/editor.tsx b/src/renderer/components/+preferences/editor.tsx
index 6f346eb63d..7fbd9ab524 100644
--- a/src/renderer/components/+preferences/editor.tsx
+++ b/src/renderer/components/+preferences/editor.tsx
@@ -42,7 +42,7 @@ export const Editor = observer(() => {
       <h2 data-testid="editor-configuration-header">Editor configuration</h2>
 
       <SubTitle title="Minimap"/>
-      <section>
+      <section className="mb-12">
         <div className="flex gaps justify-space-between">
           <div className="flex gaps align-center">
             <FormSwitch
@@ -67,7 +67,9 @@ export const Editor = observer(() => {
         </div>
       </section>
 
-      <section>
+      <hr className="mb-12"/>
+
+      <section className="mb-12">
         <SubTitle title="Line numbers"/>
         <Select
           options={Object.entries(EditorLineNumbersStyles).map(([value, label]) => ({ label, value }))}
@@ -77,6 +79,8 @@ export const Editor = observer(() => {
         />
       </section>
 
+      <hr className="mb-12"/>
+
       <section>
         <SubTitle title="Tab size"/>
         <Input
@@ -91,4 +95,3 @@ export const Editor = observer(() => {
     </section>
   );
 });
-    
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 5ad7c9524b..472a0055ff 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -109,14 +109,14 @@ export class Preferences extends React.Component {
 export function ExtensionSettings({ title, id, components: { Hint, Input }}: RegisteredAppPreference) {
   return (
     <React.Fragment>
-      <section id={id} className="small">
+      <section id={id} className="mb-12">
         <SubTitle title={title}/>
         <Input/>
-        <div className="hint">
+        <div className="pt-4">
           <Hint/>
         </div>
       </section>
-      <hr className="small"/>
+      <hr className="mb-12"/>
     </React.Fragment>
   );
 }
diff --git a/src/renderer/components/switch/form-switcher.tsx b/src/renderer/components/switch/form-switcher.tsx
index 549ab83207..14df95f676 100644
--- a/src/renderer/components/switch/form-switcher.tsx
+++ b/src/renderer/components/switch/form-switcher.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
   root: {
     margin: 0,
     "& .MuiTypography-root": {
-      fontSize: 16,
+      fontSize: 14,
       fontWeight: 500,
       flex: 1,
       color: "var(--textColorAccent)",