feat: deal ids

src/app/deals/components/shared/DealCard/DealCard.module.css

@@ -1,8 +1,6 @@
 
 .container {
-    padding: var(--mantine-spacing-xs);
+    padding: 0;
-    gap: var(--mantine-spacing-xs);
-
     @mixin light {
         background-color: var(--color-light-white-blue);
     }
@@ -11,6 +9,23 @@
     }
 }
 
+.deal-data {
+    padding: var(--mantine-spacing-xs);
+    gap: var(--mantine-spacing-xs);
+}
+
+.deal-id {
+    border-top-right-radius: var(--mantine-radius-md);
+    border-bottom-left-radius: var(--mantine-radius-md);
+    padding-inline: var(--mantine-spacing-xs);
+    @mixin light {
+        background-color: lightblue;
+    }
+    @mixin dark {
+        background-color: var(--color-dark);
+    }
+}
+
 .first-tag {
     @mixin light {
         background-color: lightblue;

src/app/deals/components/shared/DealCard/DealCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Pill, Stack, Text } from "@mantine/core";
+import { Box, Card, Group, Pill, Stack, Text } from "@mantine/core";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import { DealSchema } from "@/lib/client";
@@ -20,16 +20,30 @@ const DealCard = ({ deal }: Props) => {
         <Card
             onClick={onClick}
             className={styles.container}>
-            <Text c={"dodgerblue"}>{deal.name}</Text>
+            <Group
-            <Stack gap={0}>
+                justify={"space-between"}
-                <Text>Wb электросталь</Text>
+                ml={"xs"}
-                <Text>19 000 руб.</Text>
+                align={"start"}>
-                <Text>130 тов.</Text>
+                <Text
-            </Stack>
+                    c={"dodgerblue"}
-            <Group gap={"xs"}>
+                    mt={"xs"}>
-                <Pill className={styles["first-tag"]}>Срочно</Pill>
+                    {deal.name}
-                <Pill className={styles["second-tag"]}>Бесплатно</Pill>
+                </Text>
+                <Box className={styles["deal-id"]}>
+                    <Text>ID: {deal.id}</Text>
+                </Box>
             </Group>
+            <Stack className={styles["deal-data"]}>
+                <Stack gap={0}>
+                    <Text>Wb электросталь</Text>
+                    <Text>19 000 руб.</Text>
+                    <Text>130 тов.</Text>
+                </Stack>
+                <Group gap={"xs"}>
+                    <Pill className={styles["first-tag"]}>Срочно</Pill>
+                    <Pill className={styles["second-tag"]}>Бесплатно</Pill>
+                </Group>
+            </Stack>
         </Card>
     );
 };

src/app/global.css

@@ -6,6 +6,7 @@
     --color-light-aqua: #e0f0f4;
     --color-light-white-blue: #f5fbfc;
     --color-light-whitesmoke: #fcfdff;
+    --color-dark: #1c1c1c;
     --mantine-color-dark-7-5: #212121;
     /* Shadows */
     --light-shadow: 2px 2px 5px darkgray;

src/components/layout/Navbar/Navbar.module.css

@@ -1,3 +1,12 @@
+.background {
+    @mixin light {
+        background-color: var(--color-light-gray-blue);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}
+
 .link {
     width: 100%;
     height: rem(50px);

src/components/layout/Navbar/Navbar.tsx

@@ -4,6 +4,7 @@ import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
 import Logo from "@/components/ui/Logo/Logo";
 import NavbarLinks from "./NavbarLinks";
+import styles from "./Navbar.module.css";
 
 const linksData = [
     {
@@ -20,7 +21,7 @@ const linksData = [
 
 const Navbar = () => {
     return (
-        <Box style={{ backgroundColor: "var(--color-light-gray-blue)" }}>
+        <Box className={styles.background}>
             <PageBlock
                 style={{
                     marginBlock: "var(--mantine-spacing-md)",