This repository has no description
gauge styling
author
damedotblog
date
(Feb 14, 2025, 1:46 PM -0500)
commit
49f8452b
49f8452b596f5a7e0a2ce06e291b6d45c661c7a5
parent
a18d18b5
a18d18b521636d5fbd29073f65e6a97eead7d676
+24
-11
+13
-2
src/components/UserProfile/UserProfile.css
+13
-2
src/components/UserProfile/UserProfile.css
···
13
13
}
14
14
15
15
.user-profile h1 {
16
-
margin-left: 20px;
17
-
margin-right: 20px;
16
+
margin: 0px;
18
17
}
19
18
20
19
/* Media query for responsiveness (optional, handled by react-grid-layout) */
···
113
112
114
113
.user-profile-header h2 {
115
114
font-size: 1.2em;
115
+
margin: 0px;
116
116
}
117
117
118
118
.user-profile-header h1 {
···
130
130
131
131
.text-center.font-semibold.mt-2 {
132
132
margin-top: -23px;
133
+
}
134
+
135
+
.user-profile-header-main {
136
+
display: flex;
137
+
flex-direction: column;
138
+
gap: 20px;
139
+
}
140
+
141
+
.user-profile-data {
142
+
display: flex;
143
+
flex-direction: column;
133
144
}
+11
-9
src/components/UserProfile/UserProfile.js
+11
-9
src/components/UserProfile/UserProfile.js
···
104
104
<h1>{displayName}</h1>
105
105
<h2>@{resolvedHandle}</h2>
106
106
</div>
107
-
<div className="user-profile-score">
108
-
<p><strong>Combined Score: {selectedAccountData.combinedScore}</strong></p>
109
-
<p>Bluesky Score: {selectedAccountData.blueskyScore}</p>
110
-
<p>Atproto Score: {selectedAccountData.atprotoScore}</p>
111
-
</div>
112
-
<div className="user-profile-activity">
113
-
<p><strong>Overall Status: {selectedAccountData.activityAll.activityStatus}</strong></p>
114
-
<p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p>
115
-
<p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p>
107
+
<div className="user-profile-data">
108
+
<div className="user-profile-score">
109
+
<p><strong>Combined Score: {selectedAccountData.combinedScore}</strong></p>
110
+
<p>Bluesky Score: {selectedAccountData.blueskyScore}</p>
111
+
<p>Atproto Score: {selectedAccountData.atprotoScore}</p>
112
+
</div>
113
+
<div className="user-profile-activity">
114
+
<p><strong>Overall Status: {selectedAccountData.activityAll.activityStatus}</strong></p>
115
+
<p>Bluesky Status: {selectedAccountData.activityAll.bskyActivityStatus}</p>
116
+
<p>Atproto Status: {selectedAccountData.activityAll.atprotoActivityStatus}</p>
117
+
</div>
116
118
</div>
117
119
</div>
118
120