From 60060617a5a29128b3102a4f1176f2a52d710a37 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Wed, 19 Feb 2025 19:18:51 +0000
Subject: [PATCH] Update: Green User Profile

---
 frontend/src/assets/styles/index.css     |  10 ++-
 frontend/src/components/Input/Button.tsx |  18 ++++
 frontend/src/pages/UserPage.tsx          | 109 +++++++++++++++--------
 3 files changed, 96 insertions(+), 41 deletions(-)

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index 8853016..25f124a 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -112,6 +112,7 @@ body[data-theme="green"] {
   --profile-border: #ffffff;
 
   --follow-bg: #ffffff;
+  --follow-text: #2e7d32;
   --follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754);
 
   --liveNow: rgba(69, 150, 74, 0.6);
@@ -127,9 +128,14 @@ body[data-theme="green"] {
   /*User Page*/
 
   --user-pfp-border: #ffffff;
-  --user-pfp-border-shadow: 0px 0px 15px rgba(0, 0, 0, 0.754);
+  --user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
 
-  --user-borderBg: rgb(217, 240, 133);
+  --user-borderBg: rgb(255, 237, 123);
+  --user-box: rgb(1, 136, 66);
+  --user-box-strip: rgb(217, 240, 133);
+  --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
+  --user-sideBox: rgb(1, 61, 30);
+  --user-contentBox: rgb(245, 228, 167);
 
   --user-bg:  rgb(0, 78, 38);
   --user-live-bg: rgb(217, 240, 133);
diff --git a/frontend/src/components/Input/Button.tsx b/frontend/src/components/Input/Button.tsx
index 6c20fbb..83a319c 100644
--- a/frontend/src/components/Input/Button.tsx
+++ b/frontend/src/components/Input/Button.tsx
@@ -24,6 +24,24 @@ const Button: React.FC<ButtonProps> = ({
   );
 };
 
+interface EditButtonProps extends ButtonProps {
+}
+
+export const EditButton: React.FC<EditButtonProps> = ({
+  children = "",
+  extraClasses = "",
+  onClick,
+}) => {
+  return (
+    <button
+      className={`${extraClasses} p-[0.5em] bg-yellow-500 hover:bg-black rounded-[3rem] border-2 border-white shadow-lg transition-all duration-300`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};  
+
 interface ToggleButtonProps extends ButtonProps {
   toggled?: boolean;
 }
diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx
index 458bd0e..f9a6d77 100644
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -7,9 +7,10 @@ import { useParams } from "react-router-dom";
 import ListItem from "../components/Layout/ListItem";
 import { useFollow } from "../hooks/useFollow";
 import { useNavigate } from "react-router-dom";
-import Button from "../components/Input/Button";
+import Button, { EditButton } from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
+
 interface UserProfileData {
   id: number;
   username: string;
@@ -117,42 +118,50 @@ const UserPage: React.FC = () => {
     >
 
       <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 -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 rounded-full"
-                />
-              </div>
-
-              {/* Username - Now Directly Below PFP */}
-              <h1 className="text-[2em] font-bold -mt-9 text-center">
-                Welcome {profileData.username}
-              </h1>
-
-              {/* 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>
- */}
+        <div className="grid grid-cols-4 grid-rows-[0.1fr_1.5fr] w-full gap-8">
+          {/* Profile Section - TOP  */}
 
 
-            {/* Follower Count */}
+          <div id="profile"
+            className="col-span-4 row-span-1 h-full bg-[var(--user-bg)] 
+        rounded-[30px] p-3 shadow-lg 
+        relative flex flex-col items-center">
+
+            {/* Border Overlay (Always on Top) */}
+            <div className="absolute left-[0.5px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
+
+
+            {/* Background Box */}
+            <div className="absolute flex top-0 left-[0.5px] w-[99.8%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px] 
+                 bg-[var(--user-box)] z-10 flex-shrink justify-center"
+              style={{ boxShadow: 'var(--user-box-shadow)' }}
+            >
+              <div className="absolute top-4 w-[99.8%] h-[1.5vh] min-h-[10px] max-h-[2em]  bg-[var(--user-box-strip)]"></div>
+
+            </div>
+            {/* Profile Picture */}
+            <div className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
+               rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
+              style={{ boxShadow: 'var(--user-pfp-border-shadow)' }}>
+              <img
+                src="/images/monkey.png"
+                alt={`${profileData.username}'s profile`}
+                className="sm:w-[full] h-full object-cover rounded-full
+                "
+              />
+            </div>
+
+            {/* Username - Now Directly Below PFP */}
+            <h1 className="text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
+              {profileData.username}
+            </h1>
+
+
+
+
+
+            {/* Follower Count  */}
             {userPageVariant === "streamer" && (
               <>
                 <div className="flex items-center space-x-2 mb-6">
@@ -166,7 +175,7 @@ const UserPage: React.FC = () => {
                   )}
                 </div>
 
-                {/* (Un)Follow Button */}
+                {/* (Un)Follow Button  */}
                 {!isFollowing ? (
                   <Button
                     extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
@@ -186,20 +195,29 @@ const UserPage: React.FC = () => {
                     Unfollow
                   </Button>
                 )}
+
               </>
             )}
           </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"
+            className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
           >
+            {/* 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>
           </div>
 
           {/* Content Section */}
           <div
             id="content"
-            className="col-span-2 bg-gray-800 rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
+            className="col-span-2 bg-[var(--user-contentBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
           >
             {userPageVariant === "streamer" && (
               <>
@@ -235,8 +253,21 @@ const UserPage: React.FC = () => {
 
           <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>
+            className="bg-[var(--user-sideBox)] col-span-1 bg-gray-800 rounded-lg  text-center items-center justify-center
+  flex flex-col flex-grow gap-4 p-[2rem]"
+          >
+            <div
+              className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
+                 flex items-center justify-center w-full p-4"
+              onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
+              onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
+            >
+                <p className="text-[var(--follow-text)] whitespace-pre-wrap">Following www</p>
+                
+            </div>
+          </div>
+
+
         </div>
       </div>
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}