an independent Bluesky client using Constellation, PDS Queries, and other services reddwarf.app
frontend spa bluesky reddwarf microcosm client app
99
fork

Configure Feed

Select the types of activity you want to include in your feed.

color fixes

rimar1337 d1602982 9c34168f

+11 -11
+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
··· 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>