chore: css fixes / rename subscription to pro

packages/app/public/icons.svg

@@ -130,8 +130,8 @@
     <symbol id="pie-chart" viewBox="0 0 22 22" fill="none">
       <path d="M20.2104 14.8901C19.5742 16.3946 18.5792 17.7203 17.3123 18.7514C16.0454 19.7825 14.5452 20.4875 12.9428 20.8048C11.3405 21.1222 9.68483 21.0422 8.12055 20.5719C6.55627 20.1015 5.13103 19.2551 3.96942 18.1067C2.80782 16.9583 1.94522 15.5428 1.45704 13.984C0.968859 12.4252 0.869965 10.7706 1.169 9.1647C1.46804 7.55885 2.1559 6.0507 3.17245 4.7721C4.189 3.4935 5.50329 2.48339 7.0004 1.83007M20.2392 7.17323C20.6395 8.1397 20.8851 9.16143 20.9684 10.2009C20.989 10.4577 20.9993 10.5861 20.9483 10.7018C20.9057 10.7984 20.8213 10.8898 20.7284 10.94C20.6172 11.0001 20.4783 11.0001 20.2004 11.0001H11.8004C11.5204 11.0001 11.3804 11.0001 11.2734 10.9456C11.1793 10.8976 11.1028 10.8211 11.0549 10.7271C11.0004 10.6201 11.0004 10.4801 11.0004 10.2001V1.80007C11.0004 1.5222 11.0004 1.38327 11.0605 1.27205C11.1107 1.17915 11.2021 1.09476 11.2987 1.05216C11.4144 1.00117 11.5428 1.01146 11.7996 1.03205C12.839 1.11539 13.8608 1.36095 14.8272 1.76127C16.0405 2.26382 17.1429 3.00042 18.0715 3.929C19.0001 4.85759 19.7367 5.95998 20.2392 7.17323Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
     </symbol>
-    <symbol id="diamond" viewBox="0 0 22 20" fill="none">
-      <path d="M1.49954 7H20.4995M8.99954 1L6.99954 7L10.9995 18.5L14.9995 7L12.9995 1M11.6141 18.2625L20.5727 7.51215C20.7246 7.32995 20.8005 7.23885 20.8295 7.13717C20.8551 7.04751 20.8551 6.95249 20.8295 6.86283C20.8005 6.76114 20.7246 6.67005 20.5727 6.48785L16.2394 1.28785C16.1512 1.18204 16.1072 1.12914 16.0531 1.09111C16.0052 1.05741 15.9518 1.03238 15.8953 1.01717C15.8314 1 15.7626 1 15.6248 1H6.37424C6.2365 1 6.16764 1 6.10382 1.01717C6.04728 1.03238 5.99385 1.05741 5.94596 1.09111C5.89192 1.12914 5.84783 1.18204 5.75966 1.28785L1.42633 6.48785C1.2745 6.67004 1.19858 6.76114 1.16957 6.86283C1.144 6.95249 1.144 7.04751 1.16957 7.13716C1.19858 7.23885 1.2745 7.32995 1.42633 7.51215L10.385 18.2625C10.596 18.5158 10.7015 18.6424 10.8279 18.6886C10.9387 18.7291 11.0603 18.7291 11.1712 18.6886C11.2975 18.6424 11.4031 18.5158 11.6141 18.2625Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <symbol id="diamond" viewBox="0 0 20 20" fill="none">
+      <path d="M2.08295 7.5H17.9163M8.33295 2.5L6.66628 7.5L9.99961 17.0833L13.3329 7.5L11.6663 2.5M10.5118 16.8854L17.9773 7.92679C18.1038 7.77496 18.1671 7.69905 18.1912 7.6143C18.2126 7.53959 18.2126 7.46041 18.1912 7.38569C18.1671 7.30095 18.1038 7.22504 17.9773 7.07321L14.3662 2.73988C14.2927 2.6517 14.256 2.60762 14.2109 2.57592C14.171 2.54784 14.1265 2.52698 14.0794 2.51431C14.0262 2.5 13.9688 2.5 13.854 2.5H6.1452C6.03042 2.5 5.97303 2.5 5.91985 2.51431C5.87273 2.52698 5.82821 2.54784 5.7883 2.57592C5.74327 2.60762 5.70653 2.6517 5.63305 2.73988L2.02194 7.07321C1.89541 7.22504 1.83215 7.30095 1.80798 7.38569C1.78666 7.46041 1.78666 7.53959 1.80798 7.6143C1.83215 7.69904 1.89541 7.77496 2.02194 7.92679L9.48747 16.8854C9.66335 17.0965 9.75129 17.202 9.85657 17.2405C9.94894 17.2743 10.0503 17.2743 10.1427 17.2405C10.2479 17.202 10.3359 17.0965 10.5118 16.8854Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
     <symbol id="wallet" viewBox="0 0 22 18" fill="none">
       <path d="M19 6.5V4.2C19 3.0799 19 2.51984 18.782 2.09202C18.5903 1.7157 18.2843 1.40974 17.908 1.21799C17.4802 1 16.9201 1 15.8 1H4.2C3.0799 1 2.51984 1 2.09202 1.21799C1.7157 1.40973 1.40973 1.71569 1.21799 2.09202C1 2.51984 1 3.0799 1 4.2V13.8C1 14.9201 1 15.4802 1.21799 15.908C1.40973 16.2843 1.71569 16.5903 2.09202 16.782C2.51984 17 3.07989 17 4.2 17L15.8 17C16.9201 17 17.4802 17 17.908 16.782C18.2843 16.5903 18.5903 16.2843 18.782 15.908C19 15.4802 19 14.9201 19 13.8V11.5M14 9C14 8.53535 14 8.30302 14.0384 8.10982C14.1962 7.31644 14.8164 6.69624 15.6098 6.53843C15.803 6.5 16.0353 6.5 16.5 6.5H18.5C18.9647 6.5 19.197 6.5 19.3902 6.53843C20.1836 6.69624 20.8038 7.31644 20.9616 8.10982C21 8.30302 21 8.53535 21 9C21 9.46466 21 9.69698 20.9616 9.89018C20.8038 10.6836 20.1836 11.3038 19.3902 11.4616C19.197 11.5 18.9647 11.5 18.5 11.5H16.5C16.0353 11.5 15.803 11.5 15.6098 11.4616C14.8164 11.3038 14.1962 10.6836 14.0384 9.89018C14 9.69698 14 9.46465 14 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

packages/app/src/Pages/Layout.tsx

@@ -169,10 +169,10 @@ function LogoHeader() {
         {CONFIG.appName}
       </h1>
       {currentSubscription && (
-        <small className="flex items-center g4">
-          <Icon name="diamond" size={10} />
+        <div className="flex items-center g4 text-sm font-semibold tracking-wider">
+          <Icon name="diamond" size={16} className="text-pro" />
           {mapPlanName(currentSubscription.type)}
-        </small>
+        </div>
       )}
     </Link>
   );

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

@@ -11,13 +11,14 @@ import AsyncButton from "Element/AsyncButton";
 import useEventPublisher from "Hooks/useEventPublisher";
 import SnortApi, { SubscriptionError, SubscriptionErrorCode } from "SnortApi";
 import SendSats from "Element/SendSats";
+import classNames from "classnames";
 
 export function mapPlanName(id: number) {
   switch (id) {
     case SubscriptionType.Supporter:
       return <FormattedMessage defaultMessage="Supporter" />;
     case SubscriptionType.Premium:
-      return <FormattedMessage defaultMessage="Premium" />;
+      return <FormattedMessage defaultMessage="PRO" />;
   }
 }
 
@@ -81,7 +82,7 @@ export function SubscribePage() {
         {Plans.map(a => {
           const lower = Plans.filter(b => b.id < a.id);
           return (
-            <div className={`p flex flex-col${a.disabled ? " disabled" : ""}`}>
+            <div className={classNames("p flex flex-col g8", { disabled: a.disabled })}>
               <div className="grow">
                 <h2>{mapPlanName(a.id)}</h2>
                 <p>
@@ -111,7 +112,7 @@ export function SubscribePage() {
                   ))}
                 </ul>
               </div>
-              <div className="flex items-center w-max mb10">
+              <div className="flex justify-center">
                 <AsyncButton className="button" disabled={a.disabled} onClick={() => subscribe(a.id)}>
                   {a.disabled ? (
                     <FormattedMessage defaultMessage="Coming soon" />

packages/app/src/index.css

@@ -47,12 +47,12 @@
     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%);
   --cashu-gradient: linear-gradient(90deg, #40b039, #adff2a);
+  --pro: #ffdd65;
 }
 
 ::-webkit-scrollbar {
@@ -166,6 +166,14 @@ a.ext {
   background: var(--primary-gradient);
 }
 
+.primary {
+  color: var(--primary-gradient);
+}
+
+.text-pro {
+  color: var(--pro);
+}
+
 .br {
   border-radius: 16px;
 }

packages/app/src/lang.json

@@ -344,9 +344,6 @@
   "C1LjMx": {
     "defaultMessage": "Lightning Donation"
   },
-  "C5xzTC": {
-    "defaultMessage": "Premium"
-  },
   "C7642/": {
     "defaultMessage": "Quote Repost"
   },
@@ -1112,6 +1109,9 @@
   "hMzcSq": {
     "defaultMessage": "Messages"
   },
+  "hRTfTR": {
+    "defaultMessage": "PRO"
+  },
   "hY4lzx": {
     "defaultMessage": "Supports"
   },

packages/app/src/translations/en.json

@@ -112,7 +112,6 @@
   "BcGMo+": "Notes hold text content, the most popular usage of these notes is to store \"tweet like\" messages.",
   "BjNwZW": "Nostr address (nip05)",
   "C1LjMx": "Lightning Donation",
-  "C5xzTC": "Premium",
   "C7642/": "Quote Repost",
   "C81/uG": "Logout",
   "C8HhVE": "Suggested Follows",
@@ -364,6 +363,7 @@
   "h8XMJL": "Badges",
   "hK5ZDk": "the world",
   "hMzcSq": "Messages",
+  "hRTfTR": "PRO",
   "hY4lzx": "Supports",
   "hicxcO": "Show replies",
   "hmZ3Bz": "Media",