add: restore colored tag chip

src/client/component/tagchip.tsx

@@ -1,48 +1,15 @@
-import { Chip, colors } from "@mui/material";
-import { ChipTypeMap } from "@mui/material/Chip";
-import { emphasize, Theme } from "@mui/material/styles";
+import * as colors from "@mui/material/colors";
+import Chip, { ChipTypeMap } from "@mui/material/Chip";
+import { emphasize, styled, Theme, useTheme } from "@mui/material/styles";
 import React from "react";
 import { Link as RouterLink } from "react-router-dom";
 
 type TagChipStyleProp = {
-    color: string;
+    color: `rgba(${number},${number},${number},${number})` | `#${string}` | 'default';
 };
 
-const useTagStyles = (theme: Theme) => ({
-    root: (props: TagChipStyleProp) => ({
-        color: theme.palette.getContrastText(props.color),
-        backgroundColor: props.color,
-    }),
-    clickable: (props: TagChipStyleProp) => ({
-        "&:hover, &:focus": {
-            backgroundColor: emphasize(props.color, 0.08),
-        },
-    }),
-    deletable: {
-        "&:focus": {
-            backgroundColor: (props: TagChipStyleProp) => emphasize(props.color, 0.2),
-        },
-    },
-    outlined: {
-        color: (props: TagChipStyleProp) => props.color,
-        border: (props: TagChipStyleProp) => `1px solid ${props.color}`,
-        "$clickable&:hover, $clickable&:focus, $deletable&:focus": {
-            // backgroundColor:(props:TagChipStyleProp)=> (props.color,theme.palette.action.hoverOpacity),
-        },
-    },
-    icon: {
-        color: "inherit",
-    },
-    deleteIcon: {
-        // color:(props:TagChipStyleProp)=> (theme.palette.getContrastText(props.color),0.7),
-        "&:hover, &:active": {
-            color: (props: TagChipStyleProp) => theme.palette.getContrastText(props.color),
-        },
-    },
-});
-
 const { blue, pink } = colors;
-const getTagColorName = (tagname: string): string => {
+const getTagColorName = (tagname: string): TagChipStyleProp['color'] => {
     if (tagname.startsWith("female")) {
         return pink[600];
     } else if (tagname.startsWith("male")) {
@@ -57,8 +24,21 @@ type ColorChipProp = Omit<ChipTypeMap["props"], "color"> & TagChipStyleProp & {
 
 export const ColorChip = (props: ColorChipProp) => {
     const { color, ...rest } = props;
-    // const classes = useTagStyles({color : color !== "default" ? color : "#000"});
-    return <Chip color="default" {...rest}></Chip>;
+    const theme = useTheme();
+
+    let newcolor = color;
+    if (color === "default"){
+        newcolor = "#ebebeb";
+    }
+    return <Chip 
+    sx={{
+        color: theme.palette.getContrastText(newcolor),
+        backgroundColor: newcolor,
+        ["&:hover, &:focus"]: {
+            backgroundColor: emphasize(newcolor, 0.08),
+        },
+    }} 
+    {...rest}></Chip>;
 };
 
 type TagChipProp = Omit<ChipTypeMap["props"], "color"> & {
@@ -67,29 +47,32 @@ type TagChipProp = Omit<ChipTypeMap["props"], "color"> & {
 
 export const TagChip = (props: TagChipProp) => {
     const { tagname, label, clickable, ...rest } = props;
-    let newlabel: string | undefined = undefined;
+    const colorName = getTagColorName(tagname);
+
+    let newlabel: React.ReactNode = label;
     if (typeof label === "string") {
-        if (label.startsWith("female:")) {
-            newlabel = "♀ " + label.slice(7);
-        } else if (label.startsWith("male:")) {
-            newlabel = "♂ " + label.slice(5);
+        const female = "female:";
+        const male = "male:";
+        if (label.startsWith(female)) {
+            newlabel = "♀ " + label.slice(female.length);
+        } else if (label.startsWith(male)) {
+            newlabel = "♂ " + label.slice(male.length);
         }
     }
+    
     const inner = clickable
         ? (
             <ColorChip
-                color={getTagColorName(tagname)}
+                color={colorName}
                 clickable={clickable}
                 label={newlabel ?? label}
                 {...rest}
                 component={RouterLink}
                 to={`/search?allow_tag=${tagname}`}
-            >
-            </ColorChip>
+            />
         )
         : (
-            <ColorChip color={getTagColorName(tagname)} clickable={clickable} label={newlabel ?? label} {...rest}>
-            </ColorChip>
+            <ColorChip color={colorName} clickable={clickable} label={newlabel ?? label} {...rest}/>
         );
     return inner;
 };