padding, buttons and note creator fixes

src/Element/FollowListBase.tsx

@@ -15,7 +15,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps)
     }
 
     return (
-        <div className="timeline">
+        <div className="main-content">
             <div className="flex mt10">
                 <div className="f-grow">{title}</div>
                 <button type="button" onClick={() => followAll()}>Follow All</button>

src/Element/NoteCreator.css

@@ -13,7 +13,6 @@
 .note-creator textarea {
     outline: none;
     resize: none;
-    min-height: 320px;
     background-color: var(--note-bg);
     border-radius: 10px 10px 0 0;
     max-width: stretch;

src/Element/Timeline.css

@@ -1,13 +1,3 @@
-.timeline {
-  padding: 0 12px;
-}
-
-@media (min-width: 720px) {
-  .timeline {
-    padding: 0;
-  }
-}
-
 .latest-notes {
     cursor: pointer;
     font-weight: bold;

src/Element/Timeline.tsx

@@ -49,7 +49,7 @@ export default function Timeline({ subject, postsOnly = false, method }: Timelin
     }
 
     return (
-        <div className="timeline">
+        <div className="main-content">
             {latestFeed.length > 1 && (<div className="card latest-notes pointer" onClick={() => showLatest()}>
                 <FontAwesomeIcon icon={faForward}  size="xl"/>
                 &nbsp;

src/Pages/ChatPage.tsx

@@ -73,9 +73,9 @@ export default function ChatPage() {
             <div className="write-dm">
                 <div className="inner">
                     <textarea className="f-grow mr10" value={content} onChange={(e) => setContent(e.target.value)} onKeyDown={(e) => onEnter(e)}></textarea>
-                    <div className="btn" onClick={() => sendDm()}>Send</div>
+                    <button type="button" onClick={() => sendDm()}>Send</button>
                 </div>
             </div>
         </>
     )
-}
+}

src/Pages/DonatePage.tsx

@@ -44,7 +44,7 @@ const DonatePage = () => {
     }
     
     return (
-        <div className="m5">
+        <div className="main-content m5">
             <h2>Help fund the development of Snort</h2>
             <p>
                 Snort is an open source project built by passionate people in their free time

src/Pages/Login.tsx

@@ -85,24 +85,24 @@ export default function LoginPage() {
             <>
                 <h2>Other Login Methods</h2>
                 <div className="flex">
-                    <div className="btn" onClick={(e) => doNip07Login()}>Login with Extension (NIP-07)</div>
+                    <button type="button" onClick={(e) => doNip07Login()}>Login with Extension (NIP-07)</button>
                 </div>
             </>
         )
     }
 
     return (
-        <>
+        <div className="main-content">
             <h1>Login</h1>
             <div className="flex">
                 <input type="text" placeholder="nsec / npub / nip-05 / hex private key..." className="f-grow" onChange={e => setKey(e.target.value)} />
             </div>
             {error.length > 0 ? <b className="error">{error}</b> : null}
             <div className="tabs">
-                <div className="btn" onClick={(e) => doLogin()}>Login</div>
+                <button type="button" onClick={(e) => doLogin()}>Login</button>
-                <div className="btn" onClick={() => makeRandomKey()}>Generate Key</div>
+                <button type="button" onClick={() => makeRandomKey()}>Generate Key</button>
             </div>
             {altLogins()}
-        </>
+        </div>
     );
-}
+}

src/Pages/MessagesPage.tsx

@@ -51,7 +51,7 @@ export default function MessagesPage() {
     }
 
     return (
-        <div className="timeline">
+        <div className="main-content">
             <div className="flex">
                 <h3 className="f-grow">Messages</h3>
                 <button type="button" onClick={() => markAllRead()}>Mark All Read</button>

src/Pages/NewUserPage.tsx

@@ -67,9 +67,9 @@ export default function NewUserPage() {
     }
 
     return (
-        <>
+        <div className="main-content">
             {importTwitterFollows()}
             {followSomebody()}
-        </>
+        </div>
     );
 }

src/Pages/SettingsPage.tsx

@@ -9,7 +9,7 @@ export default function SettingsPage() {
     const navigate = useNavigate();
 
     return (
-        <div className="timeline">
+        <div className="main-content">
             <h2 onClick={() => navigate("/settings")} className="pointer">Settings</h2>
             <Outlet />
         </div>

src/Pages/Verification.tsx

@@ -24,7 +24,7 @@ export default function VerificationPage() {
     ];
 
     return (
-        <div className="verification">
+        <div className="main-content verification">
             <h2>Get Verified</h2>
             <p>
                 NIP-05 is a DNS based verification spec which helps to validate you as a real user.

src/Pages/settings/Profile.tsx

@@ -128,11 +128,11 @@ export default function ProfileSettings() {
                     <div>NIP-05:</div>
                     <div>
                         <input type="text" className="mr10" value={nip05} onChange={(e) => setNip05(e.target.value)} />
-                        <div className="btn" onClick={() => navigate("/verification")}>
+                        <button type="button" onClick={() => navigate("/verification")}>
                             <FontAwesomeIcon icon={faShop} />
                             &nbsp;
                             Buy
-                        </div>
+                        </button>
                     </div>
                 </div>
                 <div className="form-group">
@@ -143,10 +143,10 @@ export default function ProfileSettings() {
                 </div>
                 <div className="form-group">
                     <div>
-                        <div className="btn" onClick={() => { dispatch(logout()); navigate("/"); }}>Logout</div>
+                        <button className="secondary" type="button" onClick={() => { dispatch(logout()); navigate("/"); }}>Logout</button>
                     </div>
                     <div>
-                        <div className="btn" onClick={() => saveProfile()}>Save</div>
+                        <button type="button" onClick={() => saveProfile()}>Save</button>
                     </div>
                 </div>
             </div>

src/Pages/settings/Relays.tsx

@@ -27,7 +27,7 @@ const RelaySettingsPage = () => {
                 <div className="flex mb10">
                     <input type="text" className="f-grow" placeholder="wss://my-relay.com" value={newRelay} onChange={(e) => setNewRelay(e.target.value)} />
                 </div>
-                <div className="btn mb10" onClick={() => addNewRelay()}>Add</div>
+                <button className="secondary mb10" onClick={() => addNewRelay()}>Add</button>
             </>
         )
     }
@@ -49,16 +49,16 @@ const RelaySettingsPage = () => {
     return (
         <>
             <h3>Relays</h3>
-            <div className="flex f-col">
+            <div className="flex f-col mb10">
                 {Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
             </div>
             <div className="flex mt10">
                 <div className="f-grow"></div>
-                <div className="btn" onClick={() => saveRelays()}>Save</div>
+                <button type="button" onClick={() => saveRelays()}>Save</button>
             </div>
             {addRelay()}
         </>
     )
 }
 
-export default RelaySettingsPage;
+export default RelaySettingsPage;

src/index.css

@@ -449,3 +449,14 @@ body.scroll-lock {
 .highlight {
   color: var(--highlight);
 }
+
+.main-content {
+  padding: 0 12px;
+}
+
+@media (min-width: 720px) {
+  .main-content {
+    padding: 0;
+  }
+}
+