standardize components further, theme adjustments

maxwlang · maxwlang · commit 258b657ca7b1 · 2025-02-20T22:13:56.000-06:00
diff --git a/src/components/home/ProjectCard.tsx b/src/components/home/ProjectCard.tsx
@@ -6,6 +6,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import LinkButton from "@/components/shared/LinkButton";
+import TextPill from "../shared/TextPill";
 
 interface ProjectCardProps {
   project: Project;
@@ -22,9 +23,8 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, onViewMore }) => {
     : description;
 
   return (
-    // TODO: fix color
     // TODO: fix strange behavior in desktop safari
-    <div className="break-inside-avoid bg-background dark:bg-slate-900 text-foreground mb-6 sm:mb-8 rounded-lg shadow-lg p-6 flex flex-col max-w-sm transform transition-transform hover:scale-105 hover:shadow-2xl">
+    <div className="break-inside-avoid bg-foreground dark:bg-slate-900 dark:text-foreground mb-6 sm:mb-8 rounded-lg dark:shadow-lg shadow-xl p-6 flex flex-col max-w-sm transform transition-transform hover:scale-105 hover:shadow-2xl">
       {image && (
         <Image
           src={image}
@@ -33,7 +33,11 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, onViewMore }) => {
         />
       )}
       <h3 className="text-2xl font-semibold">{title}</h3>
-      {subtitle && <h4 className="text-sm text-gray-400 mb-2">{subtitle}</h4>}
+      {subtitle && (
+        <h4 className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+          {subtitle}
+        </h4>
+      )}
       <p className="text-sm mb-4">
         {truncatedDescription}
         {isLongDescription && (
@@ -67,12 +71,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, onViewMore }) => {
       )}
       <div className="flex flex-wrap gap-2 mt-auto">
         {tags.map((tag, i) => (
-          <span
-            key={i}
-            className="bg-slate-800 border-slate-700 dark:bg-slate-900 dark:border-slate-800 border text-blue-700 text-xs font-medium px-2 py-1 rounded-full"
-          >
-            {tag}
-          </span>
+          <TextPill key={i} text={tag} />
         ))}
       </div>
     </div>
diff --git a/src/components/home/ProjectModal.tsx b/src/components/home/ProjectModal.tsx
@@ -11,6 +11,7 @@ import {
 import { Fragment } from "react";
 import Image from "next/image";
 import LinkButton from "@/components/shared/LinkButton";
+import TextPill from "@/components/shared/TextPill";
 
 interface ProjectModalProps {
   project: Project;
@@ -45,30 +46,31 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose }) => {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <DialogPanel className="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 relative">
+              <DialogPanel className="bg-foreground dark:bg-slate-900 dark:text-foreground rounded-lg shadow-xl max-w-2xl w-full p-6 relative">
                 <button
                   onClick={onClose}
                   className="absolute top-4 right-4 text-gray-500 hover:text-gray-800"
                 >
                   <FontAwesomeIcon icon={faTimes} className="fa-lg" />
                 </button>
-                <Image
-                  src={image}
-                  alt={title}
-                  className="rounded-lg w-full mt-6 mb-4 object-cover h-60"
-                />
-                <DialogTitle
-                  as="h3"
-                  className="text-3xl font-bold text-gray-800 mb-2"
-                >
+                {image && (
+                  <Image
+                    src={image}
+                    alt={title}
+                    className="rounded-lg w-full mt-6 mb-4 object-cover h-60"
+                  />
+                )}
+                <DialogTitle as="h3" className="text-3xl font-bold mb-2">
                   {title}
                 </DialogTitle>
                 {subtitle && (
-                  <h4 className="text-sm text-gray-500 mb-4">{subtitle}</h4>
+                  <h4 className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                    {subtitle}
+                  </h4>
                 )}
-                <p className="text-gray-600 text-sm">{description}</p>
+                <p className="text-sm pr-10 text-justify">{description}</p>
                 {links && (
-                  <div className="flex flex-wrap gap-2 mt-4">
+                  <div className="flex flex-wrap gap-2 mt-6">
                     {links.map((link, i) => (
                       <LinkButton
                         key={i}
@@ -82,12 +84,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose }) => {
                 )}
                 <div className="flex flex-wrap gap-2 mt-4">
                   {tags.map((tag, i) => (
-                    <span
-                      key={i}
-                      className="bg-blue-100 text-blue-700 text-xs font-medium px-2 py-1 rounded-full"
-                    >
-                      {tag}
-                    </span>
+                    <TextPill key={i} text={tag} />
                   ))}
                 </div>
               </DialogPanel>
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 
 export interface ButtonProps {
-  text: string;
+  text: string | React.ReactNode;
   onClick?: () => void;
   variant?: "primary" | "secondary" | "danger";
   type?: "button" | "submit" | "reset";
+  className?: string;
   disabled?: boolean;
 }
 
@@ -14,12 +15,14 @@ const Button: React.FC<ButtonProps> = ({
   variant = "primary",
   type = "button",
   disabled = false,
+  className,
 }) => {
-  const baseStyles =
-    "px-4 py-2 font-semibold text-sm rounded focus:outline-none focus:ring";
+  const baseStyles = `inline-flex items-center px-4 py-2 font-semibold text-sm rounded focus:outline-none focus:ring transition-all ease-in-out duration-200 ${className}`;
   const variants = {
-    primary: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-300",
-    secondary: "bg-gray-200 text-black hover:bg-gray-300 focus:ring-gray-300",
+    primary:
+      "bg-background text-foreground dark:text-white hover:bg-foreground hover:text-background focus:ring-blue-300",
+    secondary:
+      "border border-background dark:bg-gray-200 text-black hover:bg-gray-300 focus:ring-gray-300",
     danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-300",
   };
 
diff --git a/src/components/shared/LinkButton.tsx b/src/components/shared/LinkButton.tsx
@@ -18,10 +18,12 @@ const LinkButton: React.FC<LinkButtonProps> = ({
   iconPosition = "left",
 }) => {
   const baseStyles =
-    "inline-flex items-center px-4 py-2 font-semibold text-sm rounded focus:outline-none focus:ring transition-all";
+    "inline-flex items-center px-4 py-2 font-semibold text-sm rounded focus:outline-none focus:ring transition-all ease-in-out duration-200";
   const variants = {
-    primary: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-300",
-    secondary: "bg-gray-200 text-black hover:bg-gray-300 focus:ring-gray-300",
+    primary:
+      "bg-background text-foreground dark:text-white hover:bg-foreground hover:text-background focus:ring-blue-300",
+    secondary:
+      "border border-background dark:bg-gray-200 text-black hover:bg-gray-300 focus:ring-gray-300",
     danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-300",
   };
 
diff --git a/src/components/shared/ScrollToBottom.tsx b/src/components/shared/ScrollToBottom.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import Button from "@/components/shared/Button";
 
 interface ScrollToBottomProps {
   children: React.ReactNode;
@@ -51,13 +52,19 @@ const ScrollToBottom: React.FC<ScrollToBottomProps> = ({
     <div ref={contentRef} className="relative">
       {children}
       {showButton && (
-        <button
-          className="fixed bottom-4 right-4 bg-blue-500 text-white py-2 px-4 rounded shadow-md hover:bg-blue-600 focus:outline-none"
+        <Button
+          className="fixed bottom-4 right-4"
           onClick={scrollToBottom}
-        >
-          {showIcons && <FontAwesomeIcon icon={faArrowDown} className="mr-2" />}
-          {scrollToBottomText}
-        </button>
+          text={
+            <>
+              {showIcons && (
+                <FontAwesomeIcon icon={faArrowDown} className="mr-2" />
+              )}
+              {scrollToBottomText}
+            </>
+          }
+          variant="primary"
+        />
       )}
     </div>
   );
diff --git a/src/components/shared/TextPill.tsx b/src/components/shared/TextPill.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+export interface TextPillProps {
+  text: string;
+}
+
+const TextPill: React.FC<TextPillProps> = ({ text }) => {
+  const baseStyles =
+    "text-background border-background dark:bg-slate-900 dark:border-slate-800 border dark:text-foreground text-xs font-medium px-2 py-1 rounded-md";
+
+  return <span className={`${baseStyles}`}>{text}</span>;
+};
+
+export default TextPill;
