132 standardize button components and styling

backend/db/schema.sql

@@ -66,6 +66,8 @@ CREATE TABLE IF NOT EXISTS builds (
     id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
     tittel varchar(50) NOT NULL CHECK (length(trim(tittel)) > 0),
     created_at timestamptz NOT NULL DEFAULT now(),
+    owner_id bigint REFERENCES users(id),
+    is_published boolean NOT NULL DEFAULT false,
 
     comment varchar(200),
     cpu_id uuid REFERENCES parts(id),
@@ -78,4 +80,4 @@ CREATE TABLE IF NOT EXISTS builds (
     cooler_id uuid REFERENCES parts(id)
 );
 CREATE INDEX IF NOT EXISTS builds_owner_id_idx
-    ON builds(owner_id);
+    ON builds(owner_id);

backend/server/package.json

@@ -44,5 +44,12 @@
   },
   "overrides": {
     "minimatch": "^11.0.1"
+  },
+  "allowScripts": {
+    "@apollo/protobufjs@1.2.8": true,
+    "@firebase/util@1.15.3": true,
+    "esbuild@0.28.2": true,
+    "protobufjs@7.6.6": true,
+    "fsevents@2.3.3": true
   }
 }

frontend/src/components/AddToBuildFeedback.tsx

@@ -1,3 +1,4 @@
+import Button from "./buttons/Button";
 import type { PcPart } from "@/types/types";
 import { useEffect, useId, useRef } from "react";
 import { ArrowRight, X } from "lucide-react";
@@ -23,10 +24,6 @@ export default function AddToBuildFeedback({
   const savedPart = useSelector((state) =>
     selectPartByCategory(state, part.category),
   );
-  const secondaryButton =
-    "cursor-pointer rounded-lg border border-secondary/50 px-4 py-2 text-xs font-medium text-white transition-colors hover:bg-surface-dark";
-  const primaryButton =
-    "cursor-pointer rounded-lg border border-accent bg-accent px-5 py-2 text-xs font-semibold text-background transition-colors hover:bg-accent/90";
 
   useEffect(() => {
     dialogRef.current?.showModal();
@@ -125,16 +122,19 @@ export default function AddToBuildFeedback({
         )}
         {stage === "confirm" && (
           <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-            <button
-              type="button"
+            <Button
+              variant="secondary"
               onClick={closeFeedback}
-              className={secondaryButton}
+              className="min-h-11 rounded-lg px-4 py-2 text-sm font-medium sm:w-auto"
             >
               Keep current component
-            </button>
-            <button type="button" onClick={onReplace} className={primaryButton}>
+            </Button>
+            <Button
+              onClick={onReplace}
+              className="min-h-11 px-4 py-2 sm:w-auto"
+            >
               Replace component
-            </button>
+            </Button>
           </div>
         )}
       </div>

frontend/src/components/AllPartsPreview.tsx

@@ -1,3 +1,4 @@
+import Button from "./buttons/Button";
 import { useParts } from "@/hooks/useParts";
 import PcPartCard from "@/components/PcPartCard";
 import PcPartCardSkeleton from "@/components/PcPartCardSkeleton";
@@ -179,15 +180,14 @@ function PartsResults({
 
   return (
     <section className="flex flex-col gap-4 w-full min-w-0 max-w-[100rem]  text-white p-2 md:p-0">
-
       <div className="flex items-center justify-between">
         {!featured && (
           <p className={` ${loading || error ? "invisible" : ""} `}>
             Showing {visibleParts.length} of {totalCount} components
           </p>
         )}
 
-         {viewenabled && (
+        {viewenabled && (
           <ViewSelector viewType={viewType} onViewChange={setViewType} />
         )}
       </div>
@@ -271,9 +271,9 @@ function PartsResults({
       )}
 
       {(!featured || error) && (
-        <button
+        <Button
           type="button"
-          className="mt-4 text-lg text-blue-500 enabled:cursor-pointer enabled:hover:underline disabled:opacity-50"
+          className="mt-4 min-h-11 w-auto px-4 py-2"
           disabled={loading || (!error && !pageInfo?.hasNextPage)}
           onClick={error ? retry : handleLoadMore}
         >
@@ -284,7 +284,7 @@ function PartsResults({
               : !pageInfo?.hasNextPage
                 ? "Showing all"
                 : "Load more..."}
-        </button>
+        </Button>
       )}
     </section>
   );

frontend/src/components/AuthButton.tsx

@@ -9,9 +9,9 @@ export default function AuthButton() {
   return (
     <Link
       to={user ? "/account" : "/login"}
-      className="flex items-center gap-1 hover:text-accent"
+      className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg text-sm font-normal text-white transition-colors duration-200 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent"
     >
-      <UserRound />
+      <UserRound size={24} strokeWidth={1.7} aria-hidden="true" />
       {user ? "My account" : "Log in"}
     </Link>
   );

frontend/src/components/DesktopComponentDetailPage.tsx

@@ -1,4 +1,5 @@
-import { Trash2, X } from "lucide-react";
+import TextButton from "@/components/buttons/TextButton";
+import { X } from "lucide-react";
 import { useId, useState } from "react";
 import { Link } from "react-router";
 import type { PcPart } from "@/types/types";
@@ -8,14 +9,11 @@ import {
   getSpecifications,
 } from "@/utils/partSpecifications";
 import AddToBuildButton from "./buttons/AddToBuildButton";
-import { useSelector } from "react-redux";
-import { selectIsPartInBuild } from "@/state/selectedPartsSlice";
 
 export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
   const [expanded, setExpanded] = useState(false);
   const [failedImage, setFailedImage] = useState("");
   const specificationsId = useId();
-  const inBuild = useSelector((state) => selectIsPartInBuild(state, part));
   const specifications = getSpecifications(part);
   const category =
     categories.find((item) => item.value === part.category)?.label ??
@@ -47,12 +45,12 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
               </li>
               <li>
                 <form method="dialog">
-                  <button
+                  <TextButton
                     type="submit"
-                    className="inline-flex min-h-11 cursor-pointer items-center px-1 hover:text-white"
+                    className="inline-flex min-h-11 items-center px-1"
                   >
                     Explore components
-                  </button>
+                  </TextButton>
                 </form>
               </li>
               <li aria-hidden="true">/</li>
@@ -130,19 +128,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
                 ? "Price unavailable"
                 : `€${part.price_eur.toFixed(2)}`}
             </p>
-            <AddToBuildButton
-              className="mt-7 flex min-h-10 items-center justify-center gap-3 rounded-lg py-2 text-xs font-medium"
-              part={part}
-            >
-              {inBuild ? (
-                <Trash2 size={20} aria-hidden="true" />
-              ) : (
-                <span aria-hidden="true" className="text-xl leading-none">
-                  +
-                </span>
-              )}
-              {inBuild ? "Remove from build" : "Add to build"}
-            </AddToBuildButton>
+            <AddToBuildButton className="mt-7 min-h-10" part={part} showIcon />
           </div>
         </header>
 
@@ -198,12 +184,12 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
               </dl>
             </div>
             {specifications.length > 4 && (
-              <button
+              <TextButton
                 type="button"
                 aria-expanded={expanded}
                 aria-controls={specificationsId}
                 onClick={() => setExpanded((previous) => !previous)}
-                className="mt-4 flex cursor-pointer items-center gap-3 text-xs text-accent hover:underline"
+                className="mt-4 flex items-center gap-3 text-xs"
               >
                 {expanded
                   ? "Show fewer specifications"
@@ -214,7 +200,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
                 >
                   ↗
                 </span>
-              </button>
+              </TextButton>
             )}
           </div>
         </section>

frontend/src/components/FilterComponent.tsx

@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import { useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import type { PartsOptions } from "@/api/parts";
@@ -104,14 +105,13 @@ export default function FilterComponent({
               </select>
             </label>
 
-            <button
+            <TextButton
               type="button"
               aria-label="Reset filters"
-              className="cursor-pointer text-sm underline"
               onClick={() => setFiltOptions({ category: defaultCategory })}
             >
               Reset
-            </button>
+            </TextButton>
           </form>
         </>
       ) : (
@@ -203,14 +203,14 @@ export default function FilterComponent({
               </label>
 
               <div className="mt-1 flex items-center gap-4 border-t border-gray-600 pt-4">
-                <button
+                <TextButton
                   type="button"
                   aria-label="Reset filters"
-                  className="min-h-11 cursor-pointer rounded-lg px-3 text-sm underline underline-offset-4 hover:text-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                  className="min-h-11 px-3"
                   onClick={() => setDraft({ category: defaultCategory })}
                 >
                   Reset
-                </button>
+                </TextButton>
                 <Button
                   type="submit"
                   className="min-h-11 flex-1 py-3 font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"

frontend/src/components/MobileComponentDetailPage.tsx

@@ -1,3 +1,4 @@
+import TextButton from "@/components/buttons/TextButton";
 import type { PcPart } from "@/types/types";
 import { useRef, useState } from "react";
 import { usePartImageLayout } from "@/hooks/usePartImageLayout";
@@ -115,15 +116,15 @@ export default function ComponentDetailPage({ part }: { part: PcPart }) {
           ))}
         </dl>
 
-        <button
+        <TextButton
           type="button"
-          className="h-10 shrink-0 underline"
+          className="h-10 shrink-0"
           aria-expanded={expanded}
           onClick={toggleSpecifications}
         >
           {expanded ? "Minimize" : "View all specifications"}
-        </button>
-        <AddToBuildButton part={part} className="px-5 py-3.5 text-lg" />
+        </TextButton>
+        <AddToBuildButton part={part} />
       </section>
     </section>
   );

frontend/src/components/Notification.tsx

@@ -5,6 +5,7 @@ import type { RootState } from "@/state/store";
 import { dismissNotification } from "@/state/notificationSlice";
 import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import Button from "./buttons/Button";
 
 export default function Notification() {
   const dispatch = useDispatch();
@@ -150,13 +151,12 @@ export default function Notification() {
           </p>
         </div>
         {action && (
-          <button
-            type="button"
+          <Button
             onClick={action.onClick}
-            className="shrink-0 cursor-pointer rounded-lg border border-accent bg-accent px-5 py-2 text-xs font-semibold text-background transition-colors hover:bg-accent/90"
+            className="w-auto shrink-0 px-5 py-2 text-xs font-semibold"
           >
             {action.label}
-          </button>
+          </Button>
         )}
       </div>
       <div

frontend/src/components/PcPartCard.tsx

@@ -88,7 +88,7 @@ export default function PcPartCard({
       buildAction={
         <AddToBuildButton
           part={completePart}
-          className="hover:bg-accent/20 hover:text-accent mt-auto ml-auto max-w-100"
+          className="mt-auto ml-auto max-w-100"
         />
       }
     />

frontend/src/components/buttons/AddToBuildButton.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import type { PcPart } from "@/types/types";
 import { twMerge } from "tailwind-merge";
@@ -17,13 +17,13 @@ import { showNotification } from "@/state/notificationSlice";
 
 type AddToBuildButtonProps = {
   part: PcPart;
-  children?: ReactNode;
+  showIcon?: boolean;
   className?: string;
 };
 
 export default function AddToBuildButton({
   part,
-  children,
+  showIcon = false,
   className,
 }: AddToBuildButtonProps) {
   const [showFeedback, setShowFeedback] = useState(false);
@@ -95,14 +95,22 @@ export default function AddToBuildButton({
   return (
     <>
       <Button
+        variant={inBuild ? "dark" : "default"}
         className={twMerge(
+          showIcon && "flex items-center justify-center gap-3",
           className,
-          inBuild &&
-            "border border-accent bg-black text-accent hover:bg-accent/20",
         )}
         onClick={handleClick}
       >
-        {children ?? (inBuild ? "Remove from build" : "Add to build")}
+        {showIcon &&
+          (inBuild ? (
+            <Trash2 size={20} aria-hidden="true" />
+          ) : (
+            <span aria-hidden="true" className="text-xl leading-none">
+              +
+            </span>
+          ))}
+        {inBuild ? "Remove from build" : "Add to build"}
       </Button>
 
       {showFeedback && (stage !== "confirm" || !isCategoryEmpty) && (

frontend/src/components/buttons/BackToTopButton.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { ArrowUp } from "lucide-react";
+import Button from "./Button";
 
 // Show the button once the user has scrolled about one screen down.
 const SHOW_AFTER_PX = 600;
@@ -15,9 +16,8 @@ export default function BackToTopButton() {
   }, []);
 
   return (
-    <button
-      type="button"
-      className={`${visible ? "visible" : "invisible"} fixed right-4 bottom-4 z-40 flex h-12 cursor-pointer items-center justify-center gap-2 rounded-full px-5 text-sm bg-accent text-black shadow-lg hover:bg-accent/20 hover:text-accent`}
+    <Button
+      className={`${visible ? "visible" : "invisible"} fixed right-4 bottom-4 z-40 flex h-12 w-auto items-center justify-center gap-2  px-5 shadow-xl`}
       onClick={() => {
         window.scrollTo({
           top: 0,
@@ -34,6 +34,6 @@ export default function BackToTopButton() {
     >
       <ArrowUp size={20} aria-hidden="true" />
       Back to top
-    </button>
+    </Button>
   );
 }