🔧 Add layout to PageSettings

code/frontend/src/components/BoxHeaderOnly.js

@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./BoxHeaderOnly.module.css"
+import classNames from "classnames"
+
+
+export default function BoxHeaderOnly({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.BoxHeaderOnly, className)} {...props}>
+            {children}
+        </div>
+    )
+}

code/frontend/src/components/BoxHeaderOnly.module.css

@@ -0,0 +1,9 @@
+.BoxHeaderOnly {
+    padding: 10px 40px;
+    border-radius: 25px;
+
+    background-color: var(--bg-light);
+
+    font-size: x-large;
+    font-family: var(--font-title);
+}

code/frontend/src/routes/PageSettings.js

@@ -1,12 +1,28 @@
 import React from "react"
 import Style from "./PageSettings.module.css"
 import classNames from "classnames"
+import BoxHeaderOnly from "../components/BoxHeaderOnly"
+import BoxWithHeader from "../components/BoxWithHeader"
 
 
 export default function PageSettings({ children, className, ...props }) {
     return (
         <div className={classNames(Style.PageSettings, className)} {...props}>
-            {children}
+            <BoxHeaderOnly>
+                You are currently logged in as:
+            </BoxHeaderOnly>
+            <BoxHeaderOnly>
+                Switch theme:
+            </BoxHeaderOnly>
+            <BoxWithHeader header={"Change your email address"}>
+
+            </BoxWithHeader>
+            <BoxWithHeader header={"Alert settings"}>
+
+            </BoxWithHeader>
+            <BoxWithHeader header={"Change your password"}>
+
+            </BoxWithHeader>
         </div>
     )
 }

code/frontend/src/routes/PageSettings.module.css

@@ -1,3 +1,9 @@
 .PageSettings {
+    display: flex;
+    flex-direction: column;
 
+    grid-gap: 10px;
+
+    width: 100%;
+    height: 100%;
 }