Merge pull request #170 from cabcookie:improve-person-mention

Bessere Visualisierung von Akkordions
cabcookie · Aug 7, 2024 · 765a2ee · 765a2ee
2 parents b944bbf + 1d1b3cc
commit 765a2ee
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/components/crm/group-projects.tsx b/components/crm/group-projects.tsx
@@ -101,6 +101,7 @@ const GroupCrmProjects: FC<GroupCrmProjectsProps> = ({
         ),
         map((company: string) => (
           <DefaultAccordionItem
+            key={`${propertyName}-${company}`}
             value={`${propertyName}-${company}`}
             triggerTitle={company}
             badge={

diff --git a/components/ui-elements/accordion/DefaultAccordionItem.tsx b/components/ui-elements/accordion/DefaultAccordionItem.tsx
@@ -89,7 +89,9 @@ const DefaultAccordionItem = forwardRef<
                 )(triggerSubTitle)}
           </AccordionTriggerSubTitle>
         </AccordionTrigger>
-        <AccordionContent className="my-2">{children}</AccordionContent>
+        <AccordionContent className="my-2 bg-[--context-color-bg]">
+          {children}
+        </AccordionContent>
       </AccordionItem>
     )
 );

diff --git a/contexts/ContextContext.tsx b/contexts/ContextContext.tsx
@@ -45,7 +45,11 @@ export const ContextContextProvider: FC<ContextContextProviderProps> = ({
     if (!context) return;
     document.documentElement.style.setProperty(
       "--context-color",
-      `hsl(var(--context-color-${context}))`
+      `rgb(var(--context-color-${context}))`
+    );
+    document.documentElement.style.setProperty(
+      "--context-color-bg",
+      `rgba(var(--context-color-${context}), 0.05)`
     );
     document.documentElement.style.setProperty(
       "--context-color-hover",

diff --git a/docs/releases/next.md b/docs/releases/next.md
@@ -1,3 +1,3 @@
-# Einfaches Kopieren von CRM Projekten (Version :VERSION)
+# Bessere Visualisierung von Akkordions (Version :VERSION)
 
-- Jedes CRM Projekt hat beim Link zum Projekt (SFDC ID) auch eine Schaltfläche, um den Titel der Opportunity und dessen Salesforce Link in die Zwischenablage zu kopieren.
+- Wenn Akkordions aufgeklappt werden, erhalten sie jetzt einen leichten transparenten Hintergrund. Wenn darüber weitere Akkordions geöffnet werden, wird die Transparenz immer weniger und somit sollte sich leichter unterscheiden lassen, welcher Akkordion Kopf zu welchem Inhalt gehört.
diff --git a/styles/globals.css b/styles/globals.css
@@ -35,13 +35,15 @@
     --notes-margin: 0.2em;
     --notes-heading-mt: 1em;
 
-    --context-color-family: 55 85% 65%;
-    --context-color-hobby: 98 80% 62%;
-    --context-color-work: 181 80% 62%;
+    --context-color-family: 221, 239, 104;
+    --context-color-hobby: 151, 239, 92;
+    --context-color-work: 92, 239, 221;
+    --context-color: rgb(var(--context-color-family));
+    --context-color-bg: rgba(var(--context-color-family), 0.05);
+
     --context-color-family-secondary: 55 85% 90%;
     --context-color-hobby-secondary: 98 80% 87%;
     --context-color-work-secondary: 181 80% 87%;
-    --context-color: hsl(var(--context-color-family));
     --context-color-secondary: hsl(var(--context-color-family-secondary));
 
     --context-color-family-hover: 55 68% 65%;