From 863419d3bcae372c6fd7e62811d8878dcbf1da9d Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Wed, 21 Apr 2021 18:42:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Add=20layout=20to=20PageSettings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/BoxHeaderOnly.js  | 12 ++++++++++++
 .../src/components/BoxHeaderOnly.module.css    |  9 +++++++++
 code/frontend/src/routes/PageSettings.js       | 18 +++++++++++++++++-
 .../src/routes/PageSettings.module.css         |  6 ++++++
 4 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 code/frontend/src/components/BoxHeaderOnly.js
 create mode 100644 code/frontend/src/components/BoxHeaderOnly.module.css

diff --git a/code/frontend/src/components/BoxHeaderOnly.js b/code/frontend/src/components/BoxHeaderOnly.js
new file mode 100644
index 0000000..ddb816f
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/code/frontend/src/components/BoxHeaderOnly.module.css b/code/frontend/src/components/BoxHeaderOnly.module.css
new file mode 100644
index 0000000..77511da
--- /dev/null
+++ b/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);
+}
diff --git a/code/frontend/src/routes/PageSettings.js b/code/frontend/src/routes/PageSettings.js
index fad7ecb..771e69a 100644
--- a/code/frontend/src/routes/PageSettings.js
+++ b/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>
     )
 }
diff --git a/code/frontend/src/routes/PageSettings.module.css b/code/frontend/src/routes/PageSettings.module.css
index ce1af54..1f6bff8 100644
--- a/code/frontend/src/routes/PageSettings.module.css
+++ b/code/frontend/src/routes/PageSettings.module.css
@@ -1,3 +1,9 @@
 .PageSettings {
+    display: flex;
+    flex-direction: column;
 
+    grid-gap: 10px;
+
+    width: 100%;
+    height: 100%;
 }