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/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) {
-  margin: 0 10px;
+.dm-page>div:nth-child(3) {
+  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",
-                    value: lnurl?.lnurl,
-                    weight: 1,
-                    name: user?.display_name || user?.name,
-                    zap: { pubkey: id },
-                  } as ZapTarget,
-                ]
+                {
+                  type: "lnurl",
+                  value: lnurl?.lnurl,
+                  weight: 1,
+                  name: user?.display_name || user?.name,
+                  zap: { pubkey: id },
+                } 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 {
-  border: 1px solid var(--gray-superdark);
+.settings-nav>div {
+  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)}