From b81bea62973551811f8f1b75dc706de54a239f51 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Fri, 16 Jan 2026 15:34:19 -0500
Subject: [PATCH] Fix UI/UX issues and restore styling

- Fix dark mode toggle (use resolvedTheme, simplify icon rendering)
- Restore colored left borders on section containers
- Remove conflicting px-2 classes from section-container elements
- Fix founder signature vertical alignment (items-center)
- Reduce header nav gap for tighter spacing
- Increase section-container and glass-card padding
---
 apps/web/src/app/about/page.tsx               |  2 +-
 apps/web/src/app/globals.css                  |  4 +--
 apps/web/src/app/page.tsx                     |  8 +++---
 apps/web/src/app/services/page.tsx            | 10 +++----
 .../components/about/founder-signature.tsx    |  4 +--
 .../components/landing/services-preview.tsx   |  2 +-
 apps/web/src/components/theme-toggle.tsx      | 26 ++++++++++++++-----
 7 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/app/about/page.tsx b/apps/web/src/app/about/page.tsx
index ad8acf7..dadd7a0 100644
--- a/apps/web/src/app/about/page.tsx
+++ b/apps/web/src/app/about/page.tsx
@@ -21,7 +21,7 @@ export default function AboutPage() {
     <main className="relative flex flex-col items-center overflow-hidden">
       
       <header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-3xl sticky top-0 rounded-b-3xl border-b border-border/50">
-        <div className="flex items-center gap-8">
+        <div className="flex items-center gap-2">
           <SiteLogo />
           <nav className="hidden md:flex gap-6 text-sm font-medium">
              <Link href="/services" className="hover:text-primary transition-colors">Services</Link>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 402cc04..8bcd3b7 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -89,11 +89,11 @@
   }
   
   .section-container {
-    @apply mask-backdrop rounded-[2.5rem] p-10 md:p-16 text-card-foreground;
+    @apply mask-backdrop rounded-[2.5rem] p-12 md:p-20 text-card-foreground;
   }
 
   .glass-card {
-    @apply mask-backdrop rounded-[2rem] p-8 text-card-foreground;
+    @apply mask-backdrop rounded-[2rem] p-10 text-card-foreground;
   }
   
   .glass-card:hover {
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 67d123f..fa1f847 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -14,7 +14,7 @@ export default function Home() {
     <main className="relative flex flex-col items-center justify-between overflow-hidden">
       
       <header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-3xl sticky top-0 rounded-b-3xl border-b border-border/50">
-        <div className="flex items-center gap-8">
+        <div className="flex items-center gap-2">
           <SiteLogo />
           <nav className="hidden md:flex gap-6 text-sm font-medium">
              <Link href="/services" className="hover:text-primary transition-colors">Services</Link>
@@ -48,7 +48,7 @@ export default function Home() {
          <ServicesPreview />
          
          <div className="w-full max-w-6xl mx-auto mb-16 px-4">
-            <div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 section-container">
+            <div className="text-left mb-8 section-container border-l-4 border-l-blue-500">
                 <h3 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Selected Works</h3>
                 <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
                     A curated gallery of recent projects where we've pushed the boundaries of 
@@ -59,7 +59,7 @@ export default function Home() {
          </div>
 
          <div className="w-full max-w-6xl mx-auto mb-20 px-4">
-            <div className="text-left mb-12 px-2 border-l-2 border-purple-500/50 section-container">
+            <div className="text-left mb-12 section-container border-l-4 border-l-purple-500">
                 <h3 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Inclusive by Design</h3>
                 <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
                     We believe the web is for everyone. Every line of code we write is 
@@ -70,7 +70,7 @@ export default function Home() {
          </div>
 
          <div id="contact" className="w-full mt-20 mb-20 flex flex-col items-center">
-            <div className="w-full max-w-6xl text-left mb-12 px-2 border-l-2 border-emerald-500/50 section-container">
+            <div className="w-full max-w-6xl text-left mb-12 section-container border-l-4 border-l-cyan-500">
                 <h3 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Start a Project</h3>
                 <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
                     Ready to build something exceptional? Drop us a line and let's discuss 
diff --git a/apps/web/src/app/services/page.tsx b/apps/web/src/app/services/page.tsx
index 4533eb8..26eaa07 100644
--- a/apps/web/src/app/services/page.tsx
+++ b/apps/web/src/app/services/page.tsx
@@ -24,7 +24,7 @@ export default function ServicesPage() {
       <DataGrid />
 
       <header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-3xl sticky top-0 border-b border-border/50 rounded-b-3xl">
-        <div className="flex items-center gap-8">
+        <div className="flex items-center gap-2">
           <SiteLogo />
           <nav className="hidden md:flex gap-6 text-sm font-medium">
              <Link href="/services" className="text-primary transition-colors">Services</Link>
@@ -37,7 +37,7 @@ export default function ServicesPage() {
       <div className="z-10 w-full max-w-5xl mx-auto py-20 px-4">
         {/* Context Header */}
         <div className="mb-20">
-            <div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 section-container">
+            <div className="text-left mb-8 section-container border-l-4 border-l-emerald-500">
                 <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-blue-500">
                   Specialized Solutions
                 </h1>
@@ -51,7 +51,7 @@ export default function ServicesPage() {
 
         {/* Medusa / Webshops Section */}
         <div className="mb-24">
-            <div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 section-container mb-10">
+            <div className="text-left mb-10 section-container border-l-4 border-l-blue-500">
                 <h2 className="text-3xl font-bold mb-2">Medusa v2 Development</h2>
                 <p className="text-muted-foreground text-lg max-w-3xl">
                     We build proprietary, headless commerce engines that scale with your business logic. 
@@ -86,7 +86,7 @@ export default function ServicesPage() {
 
         {/* Custom Apps Section */}
         <div className="mb-24">
-            <div className="text-left mb-8 px-2 border-l-2 border-purple-500/50 section-container mb-10">
+            <div className="text-left mb-10 section-container border-l-4 border-l-purple-500">
                 <h2 className="text-3xl font-bold mb-2">Custom Apps & Interactive Websites</h2>
                 <p className="text-muted-foreground text-lg max-w-2xl leading-relaxed">
                     Whether it's a real-time collaborative tool or a high-end brand experience, 
@@ -113,7 +113,7 @@ export default function ServicesPage() {
 
         {/* Crypto Section */}
         <div className="mb-24">
-            <div className="text-left mb-8 px-2 border-l-2 border-cyan-500/50 section-container mb-10">
+            <div className="text-left mb-10 section-container border-l-4 border-l-cyan-500">
                 <h2 className="text-3xl font-bold mb-2">Cryptocurrency & Payment Consulting</h2>
                 <p className="text-muted-foreground text-lg max-w-2xl leading-relaxed">
                     Navigate the complex world of global finance. We bridge the gap between 
diff --git a/apps/web/src/components/about/founder-signature.tsx b/apps/web/src/components/about/founder-signature.tsx
index 55403ff..55764a1 100644
--- a/apps/web/src/components/about/founder-signature.tsx
+++ b/apps/web/src/components/about/founder-signature.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export const FounderSignature = () => {
   return (
-    <div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-start">
+    <div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-center">
       {/* Left Column: Bio */}
       <div className="space-y-8 text-left section-container">
         <div className="flex items-center gap-6 relative z-10">
@@ -35,7 +35,7 @@ export const FounderSignature = () => {
       </div>
 
       {/* Right Column: Cards 01, 02, 03 */}
-      <div className="space-y-6 lg:-mt-4">
+      <div className="space-y-6">
         <Card className="glass-card hover:border-purple-500/30">
           <h4 className="text-base font-bold mb-3 flex items-center gap-2">
             <span className="w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-[10px]">01</span>
diff --git a/apps/web/src/components/landing/services-preview.tsx b/apps/web/src/components/landing/services-preview.tsx
index a36fb0c..06635b5 100644
--- a/apps/web/src/components/landing/services-preview.tsx
+++ b/apps/web/src/components/landing/services-preview.tsx
@@ -3,7 +3,7 @@ import { Card } from "@repo/ui/components/card";
 export function ServicesPreview() {
   return (
     <div className="w-full max-w-6xl mx-auto px-4 mt-8 mb-16 relative z-10">
-        <div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 section-container">
+        <div className="text-left mb-8 section-container border-l-4 border-l-emerald-500">
             <h3 className="text-3xl font-bold mb-3 tracking-tight">High-Performance Webshops</h3>
             <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
                 We build commerce infrastructure that scales with you. From complex supply chains 
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index db98acb..83e552d 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -3,12 +3,18 @@
 import { useTheme } from "next-themes";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "@repo/ui/components/button";
+import { useEffect, useState } from "react";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const toggleTheme = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const isDark = theme === "dark";
+    const isDark = resolvedTheme === "dark";
     
     // Fallback for browsers without startViewTransition
     if (!document.startViewTransition) {
@@ -46,10 +52,18 @@ export function ThemeToggle() {
   };
 
   return (
-    <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full">
-      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-      <span className="sr-only">Toggle theme</span>
+    <Button 
+      variant="ghost" 
+      size="icon" 
+      onClick={mounted ? toggleTheme : undefined}
+      className="rounded-full"
+      aria-label="Toggle theme"
+    >
+      {mounted && resolvedTheme === "dark" ? (
+        <Moon className="h-5 w-5" />
+      ) : (
+        <Sun className="h-5 w-5" />
+      )}
     </Button>
   );
 }
\ No newline at end of file