From 1abdb7e3d3fcf75814915c7cb6dab50dc199c3eb Mon Sep 17 00:00:00 2001
From: damedotblog <hi@dame.art>
Date: Tue, 18 Feb 2025 21:04:18 -0500
Subject: [PATCH] reformat profile header

---
 src/components/Card/Card.css               |   5 +-
 src/components/UserProfile/UserProfile.css |  32 ++++--
 src/components/UserProfile/UserProfile.js  | 117 +++++++++++----------
 3 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
index 3d265de..8da9349 100644
--- a/src/components/Card/Card.css
+++ b/src/components/Card/Card.css
@@ -39,10 +39,6 @@
   padding-bottom: 10px;
 }
 
-.card-header {
-  cursor: move;
-}
-
 /* Card title styles */
 .card-title {
   margin: 0;
@@ -83,6 +79,7 @@
   cursor: move;
   max-width: 18px;
   text-align: center;
+  display: none;
 }
 
 /* Drag icon styling */
diff --git a/src/components/UserProfile/UserProfile.css b/src/components/UserProfile/UserProfile.css
index bc2046d..92f1c8c 100644
--- a/src/components/UserProfile/UserProfile.css
+++ b/src/components/UserProfile/UserProfile.css
@@ -80,7 +80,8 @@
   display: flex;
   margin-left: 20px;
   margin-right: 20px;
-  gap: 60px
+  gap: 60px;
+  justify-content: center;
 }
 
 
@@ -104,8 +105,8 @@
 }
 
 .user-profile-header p {
+  margin-bottom: 0px;
   margin-top: 0px;
-  margin-bottom: 9px;
 }
 
 .user-profile-header h2 {
@@ -129,6 +130,8 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
+  align-content: center;
+  justify-content: center;
 }
 
 .user-profile-data {
@@ -204,6 +207,10 @@
 
 .user-profile-activity {
   text-transform: capitalize;
+  align-content: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
 }
 
 tspan {
@@ -217,6 +224,17 @@ tspan {
 
 .user-profile-score {
   align-content: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-profile-data-group {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-content: center;
+  justify-content: center;
 }
 
 .dark-mode rect {
@@ -239,14 +257,6 @@ tspan {
   opacity: 0.5;
 }
 
-.user-profile-header-rechart {
-  max-width: 416.5px;
-  margin: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .user-profile-header-rechart {
   display: flex;
   align-items: center;
@@ -254,6 +264,8 @@ tspan {
   margin: 0 auto;
   padding: 1rem;
   max-width: 200px;
+  justify-content: center;
+  max-height: 130px;
 }
 
 .score-gauge {
diff --git a/src/components/UserProfile/UserProfile.js b/src/components/UserProfile/UserProfile.js
index 8c972b5..d9c9bfb 100644
--- a/src/components/UserProfile/UserProfile.js
+++ b/src/components/UserProfile/UserProfile.js
@@ -240,72 +240,75 @@ const UserProfile = () => {
   return (
     <AccountDataContext.Provider value={selectedAccountData}>
       <div className={`user-profile ${showContent ? "fade-in" : "hidden"}`}>
-        <div className="user-profile-header">
-          <div className="user-profile-header-main">
-            <CircularLogo 
-              did={selectedAccountData.did}
-              size={205}
-              textColor="#004f84"
-            />
-            <div classname="user-profile-main">
-              <div className="user-profile-name">
-                <h1>{displayName}</h1>
-                <h2>@{resolvedHandle}</h2>
-              </div>
-              <div className="user-profile-age">
-                <h2>{Math.floor(selectedAccountData.ageInDays)} days old</h2>
-              </div>
-              <div className="user-profile-badges">
-                <h3>{selectedAccountData.socialStatus}</h3>
-                <h3>{selectedAccountData.postingStyle}</h3>
+        <div className="user-profile-container">
+          <div className="user-profile-header">
+            <div className="user-profile-header-main">
+              <CircularLogo 
+                did={selectedAccountData.did}
+                size={205}
+                textColor="#004f84"
+              />
+              <div className="user-profile-main">
+                <div className="user-profile-name">
+                  <h1>{displayName}</h1>
+                  <h2>@{resolvedHandle}</h2>
+                </div>
+                <div className="user-profile-age">
+                  <h2>{Math.floor(selectedAccountData.ageInDays)} days old</h2>
+                </div>
+                <div className="user-profile-badges">
+                  <h3>{selectedAccountData.socialStatus}</h3>
+                  <h3>{selectedAccountData.postingStyle}</h3>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="user-profile-data">
-            <div className="user-profile-header-rechart">
-              <ScoreGauge score={selectedAccountData.combinedScore} />
-            </div>
-            <div className="user-profile-data-group">
-              <div className="user-profile-score">
-                <p>Bluesky Score: {selectedAccountData.blueskyScore}</p>
-                <p>Atproto Score: {selectedAccountData.atprotoScore}</p>
+            <div className="user-profile-data">
+              <div className="user-profile-header-rechart">
+                <ScoreGauge score={selectedAccountData.combinedScore} />
               </div>
-              <div className="user-profile-activity">
-                <p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p>
-                <p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p>
+              <div className="user-profile-data-group">
+                <div className="user-profile-score">
+                  <p>Bluesky Score: {selectedAccountData.blueskyScore}</p>
+                  <p>Atproto Score: {selectedAccountData.atprotoScore}</p>
+                </div>
+                <div className="user-profile-activity">
+                  <p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p>
+                  <p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p>
+                </div>
               </div>
             </div>
-          </div>
 
-          {/* <div className="toggle-switch">
-            <button
-              className={`toggle-button ${selectedPeriod === '30' ? 'active' : ''}`}
-              onClick={() => setSelectedPeriod('30')}
-            >
-              Last 30 Days
-            </button>
-            <button
-              className={`toggle-button ${selectedPeriod === '90' ? 'active' : ''}`}
-              onClick={() => setSelectedPeriod('90')}
-            >
-              Last 90 Days
-            </button>
-          </div> */}
+            {/* <div className="toggle-switch">
+              <button
+                className={`toggle-button ${selectedPeriod === '30' ? 'active' : ''}`}
+                onClick={() => setSelectedPeriod('30')}
+              >
+                Last 30 Days
+              </button>
+              <button
+                className={`toggle-button ${selectedPeriod === '90' ? 'active' : ''}`}
+                onClick={() => setSelectedPeriod('90')}
+              >
+                Last 90 Days
+              </button>
+            </div> */}
+            </div>
+          </div>
 
           <div className="share-button-container">
-            <button
-              className="share-button-profile"
-              type="button"
-              onClick={() => window.open(
-                `https://bsky.app/intent/compose?text=${encodeURIComponent(
-                  `My @cred.blue score is ${selectedAccountData.combinedScore}/1000, and my account is ${Math.floor(selectedAccountData.ageInDays)} days old.\n\nI'm ${selectedAccountData.activityAll.activityStatus} on the network.\n\nMy social status is "${selectedAccountData.socialStatus}" with a posting style of "${selectedAccountData.postingStyle}".\n\nCheck your score: cred.blue`
-                )}`, '_blank'
-              )}
-            >
-              Share Results
-            </button>
-          </div>
+              <button
+                className="share-button-profile"
+                type="button"
+                onClick={() => window.open(
+                  `https://bsky.app/intent/compose?text=${encodeURIComponent(
+                    `My @cred.blue score is ${selectedAccountData.combinedScore}/1000, and my account is ${Math.floor(selectedAccountData.ageInDays)} days old.\n\nI'm ${selectedAccountData.activityAll.activityStatus} on the network.\n\nMy social status is "${selectedAccountData.socialStatus}" with a posting style of "${selectedAccountData.postingStyle}".\n\nCheck your score: cred.blue`
+                  )}`, '_blank'
+                )}
+              >
+                Share Results
+              </button>
+              
         </div>
 
         <ResponsiveGridLayout
-- 
2.51.2