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,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 {