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, onChange: (item: any) => void, @@ -28,7 +34,7 @@ const Select = ({ className, testId, }: ISelectProps) => ( - + ); 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) => { {themes && (
- Theme: + Theme - Light - setNewLightTheme(theme)} - current={currentLightTheme} - testId="light" - > - Dark - setNewDarkTheme(theme)} - current={currentDarkTheme} - testId="dark" - > +
+ Light + setNewLightTheme(theme)} + current={currentLightTheme} + testId="light" + > +
+
+ Dark + setNewDarkTheme(theme)} + current={currentDarkTheme} + testId="dark" + > +