diff --git a/src/webapp/components/issues/SelectorInline.tsx b/src/webapp/components/issues/SelectorInline.tsx index 4c82a2f..497225c 100644 --- a/src/webapp/components/issues/SelectorInline.tsx +++ b/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 = React.memo(props => { const { value, items, onChange } = props; @@ -23,16 +23,7 @@ export const SelectorInline: React.FC = React.memo(props => return ( <> - + ) => void; +}; + +export type ButtonProps = { + $text: Props["text"]; +}; + +export const ButtonTag: React.FC = memo(({ text, onClick }) => { + return text ? ( + + ) : ( + + ); +}); + +export const Button = styled.button` + 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}; + `; + } + }} +`; diff --git a/src/webapp/pages/app/themes/customTheme.ts b/src/webapp/pages/app/themes/customTheme.ts index 48a9daa..4dc8b8c 100644 --- a/src/webapp/pages/app/themes/customTheme.ts +++ b/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", }, };