Update Settings Modal

This commit is contained in:
Bastian Meissner 2021-11-24 21:30:44 +01:00
parent eb5cb2dee6
commit add184d580
3 changed files with 116 additions and 84 deletions

View file

@ -28,7 +28,7 @@ export const ItemList = styled.ul`
padding: 0;
list-style: none;
@media (max-width: 750px) {
@media (max-width: 766px) {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
`;

View file

@ -5,14 +5,28 @@ import { Headline } from "./elements";
import { IconButton } from "./icon";
const ModalContainer = styled.div`
position: absolute;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
padding: 1rem;
z-index: 1;
max-height: 100%;
overflow-y: auto;
box-sizing: border-box;
border: 1px solid ${(props) => props.theme.mainColor};
background-color: ${(props) => props.theme.backgroundColor};
padding: 1rem;
@media (max-width: 766px) {
width: 100%;
height: 100%;
}
`;
const Text = styled.p`
@ -32,6 +46,7 @@ const Text = styled.p`
const TitleContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
@ -70,6 +85,18 @@ const Modal = ({
return (
<>
<ModalContainer hidden={modalHidden}>
<TitleContainer>
<Headline>{title}</Headline>
<IconButton
icon="close"
testid="close-button"
onClick={() => closeModal()}
/>
</TitleContainer>
{children}
</ModalContainer>
{element === "icon" && (
<IconButton
icon={icon ?? ""}
@ -83,18 +110,6 @@ const Modal = ({
{text}
</Text>
)}
<ModalContainer hidden={modalHidden}>
<TitleContainer>
<Headline>{title}</Headline>
<IconButton
icon="close"
testid="close-button"
onClick={() => closeModal()}
/>
</TitleContainer>
{children}
</ModalContainer>
</>
);
};

View file

@ -10,7 +10,9 @@ import { Button, SubHeadline } from "./elements";
import Modal from "./modal";
export const FormContainer = styled.div`
display: flex;
display: inline-grid;
grid-template-columns: auto auto;
grid-gap: 0.5rem 1rem;
margin-bottom: 1em;
`;
@ -56,7 +58,6 @@ const Code = styled.p`
`;
const ThemeHeader = styled.p`
grid-column: 1 / 4;
color: ${(props) => props.theme.accentColor};
`;
@ -76,6 +77,16 @@ const ThemeSelect = styled(Select)`
}
`;
const ContentContainer = styled.div`
display: flex;
justify-content: space-between;
flex-direction: row;
@media (max-width: 766px) {
flex-direction: column;
}
`;
interface ISettingsProps {
themes: Array<IThemeProps> | undefined;
search: ISearchProps | undefined;
@ -96,6 +107,7 @@ const Settings = ({ themes, search }: ISettingsProps) => {
if (themes || search) {
return (
<Modal element="icon" icon="settings" title="Settings">
<ContentContainer>
{themes && (
<Section>
<SectionHeadline>Theme</SectionHeadline>
@ -118,7 +130,7 @@ const Settings = ({ themes, search }: ISettingsProps) => {
testId="dark"
></ThemeSelect>
</div>
</FormContainer>
<div>
<Button
data-testid="button-submit"
onClick={() => {
@ -128,12 +140,16 @@ const Settings = ({ themes, search }: ISettingsProps) => {
>
Apply
</Button>
</div>
<div>
<Button
data-testid="button-refresh"
onClick={() => window.location.reload()}
>
Refresh
</Button>
</div>
</FormContainer>
</Section>
)}
{search && (
@ -163,6 +179,7 @@ const Settings = ({ themes, search }: ISettingsProps) => {
</>
</Section>
)}
</ContentContainer>
</Modal>
);
} else {