From ed7d39a65a246e950cf890edcde326cce811ee12 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Wed, 21 Apr 2021 01:03:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20BoxWithHeader=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/App.js                      | 49 +++++++++++++++----
 code/frontend/src/App.module.css              |  8 +--
 code/frontend/src/components/BoxWithHeader.js | 17 +++++++
 .../src/components/BoxWithHeader.module.css   | 27 ++++++++++
 code/frontend/src/index.css                   |  7 +--
 5 files changed, 92 insertions(+), 16 deletions(-)
 create mode 100644 code/frontend/src/components/BoxWithHeader.js
 create mode 100644 code/frontend/src/components/BoxWithHeader.module.css

diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index 3f90e96..2beb738 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -1,22 +1,51 @@
 import {useState} from "react"
 import classNames from "classnames"
 import Style from "./App.module.css"
-import Box from "./components/Box"
+import BoxWithHeader from "./components/BoxWithHeader"
 
 
 export default function App() {
     const [theme, ] = useState("ThemeDark");
 
     return (
-        <div className={classNames(Style["app"], theme)}>
-            <Box direction={"column"}>
-                <div>
-                    Ciao
-                </div>
-                <div>
-                    mondo!
-                </div>
-            </Box>
+        <div className={classNames(Style.App, theme)}>
+            <BoxWithHeader
+                header={{
+                    children: "Ciao mondo!"
+                }}
+                body={{
+                    children: (
+                        <div>
+                            <div>
+                                Il CSS è pura magia.
+                            </div>
+                            <div>
+                                Change my mind.
+                            </div>
+                        </div>
+                    ),
+                }}
+            />
+            <BoxWithHeader
+                header={{
+                    children: "Questa è un'altra Box."
+                }}
+                body={{
+                    children: (
+                        <div>
+                            E altro testo.
+                        </div>
+                    )
+                }}
+            />
+            <BoxWithHeader
+                header={{
+                    children: "Ecco, così va meglio.",
+                }}
+                body={{
+                    children: "No."
+                }}
+            />
         </div>
     )
 }
diff --git a/code/frontend/src/App.module.css b/code/frontend/src/App.module.css
index 1e88f01..6f2e85c 100644
--- a/code/frontend/src/App.module.css
+++ b/code/frontend/src/App.module.css
@@ -1,6 +1,8 @@
-.app {
-    min-height: 100vh;
-    min-width: 100vw;
+.App {
+    height: 100vh;
+    width: 100vw;
+
+    padding: 16px;
 
     background-color: var(--bg-primary);
     color: var(--fg-primary);
diff --git a/code/frontend/src/components/BoxWithHeader.js b/code/frontend/src/components/BoxWithHeader.js
new file mode 100644
index 0000000..8396286
--- /dev/null
+++ b/code/frontend/src/components/BoxWithHeader.js
@@ -0,0 +1,17 @@
+import React from "react"
+import Style from "./BoxWithHeader.module.css"
+import classNames from "classnames"
+
+
+export default function BoxWithHeader({ header, body, className, ...props }) {
+    return (
+        <div className={classNames(Style.BoxWithHeader, className)} {...props}>
+            <div className={classNames(Style.BoxHeader, header.className)}>
+                {header.children}
+            </div>
+            <div className={classNames(Style.BoxBody, body.className)}>
+                {body.children}
+            </div>
+        </div>
+    )
+}
diff --git a/code/frontend/src/components/BoxWithHeader.module.css b/code/frontend/src/components/BoxWithHeader.module.css
new file mode 100644
index 0000000..a5a52bb
--- /dev/null
+++ b/code/frontend/src/components/BoxWithHeader.module.css
@@ -0,0 +1,27 @@
+.BoxWithHeader {
+    margin: 25px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.BoxHeader {
+    padding: 10px 40px;
+    border-radius: 25px 25px 0 0;
+
+    background-color: var(--bg-light);
+
+    font-size: x-large;
+    font-family: var(--font-title);
+}
+
+.BoxBody {
+    min-height: 40px;
+    padding: 10px 40px;
+    border-radius: 0 0 25px 25px;
+
+    background-color: var(--bg-dark);
+
+    font-size: medium;
+    font-family: var(--font-regular);
+}
\ No newline at end of file
diff --git a/code/frontend/src/index.css b/code/frontend/src/index.css
index f8ad565..e418616 100644
--- a/code/frontend/src/index.css
+++ b/code/frontend/src/index.css
@@ -1,16 +1,17 @@
-@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Poppins&display=swap');
 
 * {
     box-sizing: border-box;
 }
 
 body {
+    --font-title: "Bree Serif", serif;
+    --font-regular: "Poppins", sans-serif;
+
     margin: 0;
 
     min-height: 100%;
     min-width: 100%;
-
-    font-family: "Bree Serif", serif;
 }
 
 .ThemeDark {