an independent Bluesky client using Constellation, PDS Queries, and other services
reddwarf.app
frontend
spa
bluesky
reddwarf
microcosm
client
app
color fixes
+11
-11
+6
-6
src/components/Login.tsx
+6
-6
src/components/Login.tsx
···
143
143
onClick={onClick}
144
144
className={`px-4 py-2 text-sm font-medium transition-colors ${
145
145
active
146
-
? "text-gray-200 border-b-2 border-gray-500"
146
+
? "text-gray-600 dark:text-gray-200 border-b-2 border-gray-500"
147
147
: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
148
148
}`}
149
149
>
···
211
211
212
212
if (!profile) {
213
213
return ( // Skeleton loader
214
-
<div className={`flex items-center gap-2.5 animate-pulse ${large ? 'mb-2' : ''}`}>
215
-
<div className={`rounded-full bg-gray-300 dark:bg-gray-700 ${large ? 'w-12 h-12' : 'w-[30px] h-[30px]'}`} />
214
+
<div className={`flex items-center gap-2.5 animate-pulse ${large ? 'mb-1' : ''}`}>
215
+
<div className={`rounded-full bg-gray-300 dark:bg-gray-700 ${large ? 'w-10 h-10' : 'w-[30px] h-[30px]'}`} />
216
216
<div className="flex flex-col gap-2">
217
217
<div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-28' : 'h-3 w-20'}`} />
218
218
<div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-20' : 'h-3 w-16'}`} />
···
222
222
}
223
223
224
224
return (
225
-
<div className={`flex flex-row items-center gap-2.5 ${large ? 'mb-2' : ''}`}>
226
-
<img src={profile?.avatar} alt="avatar" className={`object-cover rounded-full ${large ? 'w-12 h-12' : 'w-[30px] h-[30px]'}`} />
225
+
<div className={`flex flex-row items-center gap-2.5 ${large ? 'mb-1' : ''}`}>
226
+
<img src={profile?.avatar} alt="avatar" className={`object-cover rounded-full ${large ? 'w-10 h-10' : 'w-[30px] h-[30px]'}`} />
227
227
<div className="flex flex-col items-start text-left">
228
-
<div className={`font-medium ${large ? 'text-gray-800 dark:text-gray-100 text-lg' : 'text-gray-800 dark:text-gray-100 text-sm'}`}>{profile?.displayName}</div>
228
+
<div className={`font-medium ${large ? 'text-gray-800 dark:text-gray-100 text-md' : 'text-gray-800 dark:text-gray-100 text-sm'}`}>{profile?.displayName}</div>
229
229
<div className={` ${large ? 'text-gray-500 dark:text-gray-400 text-sm' : 'text-gray-500 dark:text-gray-400 text-xs'}`}>@{profile?.handle}</div>
230
230
</div>
231
231
</div>
+5
-5
src/routes/profile.$did/index.tsx
+5
-5
src/routes/profile.$did/index.tsx
···
114
114
</div>
115
115
116
116
{/* Profile Header */}
117
-
<div className="w-full max-w-2xl mx-auto shadow-lg rounded-b-lg overflow-hidden relative bg-gray-200 dark:bg-gray-900">
117
+
<div className="w-full max-w-2xl mx-auto overflow-hidden relative bg-gray-100 dark:bg-gray-900">
118
118
{/* Banner */}
119
119
<div
120
120
className="w-full h-40 bg-gray-300 dark:bg-gray-700"
···
143
143
*/}
144
144
{true ? (
145
145
<>
146
-
<button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
146
+
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
147
147
Follow
148
148
</button>
149
-
<button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
149
+
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
150
150
Unfollow
151
151
</button>
152
152
</>
153
153
) : (
154
-
<button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
154
+
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
155
155
Edit Profile
156
156
</button>
157
157
)}
158
-
<button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
158
+
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
159
159
... {/* todo: icon */}
160
160
</button>
161
161
</div>