Merge remote-tracking branch 'origin/main' into main

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>
+    )
+}

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;
+}