Merge pull request #24 from v0l/ui

UI improvements
2023-01-10 12:58:14 +00:00 · 2023-01-10 12:58:14 +00:00 · b58d29742b
parent 825cfd2a6f 40c280b156
commit b58d29742b
28 changed files with 292 additions and 128 deletions
--- a/src/Text.js
+++ b/src/Text.js
@ -38,7 +38,7 @@ function transformHttpLink(a) {
                        title="YouTube video player"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        allowfullscreen=""
+                        allowFullScreen=""
                    />
                    <br />
                </>
@ -85,7 +85,7 @@ export function extractMentions(fragments, tags, users) {
                            }
                        }
                    }
-                    return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
+                    return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
                } else {
                    return match;
                }
--- a/src/element/Copy.css
+++ b/src/element/Copy.css
@ -1,14 +1,15 @@
 .copy {
    user-select: none;
    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 }

 .copy .body {
    font-family: monospace;
    font-size: 14px;
-    margin: 0;
-    width: 18em;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
+    background: var(--gray-secondary);
+    color: var(--font-color);
+    padding: 2px 4px;
+    border-radius: 10px;
+    margin: 0 4px 0 0;
+}
--- a/src/element/Copy.js
+++ b/src/element/Copy.js
@ -3,19 +3,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { useCopy } from "../useCopy";

-export default function Copy(props) {
-
+export default function Copy({ text, maxSize = 32 }) {
    const { copy, copied, error } = useCopy();
+    const sliceLength = maxSize / 2
+    const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}:${text.slice(-sliceLength)}` : text
+
    return (
-        <div className="flex flex-row copy" onClick={() => copy(props.text)}>
+        <div className="flex flex-row copy" onClick={() => copy(text)}>
+            <span className="body">
+                {trimmed}
+            </span>
            <FontAwesomeIcon
                icon={copied ? faCheck : faCopy}
                size="xs"
-                style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
+                style={{ color: copied ? 'var(--success)' : 'currentColor', marginRight: '2px' }}
            />
-            <p className="body">
-                {props.text}
-            </p>
        </div>
    )
-}
+}
--- a/src/element/FollowButton.js
+++ b/src/element/FollowButton.js
@ -1,11 +1,15 @@
 import { useSelector } from "react-redux";
 import useEventPublisher from "../feed/EventPublisher";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUserMinus, faUserPlus } from "@fortawesome/free-solid-svg-icons";

 export default function FollowButton(props) {
    const pubkey = props.pubkey;
-    const className = props.className ? `btn ${props.className}` : "btn";
    const publiser = useEventPublisher();
    const follows = useSelector(s => s.login.follows);
+    let isFollowing = follows?.includes(pubkey) ?? false;
+    const baseClassName =  isFollowing ? `btn btn-warn` : `btn btn-success`
+    const className = props.className ? `${baseClassName} ${props.className}` : `${baseClassName}`;
    
    async function follow(pubkey) {
        let ev = await publiser.addFollow(pubkey);
@ -17,10 +21,9 @@ export default function FollowButton(props) {
        publiser.broadcast(ev);
    }

-    let isFollowing = follows?.includes(pubkey) ?? false;
    return (
        <div className={className} onClick={() => isFollowing ? unfollow(pubkey) : follow(pubkey)}>
-            {isFollowing ? "Unfollow" : "Follow"}
+          <FontAwesomeIcon icon={isFollowing ? faUserMinus : faUserPlus} size="lg" />
        </div>
    )
 }
--- a/src/element/Invoice.css
+++ b/src/element/Invoice.css
@ -1,6 +1,7 @@
 .note-invoice {
+    background: var(--bg-color);
    border-radius: 10px;
-    border: 1px solid #444;
+    border: 1px solid var(--gray-tertiary);
    padding: 10px;
 }

@ -9,5 +10,5 @@
 }

 .note-invoice small {
-    color: #666;
-}
+    color: var(--gray-medium);
+}
--- a/src/element/LNURLTip.css
+++ b/src/element/LNURLTip.css
@ -1,5 +1,5 @@
 .lnurl-tip {
-    background-color: #222;
+    background-color: var(--gray-secondary);
    padding: 10px;
    border-radius: 10px;
    width: 500px;
@ -12,7 +12,7 @@
 }

 .lnurl-tip .btn:hover {
-    background-color: #333;
+    background-color: var(--gray);
 }

 .lnurl-tip .invoice {
@ -39,4 +39,4 @@
    .lnurl-tip .invoice .actions {
        text-align: center;
    }
-}
+}
--- a/src/element/Modal.css
+++ b/src/element/Modal.css
@ -4,8 +4,8 @@
    position: fixed;
    top: 0;
    left: 0;
-    background-color: rgba(0,0,0, 0.8);
+    background-color: var(--modal-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
-}
+}
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@ -2,22 +2,18 @@
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
-    margin: .2em 0;
+    margin: .2em;
 }

 .nip05 .nick {
-    color: #999;
+    color: var(--gray-light);
 }

 .nip05 .domain {
-    color: #DDD;
+    color: var(--gray-superlight);
 }

 .nip05 .badge {
     margin-left: .2em;
-}
-
-.nip05 .error {
-     margin-top: .2em;
-     margin-left: .2em;
+     margin-top: .1em;
 }
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";

 import './Nip05.css'

@ -28,30 +28,35 @@ const Nip05 = ({ nip05, pubkey }) => {
    }, [nip05, name, domain])

    return (
-       <div className="flex nip05">
+       <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
         {!isDefaultUser && <div className="nick">{name}</div>}
         <div className="domain">
             {!isDefaultUser && '@'}
             {domain}
         </div>
-         {isVerified && (
-           <span className="badge">
+         <span className="badge">
+           {!isVerified && !couldNotVerify && (
+               <FontAwesomeIcon
+                 color={"var(--fg-color)"}
+                 icon={faSpinner}
+                 size="xs"
+               />
+           )}
+           {isVerified && (
+               <FontAwesomeIcon
+                 color={"var(--success)"}
+                 icon={faCheck}
+                 size="xs"
+               />
+           )}
+           {couldNotVerify && (
             <FontAwesomeIcon
-               color={"green"}
-               icon={faCheck}
-               size="xs"
-             />
-           </span>
-         )}
-         {couldNotVerify && (
-           <span className="error">
-             <FontAwesomeIcon
-               color={"red"}
+               color={"var(--error)"}
               icon={faTriangleExclamation}
               size="xs"
             />
-           </span>
-         )}
+           )}
+         </span>
       </div>
    )
 }
--- a/src/element/Note.css
+++ b/src/element/Note.css
@ -1,10 +1,10 @@
 .note {
    margin-bottom: 10px;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid var(--gray);
 }

-.note.active {
-    background-color: #222;
+.note.thread {
+    border-bottom: none;
 }

 .note > .header > .pfp {
@ -13,13 +13,13 @@

 .note > .header .reply {
    font-size: small;
-    color: #999;
+    color: var(--gray-light);
 }

 .note > .header > .info {
    font-size: small;
    white-space: nowrap;
-    color: #999;
+    color: var(--gray-light);
 }

 .note > .body {
@ -32,10 +32,10 @@
 .note > .body > img, .note > .body > video, .note > .body > iframe {
    max-width: 100%;
    max-height: 500px;
-}
-
-.note > .body > iframe {
-  margin: 10px 0;
+    margin: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
 }

 .note > .header > img:hover, .note > .header > .name > .reply:hover, .note > .body:hover {
@ -48,6 +48,22 @@
 }

 .indented {
-    border-left: 3px solid #444;
+    border-left: 3px solid var(--gray-tertiary);
    padding-left: 2px;
-}
+}
+
+.indented .active {
+    background-color: var(--gray-tertiary);
+    margin-left: -5px;
+    border-left: 3px solid var(--highlight);
+}
+
+
+.indented .note {
+    border-bottom: none;
+    padding: 4px;
+}
+
+.note .body a {
+    color: var(--highlight);
+}
--- a/src/element/Note.js
+++ b/src/element/Note.js
@ -12,12 +12,9 @@ import NoteTime from "./NoteTime";

 export default function Note(props) {
    const navigate = useNavigate();
-    const data = props.data;
    const opt = props.options;
    const dataEvent = props["data-ev"];
-    const reactions = props.reactions;
-    const deletion = props.deletion;
-    const hightlight = props.hightlight;
+    const { data, isThread, reactions, deletion, hightlight } = props

    const users = useSelector(s => s.users?.users);
    const ev = dataEvent ?? Event.FromObject(data);
@ -81,7 +78,7 @@ export default function Note(props) {
    }

    return (
-        <div className={`note ${hightlight ? "active" : ""}`}>
+        <div className={`note ${hightlight ? "active" : ""} ${isThread ? "thread" : ""}`}>
            {options.showHeader ?
                <div className="header flex">
                    <ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag()} />
--- a/src/element/NoteCreator.css
+++ b/src/element/NoteCreator.css
@ -1,6 +1,6 @@
 .note-creator {
    margin-bottom: 10px;
-    background-color: #333;
+    background-color: var(--gray);
    border-radius: 10px;
    overflow: hidden;
 }
--- a/src/element/NoteReaction.css
+++ b/src/element/NoteReaction.css
@ -1,11 +1,10 @@
 .reaction {
    margin-bottom: 10px;
-    border-bottom: 1px solid #333;
 }

 .reaction > .note {
    margin: 5px;
-    border: 1px solid #333;
+    border: 1px solid var(--gray);
    border-radius: 10px;
    padding: 5px;
 }
@ -19,5 +18,6 @@
 }

 .reaction > .header > .info {
+    color: #999;
    font-size: small;
-}
+}
--- a/src/element/NoteTime.js
+++ b/src/element/NoteTime.js
@ -16,9 +16,12 @@ export default function NoteTime(props) {
            return fromDate.toLocaleDateString(undefined, { year: "2-digit", month: "short", day: "2-digit", weekday: "short" });
        } else if (absAgo > HourInMs) {
            return `${fromDate.getHours().toString().padStart(2, '0')}:${fromDate.getMinutes().toString().padStart(2, '0')}`;
+        } else if (absAgo < MinuteInMs) {
+          return 'Just now'
        } else {
            let mins = parseInt(absAgo / MinuteInMs);
-            return `${mins} mins ago`;
+            let minutes = mins === 1 ? 'min' : 'mins'
+            return `${mins} ${minutes} ago`;
        }
    }

--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@ -7,7 +7,7 @@
    width: 40px;
    height: 40px;
    margin-right: 10px;
-    border-radius: 10px;
+    border-radius: 100%;
    cursor: pointer;
 }

--- a/src/element/ProfileImage.js
+++ b/src/element/ProfileImage.js
@ -6,9 +6,7 @@ import { Link, useNavigate } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import { profileLink } from "../Util";

-export default function ProfileImage(props) {
-    const pubkey = props.pubkey;
-    const subHeader = props.subHeader;
+export default function ProfileImage({ pubkey, subHeader, showUsername = true }) {
    const navigate = useNavigate();
    const user = useProfile(pubkey);

@ -25,10 +23,12 @@ export default function ProfileImage(props) {
    return (
        <div className="pfp">
            <img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(profileLink(pubkey))} />
-            <div>
+            {showUsername && (
+              <div>
                <Link key={pubkey} to={profileLink(pubkey)}>{name}</Link>
                {subHeader ? <div>{subHeader}</div> : null}
-            </div>
+              </div>
+            )}
        </div>
    )
 }
--- a/src/element/Relay.css
+++ b/src/element/Relay.css
@ -1,10 +1,10 @@
 .relay {
    margin-bottom: 10px;
-    background-color: #222;
+    background-color: var(--gray-secondary);
    border-radius: 5px;
    text-align: start;
 }

 .relay > div {
    padding: 5px;
-}
+}
--- a/src/element/Relay.js
+++ b/src/element/Relay.js
@ -24,7 +24,7 @@ export default function Relay(props) {
        <>
            <div className="flex relay w-max">
                <div>
-                    <FontAwesomeIcon icon={faPlug} color={state?.connected ? "green" : "red"} />
+                    <FontAwesomeIcon icon={faPlug} color={state?.connected ? "var(--success)" : "var(--error)"} />
                </div>
                <div className="f-grow f-col">
                    <b>{name}</b>
@ -47,4 +47,4 @@ export default function Relay(props) {
            </div>
        </>
    )
-}
+}
--- a/src/element/Thread.js
+++ b/src/element/Thread.js
@ -47,7 +47,7 @@ export default function Thread(props) {

    function renderRoot() {
        if (root) {
-            return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} />
+            return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} isThread />
        } else {
            return <NoteGhost>
                Loading thread root.. ({notes.length} notes loaded)
--- a/src/index.css
+++ b/src/index.css
@ -1,12 +1,41 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

+:root {
+    --font-color: #FFF;
+    --bg-color: #000;
+    --modal-bg-color: rgba(0,0,0, 0.8);
+    --gray-superlight: #EEE;
+    --gray-light: #999;
+    --gray-medium: #666;
+    --gray: #333;
+    --gray-secondary: #222;
+    --gray-tertiary: #444;
+    --highlight: #A9E000;
+    --error: #FF6053;
+    --success: #2AD544;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+     --font-color: #000;
+     --bg-color: #FFF;
+     --highlight: #FF9B00;
+     --modal-bg-color: rgba(240, 240, 240, 0.8);
+     --gray: #CCC;
+     --gray-secondary: #DDD;
+     --gray-tertiary: #EEE;
+     --gray-superlight: #333;
+     --gray-light: #555;
+  }
+}
+
 body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  background-color: #000;
-  color: #fff;
+  background-color: var(--bg-color);
+  color: var(--font-color);
 }

 code {
@ -42,19 +71,28 @@ code {
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
-  background-color: #000;
+  background-color: var(--bg-color);
  border: 1px solid;
  display: inline-block;
 }

+.btn-warn {
+  border-color: var(--error);
+}
+
+.btn-success {
+  border-color: var(--success);
+}
+
 .btn.active {
  border: 2px solid;
-  background-color: #222;
+  background-color: var(--gray-secondary);
+  color:  var(--font-color);
  font-weight: bold;
 }

 .btn:hover {
-  background-color: #333;
+  background-color: var(--gray);
 }

 .btn-sm {
@ -73,8 +111,12 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
  padding: 10px;
  border-radius: 5px;
  border: 0;
-  background-color: #333;
-  color: #eee;
+  background-color: var(--gray);
+  color: var(--font-color);
+}
+
+textarea:placeholder {
+  color: var(--gray-superlight);
 }

 .flex {
@ -122,7 +164,7 @@ a {

 span.pill {
  display: inline-block;
-  background-color: #333;
+  background-color: var(--gray);
  padding: 2px 10px;
  border-radius: 10px;
  user-select: none;
@ -130,7 +172,8 @@ span.pill {
 }

 span.pill.active {
-  background-color: #444;
+  background-color: var(--gray-tertiary);
+  color:  var(--font-color);
  font-weight: bold;
 }

@ -186,7 +229,7 @@ div.form-group > div:nth-child(2) input {
 .modal .modal-content > div {
  padding: 10px;
  border-radius: 10px;
-  background-color: #333;
+  background-color: var(--gray);
  margin-top: 5vh;
 }

@ -224,11 +267,19 @@ body.scroll-lock {
  margin: 0;
 }

-.tabs > div.active {
-  background-color: #222;
-  font-weight: bold;
+.error {
+  color: var(--error);
 }

-.error {
-  color: red;
-}
+.root-tabs {
+    padding: 0 2px;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.root-tab {
+    border-bottom: 3px solid var(--gray-secondary);
+}
+.root-tab.active {
+    border-bottom: 3px solid var(--highlight);
+}
--- a/src/pages/Layout.css
+++ b/src/pages/Layout.css
@ -1,3 +1,7 @@
 .notifications {
    margin-right: 10px;
-}
+}
+
+.unread-count {
+  margin-left: .2em;
+}
--- a/src/pages/Layout.js
+++ b/src/pages/Layout.js
@ -54,14 +54,18 @@ export default function Layout(props) {
    }

    function accountHeader() {
-        const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length ?? 0;
+        const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length;
        return (
            <>
                <div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
                    <FontAwesomeIcon icon={faBell} size="xl" />
-                    {unreadNotifications}
+                    {unreadNotifications !== 0 && (
+                      <span className="unread-count">
+                        {unreadNotifications}
+                      </span>
+                    )}
                </div>
-                <ProfileImage pubkey={key} />
+                <ProfileImage pubkey={key} showUsername={false} />
            </>
        )
    }
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@ -18,11 +18,46 @@
    margin: 0;
 }

+.profile .avatar-wrapper {
+    margin: auto 10px;
+}
+
 .profile .avatar {
    width: 256px;
    height: 256px;
    background-size: cover;
-    border-radius: 10px;
+    border-radius: 100%;
+}
+
+.profile .details {
+    margin-top: auto;
+    margin-bottom: auto;
+    overflow: hidden;
+}
+
+.profile .website {
+    padding-left: 0;
+    color: var(--highlight);
+    margin-bottom: 2px;
+}
+
+.profile .lnurl {
+    padding-left: 0;
+}
+
+.profile .btn-icon {
+  padding: 6px;
+  margin-left: 4px;
+}
+
+.profile .website::before {
+    content: '🔗 ';
+    font-size: 10px;
+}
+
+.profile .lnurl::before {
+    content: '⚡️ ';
+    font-size: 10px;
 }

@media(max-width: 720px) {
@ -31,7 +66,34 @@
        align-items: center;
    }
    .profile > div:last-child { 
-        margin: 0;
+        margin: 5px 0;
        width: 100%;
    }
 }
+
+@media(max-width: 360px) {
+      .profile .name { flex-direction: column; }
+      .profile .name .btn {
+          margin-top: 5px;
+      }
+}
+
+.tabs {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.tabs > div {
+  margin-right: 0;
+}
+
+.tab {
+    margin: 0;
+    padding: 4px;
+    border-bottom: 3px solid var(--gray-secondary);
+}
+.tab.active {
+    border-bottom: 3px solid var(--highlight);
+}
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@ -4,7 +4,7 @@ import Nostrich from "../nostrich.jpg";
 import { useState } from "react";
 import { useSelector } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQrcode } from "@fortawesome/free-solid-svg-icons";
+import { faQrcode, faGear } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate, useParams } from "react-router-dom";

 import useProfile from "../feed/ProfileFeed";
@ -33,20 +33,30 @@ export default function ProfilePage() {
                    <div className="f-grow">
                        <h2>{user?.display_name || user?.name}</h2>
                        <Copy text={params.id} />
+                        {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                    </div>
                    <div>
-                        {isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
+                        {isMe ? (
+                            <div className="btn btn-icon" onClick={() => navigate("/settings")}>
+                              <FontAwesomeIcon icon={faGear} size="lg" />
+                            </div>
+                          ) : <FollowButton pubkey={id} />
+                        }
                    </div>
                </div>
-                {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                <p>{extractLinks([user?.about])}</p>
-                {user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}

-                {lnurl ? <div className="flex">
-                    <div className="btn" onClick={(e) => setShowLnQr(true)}>
-                        <FontAwesomeIcon icon={faQrcode} size="xl" />
+                {user?.website && (
+                  <div className="website f-ellipsis">
+                    <a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
+                  </div>
+                )}
+
+                {lnurl ? <div className="lnurl f-ellipsis">
+                    {lnurl}
+                    <div className="btn btn-icon" onClick={(e) => setShowLnQr(true)}>
+                      <FontAwesomeIcon icon={faQrcode} size="lg" />
                    </div>
-                    <div className="f-ellipsis">&nbsp; ⚡️ {lnurl}</div>
                </div> : null}
                <LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
            </>
@ -56,21 +66,21 @@ export default function ProfilePage() {
    return (
        <>
            <div className="profile flex">
-                <div>
+                <div className="avatar-wrapper">
                    <div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
                    </div>
                </div>
-                <div className="f-grow">
-                    {details()}
+                <div className="f-grow details">
+                  {details()}
                </div>
            </div>
            <div className="tabs">
-                <div className="btn active">Notes</div>
-                <div className="btn">Reactions</div>
-                <div className="btn">Followers</div>
-                <div className="btn">Follows</div>
+                <div className="tab f-1 active">Notes</div>
+                <div className="tab f-1">Reactions</div>
+                <div className="tab f-1">Followers</div>
+                <div className="tab f-1">Follows</div>
            </div>
            <Timeline pubkeys={id} />
        </>
    )
-}
+}
--- a/src/pages/Root.css
+++ b/src/pages/Root.css
@ -1,4 +1,4 @@
 .root-tabs > div {
  padding: 5px 0;
-  background-color: #333;
-}
+  margin-right: 0;
+}
--- a/src/pages/Root.js
+++ b/src/pages/Root.js
@ -29,10 +29,10 @@ export default function RootPage() {
            {pubKey ? <>
                <NoteCreator show={true}/>
                <div className="tabs root-tabs">
-                    <div className={`f-1 ${tab === RootTab.Follows ? "active" : ""}`} onClick={() => setTab(RootTab.Follows)}>
+                    <div className={`root-tab f-1 ${tab === RootTab.Follows ? "active" : ""}`} onClick={() => setTab(RootTab.Follows)}>
                        Follows
                    </div>
-                    <div className={`f-1 ${tab === RootTab.Global ? "active" : ""}`} onClick={() => setTab(RootTab.Global)}>
+                    <div className={`root-tab f-1 ${tab === RootTab.Global ? "active" : ""}`} onClick={() => setTab(RootTab.Global)}>
                        Global
                    </div>
                </div></> : null}
--- a/src/pages/SettingsPage.css
+++ b/src/pages/SettingsPage.css
@ -1,10 +1,10 @@
-
 .settings .avatar {
    width: 256px;
    height: 256px;
    background-size: cover;
-    border-radius: 10px;
+    border-radius: 100%;
    cursor: pointer;
+    margin-bottom: 20px;
 }

 .settings .avatar .edit {
@ -14,7 +14,7 @@
    width: 100%;
    height: 100%;
    opacity: 0;
-    background-color: black;
+    background-color: var(--bg-color);
 }

 .settings .avatar .edit:hover {
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@ -20,6 +20,7 @@ export default function SettingsPage(props) {
    const publisher = useEventPublisher();

    const [name, setName] = useState("");
+    const [displayName, setDisplayName] = useState("");
    const [picture, setPicture] = useState("");
    const [about, setAbout] = useState("");
    const [website, setWebsite] = useState("");
@ -31,6 +32,7 @@ export default function SettingsPage(props) {
    useEffect(() => {
        if (user) {
            setName(user.name ?? "");
+            setDisplayName(user.display_name ?? "")
            setPicture(user.picture ?? "");
            setAbout(user.about ?? "");
            setWebsite(user.website ?? "");
@ -45,6 +47,7 @@ export default function SettingsPage(props) {
        let userCopy = {
            ...user,
            name,
+            display_name: displayName,
            about,
            picture,
            website,
@ -102,6 +105,12 @@ export default function SettingsPage(props) {
                        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
                    </div>
                </div>
+                <div className="form-group">
+                    <div>Display name:</div>
+                    <div>
+                        <input type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+                    </div>
+                </div>
                <div className="form-group f-col">
                    <div>About:</div>
                    <div className="w-max">