feat: use content1 as bg color everywhere (#46)

jst-seminar-rostlab-tum · Nov 19, 2024 · da84b63 · da84b63
1 parent e6d30a7
commit da84b63
Show file tree

Hide file tree

Showing 7 changed files with 7,617 additions and 10,846 deletions.
diff --git a/src/components/Accordions/Accordion.tsx b/src/components/Accordions/Accordion.tsx
@@ -15,7 +15,7 @@ export default function CustomAccordion({ items, loading = false }: AccordionsPr
           <AccordionItem
             key={item.title}
             aria-label={item.title}
-            className="last:border-b-[none] dark:bg-black white:bg-white overflow-x-auto"
+            className="last:border-b-[none] bg-content1 white:bg-white overflow-x-auto"
             title={
               <div className="flex justify-between items-center w-full">
                 <div className="flex gap-4">

diff --git a/src/components/AlertsMenu/AlertButton.tsx b/src/components/AlertsMenu/AlertButton.tsx
@@ -3,15 +3,20 @@ import clsx from 'clsx';
 import NextImage from 'next/image';
 import { forwardRef } from 'react';
 
+import { useSidebar } from '@/domain/contexts/SidebarContext';
 import { AlertButtonProps } from '@/domain/props/AlertButtonProps';
 
 export const AlertButton = forwardRef<HTMLButtonElement, AlertButtonProps>(
   ({ icon, label, isSelected, onClick, className, ...props }, ref) => {
+    const { isSidebarOpen } = useSidebar();
     return (
       <Button
         isIconOnly
         radius="full"
-        className={clsx(isSelected ? 'bg-primary' : 'bg-content2', className)}
+        className={clsx(
+          { 'bg-content2': isSidebarOpen, 'bg-content1': !isSidebarOpen, 'bg-primary': isSelected },
+          className
+        )}
         onClick={onClick}
         ref={ref}
         {...props}

diff --git a/src/components/Chatbot/Chatbot.tsx b/src/components/Chatbot/Chatbot.tsx
@@ -190,7 +190,7 @@ export default function HungerMapChatbot() {
           <Button
             onClick={toggleChat}
             className="
-            relative flex items-center justify-center min-w-12 h-12 px-1 rounded-full bg-white dark:bg-black shadow-md"
+            relative flex items-center justify-center min-w-12 h-12 px-1 rounded-full bg-content1 shadow-md"
           >
             <Bot size={24} />
           </Button>

diff --git a/src/components/HungerAlert/HungerAlert.tsx b/src/components/HungerAlert/HungerAlert.tsx
@@ -24,7 +24,7 @@ export default function HungerAlert({ countryMapData }: HungerAlertProps) {
   return (
     <div className="absolute bottom-0 left-0 z-10 cursor-pointer" style={{ bottom: '18rem', left: '1.86rem' }}>
       <button
-        className={`${HungerAlertOperations.getPulseClasses()} p-1 text-sm`}
+        className={HungerAlertOperations.getPulseClasses()}
         onClick={toggleModal}
         style={{ width: '4rem', height: '4rem' }}
         type="button"

diff --git a/src/components/HungerAlert/style.css b/src/components/HungerAlert/style.css
@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
   border-radius: 50%;
-  background: #3F3F46;
+  background-color: hsl(var(--nextui-content2));
   z-index: -1;
   animation: pulse-animation 2s infinite ease-out;
   border: 2px solid #f7b750;

diff --git a/src/operations/hungerAlert/HungerAlertOperations.ts b/src/operations/hungerAlert/HungerAlertOperations.ts
@@ -26,6 +26,6 @@ export default class HungerAlertOperations {
   }
 
   static getPulseClasses(): string {
-    return 'pulse w-48 h-48 rounded-full flex flex-col items-center justify-center text-center bg-white dark:bg-content2 relative p-5';
+    return 'pulse w-48 h-48 rounded-full flex flex-col items-center justify-center text-center text-sm bg-content1 relative p-5';
   }
 }