From fbd5b2cfb6adeecd80debf888d620652711fef87 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 13 Jul 2025 02:28:04 +0200
Subject: [PATCH] Refactor `SheetHeader` styles and layout: adjust attribute
 card design, improve responsiveness, and streamline conditional rendering
 logic.

---
 .../sheetHeader/components/SheetHeader.tsx    | 141 +++++++++---------
 1 file changed, 67 insertions(+), 74 deletions(-)

diff --git a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
index b4acbcf..dc3a4bf 100644
--- a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
+++ b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
@@ -114,51 +114,49 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
           </div>
         </div>
         
-        <div className="flex justify-between items-center py-3 px-10">
-          <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
-            <img src="#" alt="char bild"/>
+        <div className="flex justify-between items-center py-5 px-5 gap-6">
+          <div className="w-[30%] h-full rounded-md bg-gray-600 overflow-hidden"
+               style={{height: '12.5em', width: '9.375em'}}>
+            <img src="#" alt="char bild" className="object-cover w-full h-full"/>
           </div>
           
-          <div className="flex flex-col gap-2 w-[80%]">
-            <div className="flex justify-between">
+          <div className="w-[70%] flex flex-col gap-2 w-[80%]">
+            <div className="w-[100%] flex justify-between">
               {attributes.map(attr => (
-                  <div key={attr.id} className="w-[10%] text-center">
-                    <div className="relative group cursor-help">
-                      <div className="font-bold">{attr.short}</div>
+                  <div key={attr.id} className="">
+                    <div className="relative group cursor-help flex items-center justify-center">
+                      <div>{attr.short}</div>
                       <span
-                          className="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                          className="absolute left-1/2 transform -translate-x-1/2 bottom-full bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                         {attr.name}
                       </span>
                     </div>
-                    <div>{attr.value}</div>
+                    <span className="font-bold" style={{fontSize: '1.5em'}}>{attr.value}</span>
                   </div>
               ))}
             </div>
             
-            {jsonData.attr.lp && (
-                <div className="w-[100%] flex pt-2">
-              <span className="relative group cursor-help">
-                LP
-                <span
-                    className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
-                  Lebenspunkte
-                </span>
-              </span>
-                  <div
-                      className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
-                    <div
-                        className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
-                        style={{width: `${Math.min(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}}
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
-                      {jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
-                    </div>
-                  </div>
+            <div className="w-[100%] flex pt-2">
+                  <span className="relative group cursor-help">
+                    LP
+                    <span
+                        className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                      Lebenspunkte
+                    </span>
+                  </span>
+              <div
+                  className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
+                <div
+                    className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
+                    style={{width: `${Math.min(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}}
+                />
+                <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
+                  {jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
                 </div>
-            )}
+              </div>
+            </div>
             
-            {jsonData.attr.ae > 0 && (
-                <div className="w-[100%] flex pt-2">
+            <div className="w-[100%] flex pt-2">
                   <span className="relative group cursor-help">
                     AP
                     <span
@@ -166,21 +164,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                       Astralpunkte
                     </span>
                   </span>
-                  <div
-                      className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
-                    <div
-                        className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300"
-                        style={{width: `${Math.min(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
-                      {jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
-                    </div>
-                  </div>
+              <div
+                  className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
+                <div
+                    className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300"
+                    style={{width: `${Math.min(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
+                />
+                <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
+                  {jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
                 </div>
-            )}
+              </div>
+            </div>
             
-            {jsonData.attr.kp > 0 && (
-                <div className="w-[100%] flex pt-2">
+            <div className="w-[100%] flex pt-2">
                   <span className="relative group cursor-help">
                     KP
                     <span
@@ -188,21 +184,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                       Karmapunkte
                     </span>
                   </span>
-                  <div
-                      className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
-                    <div
-                        className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300"
-                        style={{width: `${Math.min(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
-                      {jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
-                    </div>
-                  </div>
+              <div
+                  className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
+                <div
+                    className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300"
+                    style={{width: `${Math.min(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
+                />
+                <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
+                  {jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
                 </div>
-            )}
+              </div>
+            </div>
             
-            {jsonData.attr.sp > 0 && (
-                <div className="w-[100%] flex pt-2">
+            <div className="w-[100%] flex pt-2">
                   <span className="relative group cursor-help">
                     SP
                     <span
@@ -210,22 +204,21 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                       Schicksalspunkte
                     </span>
                   </span>
-                  <div className="ms-5 w-[100%] flex items-center gap-2">
-                    {Array.from({length: jsonData.attr.sp - jsonData.attr.permanentSP.lost}, (_, index) => (
-                        <div
-                            key={`sp-available-${index}`}
-                            className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"
-                        />
-                    ))}
-                    {Array.from({length: jsonData.attr.permanentSP.lost}, (_, index) => (
-                        <div
-                            key={`sp-lost-${index}`}
-                            className="rounded-full w-5 h-5 bg-gradient-to-br from-gray-700 to-gray-500"
-                        />
-                    ))}
-                  </div>
-                </div>
-            )}
+              <div className="ms-5 w-[100%] flex items-center gap-2">
+                {Array.from({length: jsonData.attr.sp - jsonData.attr.permanentSP.lost}, (_, index) => (
+                    <div
+                        key={`sp-available-${index}`}
+                        className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"
+                    />
+                ))}
+                {Array.from({length: jsonData.attr.permanentSP.lost}, (_, index) => (
+                    <div
+                        key={`sp-lost-${index}`}
+                        className="rounded-full w-5 h-5 bg-gradient-to-br from-gray-700 to-gray-500"
+                    />
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </>