docs and background for details page

frontend/src/components/basics/BasicButtonDefinitions.ts

@@ -1,5 +1,8 @@
 import type { LucideIcon } from "lucide-react";
 
+/**
+ * Basic definitions used by all Button types, such as Button.tsx and ButtonLink.tsx
+ */
 export type BasicButtonProps = {
   /** Optional Lucide icon (e.g. Plus, X, Check) */
   icon?: LucideIcon;
@@ -15,20 +18,20 @@ export type BasicButtonProps = {
  */
 export const ButtonType = {
   DarkButton: {
-    textColor: "text-dark-button-text",
-    backgroundColor: "bg-dark-button-bg",
+    textColor: "dark-button-text",
+    backgroundColor: "dark-button-bg",
   },
   PrimaryButton: {
-    textColor: "text-primary-button-text",
-    backgroundColor: "bg-primary-button-bg",
+    textColor: "primary-button-text",
+    backgroundColor: "primary-button-bg",
   },
   DefaultButton: {
-    textColor: "text-default-button-text",
-    backgroundColor: "bg-default-button-bg",
+    textColor: "default-button-text",
+    backgroundColor: "default-button-bg",
   },
   TransparentButton: {
-    textColor: "text-transparent-button-text",
-    backgroundColor: "bg-transparent-button-bg",
+    textColor: "transparent-button-text",
+    backgroundColor: "transparent-button-bg",
   },
 } as const;
 

frontend/src/components/basics/Button.tsx

@@ -5,6 +5,9 @@ type ButtonProps = BasicButtonProps & {
   onClick: () => void;
 };
 
+/**
+ * Button component. Styles are defined in BasicButtonDefinitions.ts
+ */
 export default function Button({
   onClick,
   icon: Icon,
@@ -15,7 +18,7 @@ export default function Button({
 }: ButtonProps) {
   return (
     <button
-      className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+      className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
       onClick={onClick}
       {...props}
     >