feat: create buttonTag and instance it on SelectorInline to get styles

src/webapp/components/issues/SelectorInline.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Menu } from "@material-ui/core";
 import { MenuItem } from "material-ui";
-import i18n from "$/utils/i18n";
+import { ButtonTag } from "../tag/ButtonTag";
 
 export const SelectorInline: React.FC<SelectorInlineProps> = React.memo(props => {
     const { value, items, onChange } = props;
@@ -23,16 +23,7 @@ export const SelectorInline: React.FC<SelectorInlineProps> = React.memo(props =>
 
     return (
         <>
-            <Button
-                aria-controls="simple-menu"
-                aria-haspopup="true"
-                variant="text"
-                onClick={onOpenMenu}
-                title={i18n.t("Double click to edit")}
-                style={{ height: text.length === 0 ? "70px" : undefined }}
-            >
-                {text}
-            </Button>
+            <ButtonTag text={text} onClick={onOpenMenu} />
             <Menu
                 id="simple-menu"
                 anchorEl={anchorEl}

src/webapp/components/tag/ButtonTag.tsx

@@ -0,0 +1,75 @@
+import styled, { css } from "styled-components";
+import customTheme from "$/webapp/pages/app/themes/customTheme";
+import { memo } from "react";
+
+type Props = {
+    text: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+export type ButtonProps = {
+    $text: Props["text"];
+};
+
+export const ButtonTag: React.FC<Props> = memo(({ text, onClick }) => {
+    return text ? (
+        <Button $text={text} onClick={onClick} aria-controls="simple-menu" aria-haspopup="true">
+            {text}
+        </Button>
+    ) : (
+        <Button $text={text} onClick={onClick} aria-controls="simple-menu" aria-haspopup="true">
+            {(text = "No Action")}
+        </Button>
+    );
+});
+
+export const Button = styled.button<ButtonProps>`
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 7px;
+    padding-inline: 4px;
+    border-radius: 19px;
+    min-height: 24px;
+    font-size: 0.8125rem;
+    width: 100%;
+    white-space: nowrap;
+    text-transform: lowercase;
+    text-transform: capitalize;
+
+    ${({ $text: $status }) => {
+        switch ($status) {
+            case "Not treated":
+                return css`
+                    color: ${customTheme.color.dark};
+                    background-color: ${customTheme.color.lighterGrey};
+                `;
+            case "Dismissed":
+                return css`
+                    color: ${customTheme.color.light};
+                    background-color: ${customTheme.color.grey};
+                `;
+            case "Resolved":
+                return css`
+                    color: ${customTheme.color.light};
+                    background-color: ${customTheme.color.intenseGreen};
+                `;
+            case "Waiting for focal point":
+                return css`
+                    color: ${customTheme.color.lightWarning};
+                    background-color: ${customTheme.color.warning};
+                `;
+            case "In treatment":
+                return css`
+                    color: ${customTheme.color.green};
+                    background-color: ${customTheme.color.lighterGreen};
+                `;
+            default:
+                return css`
+                    color: ${customTheme.color.dark};
+                    background-color: ${customTheme.color.lighterGrey};
+                `;
+        }
+    }}
+`;

src/webapp/pages/app/themes/customTheme.ts

@@ -6,8 +6,12 @@ const customTheme = {
         lightGrey: "#D7D7D7",
         lighterGrey: "#ebebeb",
         green: "#163318",
+        intenseGreen: "#4CAF50",
         lightGreen: "#B5DFB7",
+        lighterGreen: "#D8EDD9",
         lightRed: "#FFB8B8",
+        lightWarning: "#FFF4E5",
+        warning: "#663C00",
     },
 };