feat: colors for card tags

src/components/CardTag/CardTag.tsx

@@ -0,0 +1,30 @@
+import { CardTagSchema } from "../../client";
+import { Pill, useMantineColorScheme } from "@mantine/core";
+
+type Props = {
+    tag: Partial<CardTagSchema>;
+}
+
+const CardTag = ({ tag }: Props) => {
+    const theme = useMantineColorScheme();
+
+    let color = "lightgray";
+    if (tag?.tagColor?.backgroundColor === "inherit" && theme.colorScheme == "light") {
+        color = "gray";
+    }
+
+    return (
+        <Pill
+            key={tag.id}
+            style={{
+                color,
+                backgroundColor: tag?.tagColor?.backgroundColor,
+                border: "1px solid " + tag?.tagColor?.color,
+            }}
+        >
+            {tag.name}
+        </Pill>
+    );
+};
+
+export default CardTag;

src/components/Dnd/Cards/CardSummaryItem/CardSummaryItem.tsx

@@ -83,6 +83,11 @@ const CardSummaryItem: FC<Props> = ({ cardSummary, color }) => {
                         direction={"column"}
                         justify={"space-between"}
                     >
+                        <Text
+                            size={"sm"}
+                            c={"gray.6"}>
+                            {cardSummary.shipmentWarehouseName || "Склад не указан"}
+                        </Text>
                         <Text
                             c={"gray.6"}
                             size={"sm"}

src/components/Dnd/Cards/CardTags/CardTags.module.css

@@ -1,5 +1,11 @@
 .add-tag-button {
-    background-color: var(--mantine-color-dark-6);
+    @mixin light {
+        background-color: var(--mantine-color-gray-1);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+    color: gray;
     border: 1px gray dashed;
     border-radius: 50%;
     width: 1.5rem;
@@ -9,13 +15,16 @@
 }
 
 .add-tag-button:hover {
-    border-color: white;
+    @mixin light {
+        border-color: black;
+        color: black;
+    }
+    @mixin dark {
+        border-color: white;
+        color: white;
+    }
 }
 
 .add-tag-button-icon {
-    color: gray;
-}
-
-.add-tag-button-icon:hover {
-    color: white;
+    color: inherit !important;
 }

src/components/Dnd/Cards/CardTags/CardTags.tsx

@@ -1,4 +1,4 @@
-import { Center, Checkbox, Group, Menu, Pill, rem, Stack } from "@mantine/core";
+import { Center, Checkbox, Group, Menu, rem, Stack } from "@mantine/core";
 import { CardTagSchema, CardTagService } from "../../../../client";
 import { IconPlus } from "@tabler/icons-react";
 import styles from "./CardTags.module.css";
@@ -7,6 +7,7 @@ import React from "react";
 import { useProjectsContext } from "../../../../contexts/ProjectsContext.tsx";
 import { notifications } from "../../../../shared/lib/notifications.ts";
 import { useCardPageContext } from "../../../../pages/CardsPage/contexts/CardPageContext.tsx";
+import CardTag from "../../../CardTag/CardTag.tsx";
 
 type Props = {
     cardId?: number;
@@ -72,25 +73,12 @@ const CardTags = ({ tags, cardId, groupId }: Props) => {
         </Menu>
     );
 
-    const pills = tags.map(tag => {
-        return (
-            <Pill
-                key={tag.id}
-                style={{
-                    color: "gray",
-                    backgroundColor: "var(--mantine-color-dark-6)",
-                    border: "1px solid gray",
-                }}
-            >
-                {tag.name}
-            </Pill>
-        );
-    });
-
     return (
         <Group gap={rem(4)}>
             {addTagButton}
-            {pills}
+            {tags.map(tag => (
+                <CardTag key={tag.id} tag={tag} />
+            ))}
         </Group>
     );
 };