From 875c5e0da9465376ca660d6c437606864cd6db3e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Thu, 29 Apr 2021 04:27:06 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20components=20ConditionBadg?=
 =?UTF-8?q?e.js=20and=20ButtonSmallX.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Documentation is missing
---
 code/frontend/src/components/ButtonSmallX.js  | 14 ++++++++
 .../src/components/ButtonSmallX.module.css    | 23 +++++++++++++
 .../frontend/src/components/ConditionBadge.js | 22 +++++++++++++
 .../src/components/ConditionBadge.module.css  | 33 +++++++++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 code/frontend/src/components/ButtonSmallX.js
 create mode 100644 code/frontend/src/components/ButtonSmallX.module.css
 create mode 100644 code/frontend/src/components/ConditionBadge.js
 create mode 100644 code/frontend/src/components/ConditionBadge.module.css

diff --git a/code/frontend/src/components/ButtonSmallX.js b/code/frontend/src/components/ButtonSmallX.js
new file mode 100644
index 0000000..7d0cff3
--- /dev/null
+++ b/code/frontend/src/components/ButtonSmallX.js
@@ -0,0 +1,14 @@
+import React from "react"
+import Style from "./ButtonSmallX.module.css"
+import classNames from "classnames"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import { faTimes } from "@fortawesome/free-solid-svg-icons"
+
+
+export default function ButtonSmallX({ children, className, ...props }) {
+    return (
+        <button type={"button"} className={classNames(Style.ButtonSmallX, className)} {...props}>
+            <FontAwesomeIcon icon={faTimes}/>
+        </button>
+    )
+}
diff --git a/code/frontend/src/components/ButtonSmallX.module.css b/code/frontend/src/components/ButtonSmallX.module.css
new file mode 100644
index 0000000..7b01adf
--- /dev/null
+++ b/code/frontend/src/components/ButtonSmallX.module.css
@@ -0,0 +1,23 @@
+.ButtonSmallX {
+    border-width: 0;
+    border-radius: 9999px;
+    line-height: 0;
+    height: 18px;
+    width: 18px;
+    vertical-align: baseline;
+    background-color: var(--bg-field-off);
+    color: var(--fg-field-off);
+    cursor: pointer;
+    position: relative;
+    top: -1px;
+}
+
+.ButtonSmallX:focus {
+    outline: none;
+    background-color: var(--bg-field-on);
+    color: var(--fg-field-on);
+}
+
+.ButtonSmallX:focus-visible {
+    outline: 2px dashed var(--outline);
+}
diff --git a/code/frontend/src/components/ConditionBadge.js b/code/frontend/src/components/ConditionBadge.js
new file mode 100644
index 0000000..bd1c468
--- /dev/null
+++ b/code/frontend/src/components/ConditionBadge.js
@@ -0,0 +1,22 @@
+import React from "react"
+import Style from "./ConditionBadge.module.css"
+import classNames from "classnames"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import ButtonSmallX from "./ButtonSmallX"
+
+
+export default function ConditionBadge({ color, icon, onDelete, children, className, ...props }) {
+    return (
+        <div className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`], className)} {...props}>
+            <div className={Style.Icon}>
+                <FontAwesomeIcon icon={icon}/>
+            </div>
+            <div>
+                {children}
+            </div>
+            <div>
+                <ButtonSmallX onClick={onDelete}/>
+            </div>
+        </div>
+    )
+}
diff --git a/code/frontend/src/components/ConditionBadge.module.css b/code/frontend/src/components/ConditionBadge.module.css
new file mode 100644
index 0000000..02b110e
--- /dev/null
+++ b/code/frontend/src/components/ConditionBadge.module.css
@@ -0,0 +1,33 @@
+.ConditionBadge {
+    display: inline-flex;
+
+    gap: 5px;
+    padding: 0 5px;
+    border-radius: 25px;
+    margin: 0 2px;
+}
+
+.ConditionBadgeRed {
+    background-color: var(--bg-red);
+    color: var(--fg-red)
+}
+
+.ConditionBadgeYellow {
+    background-color: var(--bg-yellow);
+    color: var(--fg-yellow)
+}
+
+.ConditionBadgeGrey {
+    background-color: var(--bg-grey);
+    color: var(--fg-grey)
+}
+
+.ConditionBadgeGreen {
+    background-color: var(--bg-green);
+    color: var(--fg-green)
+}
+
+.Icon {
+    width: 15px;
+    text-align: center;
+}
\ No newline at end of file