136 improve UI consistency and polish minor design details

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import CommunityPage from "./pages/communityPage/communityPage";
 import Layout from "./components/Layout";
 import LoginPage from "./pages/loginPage/loginPage";
 import AccountPage from "./pages/accountPage/accountPage";
+import NotFoundPage from "./pages/notFoundPage/notFoundPage";
 import { Routes, Route, useLocation, useParams } from "react-router";
 import { useSelector } from "react-redux";
 import type { RootState } from "./state/store";
@@ -34,10 +35,7 @@ function App() {
         <Route path="/community" element={<CommunityPage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/account" element={<AccountPage />} />
-        <Route
-          path="*"
-          element={<p className="w-full">404 - Page not found</p>}
-        />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </Layout>
   );

frontend/src/components/AllPartsPreview.tsx

@@ -256,7 +256,14 @@ function PartsResults({
       </dialog>
 
       {loading && (
-        <p role="status" className={showSkeletons ? "sr-only" : "mt-3"}>
+        <p
+          role="status"
+          className={
+            showSkeletons
+              ? "sr-only"
+              : "mt-4 text-center text-sm text-secondary"
+          }
+        >
           Loading parts...
         </p>
       )}
@@ -270,22 +277,21 @@ function PartsResults({
         <div ref={loadMoreRef} aria-hidden="true" className="h-px w-full" />
       )}
 
-      {(!featured || error) && (
-        <Button
-          type="button"
-          className="mt-4 min-h-11 w-auto px-4 py-2"
-          disabled={loading || (!error && !pageInfo?.hasNextPage)}
-          onClick={error ? retry : handleLoadMore}
-        >
-          {loading
-            ? "Loading..."
-            : error
-              ? "Try again"
-              : !pageInfo?.hasNextPage
-                ? "Showing all"
-                : "Load more..."}
-        </Button>
-      )}
+      {!loading &&
+        (!featured || error) &&
+        (!error && !pageInfo?.hasNextPage ? (
+          <p role="status" className="mt-4 text-center text-sm text-secondary">
+            Showing {visibleParts.length}/{totalCount}
+          </p>
+        ) : (
+          <Button
+            type="button"
+            className="mt-4 min-h-11 w-auto px-4 py-2"
+            onClick={error ? retry : handleLoadMore}
+          >
+            {error ? "Try again" : "Load more..."}
+          </Button>
+        ))}
     </section>
   );
 }

frontend/src/components/CategorySelection.tsx

@@ -26,10 +26,12 @@ const categoryIcons: Record<PcPart["category"], LucideIcon> = {
 
 type CategorySelectionProps = {
   showViewAll?: boolean;
+  activeCategory?: PcPart["category"];
 };
 
 export default function CategorySelection({
   showViewAll = true,
+  activeCategory,
 }: CategorySelectionProps) {
   return (
     <section className="mx-auto w-full max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
@@ -46,7 +48,7 @@ export default function CategorySelection({
         {showViewAll && (
           <Link
             to="/explore"
-            className="hidden text-sm text-accent hover:underline lg:block"
+            className="hidden text-sm text-accent hover:underline hover lg:block"
           >
             View all components →
           </Link>
@@ -56,11 +58,13 @@ export default function CategorySelection({
       <ul className="grid grid-cols-3 gap-3 lg:grid-cols-8">
         {categories.map((category) => {
           const Icon = categoryIcons[category.value];
+          const isActive = category.value === activeCategory;
           return (
             <li key={category.value}>
               <Link
                 to={`/explore/category/${encodeURIComponent(category.value)}`}
-                className="flex min-h-24 flex-col items-center justify-center gap-2 rounded-xl bg-surface p-2 text-center text-sm hover:brightness-110"
+                aria-current={isActive ? "page" : undefined}
+                className={`flex min-h-24 flex-col items-center justify-center gap-2 rounded-xl border-2 bg-surface p-2 text-center text-sm transition-[border-color] duration-200 hover:border-accent ${isActive ? "border-accent" : "border-transparent"}`}
               >
                 <Icon
                   aria-hidden="true"

frontend/src/components/DesktopComponentDetailPage.tsx

@@ -123,7 +123,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {
             </dl>
 
             <hr className="my-5 border-0 border-t border-surface" />
-            <p className="text-4xl font-semibold">
+            <p className="text-4xl font-semibold tabular-nums">
               {part.price_eur === null
                 ? "Price unavailable"
                 : `€${part.price_eur.toFixed(2)}`}

frontend/src/components/Layout.tsx

@@ -14,8 +14,8 @@ export default function Layout({ children }: { children: ReactNode }) {
           <NavBar />
         </div>
       </header>
-      <main className={`${contentWidth} min-w-0 flex-1 py-6`}>{children}</main>
-      <footer className="bg-surface text-white">
+      <main className={`${contentWidth} min-w-0 flex-1 pt-6 pb-16`}>{children}</main>
+      <footer className="bg-surface text-white shadow-[0_-4px_16px_rgba(0,0,0,0.2)]">
         <div className={contentWidth}>
           <Footer />
         </div>

frontend/src/components/MobileComponentDetailPage.tsx

@@ -66,7 +66,7 @@ export default function ComponentDetailPage({ part }: { part: PcPart }) {
           {part.name}
         </h2>
 
-        <p ref={priceRef} className="text-2xl">
+        <p ref={priceRef} className="text-2xl tabular-nums">
           {part.price_eur === null
             ? "Price unavailable"
             : `€${part.price_eur.toFixed(2)}`}

frontend/src/components/PcPartCardLayout.tsx

@@ -32,7 +32,7 @@ export default function PcPartCardLayout({
       }}
     >
       <article tabIndex={skeleton ? undefined : 0}
-        className={`flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row ${skeleton ? "motion-safe:animate-pulse" : ""}`}
+        className={`flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row ${skeleton ? "motion-safe:animate-pulse" : "hover:ring-2 hover:ring-accent"}`}
         onKeyDown={(event) => {
           if (skeleton || event.target !== event.currentTarget) return;
           if (event.key === "Enter" || event.key === " "){
@@ -49,10 +49,10 @@ export default function PcPartCardLayout({
 
         <div
           className="grid min-w-0 flex-1 grid-cols-1 gap-2 p-2
-            @[500px]:grid-cols-[minmax(0,1fr)_auto]
+            @[500px]:grid-cols-[minmax(0,1fr)_11rem]
             @[500px]:grid-rows-[1fr_auto]
             @[500px]:gap-3 @[500px]:p-3
-            @[800px]:grid-cols-[minmax(0,1fr)_auto_auto]
+            @[800px]:grid-cols-[minmax(0,1fr)_auto_11rem]
             @[800px]:grid-rows-1
             @[800px]:items-center @[800px]:gap-6 @[800px]:p-5"
         >
@@ -71,7 +71,7 @@ export default function PcPartCardLayout({
             {error}
           </div>
 
-          <p className="self-center whitespace-nowrap text-xl">
+          <p className="self-center whitespace-nowrap text-xl tabular-nums @[800px]:text-right">
             {price}
           </p>
 

frontend/src/components/buttons/Button.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 
 const variantStyles = {
   text: "w-auto rounded border-0 bg-transparent p-0 font-normal text-accent underline decoration-1 underline-offset-4 transition-colors enabled:hover:text-white",
-  danger: "border-red-600 bg-red-600 text-white hover:border-red-300",
+  danger: "border-status-incompatible bg-status-incompatible text-white hover:border-red-300",
   default: "border-orange-400 bg-orange-400 text-black hover:border-black",
   dark: "border-black bg-black text-orange-400 hover:border-orange-400",
   secondary:

frontend/src/pages/accountPage/accountPage.tsx

@@ -214,7 +214,7 @@ function AccountContent() {
               {builds.slice(0, 20).map((build) => (
                 <article
                   key={build.id}
-                  className="group relative min-w-0 rounded-xl border border-transparent bg-surface wrap-break-words transition duration-200 hover:border-accent hover:bg-surface-dark focus-within:border-accent"
+                  className="group relative min-w-0 rounded-xl border border-transparent bg-surface wrap-break-words transition duration-200 hover:border-accent focus-within:border-accent"
                 >
                   <Link
                     to={`/builder?build=${encodeURIComponent(build.id)}`}

frontend/src/pages/categoryPage/categoryPage.tsx

@@ -21,7 +21,10 @@ export default function CategoryPage({ category }: CategoryPageProps) {
   return (
     <div className="flex w-full flex-col items-center gap-6">
 
-       <CategorySelection showViewAll={false} />
+      <CategorySelection
+        showViewAll={false}
+        activeCategory={invalidCategory ? undefined : filtOptions.category}
+      />
       <FilterComponent
         defaultCategory={initialCategory?.value}
         filtOptions={filtOptions}

frontend/src/pages/notFoundPage/notFoundPage.tsx

@@ -0,0 +1,13 @@
+import Button from "@/components/buttons/Button";
+
+export default function NotFoundPage() {
+  return (
+    <section className="py-16 text-center">
+      <h1 className="text-5xl font-semibold">404</h1>
+      <p className="mt-3 text-gray-300">Page not found.</p>
+      <Button to="/" className="mt-6 w-70 px-4 py-3">
+        Back to home
+      </Button>
+    </section>
+  );
+}

frontend/src/pages/pcBuilderPage/components/BuildSummaryComponent.tsx

@@ -35,7 +35,7 @@ export default function BuildSummaryComponent({
 
       <p className="text-gray-300 text-sm mt-2">Build total:</p>
 
-      <p role="status" className="text-xl">
+      <p role="status" className="text-xl tabular-nums">
         €{totalSum.toFixed(2)}
       </p>
       {missingPriceCount > 0 && (

frontend/src/pages/pcBuilderPage/components/CompatabilityComponent.tsx

@@ -101,10 +101,10 @@ export default function CompatabilityComponent({ parts }: { parts: PcPart[] }) {
 
           return (
             <section key={status}>
-              <h3 className="lg:hidden">
+              <h3>
                 <button
                   type="button"
-                  className={`flex min-h-11 w-full items-center gap-2 rounded-md py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${color}`}
+                  className={`flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${color}`}
                   aria-expanded={isExpanded}
                   aria-controls={panelId}
                   onClick={() =>
@@ -126,11 +126,11 @@ export default function CompatabilityComponent({ parts }: { parts: PcPart[] }) {
 
               <div
                 id={panelId}
-                className={`${isExpanded ? "flex" : "hidden"} flex-col gap-2 pb-2 lg:flex lg:pb-0`}
+                className={`${isExpanded ? "flex" : "hidden"} flex-col gap-2 pb-2`}
               >
                 {/* IF NO CHECKS AVAILABLE */}
                 {checks.length === 0 && (
-                  <p className="text-gray-300 lg:hidden">
+                  <p className="text-gray-300">
                     No {label.toLowerCase()} checks.
                   </p>
                 )}

frontend/src/pages/pcBuilderPage/components/ComponentSelectionComponent.tsx

@@ -86,10 +86,10 @@ export default function ComponentSelectionComponent({
           </div>
 
           <div className="contents sm:flex sm:flex-col sm:ml-auto sm:shrink-0">
-            <p className="shrink-0 text-base">
+            <p className="shrink-0 text-base tabular-nums">
               {part.price_eur == null
                 ? "Price unavailable"
-                : `€${part.price_eur}`}
+                : `€${part.price_eur.toFixed(2)}`}
             </p>
             <div className="flex w-full sm:w-auto justify-end gap-2 items-center">
               <Button

frontend/src/styles/colors.css

@@ -6,9 +6,9 @@
   --color-secondary: #c0cbc8;
   --color-accent: #ff922b;
 
-  /* Status text colors, at least 4.5:1 on surface and background (WCAG AA). */
-  --color-status-incompatible: #ffb7b3;
-  --color-status-warning: #ffc28c;
-  --color-status-unknown: #e5d183;
-  --color-status-compatible: #9be5b4;
+  /* Compatibility status colors: red, orange, yellow and green. */
+  --color-status-incompatible: #ef4444;
+  --color-status-warning: #fb923c;
+  --color-status-unknown: #facc15;
+  --color-status-compatible: #4ade80;
 }