feat: Refactor custom button and use tailwind classes

jst-seminar-rostlab-tum · Nov 5, 2024 · 0e01723 · 0e01723
1 parent 16aa9ee
commit 0e01723
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 85 deletions.
diff --git a/src/components/Buttons/CustomButton.tsx b/src/components/Buttons/CustomButton.tsx
@@ -1,8 +1,5 @@
-'use client';
-
 import { Button, ButtonProps } from '@nextui-org/button';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import clsx from 'clsx';
 
 interface Props extends ButtonProps {
   children: React.ReactNode;
@@ -12,79 +9,22 @@ interface Props extends ButtonProps {
  * Custom button component in the variants solid, bordered and flat. It can be used like a normal NextUI button
  * component.
  * @param variant solid | bordered | flat
- * @constructor
  */
 
 export function CustomButton({ children, ...attributes }: Props) {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  const [bgFlat, setBgFlat] = useState<string>('');
-  const [colorFlat, setColorFlat] = useState<string>('');
-
-  const { theme } = useTheme();
   const { variant } = attributes;
 
-  useEffect(() => {
-    setBgFlat(theme === 'light' ? 'var(--flat-button)' : 'var(--flat-button-dark)');
-    setColorFlat(theme === 'light' ? 'var(--button-dark-text)' : 'var(--button-light-text)');
-  }, [theme]);
-
-  switch (variant as string) {
-    case 'bordered':
-      return (
-        <Button
-          {...attributes}
-          style={
-            isHovered
-              ? {
-                  backgroundColor:
-                    theme === 'light' ? 'var(--outlined-button-hovered)' : 'var(--outlined-button-hovered-dark)',
-                }
-              : {}
-          }
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          {children}
-        </Button>
-      );
-    case 'flat':
-      return (
-        <Button
-          {...attributes}
-          style={
-            isHovered
-              ? { color: 'var(--button-light-text)', backgroundColor: 'var(--button-hovered)' }
-              : {
-                  color: colorFlat,
-                  backgroundColor: bgFlat,
-                }
-          }
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          {children}
-        </Button>
-      );
-    case 'solid':
-      return (
-        <Button
-          {...attributes}
-          backgroundColor="green"
-          style={
-            isHovered
-              ? { color: 'var(--button-light-text)', backgroundColor: 'var(--button-hovered)' }
-              : {
-                  color: 'var(--button-light-text)',
-                  backgroundColor: 'var(--button-main)',
-                }
-          }
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          {children}
-        </Button>
-      );
-    default:
-      return <Button {...attributes}>{children}</Button>;
-  }
+  return (
+    <Button
+      {...attributes}
+      className={clsx({
+        'hover:bg-outlinedHover': variant === 'bordered',
+        'hover:bg-hover dark:text-foreground': variant === 'flat' || variant === 'solid',
+        'bg-clickableSecondary hover:text-background ': variant === 'flat',
+        'bg-primary dark:hover:bg-hover text-background': variant === 'solid',
+      })}
+    >
+      {children}
+    </Button>
+  );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,14 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --button-main: #157dbc;
-  --button-hovered: #0f6396;
-  --button-light-text: #EFEFEF;
-  --button-dark-text: #333333;
-  --outlined-button-hovered: #e3f2fd;
-  --outlined-button-hovered-dark: #0f6396;
-  --flat-button: #EEEEEE;
-  --flat-button-dark: #424242;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -31,6 +31,9 @@ module.exports = {
             background: '#F5F5F5',
             divider: '#157DBC',
             focus: '#157DBC',
+            hover: '#005489',
+            outlinedHover: '#E3F2FD',
+            clickableSecondary: '#E6E6E6',
             danger: '#D32F2F',
             warning: '#FFB600',
             clusterGreen: '#85E77C',
@@ -47,6 +50,9 @@ module.exports = {
             background: '#121212',
             divider: '#157DBC',
             focus: '#157DBC',
+            hover: '#0F6396',
+            outlinedHover: '#0F6396',
+            clickableSecondary: '#424242',
             danger: '#EF5350',
             warning: '#FFEB3B',
             clusterGreen: '#A3F39C',