Settings page and UI tweaks (#200)

2023-02-05 23:44:31 +01:00 · 2023-02-05 23:44:31 +01:00 · 40a5e00dc5
commit 40a5e00dc5
parent a1d42fa9fb
17 changed files with 235 additions and 122 deletions
--- a/src/Element/LNURLTip.tsx
+++ b/src/Element/LNURLTip.tsx
@ -9,7 +9,6 @@ import Copy from "Element/Copy";
 import useWebln from "Hooks/useWebln";

 interface LNURLService {
-    allowsNostr?: boolean
    nostrPubkey?: HexKey
    minSendable?: number,
    maxSendable?: number,
@ -128,7 +127,7 @@ export default function LNURLTip(props: LNURLTipProps) {
        let url = ''
        const amountParam = `amount=${Math.floor(amount * 1000)}`
        const commentParam = comment ? `&comment=${encodeURIComponent(comment)}` : ""
-        if (payService.allowsNostr && payService.nostrPubkey && author) {
+        if (payService.nostrPubkey && author) {
            const ev = await publisher.zap(author, note, comment)
            const nostrParam = ev && `&nostr=${encodeURIComponent(JSON.stringify(ev.ToObject()))}`
            url = `${payService.callback}?${amountParam}${commentParam}${nostrParam}`;
@ -240,7 +239,7 @@ export default function LNURLTip(props: LNURLTipProps) {
        )
    }

-    const defaultTitle = payService?.allowsNostr === true ? "⚡️ Send Zap!" : "⚡️ Send sats";
+    const defaultTitle = payService?.nostrPubkey ? "⚡️ Send Zap!" : "⚡️ Send sats";
    if (!show) return null;
    return (
        <Modal onClose={onClose}>
--- a/src/Element/Nip05.css
+++ b/src/Element/Nip05.css
@ -1,4 +1,5 @@
 .nip05 {
+  color: var(--font-secondary-color);
  justify-content: flex-start;
  align-items: center;
  font-weight: normal;
@ -8,21 +9,17 @@
  text-decoration: line-through;
 }

-.nip05 .nick {
-  color: var(--font-secondary-color);
-}
-
 .nip05 .domain {
-  color: var(--gray-light);
+  color: var(--font-secondary-color);
+  background-color: var(--font-secondary-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
-  background-color: var(--gray-light);
 }

 .nip05 .domain[data-domain="snort.social"] {
-  background-image: var(--nostrplebs-gradient);
+  background-image: var(--snort-gradient);
 }

 .nip05 .domain[data-domain="strike.army"] {
@ -30,15 +27,23 @@
 }

 .nip05 .domain[data-domain="nostrplebs.com"] {
-  background-image: var(--nostrplebs-gradient);
+  color: var(--highlight);
+  background-color: var(--highlight);
 }

 .nip05 .domain[data-domain="nostrpurple.com"] {
-  background-image: var(--nostrplebs-gradient);
+  color: var(--highlight);
+  background-color: var(--highlight);
 }

 .nip05 .domain[data-domain="nostr.fan"] {
-  background-image: var(--nostrplebs-gradient);
+  color: var(--highlight);
+  background-color: var(--highlight);
+}
+
+.nip05 .domain[data-domain="nostriches.net"] {
+  color: var(--highlight);
+  background-color: var(--highlight);
 }

 .nip05 .badge {
--- a/src/Element/Note.css
+++ b/src/Element/Note.css
@ -161,7 +161,6 @@
  color: var(--highlight);
 }

-
 .light .indented .active {
  background-color: var(--gray-secondary);
 }
@ -181,6 +180,7 @@
 .light .note.active>.footer>.reaction-pill.reacted {
  color: var(--highlight);
 }
+
 .note-expand .body {
  max-height: 300px;
  overflow-y: hidden;
--- a/src/Element/ProfileImage.css
+++ b/src/Element/ProfileImage.css
@ -1,6 +1,7 @@
 .pfp {
  display: flex;
  align-items: center;
+  overflow: hidden;
 }

 .pfp .avatar-wrapper {
@ -17,11 +18,6 @@
    text-decoration: none;
 }

-.pfp a:hover {
-    text-decoration: underline;
-    text-decoration-color: var(--gray-superlight);
-}
-
 .pfp .username {
  display: flex;
  flex-direction: column;
--- a/src/Element/ProfilePreview.tsx
+++ b/src/Element/ProfilePreview.tsx
@ -31,7 +31,11 @@ export default function ProfilePreview(props: ProfilePreviewProps) {
                    {options.about ? <div className="f-ellipsis about">
                        {user?.about}
                    </div> : undefined} />
-                {props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
+                {props.actions ?? (
+                  <div className="follow-button-container">
+                    <FollowButton pubkey={pubkey} />
+                  </div>
+                )}
            </>}
        </div>
    )
--- a/src/Element/Zap.css
+++ b/src/Element/Zap.css
@ -2,18 +2,25 @@
  min-height: unset;
 }

+.zap .header {
+  align-items: center;
+  flex-direction: row;
+}
+
 .zap .header .pfp {
  overflow: hidden;
 }

-.zap .header {
-  flex-direction: row;
-}
-
 .zap .header .amount {
  font-size: 32px;
 }

+@media (max-width: 520px) {
+  .zap .header .amount {
+    font-size: 21px;
+  }
+}
+
 .zap .header .pfp {
  max-width: 72%;
 }
@ -33,10 +40,6 @@
  font-size: 18px;
 }

-.zap .amount:before {
-  content: '⚡️ ';
-}
-
 .top-zap .amount:before {
  content: '';
 }
@ -81,10 +84,6 @@
  font-weight: bold;
 }

-.rest-zaps:before {
-  content: ", ";
-}
-
 .note.zap > .body {
  margin-bottom: 0;
 }
--- a/src/Icons/ArrowFront.tsx
+++ b/src/Icons/ArrowFront.tsx
@ -0,0 +1,9 @@
+const ArrowFront = () => {
+  return (
+    <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 13L7 7L1 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+  )
+}
+
+export default ArrowFront
--- a/src/Icons/Gear.tsx
+++ b/src/Icons/Gear.tsx
@ -0,0 +1,12 @@
+import IconProps from './IconProps'
+
+const Gear = (props: IconProps) => {
+  return (
+    <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M7.39504 18.3711L7.97949 19.6856C8.15323 20.0768 8.43676 20.4093 8.79571 20.6426C9.15466 20.8759 9.5736 21.0001 10.0017 21C10.4298 21.0001 10.8488 20.8759 11.2077 20.6426C11.5667 20.4093 11.8502 20.0768 12.0239 19.6856L12.6084 18.3711C12.8164 17.9047 13.1664 17.5159 13.6084 17.26C14.0532 17.0034 14.5677 16.8941 15.0784 16.9478L16.5084 17.1C16.934 17.145 17.3636 17.0656 17.7451 16.8713C18.1265 16.6771 18.4434 16.3763 18.6573 16.0056C18.8714 15.635 18.9735 15.2103 18.951 14.7829C18.9285 14.3555 18.7825 13.9438 18.5306 13.5978L17.6839 12.4344C17.3825 12.0171 17.2214 11.5148 17.2239 11C17.2238 10.4866 17.3864 9.98635 17.6884 9.57111L18.535 8.40778C18.7869 8.06175 18.933 7.65007 18.9554 7.22267C18.9779 6.79528 18.8759 6.37054 18.6617 6C18.4478 5.62923 18.1309 5.32849 17.7495 5.13423C17.3681 4.93997 16.9385 4.86053 16.5128 4.90556L15.0828 5.05778C14.5722 5.11141 14.0576 5.00212 13.6128 4.74556C13.1699 4.48825 12.8199 4.09736 12.6128 3.62889L12.0239 2.31444C11.8502 1.92317 11.5667 1.59072 11.2077 1.3574C10.8488 1.12408 10.4298 0.99993 10.0017 1C9.5736 0.99993 9.15466 1.12408 8.79571 1.3574C8.43676 1.59072 8.15323 1.92317 7.97949 2.31444L7.39504 3.62889C7.18797 4.09736 6.83792 4.48825 6.39504 4.74556C5.95026 5.00212 5.43571 5.11141 4.92504 5.05778L3.4906 4.90556C3.06493 4.86053 2.63534 4.93997 2.25391 5.13423C1.87249 5.32849 1.55561 5.62923 1.34171 6C1.12753 6.37054 1.02549 6.79528 1.04798 7.22267C1.07046 7.65007 1.2165 8.06175 1.46838 8.40778L2.31504 9.57111C2.61698 9.98635 2.77958 10.4866 2.77949 11C2.77958 11.5134 2.61698 12.0137 2.31504 12.4289L1.46838 13.5922C1.2165 13.9382 1.07046 14.3499 1.04798 14.7773C1.02549 15.2047 1.12753 15.6295 1.34171 16C1.55582 16.3706 1.87274 16.6712 2.25411 16.8654C2.63548 17.0596 3.06496 17.1392 3.4906 17.0944L4.9206 16.9422C5.43127 16.8886 5.94581 16.9979 6.3906 17.2544C6.83513 17.511 7.18681 17.902 7.39504 18.3711Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M9.99992 14C11.6568 14 12.9999 12.6569 12.9999 11C12.9999 9.34315 11.6568 8 9.99992 8C8.34307 8 6.99992 9.34315 6.99992 11C6.99992 12.6569 8.34307 14 9.99992 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  )
+}
+
+export default Gear
--- a/src/Icons/Index.css
+++ b/src/Icons/Index.css
@ -0,0 +1,12 @@
+.settings-nav .card {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.settings-row {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
--- a/src/Icons/Logout.tsx
+++ b/src/Icons/Logout.tsx
@ -0,0 +1,11 @@
+import IconProps from './IconProps'
+
+const Logout = (props: IconProps) => {
+  return (
+    <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17 6L21 10M21 10L17 14M21 10H8M14 2.20404C12.7252 1.43827 11.2452 1 9.66667 1C4.8802 1 1 5.02944 1 10C1 14.9706 4.8802 19 9.66667 19C11.2452 19 12.7252 18.5617 14 17.796" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+  )
+}
+
+export default Logout
--- a/src/Icons/Profile.tsx
+++ b/src/Icons/Profile.tsx
@ -0,0 +1,11 @@
+import IconProps from './IconProps'
+
+const Profile = (props: IconProps) => {
+  return (
+    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14 8H14.01M8 8H8.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM14.5 8C14.5 8.27614 14.2761 8.5 14 8.5C13.7239 8.5 13.5 8.27614 13.5 8C13.5 7.72386 13.7239 7.5 14 7.5C14.2761 7.5 14.5 7.72386 14.5 8ZM8.5 8C8.5 8.27614 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.27614 7.5 8C7.5 7.72386 7.72386 7.5 8 7.5C8.27614 7.5 8.5 7.72386 8.5 8ZM11 16.5C13.5005 16.5 15.5 14.667 15.5 13H6.5C6.5 14.667 8.4995 16.5 11 16.5Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+  )
+}
+
+export default Profile
--- a/src/Icons/Relay.tsx
+++ b/src/Icons/Relay.tsx
@ -0,0 +1,11 @@
+import IconProps from './IconProps'
+
+const Relay = (props: IconProps) => {
+  return (
+    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M21 9.5L20.5256 5.70463C20.3395 4.21602 20.2465 3.47169 19.8961 2.9108C19.5875 2.41662 19.1416 2.02301 18.613 1.77804C18.013 1.5 17.2629 1.5 15.7626 1.5H6.23735C4.73714 1.5 3.98704 1.5 3.38702 1.77804C2.85838 2.02301 2.4125 2.41662 2.10386 2.9108C1.75354 3.47169 1.6605 4.21601 1.47442 5.70463L1 9.5M4.5 13.5H17.5M4.5 13.5C2.567 13.5 1 11.933 1 10C1 8.067 2.567 6.5 4.5 6.5H17.5C19.433 6.5 21 8.067 21 10C21 11.933 19.433 13.5 17.5 13.5M4.5 13.5C2.567 13.5 1 15.067 1 17C1 18.933 2.567 20.5 4.5 20.5H17.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5M5 10H5.01M5 17H5.01M11 10H17M11 17H17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+  )
+}
+
+export default Relay 
--- a/src/Pages/ProfilePage.css
+++ b/src/Pages/ProfilePage.css
@ -9,11 +9,50 @@
  height: 160px;
  object-fit: cover;
  margin-bottom: -60px;
-  mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
-  -webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
  z-index: 0;
 }

+.profile .profile-actions {
+  position: absolute;
+  top: 80px;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.profile .icon-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+@media (min-width: 520px) {
+  .profile .profile-actions {
+    top: 120px;
+  }
+}
+
+.profile .profile-actions button:not(:last-child) {
+  margin-right: 8px;
+}
+
+.profile .profile-actions button.icon:not(:last-child) {
+  margin-right: 0;
+}
+
+
+@media (min-width: 520px) {
+  .profile .banner {
+    width: 100%;
+    max-width: 720px;
+    height: 300px;
+  }
+  .profile .profile-actions button.icon:not(:last-child) {
+    margin-right: 2px;
+  }
+}
+
 .profile .profile-wrapper {
  margin: 0 16px;
  width: calc(100% - 32px);
@ -61,13 +100,12 @@
 }

 .profile .details {
-    width: 100%;
-    margin-top: 12px;
-    background-color: var(--note-bg);
-    padding: 12px 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    margin-bottom: 12px;
+  width: 100%;
+  color: var(--font-secondary-color);
+  margin-bottom: 12px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
 }

 .profile .details p {
@ -105,16 +143,6 @@
  margin-bottom: 12px;
 }

-.profile h3 {
-  color: var(--font-secondary-color);
-  font-size: 10px;
-  letter-spacing: .11em;
-  font-weight: 600;
-  line-height: 12px;
-  text-transform: uppercase;
-  margin-left: 12px;
-}
-
 .profile .website {
  margin: 4px 0;
  display: flex;
@ -163,47 +191,6 @@
  height: 12px;
 }

-.profile .profile-actions {
-  position: absolute;
-  top: 80px;
-  right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.profile .icon-actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-@media (min-width: 520px) {
-  .profile .profile-actions {
-    top: 120px;
-  }
-}
-
-.profile .profile-actions button:not(:last-child) {
-  margin-right: 8px;
-}
-
-.profile .profile-actions button.icon:not(:last-child) {
-  margin-right: 0;
-}
-
-@media (min-width: 520px) {
-  .profile .banner {
-    width: 100%;
-    max-width: 720px;
-    height: 300px;
-    margin-bottom: -100px;
-  }
-  .profile .profile-actions button.icon:not(:last-child) {
-    margin-right: 2px;
-  }
-}
-
 .profile .npub {
  display: flex;
  flex-direction: row;
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@ -108,7 +108,6 @@ export default function ProfilePage() {
  function bio() {
    return aboutText.length > 0 && (
      <>
-        <h3>Bio</h3>
        <div className="details">
          {about}
        </div>
--- a/src/Pages/settings/Index.css
+++ b/src/Pages/settings/Index.css
@ -1,3 +1,25 @@
 .settings-nav .card {
    cursor: pointer;
-}
+}
+
+.settings-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  padding: 12px  16px;
+  background: var(--note-bg);
+  border-radius: 10px;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.settings-row:hover {
+  color: var(--highlight);
+}
+
+.align-end {
+  margin-left: auto;
+}
--- a/src/Pages/settings/Index.tsx
+++ b/src/Pages/settings/Index.tsx
@ -2,8 +2,12 @@ import "./Index.css";

 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { faRightFromBracket, faCircleDollarToSlot, faGear, faPlug, faUser } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ArrowFront from "Icons/ArrowFront";
+import Gear from "Icons/Gear";
+import Profile from "Icons/Profile";
+import Relay from "Icons/Relay";
+import Heart from "Icons/Heart";
+import Logout from "Icons/Logout";

 import { logout } from "State/Login";

@ -19,29 +23,56 @@ const SettingsIndex = () => {
    return (
      <>
        <div className="settings-nav">
-            <div className="card" onClick={() => navigate("profile")}>
-                <FontAwesomeIcon icon={faUser} size="xl" className="mr10" />
+            <div className="settings-row" onClick={() => navigate("profile")}>
+              <div className="mr10">
+               <Profile />
+              </div>
+              <span>
                Profile
+              </span>
+              <div className="align-end">
+                <ArrowFront />
+              </div>
            </div>
-            <div className="card" onClick={() => navigate("relays")}>
-                <FontAwesomeIcon icon={faPlug} size="xl" className="mr10" />
-                Relays
+            <div className="settings-row" onClick={() => navigate("relays")}>
+              <div className="mr10">
+                <Relay />
+              </div>
+              Relays
+              <div className="align-end">
+                <ArrowFront />
+              </div>
            </div>
-            <div className="card" onClick={() => navigate("preferences")}>
-                <FontAwesomeIcon icon={faGear} size="xl" className="mr10" />
-                Preferences
+            <div className="settings-row" onClick={() => navigate("preferences")}>
+              <div className="mr10">
+               <Gear />
+              </div>
+              Preferences
+              <div className="align-end">
+                <ArrowFront />
+              </div>
            </div>
-            <div className="card" onClick={() => navigate("/donate")}>
-                <FontAwesomeIcon icon={faCircleDollarToSlot} size="xl" className="mr10" />
-                Donate
+            <div className="settings-row" onClick={() => navigate("/donate")}>
+              <div className="mr10">
+               <Heart />
+              </div>
+              Donate
+              <div className="align-end">
+                <ArrowFront />
+              </div>
            </div>
-            <div className="card" onClick={handleLogout}>
-                <FontAwesomeIcon icon={faRightFromBracket} size="xl" className="mr10" />
-                Log Out
+            <div className="settings-row" onClick={handleLogout}>
+              <div className="mr10">
+                <Logout />
+              </div>
+              Log Out
+              <div className="align-end">
+                <ArrowFront />
+              </div>
            </div>
        </div>
      </>
    )
 }

-export default SettingsIndex;
+export default SettingsIndex;
--- a/src/index.css
+++ b/src/index.css
@ -3,7 +3,7 @@
 :root {
  --bg-color: #000;
  --font-color: #FFF;
-  --font-secondary-color: #555;
+  --font-secondary-color: #7B7B7B;
  --font-tertiary-color: #666;
  --font-size: 16px;
  --font-size-small: 14px;
@ -16,15 +16,14 @@

  --gray-superlight: #EEE;
  --gray-light: #999;
-  --gray-medium: #666;
+  --gray-medium: #7B7B7B;
  --gray: #333;
  --gray-secondary: #222;
  --gray-tertiary: #444;
  --gray-dark: #2B2B2B;
-  --gray-superdark: #171717;
+  --gray-superdark: #1A1A1A;
  --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
  --snort-gradient: linear-gradient(90deg, #A178FF 0%, #FF6BAF 108.33%);
-  --nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
  --invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgba(161, 120, 255, 0.2), rgba(255, 107, 175, .2) 108.33%);
  --paid-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgba(161, 120, 255, .6), rgba(255, 107, 175, .6) 108.33%);
  --expired-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, var(--gray), var(--gray-superdark));
@ -34,7 +33,7 @@
 html.light {
  --bg-color: #F1F1F1;
  --font-color: #57534E;
-  --font-secondary-color: #B9B9B9;
+  --font-secondary-color: #7B7B7B;
  --font-tertiary-color: #F3F3F3;

  --highlight-light: #16AAC1;
@ -78,7 +77,7 @@ code {

@media (min-width: 720px) {
  .page {
-    width: 720px;
+    width: 586px;
    margin-left: auto;
    margin-right: auto;
  }
@ -241,17 +240,17 @@ button.icon:hover {

 .btn-rnd {
  border-radius: 100%;
-  border-color: var(--gray-superdark);
-  width: 32px;
-  height: 32px;
+  border-color: var(--gray-secondary);
+  width: 21px;
+  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
 }

-.light .btn-rnd {
-  border-color: var(--gray);
+@media (min-width: 520px) {
+  .btn-rnd { width: 32px; height: 32px }
 }

 textarea {
@ -540,6 +539,12 @@ body.scroll-lock {
  font-weight: 700;
 }

+.main-content h2 {
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 39px;
+}
+
 .main-content .h4 {
  margin-bottom: 25px;
 }