Squashed commit of the following:

commit 87cda09ac6442820a0b16933989525dcb53a4425
Merge: 02d9bbf7 2bec5d95
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 23:13:32 2023 +0900

    Merge branch 'css-fixes'

commit 2bec5d95c00476537dc5460f01557af12c1baa7b
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 22:40:27 2023 +0900

    minor tweak on tabs

commit 776005e5eaafd5a8bc94cbf7821579a5bb831b1c
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:28:53 2023 +0900

    added subscription tier borders in light mode

commit 66a55feb9950f433787d2a6966b200339462c4c6
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:28:43 2023 +0900

    fixed tab colors in light mode

commit 830cc3c973301d2ce63745e1e328c69a219db1ef
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:28:29 2023 +0900

    secondary color adjustment

commit 8c9939f3484c2dd5678ac72795dba7fa7f970402
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:12:46 2023 +0900

    szh menu shadow fix

commit a59124f91055a4a9a3758823dee76e8bc44c5e83
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:01:34 2023 +0900

    misc fixes

commit a4da5d86677eadace1b86df2d72e35255178a5f0
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 17:50:15 2023 +0900

    Re-ordered reactions for consistency

commit 665162b6918b1666f1413884d4b4185d4df0f74a
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 13:25:55 2023 +0900

    styled light load more button

commit a3058168d6df685cdf9d2871f8e3b335318eedcb
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:38:16 2023 +0900

    styled subscriptions a bit

commit dcc940d96cefeca476e16891c148e2058fb48fd7
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:22:39 2023 +0900

    adjusted input border to 2px and font size 15

commit 690e1662eeded6eab9f3029ce168d44b35604dca
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:22:12 2023 +0900

    fixed settings tabs paddings

commit a5809c4c7d502da42788c6c758d6025e79699cf5
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:05:45 2023 +0900

    removed some double borders

commit d1e0c331ed665c63160c2ae83f9e010b666c39df
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:05:28 2023 +0900

    follow is primary now

commit 338bc03aa3616906326fe0a777a63c04dc4a7f48
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:05:10 2023 +0900

    made follow button a primary

commit 4b5eb0c4fc71e0a8cf822ba8cac8facc53301e1e
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:43:12 2023 +0900

    made follows you into a label

commit 0a9d616402528311f4feba53f0ba9171b0640274
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:35:07 2023 +0900

    created secondary button bg variable

commit 2abcab804adf392e8f7ff2907762bc35c77f0297
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:34:41 2023 +0900

    added gap to profile buttons

commit 04a54ddb0d7b19c5ea7f420645c6bd3d37747c17
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:34:26 2023 +0900

    change new note button color

commit 2d2401586af70187785cff693061666d1de343f2
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 22:57:01 2023 +0900

    forget what I did here

commit 14d8bd255cc41e5450b18908b807e3d745c10fbe
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 22:35:32 2023 +0900

    adjusted new note button position

commit e3a6143626424b898aad43fc2eb1625336342c16
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 22:32:37 2023 +0900

    added primary button colors

commit 4d02bfef54668d1a09f0615634d6be540c9837ea
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 18:51:37 2023 +0900

    cleaned up modal reactions

commit 891f7985c6cf674d03188a95b3ca807ecb16c0bc
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 00:10:46 2023 +0900

    minimized error text from scary to less scary

commit dc563e7ded8794e43ed14409d5ffeb917172b800
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 23:50:27 2023 +0900

    adjusted search colors in light mode

commit 328cc853794c9b32abf8eab067bfd3f9b1a76aee
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:59:33 2023 +0900

    revert main font size, adjust thread root size

commit 2e55cbcbc1bc6e9494410ec77052adb3fd8bbbcf
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:49:09 2023 +0900

    re-styled quoted replies note creator

commit a3257eecff0a028a22d975eec778daeb73d8ec2e
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:38:00 2023 +0900

    got rid of weird filter menu shadow and radius

commit 258d51c6fddb65d3afecd595a1fd9352c2cfa13e
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:12:03 2023 +0900

    adjusted header bottom spacing per design to 8px

commit 03669925086e8a4995124d6e9077d61373fa89d3
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:00:34 2023 +0900

    adjusted gap to 16 per design

commit 9a1c77b0dd876632ecd313d25ce163204ff89897
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 21:56:50 2023 +0900

    set root font size to 16px per design

commit 4d0a91317d8946465b0d591db3d13c2e3df63ff8
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 21:50:57 2023 +0900

    made search full width

commit 3ea6b4ca005b27003f1554d53def14337620af2a
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 21:47:29 2023 +0900

    fixed line height on thread root note

packages/app/src/Element/BackButton.css

@@ -6,18 +6,17 @@
   font-size: var(--font-size);
   display: flex;
   align-items: center;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 .back-button svg {
   margin-right: 0.5em;
 }
 
-.back-button:hover {
+.back-button:hover:hover,
+.light .back-button:hover {
   text-decoration: underline;
-}
+  box-shadow: none !important;
-
+  background: none !important;
-.back-button:hover {
+}
-  background: none;
-  color: var(--font-color);
-  text-decoration: underline;
-}

packages/app/src/Element/FollowsYou.css

@@ -3,4 +3,7 @@
   font-size: var(--font-size-tiny);
   margin-left: 0.2em;
   font-weight: normal;
-}
+  padding: 4px 6px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+}

packages/app/src/Element/Invoice.css

@@ -8,6 +8,12 @@
   background: var(--invoice-gradient);
 }
 
+.note-invoice.error {
+  padding: 8px 12px !important;
+  color: #AAA;
+  background: transparent;
+}
+
 .note-invoice.expired {
   background: var(--expired-invoice-gradient);
   color: var(--font-secondary-color);
@@ -86,4 +92,4 @@
   top: 26px;
   right: 20px;
   color: var(--font-color);
-}
+}

packages/app/src/Element/LinkPreview.css

@@ -8,7 +8,7 @@
   cursor: pointer;
 }
 
-.link-preview-container > a {
+.link-preview-container>a {
   text-decoration: none;
 }
 
@@ -17,22 +17,22 @@
   line-height: 21px;
 }
 
-.link-preview-title > h1 {
+.link-preview-title>h1 {
   padding: 0;
   font-size: 16px;
   font-weight: 700;
 }
 
-.link-preview-container:hover .link-preview-title > h1 {
+.link-preview-container:hover .link-preview-title>h1 {
   color: var(--highlight);
 }
 
-.link-preview-title > small {
+.link-preview-title>small {
   color: var(--font-secondary-color);
   font-size: 14px;
 }
 
-.link-preview-title > small.host {
+.link-preview-title>small.host {
   font-size: 12px;
 }
 
@@ -40,12 +40,23 @@
   margin: 0 0 15px 0 !important;
   border-radius: 0 !important;
   background-image: var(--img-url);
-  min-height: 250px;
+  min-height: 220px;
   max-height: 500px;
   background-size: cover;
   background-position: center;
 }
 
 .light .link-preview-container {
-  background: #ddd;
+  background: #FFF;
+  border: 1px solid var(--border-color);
 }
+
+.light .link-preview-container:hover {
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 3px;
+}
+
+@media (min-width: 1025px) {
+  .link-preview-image {
+    min-height: 342px;
+  }
+}

packages/app/src/Element/Modal.css

@@ -13,8 +13,8 @@
 
 .modal-body {
   background-color: var(--gray-superdark);
-  padding: 16px 24px;
+  padding: 24px;
-  border-radius: 12px;
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
   width: 500px;
@@ -25,3 +25,11 @@
 .modal-body button.secondary:hover {
   background-color: var(--gray);
 }
+
+.light .modal-body {
+  background-color: #FFF;
+}
+
+.modal.spotlight {
+  color: #FFF;
+}

packages/app/src/Element/Note.css

@@ -2,23 +2,23 @@
   min-height: 110px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .note:hover {
   cursor: pointer;
 }
 
-.note > .header .reply {
+.note>.header .reply {
   font-size: 13px;
   color: var(--font-secondary-color);
 }
 
-.note > .header .reply a {
+.note>.header .reply a {
   color: var(--highlight);
 }
 
-.note > .header .reply a:hover {
+.note>.header .reply a:hover {
   text-decoration-color: var(--highlight);
 }
 
@@ -65,6 +65,7 @@
   border: 1px solid var(--gray-superdark);
   border-radius: 12px;
   padding: 8px 16px 16px 16px;
+  margin-top: 16px;
 }
 
 .note .footer .footer-reactions {
@@ -82,12 +83,12 @@
   }
 }
 
-.note > .header img:hover,
+.note>.header img:hover,
-.note > .header .name > .reply:hover {
+.note>.header .name>.reply:hover {
   cursor: pointer;
 }
 
-.note > .note-creator {
+.note>.note-creator {
   margin-top: 12px;
   margin-left: 56px;
 }
@@ -97,7 +98,7 @@
   user-select: none;
 }
 
-.note .poll-body > div {
+.note .poll-body>div {
   border: 1px solid var(--font-secondary-color);
   border-radius: 5px;
   margin-bottom: 3px;
@@ -105,17 +106,17 @@
   overflow: hidden;
 }
 
-.note .poll-body > div > div {
+.note .poll-body>div>div {
   padding: 5px 10px;
   z-index: 2;
 }
 
-.note .poll-body > div:hover {
+.note .poll-body>div:hover {
   cursor: pointer;
   border: 1px solid var(--highlight);
 }
 
-.note .poll-body > div > .progress {
+.note .poll-body>div>.progress {
   background-color: var(--gray);
   height: stretch;
   height: -webkit-fill-available;
@@ -192,6 +193,6 @@
   text-decoration: underline;
 }
 
-.note .body > .text > a {
+.note .body>.text>a {
   color: var(--highlight);
-}
+}

packages/app/src/Element/NoteCreator.css

@@ -12,9 +12,13 @@
 }
 
 .note-creator-modal .note.card {
+  padding: 0;
+  border: none;
+}
+
+.note-creator-modal .note.card.note-quote {
+  border: 1px solid var(--gray);
   padding: 8px 12px;
-  border-radius: 12px;
-  background-color: var(--gray-dark);
 }
 
 .note-creator-modal h4 {
@@ -81,13 +85,13 @@
 .note-create-button {
   width: 48px;
   height: 48px;
-  background-color: var(--highlight);
   color: white;
+  background: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
   border: none;
   border-radius: 100%;
   position: fixed;
-  bottom: 50px;
+  bottom: 40px;
-  right: calc(((100vw - 640px) / 2) - 60px);
+  right: calc(((100vw - 640px) / 2) - 75px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,3 +102,14 @@
     right: 16px;
   }
 }
+
+.light .note-creator textarea {
+  background-color: #FFF;
+}
+
+.light .note-creator {
+  box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3);
+  background: linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box,
+    linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box;
+
+}

packages/app/src/Element/NoteCreator.tsx

@@ -300,9 +300,9 @@ export function NoteCreator() {
                         e.target.checked && selectedCustomRelays && selectedCustomRelays.length == a.length - 1
                           ? false
                           : // otherwise return selectedCustomRelays with target relay added / removed
-                            a.filter(el =>
+                          a.filter(el =>
-                              el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el),
+                            el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el),
-                            ),
+                          ),
                       ),
                     )
                   }
@@ -397,7 +397,7 @@ export function NoteCreator() {
               <button className="secondary" onClick={cancel}>
                 <FormattedMessage defaultMessage="Cancel" />
               </button>
-              <AsyncButton onClick={onSubmit}>
+              <AsyncButton className="primary" onClick={onSubmit}>
                 {replyTo ? <FormattedMessage defaultMessage="Reply" /> : <FormattedMessage defaultMessage="Send" />}
               </AsyncButton>
             </div>

packages/app/src/Element/NoteFooter.tsx

@@ -260,10 +260,10 @@ export default function NoteFooter(props: NoteFooterProps) {
     <>
       <div className="footer">
         <div className="footer-reactions">
-          {tipButton()}
-          {reactionIcon()}
-          {repostIcon()}
           {replyIcon()}
+          {repostIcon()}
+          {reactionIcon()}
+          {tipButton()}
           {powIcon()}
         </div>
         {willRenderNoteCreator && <NoteCreator />}

packages/app/src/Element/ProfilePreview.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   min-height: 59px;
+  padding: 0 16px;
 }
 
 .profile-preview .pfp {
@@ -18,4 +19,4 @@
 
 .profile-preview button {
   min-width: 98px;
-}
+}

packages/app/src/Element/Reactions.css

@@ -29,11 +29,31 @@
   color: var(--font-tertiary-color);
 }
 
+.reactions-modal .modal-body .tabs.p {
+  padding: 12px 0;
+}
+
 .reactions-modal .modal-body .reactions-header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 12px;
+}
+
+.reactions-modal .modal-body .tab {
+  background: none;
+  border: none;
+}
+
+.reactions-modal .modal-body .tab.active {
+  background: #FFF;
+  color: #000;
+}
+
+.reactions-modal .modal-body .tab:hover {
+  background: rgba(255, 255, 255, 0.8);
+  color: #000;
+  border: none;
 }
 
 .reactions-modal .modal-body .reactions-header h2 {
@@ -47,8 +67,11 @@
 .reactions-modal .modal-body .reactions-body {
   overflow: scroll;
   height: 40vh;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  -ms-overflow-style: none;
-  scrollbar-width: none; /* Firefox */
+  /* for Internet Explorer, Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  margin-top: 12px;
 }
 
 .reactions-modal .modal-body .reactions-body::-webkit-scrollbar {
@@ -70,6 +93,7 @@
 
 .reactions-item .follow-button {
   margin-left: auto;
+
 }
 
 .reactions-item .zap-reaction-icon {
@@ -91,4 +115,4 @@
   .reactions-modal .modal-body .tab.disabled {
     display: none;
   }
-}
+}

packages/app/src/Element/RootTabs.css

@@ -4,9 +4,9 @@
   justify-content: center;
 }
 
-.root-type > button {
+.root-type>button {
   background: white;
-  color: black;
+  color: var(--bg-color);
   font-size: 16px;
   padding: 10px 16px;
   border-radius: 1000px;
@@ -14,4 +14,10 @@
   align-items: center;
   justify-content: center;
   gap: 12px;
+  border: 1px solid var(--gray-superdark);
 }
+
+.light .root-type>button {
+  color: var(--font-color);
+  border: 1px solid var(--border-color);
+}

packages/app/src/Element/Tabs.css

@@ -3,8 +3,10 @@
   align-items: center;
   flex-direction: row;
   overflow-x: scroll;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  -ms-overflow-style: none;
-  scrollbar-width: none; /* Firefox */
+  /* for Internet Explorer, Edge */
+  scrollbar-width: none;
+  /* Firefox */
   white-space: nowrap;
   gap: 8px;
 }
@@ -13,9 +15,23 @@
   display: none;
 }
 
+.light .tab {
+  border: 1px solid var(--border-color);
+
+}
+
+.tab.active {
+  background: var(--gray-superdark);
+}
+
+.light .tab.active {
+  background: #FFF;
+  border-color: #bfc6d6;
+}
+
 .tab {
   background: var(--gray-ultradark);
-  color: var(--font-tertiary-color);
+  color: var(--font-secondary-color);
   border-radius: 100px;
   font-weight: 600;
   font-size: 16px;
@@ -27,11 +43,10 @@
 }
 
 .tab.active {
-  color: black;
+  color: var(--font-color);
-  background: white;
 }
 
-.tabs > div {
+.tabs>div {
   cursor: pointer;
 }
 
@@ -42,5 +57,5 @@
 }
 
 .tab:hover {
-  border-color: var(--font-color);
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
-}
+}

packages/app/src/Element/Thread.css

@@ -7,11 +7,12 @@
   box-shadow: none;
 }
 
-.thread-root.note > .body .text {
+.thread-root.note>.body .text {
-  font-size: 19px;
+  font-size: 18px;
+  line-height: 27px;
 }
 
-.thread-root.note > .footer {
+.thread-root.note>.footer {
   padding-left: 0;
 }
 
@@ -97,4 +98,4 @@
 
 .thread-container .hidden-note {
   padding-left: 48px;
-}
+}

packages/app/src/Element/Timeline.css

@@ -10,16 +10,16 @@
 
 .latest-notes-fixed {
   position: fixed;
-  left: calc(50% - 261px / 2 + 0.5px);
+  left: 45%;
   top: 12px;
-  width: 261px;
+  width: auto;
-  left: calc(50% - 261px / 2 + 0.5px);
   z-index: 42;
   opacity: 0.9;
   box-shadow: 0px 0px 15px rgba(78, 0, 255, 0.6);
   color: white;
   background: var(--highlight);
   border-radius: 100px;
+  border: none;
 }
 
 @media (max-width: 520px) {
@@ -36,6 +36,7 @@
   margin: 0;
   margin-right: -26px;
 }
+
 .latest-notes .pfp:last-of-type {
   margin-right: -8px;
 }
@@ -45,4 +46,4 @@
   width: 32px;
   height: 32px;
   border: 2px solid white;
-}
+}

packages/app/src/Pages/Layout.css

@@ -20,6 +20,7 @@ header {
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
+  gap: 24px;
 }
 
 .header-actions .avatar {
@@ -33,6 +34,7 @@ header {
   flex-direction: row;
   align-items: center;
   gap: 24px;
+  width: 100%;
 }
 
 .header-actions .btn {
@@ -65,6 +67,11 @@ header {
   border-radius: 1000px;
 }
 
+.light .search {
+  background: #FFF;
+  border: 1px solid var(--border-color);
+}
+
 .search input {
   border: none !important;
   border-radius: 0 !important;
@@ -82,4 +89,4 @@ header {
   .search input {
     display: none;
   }
-}
+}

packages/app/src/Pages/Layout.tsx

@@ -93,7 +93,7 @@ export default function Layout() {
 
       {!shouldHideNoteCreator && (
         <>
-          <button className="note-create-button" onClick={handleNoteCreatorButtonClick}>
+          <button className="primary note-create-button" onClick={handleNoteCreatorButtonClick}>
             <Icon name="plus" size={16} />
           </button>
           <NoteCreator />

packages/app/src/Pages/MessagesPage.css

@@ -5,6 +5,12 @@
   height: var(--full-height);
   /* 100vh - header - padding */
   overflow: hidden;
+  padding: 4px;
+}
+
+.dm-page>div:nth-child(1)::-webkit-scrollbar-track {
+  background: transparent !important;
+  ;
 }
 
 /* These should match what is in code too */
@@ -13,7 +19,7 @@
     grid-template-columns: 100vw;
   }
 
-  .dm-page > div:nth-child(1) {
+  .dm-page>div:nth-child(1) {
     margin: 0 !important;
   }
 }
@@ -25,30 +31,31 @@
 }
 
 /* User list */
-.dm-page > div:nth-child(1) {
+.dm-page>div:nth-child(1) {
   overflow-y: auto;
   padding: 0 5px;
 }
 
 /* Chat window */
-.dm-page > div:nth-child(2) {
+.dm-page>div:nth-child(2) {
   padding: 0 12px;
+  margin: 0 4px;
   height: var(--full-height);
   background-color: var(--gray-superdark);
   border-radius: 16px;
 }
 
 /* Profile pannel */
-.dm-page > div:nth-child(3) {
+.dm-page>div:nth-child(3) {
-  margin: 0 10px;
+  margin: 16px;
 }
 
-.dm-page > div:nth-child(3) .avatar {
+.dm-page>div:nth-child(3) .avatar {
   margin-left: auto;
   margin-right: auto;
 }
 
-.dm-page > div:nth-child(3) .card {
+.dm-page>div:nth-child(3) .card {
   cursor: pointer;
 }
 
@@ -56,7 +63,7 @@
   min-width: 100px;
 }
 
-.dm-page .chat-list > div.active {
+.dm-page .chat-list>div.active {
   background-color: var(--gray-superdark);
   border-radius: 16px;
 }
@@ -66,13 +73,13 @@
   overflow-y: auto;
 }
 
-.new-chat-modal .user-list > div {
+.new-chat-modal .user-list>div {
   padding: 8px 12px;
   cursor: pointer;
 }
 
 /* user in list selected */
-.new-chat-modal .user-list > div.active {
+.new-chat-modal .user-list>div.active {
   background-color: var(--gray-dark);
   border-radius: 16px;
 }
@@ -100,4 +107,4 @@
   font-size: 11px;
   letter-spacing: 1.21px;
   text-transform: uppercase;
-}
+}

packages/app/src/Pages/ProfilePage.css

@@ -2,7 +2,9 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  border: 1px solid var(--gray-superdark);
+  border: 1px solid var(--border-color);
+  border-bottom: none;
+  border-top: none;
 }
 
 .profile .banner {
@@ -17,12 +19,14 @@
   display: flex;
   align-items: center;
   align-self: flex-end;
+  gap: 8px;
 }
 
 .profile .icon-actions {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 8px;
 }
 
 .profile .profile-actions button:not(:last-child) {
@@ -39,6 +43,7 @@
     max-width: 720px;
     height: 280px;
   }
+
   .profile .profile-actions button.icon:not(:last-child) {
     margin-right: 2px;
   }
@@ -58,23 +63,23 @@
   white-space: pre-wrap;
 }
 
-.details-wrapper > .name > h2 {
+.details-wrapper>.name>h2 {
   margin: 0 0 4px 0;
   font-weight: 600;
   font-size: 21px;
 }
 
-.details-wrapper > .name > .nip05 {
+.details-wrapper>.name>.nip05 {
   font-size: 15px;
 }
 
-.profile-wrapper > .avatar-wrapper {
+.profile-wrapper>.avatar-wrapper {
   z-index: 1;
   display: flex;
   justify-content: space-between;
 }
 
-.profile-wrapper > .avatar-wrapper .avatar {
+.profile-wrapper>.avatar-wrapper .avatar {
   width: 100px;
   height: 100px;
   background-image: var(--img-url);
@@ -87,7 +92,7 @@
 }
 
 .profile .about {
-  color: var(--font-secondary-color);
+  color: var(--font-color);
   font-size: 16px;
   line-height: 26px;
 }
@@ -138,6 +143,7 @@
 .profile .website a {
   text-decoration: none;
 }
+
 .profile .website a:hover {
   text-decoration: underline;
 }
@@ -205,6 +211,7 @@
 .profile .nip05 .nick {
   display: unset;
 }
+
 .profile .nip05 .domain {
   display: unset;
 }
@@ -222,4 +229,4 @@
 
 .badge-card .body {
   margin-bottom: 0;
-}
+}

packages/app/src/Pages/ProfilePage.tsx

@@ -326,14 +326,14 @@ export default function ProfilePage() {
           targets={
             lnurl?.lnurl && id
               ? [
-                  {
+                {
-                    type: "lnurl",
+                  type: "lnurl",
-                    value: lnurl?.lnurl,
+                  value: lnurl?.lnurl,
-                    weight: 1,
+                  weight: 1,
-                    name: user?.display_name || user?.name,
+                  name: user?.display_name || user?.name,
-                    zap: { pubkey: id },
+                  zap: { pubkey: id },
-                  } as ZapTarget,
+                } as ZapTarget,
-                ]
+              ]
               : undefined
           }
           show={showLnQr}
@@ -431,7 +431,7 @@ export default function ProfilePage() {
         <Avatar pubkey={id ?? ""} user={user} />
         <div className="profile-actions">
           {renderIcons()}
-          {!isMe && id && <FollowButton pubkey={id} />}
+          {!isMe && id && <FollowButton className="primary" pubkey={id} />}
         </div>
       </div>
     );

packages/app/src/Pages/settings/Profile.tsx

@@ -152,7 +152,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
           </h4>
           <input className="w-max" type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
         </div>
-        <AsyncButton onClick={() => saveProfile()}>
+        <AsyncButton className="primary" onClick={() => saveProfile()}>
           <FormattedMessage defaultMessage="Save" />
         </AsyncButton>
       </div>

packages/app/src/Pages/settings/Root.css

@@ -9,11 +9,11 @@
   }
 }
 
-.settings-nav > div {
+.settings-nav>div {
-  border: 1px solid var(--gray-superdark);
+  border: 1px solid var(--border-color);
 }
 
-.settings-nav > div.content {
+.settings-nav>div.content {
   padding: 12px 16px;
 }
 
@@ -26,7 +26,7 @@
   grid-template-columns: 24px 1fr 24px;
   align-items: center;
   cursor: pointer;
-  padding: 12px 16px;
+  padding: 12px 0px 12px 16px;
   gap: 8px;
   font-size: 16px;
   font-weight: 600;
@@ -57,6 +57,6 @@
   margin-left: auto;
 }
 
-.settings-group-header .collapse-icon > svg {
+.settings-group-header .collapse-icon>svg {
   width: 8px;
-}
+}

packages/app/src/Pages/subscribe/ManageSubscription.tsx

@@ -33,7 +33,7 @@ export default function ManageSubscriptionPage() {
     return <PageSpinner />;
   }
   return (
-    <div className="main-content p flex-column g24">
+    <div className="main-content p flex-column g16">
       <h2>
         <FormattedMessage defaultMessage="Subscriptions" />
       </h2>
@@ -41,7 +41,7 @@ export default function ManageSubscriptionPage() {
         <SubscriptionCard sub={a} key={a.id} />
       ))}
       {subs.length !== 0 && (
-        <button onClick={() => navigate("/subscribe")}>
+        <button className="primary" onClick={() => navigate("/subscribe")}>
           <FormattedMessage defaultMessage="Buy Subscription" />
         </button>
       )}

packages/app/src/Pages/subscribe/SubscriptionCard.tsx

@@ -62,7 +62,7 @@ export default function SubscriptionCard({ sub }: { sub: Subscription }) {
 
   return (
     <>
-      <div className="p">
+      <div className="p subtier">
         <div className="flex card-title">
           <Icon name="badge" className="mr5" size={25} />
           {mapPlanName(sub.type)}

packages/app/src/index.css

@@ -15,8 +15,8 @@
   --live: #f83838;
   --heart: #ef4444;
   --zap: #ff710a;
-
   --gray-superlight: #eee;
+  --bg-secondary: #2A2A2A;
   --gray-light: #999;
   --gray-medium: #7b7b7b;
   --gray: #333;
@@ -28,22 +28,20 @@
   --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
   --snort-gradient: linear-gradient(90deg, #a178ff 0%, #ff6baf 100%);
   --dm-gradient: linear-gradient(90deg, #5722d2 0%, #db1771 100%);
-  --invoice-gradient: linear-gradient(
+  --invoice-gradient: linear-gradient(45deg,
-    45deg,
+      var(--gray-superdark) 50%,
-    var(--gray-superdark) 50%,
+      rgba(161, 120, 255, 0.2),
-    rgba(161, 120, 255, 0.2),
+      rgba(255, 107, 175, 0.2) 108.33%);
-    rgba(255, 107, 175, 0.2) 108.33%
+  --paid-invoice-gradient: linear-gradient(45deg,
-  );
+      var(--gray-superdark) 50%,
-  --paid-invoice-gradient: linear-gradient(
+      rgba(161, 120, 255, 0.6),
-    45deg,
+      rgba(255, 107, 175, 0.6) 108.33%);
-    var(--gray-superdark) 50%,
-    rgba(161, 120, 255, 0.6),
-    rgba(255, 107, 175, 0.6) 108.33%
-  );
   --expired-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, var(--gray), var(--gray-superdark));
   --strike-army-gradient: linear-gradient(to bottom right, #ccff00, #a1c900);
-
+  --sub-bg: #111;
   --header-padding-tb: 10px;
+  --btn-color: #FFF;
+  --primary-gradient: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
 }
 
 ::-webkit-scrollbar {
@@ -70,27 +68,27 @@ html {
 }
 
 html.light {
-  --bg-color: #f8f8f8;
+  --bg-color: #fff;
   --font-color: #2f3f64;
-  --font-secondary-color: #71717a;
+  --font-secondary-color: #5C6C92;
   --font-tertiary-color: #52525b;
   --border-color: #dee1e8;
-
   --highlight: #7139f1;
-  --modal-bg-color: rgba(240, 240, 240, 0.8);
+  --modal-bg-color: #0009;
-
+  --gray: #dee1e8;
-  --gray: #999;
   --gray-secondary: #aaa;
   --gray-tertiary: #bbb;
   --gray-superlight: #333;
   --gray-light: #555;
   --gray-dark: #ccc;
-  --gray-superdark: #ddd;
+  --gray-superdark: #FFF;
-  --gray-ultradark: #eee;
+  --gray-ultradark: #FFF;
-
   --dm-gradient: var(--gray);
   --invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73333, #fc4a1a33);
   --paid-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73399, #fc4a1a99);
+  --bg-secondary: #FFF;
+  --sub-bg: #FFF;
+  --btn-color: #FFF;
 }
 
 body {
@@ -136,12 +134,12 @@ code {
 
 .card {
   padding: 12px 16px;
-  border-bottom: 1px solid var(--gray-superdark);
+  border-bottom: 1px solid var(--border-color);
 }
 
 /* Card inside card */
 .card .card {
-  border: 1px solid var(--gray-superdark);
+  border: 1px solid var(--border-color);
   border-radius: 16px;
   min-height: 0;
 }
@@ -150,9 +148,10 @@ code {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin-bottom: -8px;
 }
 
-.card > .footer {
+.card>.footer {
   display: flex;
   flex-direction: row;
 }
@@ -164,16 +163,28 @@ code {
 
 button {
   cursor: pointer;
-  padding: 6px 12px;
+  padding: 10px 16px;
   font-weight: 600;
   color: var(--bg-color);
   font-size: var(--font-size);
-  background-color: var(--font-color);
+  background-color: var(--btn-color);
   border: none;
-  border-radius: 16px;
+  border-radius: 100px;
   outline: none;
 }
 
+button.primary {
+  background: rgb(239, 150, 68);
+  background: var(--primary-gradient);
+  color: #FFF !important;
+  border: none !important;
+}
+
+button.primary:hover {
+  box-shadow: 0px 1px 4px rgba(128, 29, 255, 1) !important;
+  background: var(--primary-gradient) !important;
+}
+
 button:disabled {
   opacity: 0.3;
   cursor: not-allowed;
@@ -187,7 +198,7 @@ button.secondary:disabled {
 button:disabled:hover {
   cursor: not-allowed;
   color: var(--font-color);
-  border-color: var(--gray-superdark);
+  border-color: var(--gray-border-color);
 }
 
 .light button.transparent {
@@ -211,11 +222,7 @@ button.transparent {
   font-weight: 400;
   color: var(--font-secondary);
   background-color: transparent;
-  border: 1px solid var(--gray-superdark);
+  border: 1px solid var(--border-color);
-}
-
-.light button.secondary {
-  background-color: var(--gray);
 }
 
 button.secondary:hover {
@@ -229,15 +236,13 @@ button.transparent:hover {
   background-color: var(--font-color);
 }
 
-.light button.secondary:hover {
-  background-color: var(--gray-secondary);
-}
-
 button.icon {
   border: none;
-  background: none;
+  background: var(--bg-secondary);
   color: var(--font-color);
-  min-height: 28px;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
 }
 
 button.icon .icon-wrapper {
@@ -307,13 +312,15 @@ input[type="password"],
 input[type="number"],
 select,
 textarea {
-  padding: 12px 16px;
+  padding: 8px 12px;
   color: var(--font-color);
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   outline: none;
-  line-height: 24px; /* 150% */
+  font-size: 15px;
+  line-height: 24px;
+  /* 150% */
 }
 
 .light input[type="text"],
@@ -321,7 +328,7 @@ textarea {
 .light input[type="number"],
 .light select,
 .light textarea {
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border: 2px solid var(--border-color);
 }
 
 option,
@@ -335,8 +342,8 @@ textarea:placeholder {
 }
 
 input[type="checkbox"] {
-  width: 24px;
+  width: 20px;
-  height: 24px;
+  height: 20px;
 }
 
 input:disabled {
@@ -482,22 +489,22 @@ div.form-group {
   grid-template-columns: 1fr 2fr;
 }
 
-div.form-group > div {
+div.form-group>div {
   padding: 3px 5px;
 }
 
-div.form-group > div:nth-child(1) {
+div.form-group>div:nth-child(1) {
   display: flex;
   align-self: center;
 }
 
-div.form-group > div:nth-child(2) {
+div.form-group>div:nth-child(2) {
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
 }
 
-div.form-group > div:nth-child(2) input {
+div.form-group>div:nth-child(2) input {
   flex-grow: 1;
 }
 
@@ -601,7 +608,7 @@ small.xs {
   margin: 0 auto;
 }
 
-.tweet div .twitter-tweet > iframe {
+.tweet div .twitter-tweet>iframe {
   max-height: unset;
 }
 
@@ -630,8 +637,9 @@ small.xs {
 
 .main-content h2 {
   font-weight: 600;
-  font-size: 32px;
+  font-size: 26px;
-  line-height: 39px;
+  line-height: 36px;
+  margin: 12px 0 0 0;
 }
 
 .main-content .h4 {
@@ -639,7 +647,7 @@ small.xs {
 }
 
 .main-content .profile-preview {
-  margin-bottom: 16px;
+  margin: 8px 0;
 }
 
 button.tall {
@@ -706,18 +714,24 @@ button.tall {
 .rta__textarea {
   /* Fix width calculation to account for 32px padding on input */
   width: calc(100% - 32px) !important;
+  font-size: 15px !important;
 }
 
 .ctx-menu {
-  color: var(--font-secondary-color) !important;
+  color: var(--font-color) !important;
   background: transparent !important;
   min-width: 0 !important;
   margin: 0 !important;
 }
 
+.szh-menu {
+  border-radius: 16px !important;
+  padding: 0 !important;
+}
+
 .ctx-menu li {
   background: #1e1e1e !important;
-  padding: 8px 32px 8px 32px !important;
+  padding: 8px 24px !important;
   display: grid !important;
   grid-template-columns: 2rem auto !important;
   font-size: 16px;
@@ -725,7 +739,7 @@ button.tall {
 }
 
 .light .ctx-menu li {
-  background: var(--gray-superdark) !important;
+  background: #FFF !important;
 }
 
 .ctx-menu li:first-of-type {
@@ -733,13 +747,13 @@ button.tall {
 }
 
 .ctx-menu li:nth-child(3) {
-  padding-top: 24px !important;
+  padding-top: 16px !important;
   border-top-left-radius: 16px !important;
   border-top-right-radius: 16px !important;
 }
 
 .ctx-menu li:last-of-type {
-  padding-bottom: 24px !important;
+  padding-bottom: 16px !important;
   border-bottom-left-radius: 16px !important;
   border-bottom-right-radius: 16px !important;
 }
@@ -754,8 +768,8 @@ button.tall {
 }
 
 .light .ctx-menu li:hover {
-  color: white !important;
+  color: var(--font-color) !important;
-  background: var(--font-secondary-color) !important;
+  background: #EEE !important;
 }
 
 .ctx-menu .red {
@@ -782,3 +796,54 @@ svg.heart-solid {
 svg.zap-solid {
   color: var(--zap);
 }
+
+.subtier {
+  background: var(--sub-bg);
+  border-radius: 16px;
+}
+
+.light .subtier {
+  border: 1px solid var(--border-color);
+}
+
+.light .spinner-button {
+  background: #FFF;
+  border: 1px solid var(--border-color);
+  color: var(--font-secondary);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light .spinner-button:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
+}
+
+.main-content.p {
+  border-bottom: 0;
+  border-top: 0;
+}
+
+.light button.icon {
+  border: 1px solid var(--border-color);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light button.icon:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
+}
+
+.light button,
+.light button.secondary {
+  color: #4B5C83;
+  background-color: #FFF;
+  border: 1px solid var(--border-color);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light button:hover,
+.light button.secondary:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px !important;
+}
+
+.light .modal button.secondary:hover {
+  background: #FFF !important;
+}

yarn.lock

@@ -2775,6 +2775,40 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@snort/shared@^1.0.6, @snort/shared@workspace:*, @snort/shared@workspace:packages/shared":
+  version: 0.0.0-use.local
+  resolution: "@snort/nostr@workspace:packages/nostr"
+  dependencies:
+    "@noble/curves": ^1.0.0
+    "@noble/hashes": ^1.2.0
+    "@types/chai": ^4.3.4
+    "@types/events": ^3.0.0
+    "@types/expect": ^24.3.0
+    "@types/express": ^4.17.17
+    "@types/mocha": ^10.0.1
+    "@types/node": ^20.4.1
+    "@types/uuid": ^9.0.1
+    "@typescript-eslint/eslint-plugin": ^5.53.0
+    "@typescript-eslint/parser": ^5.53.0
+    base64-js: ^1.5.1
+    bech32: ^2.0.0
+    chai: ^4.3.7
+    eslint: ^8.34.0
+    events: ^3.3.0
+    express: ^4.18.2
+    isomorphic-ws: ^5.0.0
+    mocha: ^10.2.0
+    ts-loader: ^9.4.2
+    ts-mocha: ^10.0.0
+    ts-node: ^10.9.1
+    typescript: ^4.9.5
+    uuid: ^9.0.0
+    webpack: ^5.77.0
+    webpack-cli: ^5.0.1
+    ws: ^8.12.1
+  languageName: unknown
+  linkType: soft
+
 "@snort/shared@^1.0.6, @snort/shared@workspace:*, @snort/shared@workspace:packages/shared":
   version: 0.0.0-use.local
   resolution: "@snort/shared@workspace:packages/shared"
@@ -2829,6 +2863,7 @@ __metadata:
     "@peculiar/webcrypto": ^1.4.3
     "@scure/base": ^1.1.2
     "@snort/shared": ^1.0.6
+    "@snort/shared": ^1.0.6
     "@stablelib/xchacha20": ^1.0.1
     "@types/debug": ^4.1.8
     "@types/jest": ^29.5.1