sign up and login enhancements · margin.at/margin@cd4df5a

+4 -1

web/public/locales/en/translation.json

··· 194 194 "connecting": "Connecting…", 195 195 "continue": "Continue", 196 196 "createAccount": "Create New Account", 197 + "or": "or", 197 198 "termsPrefix": "By signing in, you agree to our", 198 199 "termsLink": "Terms of Service", 199 200 "termsAnd": "and", ··· 216 217 "back": "Back", 217 218 "continue": "Continue", 218 219 "invite": "Invite", 220 + "moreOptions": "More options", 221 + "atmosphereNote": "Already have an atmosphere account? Just sign in!", 219 222 "providerError": "Could not connect to this provider. Please try again.", 220 223 "customPdsError": "Couldn't connect to that PDS. Double-check the address.", 221 224 "providers": { ··· 233 236 }, 234 237 "eurosky": { 235 238 "name": "Eurosky", 236 - "description": "Eurosky is your European home on the Atmosphere" 239 + "description": "Your European home on the Atmosphere" 237 240 }, 238 241 "selfhostedSocial": { 239 242 "name": "selfhosted.social",

+28 -14

web/src/components/modals/SignUpModal.tsx

··· 83 83 export default function SignUpModal({ onClose }: SignUpModalProps) { 84 84 const { t } = useTranslation(); 85 85 const [showCustomInput, setShowCustomInput] = useState(false); 86 + const [showMore, setShowMore] = useState(false); 86 87 const [customService, setCustomService] = useState(""); 87 88 const [loading, setLoading] = useState(false); 88 89 const [error, setError] = useState<string | null>(null); ··· 204 205 205 206 return ( 206 207 <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-4 bg-black/60 backdrop-blur-sm animate-fade-in"> 207 - <div className="w-full sm:max-w-md bg-white dark:bg-surface-900 rounded-t-3xl sm:rounded-3xl shadow-2xl overflow-hidden animate-slide-up max-h-[90vh] sm:max-h-[85vh] flex flex-col"> 208 - <div className="p-3 sm:p-4 flex justify-end flex-shrink-0"> 208 + <div className="w-full sm:max-w-md bg-white dark:bg-surface-900 rounded-t-3xl sm:rounded-3xl shadow-2xl overflow-hidden animate-slide-up flex flex-col"> 209 + <div className="px-5 sm:px-8 pt-5 sm:pt-6 pb-2 flex items-center justify-between flex-shrink-0"> 210 + <h2 className="text-xl font-display font-bold text-surface-900 dark:text-white"> 211 + {loading 212 + ? t("signUp.connecting") 213 + : showCustomInput 214 + ? t("signUp.customPdsTitle") 215 + : t("signUp.title")} 216 + </h2> 209 217 <button 210 218 onClick={onClose} 211 219 className="p-2 text-surface-400 dark:text-surface-500 hover:text-surface-900 dark:hover:text-white hover:bg-surface-50 dark:hover:bg-surface-800 rounded-full transition-colors" ··· 214 222 </button> 215 223 </div> 216 224 217 - <div className="px-5 sm:px-8 pb-8 sm:pb-10 overflow-y-auto"> 225 + <div className="px-5 sm:px-8 pb-8 sm:pb-10 overflow-y-auto custom-scrollbar"> 218 226 {loading ? ( 219 227 <div className="text-center py-10"> 220 228 <Loader2 221 229 size={40} 222 230 className="animate-spin text-primary-600 dark:text-primary-400 mx-auto mb-4" 223 231 /> 224 - <p className="text-surface-600 dark:text-surface-400 font-medium"> 225 - {t("signUp.connecting")} 226 - </p> 227 232 </div> 228 233 ) : showCustomInput ? ( 229 234 <div> 230 - <h2 className="text-2xl font-display font-bold text-surface-900 dark:text-white mb-2"> 231 - {t("signUp.customPdsTitle")} 232 - </h2> 235 + <h2 className="sr-only">{t("signUp.customPdsTitle")}</h2> 233 236 234 237 <p className="text-sm text-surface-500 dark:text-surface-400 mb-6"> 235 238 {t("signUp.customPdsSubtitle")} ··· 279 282 </div> 280 283 ) : ( 281 284 <div> 282 - <h2 className="text-2xl font-display font-bold text-surface-900 dark:text-white mb-2"> 283 - {t("signUp.title")} 284 - </h2> 285 285 <p className="text-surface-500 dark:text-surface-400 mb-6"> 286 286 {t("signUp.subtitle")}{" "} 287 287 <a ··· 303 303 )} 304 304 305 305 <div className="space-y-2"> 306 - {providers.map((p) => ( 306 + {(showMore ? providers : providers.slice(0, 1)).map((p) => ( 307 307 <button 308 308 key={p.id} 309 309 className={`w-full flex items-center gap-3 p-3 rounded-xl transition-all text-left group ${ 310 310 p.id === "margin" 311 - ? "bg-primary-50/80 dark:bg-primary-900/20 border border-primary-200/60 dark:border-primary-800/40 hover:border-primary-300 dark:hover:border-primary-700" 311 + ? "bg-primary-50/60 dark:bg-primary-900/15 border border-transparent hover:bg-primary-100/60 dark:hover:bg-primary-900/25" 312 312 : "bg-surface-50 dark:bg-surface-800/60 hover:bg-surface-100 dark:hover:bg-surface-800 border border-transparent" 313 313 }`} 314 314 onClick={() => handleProviderSelect(p)} ··· 346 346 </button> 347 347 ))} 348 348 </div> 349 + 350 + {!showMore && ( 351 + <div className="mt-3 space-y-3"> 352 + <button 353 + onClick={() => setShowMore(true)} 354 + className="w-full py-2.5 text-sm font-medium text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white bg-surface-50 dark:bg-surface-800/60 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-xl border border-transparent transition-colors" 355 + > 356 + {t("signUp.moreOptions")} 357 + </button> 358 + <p className="text-center text-xs text-surface-400 dark:text-surface-500"> 359 + {t("signUp.atmosphereNote")} 360 + </p> 361 + </div> 362 + )} 349 363 </div> 350 364 )} 351 365 </div>

+5 -7

web/src/views/auth/Login.tsx

··· 301 - className="w-full py-3.5 bg-[#027bff] hover:bg-[#0269d9] active:scale-[0.98] text-white rounded-xl font-bold text-lg shadow-md shadow-[#027bff]/20 focus:outline-none focus:ring-4 focus:ring-[#027bff]/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2 mt-2" ··· 334 - className="w-full py-3.5 bg-transparent border border-surface-200 dark:border-surface-700 hover:bg-surface-50 dark:hover:bg-surface-800 text-surface-600 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white rounded-xl font-bold transition-all text-sm" 332 + className="w-full py-2.5 text-sm font-medium text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white bg-surface-50 dark:bg-surface-800/60 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-xl transition-colors"

Configure Feed

Configure Feed