whey.party / red-dwarf
an appview-less Bluesky client using Constellation and PDS Queries reddwarf.app
frontend spa bluesky reddwarf microcosm
fork atom

color fixes

rimar1337 d1602982 9c34168f

options
unified split
Changed files
+11 -11
src
components
Login.tsx
routes
profile.$did
index.tsx
+6 -6
src/components/Login.tsx
··· 143 onClick={onClick} 144 className={`px-4 py-2 text-sm font-medium transition-colors ${ 145 active 146 - ? "text-gray-200 border-b-2 border-gray-500" 147 : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" 148 }`} 149 > ··· 211 212 if (!profile) { 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]'}`} /> 216 <div className="flex flex-col gap-2"> 217 <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-28' : 'h-3 w-20'}`} /> 218 <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-20' : 'h-3 w-16'}`} /> ··· 222 } 223 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]'}`} /> 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> 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 </div> 231 </div>
··· 143 onClick={onClick} 144 className={`px-4 py-2 text-sm font-medium transition-colors ${ 145 active 146 + ? "text-gray-600 dark:text-gray-200 border-b-2 border-gray-500" 147 : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" 148 }`} 149 > ··· 211 212 if (!profile) { 213 return ( // Skeleton loader 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 <div className="flex flex-col gap-2"> 217 <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-28' : 'h-3 w-20'}`} /> 218 <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-20' : 'h-3 w-16'}`} /> ··· 222 } 223 224 return ( 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 <div className="flex flex-col items-start text-left"> 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 <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 </div> 231 </div>
+5 -5
src/routes/profile.$did/index.tsx
··· 114 </div> 115 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"> 118 {/* Banner */} 119 <div 120 className="w-full h-40 bg-gray-300 dark:bg-gray-700" ··· 143 */} 144 {true ? ( 145 <> 146 - <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]"> 147 Follow 148 </button> 149 - <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]"> 150 Unfollow 151 </button> 152 </> 153 ) : ( 154 - <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]"> 155 Edit Profile 156 </button> 157 )} 158 - <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]"> 159 ... {/* todo: icon */} 160 </button> 161 </div>
··· 114 </div> 115 116 {/* Profile Header */} 117 + <div className="w-full max-w-2xl mx-auto overflow-hidden relative bg-gray-100 dark:bg-gray-900"> 118 {/* Banner */} 119 <div 120 className="w-full h-40 bg-gray-300 dark:bg-gray-700" ··· 143 */} 144 {true ? ( 145 <> 146 + <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 147 Follow 148 </button> 149 + <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 150 Unfollow 151 </button> 152 </> 153 ) : ( 154 + <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 155 Edit Profile 156 </button> 157 )} 158 + <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 159 ... {/* todo: icon */} 160 </button> 161 </div>