feat: enhance user interface with improved styling and responsiveness

- Updated UserAvatar component to accept additional className for better customization. - Refined ProfilePage layout with responsive avatar styling. - Enhanced Header component with improved background and text styles. - Improved PopularTags and TopFriends components with better spacing and text shadows. - Updated ThoughtCard and ThoughtThread components for better visual hierarchy and responsiveness. - Enhanced UI components (Button, Badge, Card, DropdownMenu, Input, Popover, Separator, Skeleton, Textarea) with new styles and effects. - Added a new background image for visual enhancement.
2025-09-07 00:16:51 +02:00
parent c520690f1e
commit f1e891413a
18 changed files with 348 additions and 174 deletions
--- a/thoughts-frontend/app/globals.css
+++ b/thoughts-frontend/app/globals.css
@@ -41,28 +41,28 @@
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Frutiger Aero Gradients */
+  --gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%;
+  --gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%;
+  --gradient-fa-card: 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%,
+    hsl(var(--card)) 100%;
+  --gradient-fa-gloss: 135deg, rgba(255, 255, 255, 0.2) 0%,
+    rgba(255, 255, 255, 0) 100%;
+
+  --shadow-fa-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-fa-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-fa-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --fa-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  --text-shadow-default: 0 1px 1px rgba(0, 0, 0, 0.2);
+  --text-shadow-sm: 0 1px 0px rgba(255, 255, 255, 0.4);
+  --text-shadow-md: 0 2px 2px rgba(0, 0, 0, 0.2);
+  --text-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.2);
 }

 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
@@ -76,27 +76,40 @@
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
+
+  --background: hsl(0 0% 98%); /* Light off-white */
+  --foreground: hsl(222.2 47.4% 11.2%);
+
+  --muted: hsl(210 20% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 47.4% 11.2%);
+
+  --card: hsl(0 0% 100%); /* Pure white for a crisp look */
+  --card-foreground: hsl(222.2 47.4% 11.2%);
+
+  --border: hsl(214.3 31.8% 91.4%);
+  --input: hsl(214.3 31.8% 91.4%);
+  --ring: hsl(222.2 47.4% 11.2%);
+
+  --primary: hsl(217 91% 60%); /* Vibrant Blue */
+  --primary-foreground: hsl(210 40% 98%);
+
+  --secondary: hsl(155 70% 55%); /* Vibrant Green */
+  --secondary-foreground: hsl(210 40% 98%);
+
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+
+  --accent: hsl(210 20% 96.1%);
+  --accent-foreground: hsl(222.2 47.4% 11.2%);
+
+  --radius: 0.75rem; /* Larger border radius */
 }

 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
@@ -110,13 +123,143 @@
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
+
+  --background: hsl(222.2 47.4% 11.2%);
+  --foreground: hsl(210 40% 98%);
+
+  --muted: hsl(217.2 32.4% 14.8%);
+  --muted-foreground: hsl(215 20.2% 65.1%);
+
+  --popover: hsl(222.2 47.4% 11.2%);
+  --popover-foreground: hsl(210 40% 98%);
+
+  --card: hsl(217.2 32.4% 14.8%);
+  --card-foreground: hsl(210 40% 98%);
+
+  --border: hsl(217.2 32.4% 14.8%);
+  --input: hsl(217.2 32.4% 14.8%);
+  --ring: hsl(212.7 26.8% 83.9%);
+
+  --primary: hsl(217 91% 60%); /* Vibrant Blue (same as light) */
+  --primary-foreground: hsl(210 40% 98%);
+
+  --secondary: hsl(155 70% 55%); /* Vibrant Green (same as light) */
+  --secondary-foreground: hsl(210 40% 98%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+
+  --accent: hsl(217.2 32.4% 14.8%);
+  --accent-foreground: hsl(210 40% 98%);
+
+  /* Frutiger Aero Gradients for dark mode (slightly adjusted) */
+  --color-fa-gradient-blue: linear-gradient(
+    135deg,
+    hsl(217 91% 45%) 0%,
+    hsl(200 90% 55%) 100%
+  );
+  --color-fa-gradient-green: linear-gradient(
+    135deg,
+    hsl(155 70% 40%) 0%,
+    hsl(170 80% 50%) 100%
+  );
+  --color-fa-gradient-card: linear-gradient(
+    180deg,
+    hsl(var(--card)) 0%,
+    hsl(var(--card)) 90%,
+    hsl(var(--card)) 100%
+  );
 }

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
+
  body {
    @apply bg-background text-foreground;
+    background: linear-gradient(
+      135deg,
+      hsl(var(--background)) 0%,
+      hsl(var(--background)) 70%,
+      hsl(var(--primary) / 0.1) 100%
+    );
+  }
+
+  .glossy-effect::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    border-radius: var(--radius); /* Inherit parent's border radius */
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+    opacity: 0.8;
+    pointer-events: none; /* Allow clicks to pass through */
+    z-index: 1; /* Ensure it's above the background but below content */
+  }
+
+  .glossy-effect.bottom::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30%;
+    border-radius: var(--radius);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .fa-gradient-blue {
+    background: linear-gradient(var(--gradient-fa-blue));
+  }
+  .fa-gradient-green {
+    background: linear-gradient(var(--gradient-fa-green));
+  }
+  .fa-gradient-card {
+    background: linear-gradient(var(--gradient-fa-card));
+  }
+  .fa-gloss {
+    position: relative;
+  }
+  .fa-gloss::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    border-radius: var(--radius);
+    background: linear-gradient(var(--gradient-fa-gloss));
+    opacity: 0.8;
+    pointer-events: none;
+    z-index: 1;
+  }
+  .fa-gloss.bottom::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30%;
+    border-radius: var(--radius);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    pointer-events: none;
+    z-index: 1;
  }
 }
--- a/thoughts-frontend/app/users/[username]/page.tsx
+++ b/thoughts-frontend/app/users/[username]/page.tsx
@@ -96,7 +96,11 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
              <div className="flex justify-between items-start">
                <div className="flex items-end gap-4">
                  <div className="w-24 h-24 rounded-full border-4 border-background shrink-0">
-                    <UserAvatar src={user.avatarUrl} alt={user.displayName} />
+                    <UserAvatar
+                      src={user.avatarUrl}
+                      alt={user.displayName}
+                      className="w-full h-full"
+                    />
                  </div>
                </div>
                {/* Action Button */}