reformat profile header · atpota.to/cred.blue@1abdb7e

+1 -4

src/components/Card/Card.css

··· 39 39 padding-bottom: 10px; 40 40 } 41 41 42 - .card-header { 43 - cursor: move; 44 - } 45 - 46 42 /* Card title styles */ 47 43 .card-title { 48 44 margin: 0; ··· 83 79 cursor: move; 84 80 max-width: 18px; 85 81 text-align: center; 82 + display: none; 86 83 } 87 84 88 85 /* Drag icon styling */

+22 -10

src/components/UserProfile/UserProfile.css

··· 80 80 display: flex; 81 81 margin-left: 20px; 82 82 margin-right: 20px; 83 - gap: 60px 83 + gap: 60px; 84 + justify-content: center; 84 85 } 85 86 86 87 ··· 104 105 } 105 106 106 107 .user-profile-header p { 108 + margin-bottom: 0px; 107 109 margin-top: 0px; 108 - margin-bottom: 9px; 109 110 } 110 111 111 112 .user-profile-header h2 { ··· 129 130 display: flex; 130 131 flex-direction: column; 131 132 gap: 20px; 133 + align-content: center; 134 + justify-content: center; 132 135 } 133 136 134 137 .user-profile-data { ··· 204 207 205 208 .user-profile-activity { 206 209 text-transform: capitalize; 210 + align-content: center; 211 + justify-content: center; 212 + display: flex; 213 + flex-direction: column; 207 214 } 208 215 209 216 tspan { ··· 217 224 218 225 .user-profile-score { 219 226 align-content: center; 227 + justify-content: center; 228 + display: flex; 229 + flex-direction: column; 230 + } 231 + 232 + .user-profile-data-group { 233 + display: flex; 234 + flex-direction: column; 235 + gap: 14px; 236 + align-content: center; 237 + justify-content: center; 220 238 } 221 239 222 240 .dark-mode rect { ··· 240 258 } 241 259 242 260 .user-profile-header-rechart { 243 - max-width: 416.5px; 244 - margin: auto; 245 - display: flex; 246 - align-items: center; 247 - justify-content: center; 248 - } 249 - 250 - .user-profile-header-rechart { 251 261 display: flex; 252 262 align-items: center; 253 263 width: 100%; 254 264 margin: 0 auto; 255 265 padding: 1rem; 256 266 max-width: 200px; 267 + justify-content: center; 268 + max-height: 130px; 257 269 } 258 270 259 271 .score-gauge {

+60 -57

src/components/UserProfile/UserProfile.js

··· 240 240 return ( 241 241 <AccountDataContext.Provider value={selectedAccountData}> 242 242 <div className={`user-profile ${showContent ? "fade-in" : "hidden"}`}> 243 - <div className="user-profile-header"> 244 - <div className="user-profile-header-main"> 245 - <CircularLogo 246 - did={selectedAccountData.did} 247 - size={205} 248 - textColor="#004f84" 249 - /> 250 - <div classname="user-profile-main"> 251 - <div className="user-profile-name"> 252 - <h1>{displayName}</h1> 253 - <h2>@{resolvedHandle}</h2> 243 + <div className="user-profile-container"> 244 + <div className="user-profile-header"> 245 + <div className="user-profile-header-main"> 246 + <CircularLogo 247 + did={selectedAccountData.did} 248 + size={205} 249 + textColor="#004f84" 250 + /> 251 + <div className="user-profile-main"> 252 + <div className="user-profile-name"> 253 + <h1>{displayName}</h1> 254 + <h2>@{resolvedHandle}</h2> 255 + </div> 256 + <div className="user-profile-age"> 257 + <h2>{Math.floor(selectedAccountData.ageInDays)} days old</h2> 258 + </div> 259 + <div className="user-profile-badges"> 260 + <h3>{selectedAccountData.socialStatus}</h3> 261 + <h3>{selectedAccountData.postingStyle}</h3> 262 + </div> 254 263 </div> 255 - <div className="user-profile-age"> 256 - <h2>{Math.floor(selectedAccountData.ageInDays)} days old</h2> 264 + </div> 265 + 266 + <div className="user-profile-data"> 267 + <div className="user-profile-header-rechart"> 268 + <ScoreGauge score={selectedAccountData.combinedScore} /> 257 269 </div> 258 - <div className="user-profile-badges"> 259 - <h3>{selectedAccountData.socialStatus}</h3> 260 - <h3>{selectedAccountData.postingStyle}</h3> 270 + <div className="user-profile-data-group"> 271 + <div className="user-profile-score"> 272 + <p>Bluesky Score: {selectedAccountData.blueskyScore}</p> 273 + <p>Atproto Score: {selectedAccountData.atprotoScore}</p> 274 + </div> 275 + <div className="user-profile-activity"> 276 + <p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p> 277 + <p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p> 278 + </div> 261 279 </div> 262 280 </div> 263 - </div> 264 281 265 - <div className="user-profile-data"> 266 - <div className="user-profile-header-rechart"> 267 - <ScoreGauge score={selectedAccountData.combinedScore} /> 268 - </div> 269 - <div className="user-profile-data-group"> 270 - <div className="user-profile-score"> 271 - <p>Bluesky Score: {selectedAccountData.blueskyScore}</p> 272 - <p>Atproto Score: {selectedAccountData.atprotoScore}</p> 273 - </div> 274 - <div className="user-profile-activity"> 275 - <p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p> 276 - <p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p> 277 - </div> 282 + {/* <div className="toggle-switch"> 283 + <button 284 + className={`toggle-button ${selectedPeriod === '30' ? 'active' : ''}`} 285 + onClick={() => setSelectedPeriod('30')} 286 + > 287 + Last 30 Days 288 + </button> 289 + <button 290 + className={`toggle-button ${selectedPeriod === '90' ? 'active' : ''}`} 291 + onClick={() => setSelectedPeriod('90')} 292 + > 293 + Last 90 Days 294 + </button> 295 + </div> */} 278 296 </div> 279 297 </div> 280 298 281 - {/* <div className="toggle-switch"> 282 - <button 283 - className={`toggle-button ${selectedPeriod === '30' ? 'active' : ''}`} 284 - onClick={() => setSelectedPeriod('30')} 285 - > 286 - Last 30 Days 287 - </button> 288 - <button 289 - className={`toggle-button ${selectedPeriod === '90' ? 'active' : ''}`} 290 - onClick={() => setSelectedPeriod('90')} 291 - > 292 - Last 90 Days 293 - </button> 294 - </div> */} 295 - 296 299 <div className="share-button-container"> 297 - <button 298 - className="share-button-profile" 299 - type="button" 300 - onClick={() => window.open( 301 - `https://bsky.app/intent/compose?text=${encodeURIComponent( 302 - `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` 303 - )}`, '_blank' 304 - )} 305 - > 306 - Share Results 307 - </button> 308 - </div> 300 + <button 301 + className="share-button-profile" 302 + type="button" 303 + onClick={() => window.open( 304 + `https://bsky.app/intent/compose?text=${encodeURIComponent( 305 + `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` 306 + )}`, '_blank' 307 + )} 308 + > 309 + Share Results 310 + </button> 311 + 309 312 </div> 310 313 311 314 <ResponsiveGridLayout

Configure Feed

Configure Feed