Update Settings Modal

src/components/elements.tsx

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

src/components/modal.tsx

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

src/components/settings.tsx

@@ -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,73 +107,79 @@ const Settings = ({ themes, search }: ISettingsProps) => {
   if (themes || search) {
     return (
       <Modal element="icon" icon="settings" title="Settings">
-        {themes && (
+        <ContentContainer>
-          <Section>
+          {themes && (
-            <SectionHeadline>Theme</SectionHeadline>
+            <Section>
-            <FormContainer>
+              <SectionHeadline>Theme</SectionHeadline>
-              <div>
+              <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"
-              </div>
+                  ></ThemeSelect>
-              <div>
+                </div>
-                <ThemeHeader>Dark</ThemeHeader>
+                <div>
-                <ThemeSelect
+                  <ThemeHeader>Dark</ThemeHeader>
-                  items={themes}
+                  <ThemeSelect
-                  onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
+                    items={themes}
-                  current={currentDarkTheme}
+                    onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
-                  testId="dark"
+                    current={currentDarkTheme}
-                ></ThemeSelect>
+                    testId="dark"
-              </div>
+                  ></ThemeSelect>
-            </FormContainer>
+                </div>
-            <Button
+                <div>
-              data-testid="button-submit"
+                  <Button
-              onClick={() => {
+                    data-testid="button-submit"
-                if (newLightTheme) setTheme("light", newLightTheme);
+                    onClick={() => {
-                if (newDarkTheme) setTheme("dark", newDarkTheme);
+                      if (newLightTheme) setTheme("light", newLightTheme);
-              }}
+                      if (newDarkTheme) setTheme("dark", newDarkTheme);
-            >
+                    }}
-              Apply
+                  >
-            </Button>
+                    Apply
-            <Button
+                  </Button>
-              data-testid="button-refresh"
+                </div>
-              onClick={() => window.location.reload()}
+                <div>
-            >
+                  <Button
-              Refresh
+                    data-testid="button-refresh"
-            </Button>
+                    onClick={() => window.location.reload()}
-          </Section>
+                  >
-        )}
+                    Refresh
-        {search && (
+                  </Button>
-          <Section>
+                </div>
-            <SectionHeadline>Search Providers</SectionHeadline>
+              </FormContainer>
-            <>
+            </Section>
-              <Text>Default Search Provider</Text>
+          )}
-              <Code>{search.defaultProvider}</Code>
+          {search && (
-            </>
+            <Section>
-            <>
+              <SectionHeadline>Search Providers</SectionHeadline>
-              {search.providers && (
+              <>
-                <Table>
+                <Text>Default Search Provider</Text>
-                  <tbody>
+                <Code>{search.defaultProvider}</Code>
-                    <TableRow>
+              </>
-                      <HeadCell>Search Provider</HeadCell>
+              <>
-                      <HeadCell>Prefix</HeadCell>
+                {search.providers && (
-                    </TableRow>
+                  <Table>
-                    {search.providers.map(({ name, prefix }, index) => (
+                    <tbody>
-                      <TableRow key={name + index}>
+                      <TableRow>
-                        <TableCell>{name}</TableCell>
+                        <HeadCell>Search Provider</HeadCell>
-                        <TableCell>{prefix}</TableCell>
+                        <HeadCell>Prefix</HeadCell>
                       </TableRow>
-                    ))}
+                      {search.providers.map(({ name, prefix }, index) => (
-                  </tbody>
+                        <TableRow key={name + index}>
-                </Table>
+                          <TableCell>{name}</TableCell>
-              )}
+                          <TableCell>{prefix}</TableCell>
-            </>
+                        </TableRow>
-          </Section>
+                      ))}
-        )}
+                    </tbody>
+                  </Table>
+                )}
+              </>
+            </Section>
+          )}
+        </ContentContainer>
       </Modal>
     );
   } else {