From 1c474928b355dbdfe887939cf0a4a0e1bc6aa212 Mon Sep 17 00:00:00 2001 From: Chrissy LeMaire Date: Mon, 9 Dec 2024 07:09:06 +0100 Subject: [PATCH] Fixed mobile The mobile sign-in view's UX has been improved by: Increasing vertical spacing between elements to 32px for better touch interaction Adding proper margins around the input field and button Enhancing text readability with increased font sizes and line height Providing more breathing room with 32px container padding Using more specific selectors to ensure styles are applied consistently The changes create a more comfortable and user-friendly mobile authentication experience. --- css/components/auth.css | 72 ++++++++++++++++++++++++++++------------- 1 file changed, 50 insertions(+), 22 deletions(-) diff --git a/css/components/auth.css b/css/components/auth.css index 5150f67..21b282e 100644 --- a/css/components/auth.css +++ b/css/components/auth.css @@ -1,5 +1,5 @@ /* Auth Container */ -.bsky-connect { +body .bsky-connect { background: var(--background); border-radius: 16px; padding: 24px; @@ -22,7 +22,7 @@ opacity: 1; } -.sign-in-title { +body .bsky-connect .sign-in-title { font-size: 22px; font-weight: 800; color: var(--text); @@ -31,7 +31,7 @@ position: relative; } -.bsky-auth-container { +body .bsky-connect .bsky-auth-container { display: flex; flex-direction: column; gap: 16px; @@ -39,12 +39,12 @@ margin-top: 12px; } -.auth-section { +body .bsky-connect .auth-section { width: 100%; } /* Input Styling */ -.input-wrapper { +body .bsky-connect .input-wrapper { position: relative; width: 100%; margin-top: 16px; @@ -63,7 +63,7 @@ pointer-events: none; } -.bsky-handle-input { +body .bsky-connect .bsky-handle-input { width: 100%; padding: 12px 16px 12px 36px; font-size: 15px; @@ -108,7 +108,7 @@ } /* Auth Button */ -.btn-auth { +body .bsky-connect .btn-auth { width: 100%; padding: 12px 16px; font-size: 15px; @@ -155,7 +155,7 @@ } /* Auth Message */ -.bsky-auth-message { +body .bsky-connect .bsky-auth-message { margin-top: 4px; font-size: 14px; color: var(--text-secondary); @@ -163,7 +163,7 @@ transition: all 0.3s ease; } -.bsky-auth-message.error { +body .bsky-connect .bsky-auth-message.error { color: var(--error); background: rgba(var(--error-rgb), 0.1); border-radius: 8px; @@ -171,39 +171,67 @@ margin: 8px 0; } -.auth-error { +body .bsky-connect .auth-error { font-weight: 500; line-height: 1.5; padding: 4px 0; } @media (max-width: 768px) { - .bsky-connect { + body .bsky-connect { margin-top: 20px; padding: 20px; } - .sign-in-title { + body .bsky-connect .sign-in-title { font-size: 20px; } } @media (max-width: 480px) { - .bsky-connect { - padding: 16px; - margin-top: 16px; + body .bsky-connect { + padding: 32px; + margin: 20px; + border-radius: 20px; + } + + body .bsky-connect .sign-in-title { + font-size: 20px; + margin: 0 0 32px 0; + } + + body .bsky-connect .bsky-auth-container { + gap: 32px; + margin-top: 32px; } - .sign-in-title { - font-size: 18px; + body .bsky-connect .input-wrapper { + margin: 32px 0; } - .bsky-handle-input, - .btn-auth { - padding: 10px 14px 10px 32px; + body .bsky-connect .bsky-handle-input { + padding: 16px 16px 16px 36px; + font-size: 16px; + height: 56px; + margin-bottom: 32px; } - .input-wrapper::before { - left: 14px; + body .bsky-connect .btn-auth { + margin-top: 32px; + padding: 18px; + font-size: 16px; + height: 56px; + } + + body .bsky-connect .bsky-auth-message { + margin-top: 32px; + font-size: 15px; + line-height: 1.6; + padding: 0 8px; + } + + body .bsky-connect .bsky-auth-message.error { + padding: 16px; + margin: 24px 0; } }