From 1870c307dab8d19e809b785ff31587961f6ec44a Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 18 Oct 2025 09:10:14 +0200
Subject: [PATCH] feat: improve login UI with better copy and modern design

- Add welcoming title 'Welcome to Boris'
- Update description to highlight key features (bookmarks, long-form articles, highlights)
- Change button labels to 'Login with Extension' and 'Login with Bunker'
- Add FontAwesome icons to login buttons
- Create dedicated login.css with modern, mobile-first styling
- Improve bunker input UI with better spacing and visual hierarchy
- Use softer error styling with amber/warning colors instead of harsh red
- Add smooth transitions and hover effects
- Ensure mobile-optimized touch targets
---
 src/components/LoginOptions.tsx | 152 +++++++++------------
 src/index.css                   |   1 +
 src/styles/components/login.css | 232 ++++++++++++++++++++++++++++++++
 3 files changed, 300 insertions(+), 85 deletions(-)
 create mode 100644 src/styles/components/login.css

diff --git a/src/components/LoginOptions.tsx b/src/components/LoginOptions.tsx
index bb18501b..5aaf369d 100644
--- a/src/components/LoginOptions.tsx
+++ b/src/components/LoginOptions.tsx
@@ -74,103 +74,85 @@ const LoginOptions: React.FC = () => {
   }
 
   return (
-    <div className="empty-state">
-      <p style={{ marginBottom: '1rem' }}>Login with:</p>
-      
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '300px', margin: '0 auto' }}>
-        <button
-          onClick={handleExtensionLogin}
-          disabled={isLoading}
-          style={{
-            padding: '0.75rem 1.5rem',
-            fontSize: '1rem',
-            cursor: isLoading ? 'wait' : 'pointer',
-            opacity: isLoading ? 0.6 : 1
-          }}
-        >
-          {isLoading && !showBunkerInput ? 'Connecting...' : 'Extension'}
-        </button>
+    <div className="empty-state login-container">
+      <div className="login-content">
+        <h2 className="login-title">Welcome to Boris</h2>
+        <p className="login-description">
+          Login to see your bookmarks, explore long-form articles, and create your own highlights.
+        </p>
         
-        {!showBunkerInput ? (
+        <div className="login-buttons">
           <button
-            onClick={() => setShowBunkerInput(true)}
+            onClick={handleExtensionLogin}
             disabled={isLoading}
-            style={{
-              padding: '0.75rem 1.5rem',
-              fontSize: '1rem',
-              cursor: isLoading ? 'wait' : 'pointer',
-              opacity: isLoading ? 0.6 : 1
-            }}
+            className="login-button login-button-primary"
           >
-            Bunker
+            <i className="fa-solid fa-puzzle-piece" />
+            <span>{isLoading && !showBunkerInput ? 'Connecting...' : 'Login with Extension'}</span>
           </button>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-            <input
-              type="text"
-              placeholder="bunker://..."
-              value={bunkerUri}
-              onChange={(e) => setBunkerUri(e.target.value)}
+          
+          {!showBunkerInput ? (
+            <button
+              onClick={() => setShowBunkerInput(true)}
               disabled={isLoading}
-              style={{
-                padding: '0.75rem',
-                fontSize: '0.9rem',
-                width: '100%',
-                boxSizing: 'border-box'
-              }}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  handleBunkerLogin()
-                }
-              }}
-            />
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <button
-                onClick={handleBunkerLogin}
-                disabled={isLoading || !bunkerUri.trim()}
-                style={{
-                  padding: '0.5rem 1rem',
-                  fontSize: '0.9rem',
-                  flex: 1,
-                  cursor: isLoading || !bunkerUri.trim() ? 'not-allowed' : 'pointer',
-                  opacity: isLoading || !bunkerUri.trim() ? 0.6 : 1
-                }}
-              >
-                {isLoading && showBunkerInput ? 'Connecting...' : 'Connect'}
-              </button>
-              <button
-                onClick={() => {
-                  setShowBunkerInput(false)
-                  setBunkerUri('')
-                  setError(null)
-                }}
+              className="login-button login-button-secondary"
+            >
+              <i className="fa-solid fa-shield-halved" />
+              <span>Login with Bunker</span>
+            </button>
+          ) : (
+            <div className="bunker-input-container">
+              <input
+                type="text"
+                placeholder="bunker://..."
+                value={bunkerUri}
+                onChange={(e) => setBunkerUri(e.target.value)}
                 disabled={isLoading}
-                style={{
-                  padding: '0.5rem 1rem',
-                  fontSize: '0.9rem',
-                  cursor: isLoading ? 'not-allowed' : 'pointer',
-                  opacity: isLoading ? 0.6 : 1
+                className="bunker-input"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleBunkerLogin()
+                  }
                 }}
-              >
-                Cancel
-              </button>
+              />
+              <div className="bunker-actions">
+                <button
+                  onClick={handleBunkerLogin}
+                  disabled={isLoading || !bunkerUri.trim()}
+                  className="bunker-button bunker-connect"
+                >
+                  {isLoading && showBunkerInput ? 'Connecting...' : 'Connect'}
+                </button>
+                <button
+                  onClick={() => {
+                    setShowBunkerInput(false)
+                    setBunkerUri('')
+                    setError(null)
+                  }}
+                  disabled={isLoading}
+                  className="bunker-button bunker-cancel"
+                >
+                  Cancel
+                </button>
+              </div>
             </div>
+          )}
+        </div>
+        
+        {error && (
+          <div className="login-error">
+            <i className="fa-solid fa-circle-info" />
+            <span>{error}</span>
           </div>
         )}
-      </div>
-      
-      {error && (
-        <p style={{ color: 'var(--color-error, #ef4444)', marginTop: '1rem', fontSize: '0.9rem' }}>
-          {error}
+        
+        <p className="login-footer">
+          New to nostr? Start here:{' '}
+          <a href="https://nstart.me/" target="_blank" rel="noopener noreferrer">
+            nstart.me
+          </a>
         </p>
-      )}
-      
-      <p style={{ marginTop: '1.5rem', fontSize: '0.9rem' }}>
-        If you aren't on nostr yet, start here:{' '}
-        <a href="https://nstart.me/" target="_blank" rel="noopener noreferrer">
-          nstart.me
-        </a>
-      </p>
+      </div>
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index 93b9360c..3b8d526a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,6 +14,7 @@
 @import './styles/components/me.css';
 @import './styles/components/pull-to-refresh.css';
 @import './styles/components/skeletons.css';
+@import './styles/components/login.css';
 @import './styles/utils/animations.css';
 @import './styles/utils/utilities.css';
 @import './styles/utils/legacy.css';
diff --git a/src/styles/components/login.css b/src/styles/components/login.css
new file mode 100644
index 00000000..8c4ad392
--- /dev/null
+++ b/src/styles/components/login.css
@@ -0,0 +1,232 @@
+/* Login component styles */
+.login-container {
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.login-title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+  text-align: center;
+}
+
+.login-description {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin: 0;
+  text-align: center;
+}
+
+.login-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.login-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  min-height: var(--min-touch-target);
+}
+
+.login-button i {
+  font-size: 1.125rem;
+}
+
+.login-button-primary {
+  background: var(--color-primary);
+  color: white;
+}
+
+.login-button-primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.login-button-secondary {
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.login-button-secondary:hover:not(:disabled) {
+  background: var(--color-border);
+  border-color: var(--color-border-subtle);
+}
+
+.login-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.bunker-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+}
+
+.bunker-input {
+  padding: 0.75rem 1rem;
+  font-size: 0.95rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  color: var(--color-text);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  transition: all 0.2s ease;
+}
+
+.bunker-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.bunker-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bunker-input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.bunker-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bunker-button {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  font-size: 0.95rem;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  min-height: var(--min-touch-target);
+}
+
+.bunker-connect {
+  background: var(--color-primary);
+  color: white;
+}
+
+.bunker-connect:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.bunker-connect:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bunker-cancel {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+
+.bunker-cancel:hover:not(:disabled) {
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.bunker-cancel:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.login-error {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  background: rgba(251, 191, 36, 0.1);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.login-error i {
+  font-size: 1.125rem;
+  color: rgb(251, 191, 36);
+  flex-shrink: 0;
+}
+
+.login-footer {
+  margin: 0;
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  padding-top: 0.5rem;
+}
+
+.login-footer a {
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.login-footer a:hover {
+  color: var(--color-primary-hover);
+  text-decoration: underline;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .login-container {
+    padding: 1.5rem 1rem;
+  }
+  
+  .login-title {
+    font-size: 1.5rem;
+  }
+  
+  .login-description {
+    font-size: 0.95rem;
+  }
+  
+  .login-button {
+    padding: 0.875rem 1.25rem;
+  }
+  
+  .bunker-actions {
+    flex-direction: column;
+  }
+  
+  .bunker-button {
+    width: 100%;
+  }
+}
+