Styling Editor and Extensions pages

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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>
   );
 });
-    

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>
   );
 }

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)",