From 98ba3d0230d2958b66d67d3e9e5056a1b92386f0 Mon Sep 17 00:00:00 2001
From: sakrecoer <setto@dyne.org>
Date: Tue, 18 Aug 2026 22:28:19 +0200
Subject: [PATCH] styling

---
 src/App.css                        | 348 -----------------
 src/App.jsx                        |   2 +-
 src/components/TemplateApplier.jsx |   2 +-
 src/components/TemplateCreator.jsx |  79 ++--
 src/styles/index.css               | 605 +++++++++++++++++++++++++----
 5 files changed, 566 insertions(+), 470 deletions(-)
 delete mode 100644 src/App.css

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index cb01c70..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,348 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-  background: #f5f5f5;
-  color: #333;
-}
-
-.app {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.app-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 0;
-  border-bottom: 2px solid #e0e0e0;
-  margin-bottom: 30px;
-}
-
-.app-header h1 {
-  font-size: 24px;
-}
-
-.app-header nav {
-  display: flex;
-  gap: 20px;
-}
-
-.app-header nav a {
-  color: #666;
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.app-header nav a:hover {
-  color: #000;
-}
-
-.user-badge {
-  background: #e8f5e9;
-  padding: 8px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  color: #2e7d32;
-}
-
-main {
-  min-height: 400px;
-}
-
-footer {
-  margin-top: 50px;
-  padding-top: 20px;
-  border-top: 1px solid #e0e0e0;
-  text-align: center;
-  color: #999;
-  font-size: 14px;
-}
-
-/* Form Styles */
-.form-group {
-  margin-bottom: 20px;
-  margin-top: 20px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 600;
-  color: #555;
-}
-
-.form-group input,
-.form-group textarea {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  font-size: 14px;
-  transition: border-color 0.2s;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: #7c4dff;
-}
-
-/* Button Styles */
-.btn-primary {
-  background: #7c4dff;
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  width: 100%;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #6c3fdb;
-}
-
-.btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-secondary {
-  background: #e0e0e0;
-  color: #333;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
-.btn-secondary:hover {
-  background: #d0d0d0;
-}
-
-.btn-danger {
-  background: #ff5252;
-  color: white;
-  border: none;
-  padding: 4px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #d32f2f;
-}
-
-.btn-danger:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.btn-nostr {
-  background: #ff6b00;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 6px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.btn-nostr:hover:not(:disabled) {
-  background: #e85a00;
-}
-
-/* Relay List */
-.relay-list {
-  margin-bottom: 10px;
-}
-
-.relay-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  background: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  margin-bottom: 8px;
-}
-
-.relay-item .relay-input {
-  flex: 1;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.relay-item label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  font-weight: normal;
-}
-
-/* Share Box */
-.share-box {
-  margin-top: 20px;
-  padding: 20px;
-  background: #e8f5e9;
-  border-radius: 8px;
-  border-left: 4px solid #4caf50;
-}
-
-.share-box input {
-  width: 100%;
-  padding: 8px;
-  margin: 8px 0;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.share-box button {
-  background: #4caf50;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Template Applier */
-.template-preview {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  margin: 20px 0;
-  border: 1px solid #e0e0e0;
-}
-
-.template-preview h3 {
-  margin-bottom: 8px;
-}
-
-.relay-preview ul {
-  list-style: none;
-  padding: 0;
-}
-
-.relay-preview li {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.relay-url {
-  font-family: monospace;
-}
-
-.relay-permissions {
-  font-size: 18px;
-}
-
-.error-box, .warning {
-  padding: 20px;
-  background: #ffebee;
-  border-radius: 8px;
-  border-left: 4px solid #f44336;
-  color: #c62828;
-}
-
-.warning {
-  background: #fff3e0;
-  border-left-color: #ff9800;
-  color: #e65100;
-}
-
-.success-box {
-  margin-top: 20px;
-  padding: 20px;
-  background: #e8f5e9;
-  border-radius: 8px;
-  border-left: 4px solid #4caf50;
-}
-
-.loading {
-  text-align: center;
-  padding: 40px;
-  color: #999;
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-  .app-header {
-    flex-direction: column;
-    gap: 10px;
-    text-align: center;
-  }
-  
-  .app-header nav {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  .relay-item {
-    flex-wrap: wrap;
-  }
-  
-  .relay-item label {
-    font-size: 12px;
-  }
-}
-
-/* Connection status */
-.connection-status {
-  margin: 16px 0;
-}
-
-.connection-status .warning {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.connection-status .warning .btn-nostr {
-  flex-shrink: 0;
-}
-
-/* Info box for connection status */
-.info-box {
-  background: #e3f2fd;
-  border-left: 4px solid #2196f3;
-  color: #0d47a1;
-  padding: 12px 16px;
-  border-radius: var(--radius);
-}
-
-.info-box code {
-  background: rgba(0,0,0,0.08);
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-/* Community Templates */
-.active-template {
-  background: #f0ebff !important;
-  border-color: #7c4dff !important;
-  color: #7c4dff !important;
-}
-
-.active-template:hover {
-  background: #e8e0ff !important;
-}
diff --git a/src/App.jsx b/src/App.jsx
index 1bf3a42..b48d925 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { HashRouter, Routes, Route, Link } from 'react-router-dom';
 import TemplateCreator from './components/TemplateCreator';
 import TemplateApplier from './components/TemplateApplier';
-import './App.css';
+// Remove this line: import './App.css';
 
 function App() {
   const [connectedPubkey, setConnectedPubkey] = useState(null);
diff --git a/src/components/TemplateApplier.jsx b/src/components/TemplateApplier.jsx
index db95dec..00068d1 100644
--- a/src/components/TemplateApplier.jsx
+++ b/src/components/TemplateApplier.jsx
@@ -405,4 +405,4 @@ const TemplateApplier = ({ setConnectedPubkey }) => {
   );
 };
 
-export default TemplateApplier;
\ No newline at end of file
+export default TemplateApplier;
diff --git a/src/components/TemplateCreator.jsx b/src/components/TemplateCreator.jsx
index 87329d8..0580706 100644
--- a/src/components/TemplateCreator.jsx
+++ b/src/components/TemplateCreator.jsx
@@ -6,16 +6,16 @@ const TemplateCreator = () => {
   const [templateName, setTemplateName] = useState('');
   const [description, setDescription] = useState('');
   const [relays, setRelays] = useState([
-    { url: 'wss://your-cool.relay', read: true, write: true }
+    { url: 'wss://your.relay', read: true, write: true }
   ]);
   
   const [blossomServers, setBlossomServers] = useState([
-    { url: 'https://your-blossom.server' }
+    { url: 'https://your.blossom' }
   ]);
   const [showBlossom, setShowBlossom] = useState(true);
   
   const [dmRelays, setDmRelays] = useState([
-    { url: 'wss://your-dm.relay' }
+    { url: 'wss://dm.relay' }
   ]);
   const [showDmRelays, setShowDmRelays] = useState(true);
   
@@ -128,37 +128,25 @@ const TemplateCreator = () => {
     <div className="template-creator">
       <h2>Create Relay Template</h2>
 
-      <div className="form-group" style={{ 
-        background: '#f8f9fa', 
-        padding: '16px', 
-        borderRadius: '8px',
-        border: '1px solid #e9ecef',
-        marginBottom: '24px'
-      }}>
+      {/* ✅ MOVED INLINE STYLES TO CSS CLASS */}
+      <div className="community-templates-section">
         <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
           <span style={{ fontSize: '18px' }}>📚</span>
           Community Templates
         </label>
-        <p style={{ fontSize: '13px', color: '#666', marginBottom: '10px' }}>
+        <p className="community-templates-description">
           Load a pre-configured template from popular communities
         </p>
         
-        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div className="community-templates-buttons">
           {Object.entries(communityTemplates).map(([key, template]) => (
             <button
               key={key}
               onClick={() => loadCommunityTemplate(key)}
-              className={`btn-secondary ${selectedTemplate === key ? 'active-template' : ''}`}
-              style={{
-                padding: '8px 16px',
-                border: selectedTemplate === key ? '2px solid #7c4dff' : '1px solid #ddd',
-                background: selectedTemplate === key ? '#f0ebff' : 'white',
-                fontWeight: selectedTemplate === key ? '600' : 'normal',
-                transition: 'all 0.2s'
-              }}
+              className={`btn-secondary community-template-btn ${selectedTemplate === key ? 'active-template' : ''}`}
             >
               {template.name}
-              <span style={{ fontSize: '11px', color: '#999', marginLeft: '4px' }}>
+              <span className="relay-count">
                 ({template.relays.length} relays)
               </span>
             </button>
@@ -166,15 +154,7 @@ const TemplateCreator = () => {
         </div>
         
         {selectedTemplate && (
-          <div style={{ 
-            marginTop: '10px', 
-            fontSize: '13px', 
-            color: '#666',
-            padding: '8px 12px',
-            background: 'white',
-            borderRadius: '4px',
-            border: '1px solid #e9ecef'
-          }}>
+          <div className="community-template-info">
             💡 <strong>{communityTemplates[selectedTemplate].name}:</strong> {communityTemplates[selectedTemplate].description}
           </div>
         )}
@@ -194,8 +174,7 @@ const TemplateCreator = () => {
               setShowBlossom(true);
               setShowDmRelays(true);
             }}
-            className="btn-secondary"
-            style={{ marginTop: '8px', fontSize: '12px' }}
+            className="btn-secondary clear-template-btn"
           >
             ✕ Clear Template
           </button>
@@ -230,35 +209,31 @@ const TemplateCreator = () => {
           onRemove={removeRelay}
         />
         
-        <div style={{ marginTop: '10px', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div className="common-relay-buttons">
           <button onClick={addRelay} className="btn-secondary">
             + Add Custom Relay
           </button>
           <button 
             onClick={() => addCommonRelay('wss://relay.primal.net')} 
-            className="btn-secondary"
-            style={{ fontSize: '12px' }}
+            className="btn-secondary common-relay-btn"
           >
             + Primal
           </button>
           <button 
             onClick={() => addCommonRelay('wss://relay.damus.io')} 
-            className="btn-secondary"
-            style={{ fontSize: '12px' }}
+            className="btn-secondary common-relay-btn"
           >
             + Damus
           </button>
           <button 
             onClick={() => addCommonRelay('wss://nos.lol')} 
-            className="btn-secondary"
-            style={{ fontSize: '12px' }}
+            className="btn-secondary common-relay-btn"
           >
             + Nos.lol
           </button>
           <button 
             onClick={() => addCommonRelay('wss://relay.snort.social')} 
-            className="btn-secondary"
-            style={{ fontSize: '12px' }}
+            className="btn-secondary common-relay-btn"
           >
             + Snort
           </button>
@@ -270,8 +245,7 @@ const TemplateCreator = () => {
           <label style={{ marginBottom: 0 }}>🌺 Blossom Servers (kind 10063)</label>
           <button 
             onClick={() => setShowBlossom(!showBlossom)}
-            className="btn-secondary"
-            style={{ fontSize: '12px', padding: '4px 10px' }}
+            className="btn-secondary toggle-btn"
           >
             {showBlossom ? 'Hide' : 'Show'}
           </button>
@@ -279,7 +253,7 @@ const TemplateCreator = () => {
         
         {showBlossom && (
           <>
-            <p style={{ fontSize: '13px', color: '#666', marginBottom: '10px' }}>
+            <p className="helper-text">
               Servers used to host your blobs/images. Order determines trust/reliability.
             </p>
             {blossomServers.map((server, index) => (
@@ -301,7 +275,7 @@ const TemplateCreator = () => {
                 </button>
               </div>
             ))}
-            <button onClick={addBlossomServer} className="btn-secondary" style={{ marginTop: '4px' }}>
+            <button onClick={addBlossomServer} className="btn-secondary add-btn">
               + Add Blossom Server
             </button>
           </>
@@ -313,8 +287,7 @@ const TemplateCreator = () => {
           <label style={{ marginBottom: 0 }}>💬 DM Relays (kind 10050)</label>
           <button 
             onClick={() => setShowDmRelays(!showDmRelays)}
-            className="btn-secondary"
-            style={{ fontSize: '12px', padding: '4px 10px' }}
+            className="btn-secondary toggle-btn"
           >
             {showDmRelays ? 'Hide' : 'Show'}
           </button>
@@ -322,7 +295,7 @@ const TemplateCreator = () => {
         
         {showDmRelays && (
           <>
-            <p style={{ fontSize: '13px', color: '#666', marginBottom: '10px' }}>
+            <p className="helper-text">
               Relays used for private messages.
             </p>
             {dmRelays.map((relay, index) => (
@@ -344,7 +317,7 @@ const TemplateCreator = () => {
                 </button>
               </div>
             ))}
-            <button onClick={addDmRelay} className="btn-secondary" style={{ marginTop: '4px' }}>
+            <button onClick={addDmRelay} className="btn-secondary add-btn">
               + Add DM Relay
             </button>
           </>
@@ -366,11 +339,11 @@ const TemplateCreator = () => {
           <h3>✅ Template Created!</h3>
           <p>Share this link with your community:</p>
           <input type="text" value={shareUrl} readOnly />
-          <button onClick={() => navigator.clipboard?.writeText(shareUrl)}>
-            Copy Link
+          <button onClick={() => navigator.clipboard?.writeText(shareUrl)} className="btn-success">
+          Copy Link
           </button>
-          <p style={{ fontSize: '12px', color: '#666', marginTop: '8px' }}>
-            🔒 Template will be published to blast relays (configured in code)
+          <p className="helper-text" style={{ marginTop: '8px' }}>
+            💡 Send this link to a friend. When they visit that page, they can apply these settings and blast them to many relays, so other npubs can find them
           </p>
         </div>
       )}
diff --git a/src/styles/index.css b/src/styles/index.css
index 821c096..89a06f3 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,4 +1,6 @@
-/* Reset and base styles */
+/* ============================================
+ *  RESET & BASE STYLES
+ *  ============================================ */
 * {
   margin: 0;
   padding: 0;
@@ -8,17 +10,27 @@
 :root {
   --primary: #7c4dff;
   --primary-dark: #6c3fdb;
+  --primary-light: #f0ebff;
   --secondary: #e0e0e0;
   --success: #4caf50;
+  --success-light: #e8f5e9;
   --danger: #ff5252;
   --warning: #ff9800;
+  --warning-light: #fff3e0;
+  --info: #2196f3;
+  --info-light: #e3f2fd;
+  --nostr: #ff6b00;
+  --nostr-dark: #e85a00;
   --text: #333;
   --text-light: #666;
+  --text-muted: #999;
   --background: #f5f5f5;
   --white: #ffffff;
   --border: #e0e0e0;
-  --shadow: 0 2px 4px rgba(0,0,0,0.1);
+  --border-light: #f0f0f0;
+  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   --radius: 8px;
+  --radius-sm: 4px;
 }
 
 body {
@@ -28,7 +40,9 @@ body {
   line-height: 1.6;
 }
 
-/* App Layout */
+/* ============================================
+ *  APP LAYOUT
+ *  ============================================ */
 .app {
   max-width: 800px;
   margin: 0 auto;
@@ -38,7 +52,9 @@ body {
   flex-direction: column;
 }
 
-/* Header */
+/* ============================================
+ *  HEADER
+ *  ============================================ */
 .app-header {
   display: flex;
   align-items: center;
@@ -76,7 +92,7 @@ body {
 }
 
 .user-badge {
-  background: #e8f5e9;
+  background: var(--success-light);
   padding: 6px 14px;
   border-radius: 20px;
   font-size: 14px;
@@ -84,22 +100,38 @@ body {
   font-family: monospace;
 }
 
-/* Main content */
+/* ============================================
+ *  MAIN CONTENT
+ *  ============================================ */
 main {
   flex: 1;
+  min-height: 400px;
 }
 
-/* Footer */
+/* ============================================
+ *  FOOTER
+ *  ============================================ */
 footer {
   margin-top: 50px;
   padding-top: 20px;
   border-top: 1px solid var(--border);
   text-align: center;
-  color: #999;
+  color: var(--text-muted);
   font-size: 14px;
 }
 
-/* Form elements */
+footer a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+footer a:hover {
+  color: var(--primary);
+}
+
+/* ============================================
+ *  FORM ELEMENTS
+ *  ============================================ */
 .form-group {
   margin-bottom: 24px;
 }
@@ -135,7 +167,9 @@ footer {
   min-height: 60px;
 }
 
-/* Buttons */
+/* ============================================
+ *  BUTTONS
+ *  ============================================ */
 .btn-primary {
   background: var(--primary);
   color: white;
@@ -184,7 +218,7 @@ footer {
   color: white;
   border: none;
   padding: 4px 10px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 14px;
   transition: background 0.2s;
@@ -200,7 +234,7 @@ footer {
 }
 
 .btn-nostr {
-  background: #ff6b00;
+  background: var(--nostr);
   color: white;
   border: none;
   padding: 10px 20px;
@@ -211,7 +245,7 @@ footer {
 }
 
 .btn-nostr:hover:not(:disabled) {
-  background: #e85a00;
+  background: var(--nostr-dark);
 }
 
 .btn-success {
@@ -229,7 +263,9 @@ footer {
   background: #388e3c;
 }
 
-/* Relay List */
+/* ============================================
+ *  RELAY LIST
+ *  ============================================ */
 .relay-list {
   margin-bottom: 10px;
 }
@@ -254,7 +290,7 @@ footer {
   flex: 1;
   padding: 8px 10px;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
   font-family: monospace;
 }
@@ -282,7 +318,9 @@ footer {
   accent-color: var(--primary);
 }
 
-/* Template Creator */
+/* ============================================
+ *  TEMPLATE CREATOR
+ *  ============================================ */
 .template-creator {
   background: var(--white);
   padding: 30px;
@@ -295,7 +333,9 @@ footer {
   font-size: 22px;
 }
 
-/* Template Applier */
+/* ============================================
+ *  TEMPLATE APPLIER
+ *  ============================================ */
 .template-applier {
   background: var(--white);
   padding: 30px;
@@ -341,7 +381,7 @@ footer {
   display: flex;
   justify-content: space-between;
   padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-light);
 }
 
 .relay-preview li:last-child {
@@ -357,7 +397,20 @@ footer {
   font-size: 16px;
 }
 
-/* Status boxes */
+/* ============================================
+ *  AUTH SECTION
+ *  ============================================ */
+.auth-section {
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: var(--radius);
+  border: 1px solid #e9ecef;
+  margin-bottom: 16px;
+}
+
+/* ============================================
+ *  STATUS BOXES
+ *  ============================================ */
 .error-box,
 .warning,
 .success-box,
@@ -374,28 +427,37 @@ footer {
 }
 
 .warning {
-  background: #fff3e0;
+  background: var(--warning-light);
   border-left: 4px solid var(--warning);
   color: #e65100;
 }
 
 .success-box {
-  background: #e8f5e9;
+  background: var(--success-light);
   border-left: 4px solid var(--success);
   color: #2e7d32;
 }
 
 .info-box {
-  background: #e3f2fd;
-  border-left: 4px solid #2196f3;
+  background: var(--info-light);
+  border-left: 4px solid var(--info);
   color: #0d47a1;
 }
 
-/* Share Box */
+.info-box code {
+  background: rgba(0, 0, 0, 0.08);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+}
+
+/* ============================================
+ *  SHARE BOX
+ *  ============================================ */
 .share-box {
   margin-top: 24px;
   padding: 20px;
-  background: #e8f5e9;
+  background: var(--success-light);
   border-radius: var(--radius);
   border-left: 4px solid var(--success);
 }
@@ -415,7 +477,7 @@ footer {
   padding: 10px;
   margin: 8px 0;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
   font-family: monospace;
   background: var(--white);
@@ -425,12 +487,14 @@ footer {
   width: auto;
 }
 
-/* Nostr Connect */
+/* ============================================
+ *  NOSTR CONNECT
+ *  ============================================ */
 .nostr-connected {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: #e8f5e9;
+  background: var(--success-light);
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
@@ -438,7 +502,116 @@ footer {
   font-family: monospace;
 }
 
-/* Loading */
+.connection-status {
+  margin: 16px 0;
+}
+
+.connection-status .warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.connection-status .warning .btn-nostr {
+  flex-shrink: 0;
+}
+
+/* ============================================
+ *  COMMUNITY TEMPLATES
+ *  ============================================ */
+.community-templates-section {
+  background: #f8f9fa;
+  padding: 16px;
+  border-radius: var(--radius);
+  border: 1px solid #e9ecef;
+  margin-bottom: 24px;
+}
+
+.community-templates-description {
+  font-size: 13px;
+  color: var(--text-light);
+  margin-bottom: 10px;
+}
+
+.community-templates-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.community-template-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--border);
+  background: var(--white);
+  font-weight: normal;
+  transition: all 0.2s;
+}
+
+.community-template-btn .relay-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: 4px;
+}
+
+.community-template-info {
+  margin-top: 10px;
+  font-size: 13px;
+  color: var(--text-light);
+  padding: 8px 12px;
+  background: var(--white);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+}
+
+.clear-template-btn {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+/* Common relay buttons */
+.common-relay-buttons {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.common-relay-btn {
+  font-size: 12px;
+}
+
+/* Toggle and add buttons */
+.toggle-btn {
+  font-size: 12px;
+  padding: 4px 10px;
+}
+
+.add-btn {
+  margin-top: 4px;
+}
+
+.helper-text {
+  font-size: 13px;
+  color: var(--text-light);
+  margin-bottom: 10px;
+}
+
+/* Active template state */
+.active-template {
+  background: var(--primary-light) !important;
+  border-color: var(--primary) !important;
+  color: var(--primary) !important;
+}
+
+.active-template:hover {
+  background: #e8e0ff !important;
+}
+
+/* ============================================
+ *  LOADING
+ *  ============================================ */
 .loading {
   text-align: center;
   padding: 40px;
@@ -446,18 +619,65 @@ footer {
 }
 
 .loading::after {
-  content: '...';
-  animation: dots 1.5s steps(4, end) infinite;
+  content: '';
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  border: 2px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
-@keyframes dots {
-  0% { content: ''; }
-  25% { content: '.'; }
-  50% { content: '..'; }
-  75% { content: '...'; }
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-/* Responsive Design */
+/* ============================================
+ *  UTILITY CLASSES
+ *  ============================================ */
+.text-center {
+  text-align: center;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gap-10 {
+  gap: 10px;
+}
+
+.gap-20 {
+  gap: 20px;
+}
+
+/* ============================================
+ *  RESPONSIVE DESIGN
+ *  ============================================ */
 @media (max-width: 768px) {
   .app {
     padding: 12px;
@@ -507,6 +727,37 @@ footer {
     font-size: 12px;
     text-align: center;
   }
+
+  .connection-status .warning {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .connection-status .warning .btn-nostr {
+    width: 100%;
+  }
+
+  .community-templates-section {
+    padding: 12px;
+  }
+
+  .community-templates-buttons {
+    gap: 6px;
+  }
+
+  .community-template-btn {
+    font-size: 13px;
+    padding: 6px 12px;
+  }
+
+  .common-relay-buttons {
+    gap: 6px;
+  }
+
+  .common-relay-btn {
+    font-size: 11px;
+    padding: 6px 10px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -527,43 +778,263 @@ footer {
   .share-box input {
     font-size: 12px;
   }
+
+  .community-template-btn {
+    font-size: 12px;
+    padding: 4px 10px;
+  }
+
+  .community-template-btn .relay-count {
+    font-size: 10px;
+  }
 }
 
-/* Utility classes */
-.text-center {
-  text-align: center;
-}
+/* ============================================
+ *  DARK MODE SUPPORT
+ *  ============================================ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #e0e0e0;
+    --text-light: #aaa;
+    --background: #1a1a1a;
+    --white: #2d2d2d;
+    --border: #444;
+    --border-light: #3a3a3a;
+    --shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    --secondary: #444;
+  }
 
-.mt-10 {
-  margin-top: 10px;
-}
+  body {
+    background: var(--background);
+    color: var(--text);
+  }
 
-.mt-20 {
-  margin-top: 20px;
-}
+  .template-creator,
+  .template-applier {
+    background: var(--white);
+  }
 
-.mb-10 {
-  margin-bottom: 10px;
-}
+  .template-preview {
+    background: #252525;
+  }
 
-.mb-20 {
-  margin-bottom: 20px;
-}
+  .auth-section {
+    background: #252525;
+    border-color: #333;
+  }
 
-.flex {
-  display: flex;
-}
+  .relay-item {
+    background: #252525;
+  }
 
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .relay-item:hover {
+    border-color: #666;
+  }
 
-.gap-10 {
-  gap: 10px;
-}
+  /* Form elements */
+  .form-group input,
+  .form-group textarea {
+    background: #252525;
+    color: var(--text);
+    border-color: var(--border);
+  }
 
-.gap-20 {
-  gap: 20px;
-}
\ No newline at end of file
+  .form-group input:focus,
+  .form-group textarea:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.2);
+  }
+
+  .form-group label {
+    color: var(--text-light);
+  }
+
+  /* Share box */
+  .share-box input {
+    background: #252525;
+    color: var(--text);
+    border-color: var(--border);
+  }
+
+  .share-box {
+    background: #1a2a1a;
+  }
+
+  .share-box h3 {
+    color: #81c784;
+  }
+
+  .share-box p {
+    color: #a5d6a7;
+  }
+
+  /* Buttons */
+  .btn-secondary {
+    background: #444;
+    color: var(--text);
+  }
+
+  .btn-secondary:hover {
+    background: #555;
+  }
+
+  /* Status boxes */
+  .info-box {
+    background: #1a2a3a;
+    color: #90caf9;
+  }
+
+  .success-box {
+    background: #1a2a1a;
+    color: #81c784;
+  }
+
+  .error-box {
+    background: #2a1a1a;
+    color: #ef9a9a;
+  }
+
+  .warning {
+    background: #2a1a0a;
+    color: #ffcc80;
+  }
+
+  /* User badge */
+  .user-badge {
+    background: #1a2a1a;
+    color: #81c784;
+  }
+
+  /* Nostr connected */
+  .nostr-connected {
+    background: #1a2a1a;
+    color: #81c784;
+  }
+
+  /* Connection status */
+  .connection-status .info-box {
+    background: #1a2a3a;
+    color: #90caf9;
+    border-color: #2196f3;
+  }
+
+  .connection-status .info-box code {
+    background: rgba(255, 255, 255, 0.1);
+    color: #90caf9;
+  }
+
+  /* Header */
+  .app-header {
+    border-bottom-color: var(--border);
+  }
+
+  .app-header nav a {
+    color: var(--text-light);
+  }
+
+  .app-header nav a:hover {
+    color: var(--primary);
+  }
+
+  /* Footer */
+  footer {
+    border-top-color: var(--border);
+    color: var(--text-muted);
+  }
+
+  /* Share box button */
+  .share-box .btn-success {
+    background: var(--success);
+  }
+
+  .share-box .btn-success:hover {
+    background: #388e3c;
+  }
+
+  /* Auth section text */
+  .auth-section h4 {
+    color: var(--text);
+  }
+
+  .auth-section p {
+    color: var(--text-light);
+  }
+
+  /* Relay preview */
+  .relay-preview li {
+    border-bottom-color: var(--border-light);
+  }
+
+  .relay-preview h4 {
+    color: var(--text-light);
+  }
+
+  .template-preview > p {
+    color: var(--text-light);
+  }
+
+  .template-preview h3 {
+    color: var(--text);
+  }
+
+  /* Error text in share box */
+  .share-box .error {
+    color: var(--danger);
+  }
+
+  /* ============================================
+   *    DARK MODE - COMMUNITY TEMPLATES
+   *    ============================================ */
+  .community-templates-section {
+    background: #252525;
+    border-color: #333;
+  }
+
+  .community-templates-description {
+    color: var(--text-light);
+  }
+
+  .community-template-btn {
+    background: #2d2d2d;
+    border-color: var(--border);
+    color: var(--text);
+  }
+
+  .community-template-btn:hover {
+    background: #3a3a3a;
+  }
+
+  .community-template-btn .relay-count {
+    color: var(--text-muted);
+  }
+
+  .community-template-info {
+    background: #1a1a1a;
+    border-color: #333;
+    color: var(--text-light);
+  }
+
+  .common-relay-buttons .btn-secondary {
+    background: #2d2d2d;
+    color: var(--text);
+    border-color: var(--border);
+  }
+
+  .common-relay-buttons .btn-secondary:hover {
+    background: #3a3a3a;
+  }
+
+  .helper-text {
+    color: var(--text-light);
+  }
+
+  .active-template {
+    background: var(--primary-light) !important;
+    border-color: var(--primary) !important;
+    color: var(--primary) !important;
+  }
+
+  .active-template:hover {
+    background: #2a1a4a !important;
+  }
+}