Draft: User Profile

frontend/src/assets/styles/index.css

@@ -123,6 +123,16 @@ body[data-theme="green"] {
   --quickBar-bg: #e8f5e9;
   --quickBar-text: #2e7d32;
   --quickBar-border: #ffffff;
+
+  /*User Page*/
+
+  --user-pfp-border: #ffffff;
+  --user-pfp-border-shadow: 0px 0px 15px rgba(0, 0, 0, 0.754);
+
+  --user-borderBg: rgb(217, 240, 133);
+
+  --user-bg:  rgb(0, 78, 38);
+  --user-live-bg: rgb(217, 240, 133);
 }
 
 body[data-theme="orange"] {

frontend/src/pages/UserPage.tsx

@@ -110,49 +110,47 @@ const UserPage: React.FC = () => {
   }
   return (
     <DynamicPageContent
-      className={`min-h-screen ${
-        profileData.isLive
+      className={`min-h-screen ${profileData.isLive
         ? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]"
         : bgColors[userPageVariant]
         } text-white flex flex-col`}
     >
 
-      <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8">
-        <div className="grid grid-cols-3 w-full gap-8">
-          {/* Profile Section - Left Third */}
-          <div
-            id="profile"
-            className="col-span-1 bg-gray-800 rounded-lg p-6 shadow-lg"
-          >
-            <div className="flex flex-col items-center">
+      <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
+      <div className="grid grid-cols-4 grid-rows-[0.1fr_1.5fr] w-full gap-8">
+  {/* Profile Section - TOP */}
+  <div id="profile" 
+       className="col-span-4 row-span-1 h-full bg-[var(--user-bg)] 
+                  rounded-[30px] p-6 shadow-lg border-4 border-[var(--user-borderBg)] 
+                  relative flex flex-col items-center">
+
+<div className="absolute top-10 left-0 w-full h-3 bg-white "></div>
+
               {/* Profile Picture */}
-              <div className="relative w-48 h-48 rounded-full overflow-hidden mb-6">
+              <div className="relative -top-[50px] w-[20vw] h-[20vw] max-w-[200px] max-h-[200px]
+               rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)]">
                 <img
                   src="/images/monkey.png"
                   alt={`${profileData.username}'s profile`}
-                  className="w-full h-full object-cover"
+                  className="w-full h-full object-cover rounded-full"
                 />
-
-                {profileData.isPartnered && (
-                  <div className="absolute bottom-2 right-2 bg-purple-600 rounded-full p-2">
-                    <svg
-                      className="w-6 h-6 text-white"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                    </svg>
-                  </div>
-                )}
               </div>
 
-              {/* Username & Follower Count */}
-              <h1 className="text-3xl font-bold mb-2">
-                {profileData.username}
+              {/* Username - Now Directly Below PFP */}
+              <h1 className="text-[2em] font-bold -mt-9 text-center">
+                Welcome {profileData.username}
               </h1>
-              <small className="text-green-400">
-                {userPageVariant.toUpperCase()}
-              </small>
+
+              {/* User Type (e.g., "USER")
+              <small className="text-green-400">{userPageVariant.toUpperCase()}</small>
+
+             Bio Section
+              <div className="mt-6 text-center">
+                <h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
+                <p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
+              </div>
+ */}
+
 
             {/* Follower Count */}
             {userPageVariant === "streamer" && (
@@ -192,15 +190,10 @@ const UserPage: React.FC = () => {
             )}
           </div>
 
-            {/* Bio Section */}
-            <div className="mt-6 text-center">
-              <h2 className="text-xl font-semibold mb-3">
-                About {profileData.username}
-              </h2>
-              <p className="text-gray-300 whitespace-pre-wrap">
-                {profileData.bio}
-              </p>
-            </div>
+          <div
+            id="settings"
+            className="col-span-1 bg-gray-800 rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
+          >
           </div>
 
           {/* Content Section */}
@@ -239,6 +232,11 @@ const UserPage: React.FC = () => {
               </>
             )}
           </div>
+
+          <div
+            id="mini"
+            className="col-span-1 bg-gray-800 rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
+          ></div>
         </div>
       </div>
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}