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

---
 code/frontend/src/components/TextArea.js      | 22 +++++++++++++
 .../src/components/TextArea.module.css        | 32 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 code/frontend/src/components/TextArea.js
 create mode 100644 code/frontend/src/components/TextArea.module.css

diff --git a/code/frontend/src/components/TextArea.js b/code/frontend/src/components/TextArea.js
new file mode 100644
index 0000000..75508be
--- /dev/null
+++ b/code/frontend/src/components/TextArea.js
@@ -0,0 +1,22 @@
+import React from "react"
+import Style from "./TextArea.module.css"
+import classNames from "classnames"
+
+
+/**
+ * A multiline text field which can optionally be resized.
+ *
+ * @param resize - `true` if the resizing the textarea should be allowed, `false` otherwise.
+ * @param children - The value of the `<textarea>`.
+ * @param className - Additional class(es) to add to the textarea.
+ * @param props - Additional props to pass to the textarea.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function TextArea({ resize, children, className, ...props }) {
+    return (
+        <textarea className={classNames(Style.TextArea, resize ? Style.TextAreaResizable : Style.TextAreaNoResize, className)} {...props}>
+            {children}
+        </textarea>
+    )
+}
diff --git a/code/frontend/src/components/TextArea.module.css b/code/frontend/src/components/TextArea.module.css
new file mode 100644
index 0000000..d0391a8
--- /dev/null
+++ b/code/frontend/src/components/TextArea.module.css
@@ -0,0 +1,32 @@
+.TextArea {
+    /* Remember the margin! */
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
+
+    border-radius: 25px;
+    border-width: 0;
+
+    min-height: 28px;
+    padding: 10px 20px;
+    margin: 2px;
+
+    color: var(--fg-field-off);
+    background-color: var(--bg-field-off);
+
+    font-family: var(--font-regular);
+}
+
+.TextArea:focus {
+    outline: 0;
+
+    color: var(--fg-field-on);
+    background-color: var(--bg-field-on);
+}
+
+.TextAreaResizable {
+    resize: vertical;
+}
+
+.TextAreaNoResize {
+    resize: none;
+}
\ No newline at end of file