From 1146c59a41ddd4b4cda14f6601437cd9bceb305a Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sun, 26 Jan 2025 21:26:42 +0100
Subject: [PATCH] feat: add opacity for categories (#2132)

---
 .../src/components/board/sections/category-section.tsx       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/board/sections/category-section.tsx b/apps/nextjs/src/components/board/sections/category-section.tsx
index edd863671..31a3ff109 100644
--- a/apps/nextjs/src/components/board/sections/category-section.tsx
+++ b/apps/nextjs/src/components/board/sections/category-section.tsx
@@ -3,8 +3,10 @@ import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
+import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { CategoryMenu } from "./category/category-menu";
 import { GridStack } from "./gridstack/gridstack";
+import classes from "./item.module.css";
 
 interface Props {
   section: CategorySection;
@@ -12,9 +14,10 @@ interface Props {
 
 export const BoardCategorySection = ({ section }: Props) => {
   const [opened, { toggle }] = useDisclosure(false);
+  const board = useRequiredBoard();
 
   return (
-    <Card withBorder p={0}>
+    <Card style={{ "--opacity": board.opacity / 100 }} withBorder p={0} className={classes.itemCard}>
       <Stack>
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>