From eb5cb2dee67f5a69908c6fdcf92e7ece8a8abd2f Mon Sep 17 00:00:00 2001
From: Bastian Meissner <meissner.bastian@gmail.com>
Date: Tue, 23 Nov 2021 17:50:30 +0100
Subject: [PATCH] Update Settings Page

---
 src/components/modal.tsx    |  6 +++---
 src/components/select.tsx   | 10 ++++++++--
 src/components/settings.tsx | 35 ++++++++++++++++++++---------------
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 294ebfe..416e5bb 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -6,11 +6,11 @@ import { IconButton } from "./icon";
 
 const ModalContainer = styled.div`
   position: absolute;
+  top: 50%;
   left: 50%;
-  top: 1rem;
-  padding: 1rem;
-  transform: translate(-50%, 0%);
+  transform: translate(-50%, -50%);
   z-index: 10;
+  padding: 1rem;
   border: 1px solid ${(props) => props.theme.mainColor};
   background-color: ${(props) => props.theme.backgroundColor};
 `;
diff --git a/src/components/select.tsx b/src/components/select.tsx
index 80a7a11..2dd1c2e 100644
--- a/src/components/select.tsx
+++ b/src/components/select.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 
 export interface IItemProps {
   label: string;
@@ -13,6 +14,11 @@ export interface ISelectProps {
   testId?: string;
 }
 
+const List = styled.select`
+  border-radius: 0;
+  padding: 0.5rem;
+`;
+
 const update = (
   items: Array<IItemProps>,
   onChange: (item: any) => void,
@@ -28,7 +34,7 @@ const Select = ({
   className,
   testId,
 }: ISelectProps) => (
-  <select
+  <List
     data-testid={"select" + (testId ? "-" + testId : "")}
     onChange={(e) => update(items, onChange, e)}
     className={className}
@@ -57,7 +63,7 @@ const Select = ({
         );
       }
     })}
-  </select>
+  </List>
 );
 
 export default Select;
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index 8d655db..a95a74b 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -10,6 +10,7 @@ import { Button, SubHeadline } from "./elements";
 import Modal from "./modal";
 
 export const FormContainer = styled.div`
+  display: flex;
   margin-bottom: 1em;
 `;
 
@@ -97,22 +98,26 @@ const Settings = ({ themes, search }: ISettingsProps) => {
       <Modal element="icon" icon="settings" title="Settings">
         {themes && (
           <Section>
-            <SectionHeadline>Theme:</SectionHeadline>
+            <SectionHeadline>Theme</SectionHeadline>
             <FormContainer>
-              <ThemeHeader>Light</ThemeHeader>
-              <ThemeSelect
-                items={themes}
-                onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
-                current={currentLightTheme}
-                testId="light"
-              ></ThemeSelect>
-              <ThemeHeader>Dark</ThemeHeader>
-              <ThemeSelect
-                items={themes}
-                onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
-                current={currentDarkTheme}
-                testId="dark"
-              ></ThemeSelect>
+              <div>
+                <ThemeHeader>Light</ThemeHeader>
+                <ThemeSelect
+                  items={themes}
+                  onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
+                  current={currentLightTheme}
+                  testId="light"
+                ></ThemeSelect>
+              </div>
+              <div>
+                <ThemeHeader>Dark</ThemeHeader>
+                <ThemeSelect
+                  items={themes}
+                  onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
+                  current={currentDarkTheme}
+                  testId="dark"
+                ></ThemeSelect>
+              </div>
             </FormContainer>
             <Button
               data-testid="button-submit"