Merge pull request #2 from Bolado/dev

refactor: Enhance Header Styling & Profile Page Component Structure
Bolado · Nov 16, 2024 · d1e575b · d1e575b
2 parents 737206c + 5dce9bd
commit d1e575b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/frontend/src/components/global-header.jsx b/frontend/src/components/global-header.jsx
@@ -6,8 +6,12 @@ const GlobalHeader = () => {
   const logged = useLoaderData();
   return (
     <>
-      <header className="flex justify-between items-center p-3">
-        <h1 className="cinzel text-xl">SW:LC Rune Builder</h1>
+      <header className="flex justify-between items-center p-3 bg-slate-500/10">
+        <Link to="/build/new">
+          <h1 className="cinzel text-xl text-bold">
+            SW:Lost Centuria Rune Builder
+          </h1>
+        </Link>
         {logged ? (
           <Link to="/profile">
             <ProfileButton />

diff --git a/frontend/src/pages/profile.jsx b/frontend/src/pages/profile.jsx
@@ -7,24 +7,28 @@ const Profile = () => {
     <div className="max-w-7xl mx-auto">
       <h2 className="cinzel text-4xl text-center my-8">Your Builds</h2>
       <ul>
-        {builds.map((build) => {
-          // deserialize the build object
-          const b = deserializeBuildState(build.build);
-          return (
-            <li
-              className="p-2 m-2 hover:bg-blue-500/30 rounded-md"
-              key={build._id}
-            >
-              <Link to={`/build/${build._id}`}>
-                <h3 className="cinzel text-xl font-bold mr-4 ">{b.name}</h3>
-                <h3 className="text-md mr-4">Monster: {b.monster.name}</h3>
-              </Link>
-            </li>
-          );
-        })}
+        <BuildsList builds={builds} />
       </ul>
     </div>
   );
 };
 
+const BuildsList = ({ builds }) => {
+  return builds.map((build, i) => {
+    // deserialize the build object
+    const b = deserializeBuildState(build.build);
+    return (
+      <li
+        className={`p-2 m-2 hover:bg-slate-500/30 rounded-md bg-slate-500/10 `}
+        key={build._id}
+      >
+        <Link to={`/build/${build._id}`}>
+          <h3 className="cinzel text-xl font-bold mr-4 ">{b.name}</h3>
+          <h3 className="text-md mr-4">Monster: {b.monster.name}</h3>
+        </Link>
+      </li>
+    );
+  });
+};
+
 export default Profile;