yolokube/dashboard
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update Settings Page

Browse source
This commit is contained in:
Bastian Meissner 2021-11-23 17:50:30 +01:00
parent e2ebb55768
commit eb5cb2dee6
3 changed files with 31 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/modal.tsx
View file

@ -6,11 +6,11 @@ import { IconButton } from "./icon";
const ModalContainer = styled.div` const ModalContainer = styled.div`
position: absolute; position: absolute;
top: 50%;
left: 50%; left: 50%;
top: 1rem; transform: translate(-50%, -50%);
padding: 1rem;
transform: translate(-50%, 0%);
z-index: 10; z-index: 10;
padding: 1rem;
border: 1px solid ${(props) => props.theme.mainColor}; border: 1px solid ${(props) => props.theme.mainColor};
background-color: ${(props) => props.theme.backgroundColor}; background-color: ${(props) => props.theme.backgroundColor};
`; `;

10
src/components/select.tsx
View file

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import styled from "styled-components";
export interface IItemProps { export interface IItemProps {
label: string; label: string;
@ -13,6 +14,11 @@ export interface ISelectProps {
testId?: string; testId?: string;
} }
const List = styled.select`
border-radius: 0;
padding: 0.5rem;
`;
const update = ( const update = (
items: Array<IItemProps>, items: Array<IItemProps>,
onChange: (item: any) => void, onChange: (item: any) => void,
@ -28,7 +34,7 @@ const Select = ({
className, className,
testId, testId,
}: ISelectProps) => ( }: ISelectProps) => (
<select <List
data-testid={"select" + (testId ? "-" + testId : "")} data-testid={"select" + (testId ? "-" + testId : "")}
onChange={(e) => update(items, onChange, e)} onChange={(e) => update(items, onChange, e)}
className={className} className={className}
@ -57,7 +63,7 @@ const Select = ({
); );
} }
})} })}
</select> </List>
); );
export default Select; export default Select;

35
src/components/settings.tsx
View file

@ -10,6 +10,7 @@ import { Button, SubHeadline } from "./elements";
import Modal from "./modal"; import Modal from "./modal";
export const FormContainer = styled.div` export const FormContainer = styled.div`
display: flex;
margin-bottom: 1em; margin-bottom: 1em;
`; `;
@ -97,22 +98,26 @@ const Settings = ({ themes, search }: ISettingsProps) => {
<Modal element="icon" icon="settings" title="Settings"> <Modal element="icon" icon="settings" title="Settings">
{themes && ( {themes && (
<Section> <Section>
<SectionHeadline>Theme:</SectionHeadline> <SectionHeadline>Theme</SectionHeadline>
<FormContainer> <FormContainer>
<ThemeHeader>Light</ThemeHeader> <div>
<ThemeSelect <ThemeHeader>Light</ThemeHeader>
items={themes} <ThemeSelect
onChange={(theme: IThemeProps) => setNewLightTheme(theme)} items={themes}
current={currentLightTheme} onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
testId="light" current={currentLightTheme}
></ThemeSelect> testId="light"
<ThemeHeader>Dark</ThemeHeader> ></ThemeSelect>
<ThemeSelect </div>
items={themes} <div>
onChange={(theme: IThemeProps) => setNewDarkTheme(theme)} <ThemeHeader>Dark</ThemeHeader>
current={currentDarkTheme} <ThemeSelect
testId="dark" items={themes}
></ThemeSelect> onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
current={currentDarkTheme}
testId="dark"
></ThemeSelect>
</div>
</FormContainer> </FormContainer>
<Button <Button
data-testid="button-submit" data-testid="button-submit"