Enhance UI consistency in House components: Replace SectionTitle with styled headings in HouseCard, HouseManagement, and HousesSection for improved visual hierarchy and readability. Update styles for better alignment and user experience.

Enhance UI consistency across multiple components: Update SectionTitle sizes and margins in StyleGuidePage, AdminPanel, ChallengesSection, HousesSection, LeaderboardSection, and ProfileForm. Add descriptive subtitles and additional text for improved user guidance.
2025-12-18 08:15:34 +01:00 · 2025-12-18 08:13:55 +01:00
8 changed files with 145 additions and 46 deletions
--- a/app/style-guide/page.tsx
+++ b/app/style-guide/page.tsx
@@ -31,7 +31,7 @@ export default function StyleGuidePage() {
      <Navigation />
      <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24 pb-16">
        <div className="w-full max-w-6xl mx-auto px-8">
-          <SectionTitle variant="gradient" size="xl" className="mb-12">
+          <SectionTitle variant="gradient" size="xl" className="mb-16">
            STYLE GUIDE
          </SectionTitle>
          <p className="text-gray-400 text-center mb-12 max-w-3xl mx-auto">
--- a/components/admin/AdminPanel.tsx
+++ b/components/admin/AdminPanel.tsx
@@ -38,7 +38,7 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
  return (
    <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
-        <SectionTitle variant="gradient" size="md" className="mb-8 text-center">
+        <SectionTitle variant="gradient" size="md" className="mb-16 text-center">
          ADMIN
        </SectionTitle>

--- a/components/challenges/ChallengesSection.tsx
+++ b/components/challenges/ChallengesSection.tsx
@@ -159,9 +159,18 @@ export default function ChallengesSection({
      </div>

      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
-        <SectionTitle variant="gradient" size="md" className="mb-8 text-center">
+        <SectionTitle
+          variant="gradient"
+          size="xl"
+          subtitle="Défiez vos collègues et gagnez des points"
+          className="mb-16"
+        >
          DÉFIS ENTRE JOUEURS
        </SectionTitle>
+        <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+          Créez des défis personnalisés, acceptez ceux de vos collègues et
+          remportez des récompenses en points pour monter dans le classement
+        </p>

        {successMessage && (
          <Alert variant="success" className="mb-4">
--- a/components/houses/HouseCard.tsx
+++ b/components/houses/HouseCard.tsx
@@ -72,7 +72,7 @@ export default function HouseCard({ house, onRequestSent }: HouseCardProps) {
    <Card className="p-4 sm:p-6">
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
        <div className="flex-1 min-w-0">
-          <h3 className="text-xl font-bold mb-2 break-words" style={{ color: "var(--foreground)" }}>
+          <h3 className="text-lg sm:text-xl font-bold mb-2 break-words" style={{ color: "var(--foreground)" }}>
            {house.name}
          </h3>
          {house.description && (
--- a/components/houses/HouseManagement.tsx
+++ b/components/houses/HouseManagement.tsx
@@ -4,7 +4,6 @@ import { useState, useEffect, useTransition } from "react";
 import { useSession } from "next-auth/react";
 import Card from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
-import SectionTitle from "@/components/ui/SectionTitle";
 import HouseForm from "./HouseForm";
 import RequestList from "./RequestList";
 import Alert from "@/components/ui/Alert";
@@ -164,7 +163,9 @@ export default function HouseManagement({
  if (!house) {
    return (
      <Card className="p-6">
-        <SectionTitle>Ma Maison</SectionTitle>
+        <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+          Ma Maison
+        </h2>
        <p className="text-sm mb-4" style={{ color: "var(--muted-foreground)" }}>
          Vous n'êtes membre d'aucune maison pour le moment.
        </p>
@@ -174,10 +175,25 @@ export default function HouseManagement({

  return (
    <div className="space-y-6">
-      <Card className="p-4 sm:p-6">
+      <Card 
+        className="p-4 sm:p-6"
+        style={{
+          borderColor: `color-mix(in srgb, var(--accent) 40%, var(--border))`,
+          borderWidth: "2px",
+          boxShadow: `0 0 20px color-mix(in srgb, var(--accent) 10%, transparent)`
+        }}
+      >
        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
          <div className="flex-1 min-w-0">
-            <SectionTitle>{house.name}</SectionTitle>
+            <h3 
+              className="text-xl sm:text-2xl font-bold mb-2 break-words"
+              style={{ 
+                color: "var(--accent)",
+                textShadow: `0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)`
+              }}
+            >
+              {house.name}
+            </h3>
            {house.description && (
              <p className="text-sm mt-2 break-words" style={{ color: "var(--muted-foreground)" }}>
                {house.description}
@@ -224,38 +240,83 @@ export default function HouseManagement({
          />
        ) : (
          <div>
-            <h3 className="font-bold mb-3" style={{ color: "var(--foreground)" }}>
+            <h4 
+              className="text-sm font-semibold uppercase tracking-wider mb-3"
+              style={{ 
+                color: "var(--primary)",
+                borderBottom: `2px solid color-mix(in srgb, var(--primary) 30%, transparent)`,
+                paddingBottom: "0.5rem"
+              }}
+            >
              Membres ({house.memberships?.length ?? 0})
-            </h3>
+            </h4>
            <div className="space-y-2">
-              {(house.memberships || []).map((membership) => (
-                <div
-                  key={membership.id}
-                  className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-2 rounded"
-                  style={{ backgroundColor: "var(--card-hover)" }}
-                >
-                  <div className="flex items-center gap-2 min-w-0 flex-1">
-                    {membership.user.avatar && (
-                      <img
-                        src={membership.user.avatar}
-                        alt={membership.user.username}
-                        className="w-8 h-8 rounded-full flex-shrink-0"
-                      />
-                    )}
-                    <div className="min-w-0">
-                      <span className="font-semibold block sm:inline" style={{ color: "var(--foreground)" }}>
-                        {membership.user.username}
-                      </span>
-                      <span className="text-xs block sm:inline sm:ml-2" style={{ color: "var(--muted-foreground)" }}>
-                        ({membership.user.score} pts - Niveau {membership.user.level})
-                      </span>
+              {(house.memberships || []).map((membership) => {
+                const isCurrentUser = membership.user.id === session?.user?.id;
+                const roleColor = 
+                  membership.role === "OWNER" ? "var(--accent)" :
+                  membership.role === "ADMIN" ? "var(--primary)" :
+                  "var(--muted-foreground)";
+                
+                return (
+                  <div
+                    key={membership.id}
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 rounded"
+                    style={{ 
+                      backgroundColor: isCurrentUser 
+                        ? "color-mix(in srgb, var(--primary) 10%, var(--card-hover))"
+                        : "var(--card-hover)",
+                      borderLeft: `3px solid ${roleColor}`,
+                      borderColor: isCurrentUser ? "var(--primary)" : "transparent"
+                    }}
+                  >
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
+                      {membership.user.avatar && (
+                        <img
+                          src={membership.user.avatar}
+                          alt={membership.user.username}
+                          className="w-8 h-8 rounded-full flex-shrink-0 border-2"
+                          style={{ borderColor: roleColor }}
+                        />
+                      )}
+                      <div className="min-w-0">
+                        <span 
+                          className="font-semibold block sm:inline"
+                          style={{ 
+                            color: isCurrentUser ? "var(--primary)" : "var(--foreground)"
+                          }}
+                        >
+                          {membership.user.username}
+                          {isCurrentUser && " (Vous)"}
+                        </span>
+                        <span 
+                          className="text-xs block sm:inline sm:ml-2"
+                          style={{ color: "var(--muted-foreground)" }}
+                        >
+                          <span style={{ color: "var(--success)" }}>
+                            {membership.user.score} pts
+                          </span>
+                          {" • "}
+                          <span style={{ color: "var(--blue)" }}>
+                            Niveau {membership.user.level}
+                          </span>
+                        </span>
+                      </div>
                    </div>
+                    <span 
+                      className="text-xs uppercase flex-shrink-0 px-2 py-1 rounded font-bold"
+                      style={{ 
+                        color: roleColor,
+                        backgroundColor: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
+                        border: `1px solid color-mix(in srgb, ${roleColor} 30%, transparent)`
+                      }}
+                    >
+                      {membership.role === "OWNER" && "👑 "}
+                      {membership.role}
+                    </span>
                  </div>
-                  <span className="text-xs uppercase flex-shrink-0" style={{ color: "var(--accent)" }}>
-                    {membership.role}
-                  </span>
-                </div>
-              ))}
+                );
+              })}
            </div>

            {isAdmin && (
@@ -317,7 +378,16 @@ export default function HouseManagement({

      {isAdmin && pendingRequests.length > 0 && (
        <Card className="p-4 sm:p-6">
-          <SectionTitle>Demandes d'adhésion</SectionTitle>
+          <h2 
+            className="text-lg sm:text-xl font-bold mb-4"
+            style={{ 
+              color: "var(--purple)",
+              borderBottom: `2px solid color-mix(in srgb, var(--purple) 30%, transparent)`,
+              paddingBottom: "0.5rem"
+            }}
+          >
+            Demandes d'adhésion
+          </h2>
          <RequestList requests={pendingRequests} onUpdate={onUpdate} />
        </Card>
      )}
--- a/components/houses/HousesSection.tsx
+++ b/components/houses/HousesSection.tsx
@@ -149,25 +149,33 @@ export default function HousesSection({
      {/* Title Section */}
      <SectionTitle
        variant="gradient"
-        size="lg"
+        size="xl"
        subtitle="Rejoignez une maison ou créez la vôtre"
-        className="mb-12 overflow-hidden"
+        className="mb-16"
      >
        MAISONS
      </SectionTitle>
+      <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+        Formez des équipes, créez votre propre maison et rivalisez avec les
+        autres maisons pour dominer le classement collectif
+      </p>

      <div className="space-y-4 sm:space-y-6">
        {session?.user && (
          <>
            {invitations.length > 0 && (
              <Card className="p-4 sm:p-6">
-                <SectionTitle>Mes Invitations</SectionTitle>
+                <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                  Mes Invitations
+                </h2>
                <InvitationList invitations={invitations} onUpdate={handleUpdate} />
              </Card>
            )}

            <Card className="p-4 sm:p-6">
-              <SectionTitle>Ma Maison</SectionTitle>
+              <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                Ma Maison
+              </h2>
              {myHouse ? (
                <HouseManagement
                  house={myHouse}
@@ -205,7 +213,9 @@ export default function HousesSection({
        )}

        <Card className="p-4 sm:p-6">
-          <SectionTitle>Toutes les Maisons</SectionTitle>
+          <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+            Toutes les Maisons
+          </h2>
          <div className="mb-4">
            <Input
              placeholder="Rechercher une maison..."
--- a/components/leaderboard/LeaderboardSection.tsx
+++ b/components/leaderboard/LeaderboardSection.tsx
@@ -74,12 +74,17 @@ export default function LeaderboardSection({
      {/* Title Section */}
      <SectionTitle
        variant="gradient"
-        size="lg"
+        size="xl"
        subtitle="Top Players"
-        className="mb-12 overflow-hidden"
+        className="mb-16"
      >
        LEADERBOARD
      </SectionTitle>
+      <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+        Consultez le classement des meilleurs joueurs et des maisons les plus
+        performantes. Montez dans les rangs en participant aux événements et en
+        relevant des défis
+      </p>

      {/* Players Leaderboard Table */}
      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto">
--- a/components/profile/ProfileForm.tsx
+++ b/components/profile/ProfileForm.tsx
@@ -171,12 +171,17 @@ export default function ProfileForm({
        {/* Title Section */}
        <SectionTitle
          variant="gradient"
-          size="lg"
+          size="xl"
          subtitle="Gérez votre profil"
-          className="mb-12"
+          className="mb-16"
        >
          PROFIL
        </SectionTitle>
+        <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+          Personnalisez votre avatar, votre bio, votre classe de personnage et
+          consultez vos statistiques. Gérez vos préférences et votre mot de
+          passe
+        </p>

        {/* Profile Card */}
        <Card variant="default" className="overflow-hidden">
Author	SHA1	Message	Date
Julien Froidefond	12bc44e3ac	Enhance UI consistency in House components: Replace SectionTitle with styled headings in HouseCard, HouseManagement, and HousesSection for improved visual hierarchy and readability. Update styles for better alignment and user experience. All checks were successful Deploy with Docker Compose / deploy (push) Successful in 2m37s Details	2025-12-18 08:15:34 +01:00
Julien Froidefond	4a415f79e0	Enhance UI consistency across multiple components: Update SectionTitle sizes and margins in StyleGuidePage, AdminPanel, ChallengesSection, HousesSection, LeaderboardSection, and ProfileForm. Add descriptive subtitles and additional text for improved user guidance.	2025-12-18 08:13:55 +01:00