Tweak license badge and fix keyring dep

src-web/components/LicenseBadge.tsx

@@ -15,7 +15,7 @@ const details: Record<
   commercial_use: null,
   invalid_license: { label: 'License Error', color: 'danger' },
   personal_use: { label: 'Personal Use', color: 'notice' },
-  trialing: { label: 'Personal Use', color: 'info' },
+  trialing: { label: 'Trialing', color: 'info' },
 };
 
 export function LicenseBadge() {
@@ -46,11 +46,6 @@ function LicenseBadgeCmp() {
     return null;
   }
 
-  // User is trialing but has already seen the message, so hide badge
-  if (check.data.type === 'trialing') {
-    return null;
-  }
-
   const detail = details[check.data.type];
   if (detail == null) {
     return null;
@@ -59,9 +54,7 @@ function LicenseBadgeCmp() {
   return (
     <BadgeButton
       color={detail.color}
-      onClick={async () => {
-        openSettings.mutate('license');
-      }}
+      onClick={() => openSettings.mutate('license')}
     >
       {detail.label}
     </BadgeButton>

src-web/components/Settings/SettingsLicense.tsx

@@ -35,17 +35,17 @@ function SettingsLicenseCmp() {
       {check.data?.type === 'commercial_use' ? (
         <Banner color="success">Your license is active 🥳</Banner>
       ) : check.data?.type == 'trialing' ? (
-        <Banner color="success" className="flex flex-col gap-3 max-w-lg">
-          <p className="select-text">
+        <Banner color="info" className="flex flex-col gap-3 max-w-lg">
+          <p>
             <strong>
               {pluralizeCount('day', differenceInDays(check.data.end, new Date()))} remaining
             </strong>{' '}
-            on trial
+            on your commercial-use trial
           </p>
         </Banner>
       ) : check.data?.type == 'personal_use' ? (
-        <Banner color="success" className="flex flex-col gap-3 max-w-lg">
-          <p>Your free trial has ended</p>
+        <Banner color="notice" className="flex flex-col gap-3 max-w-lg">
+          <p>You are able to use Yaak for personal use only</p>
         </Banner>
       ) : null}
 
@@ -98,16 +98,21 @@ function SettingsLicenseCmp() {
         </HStack>
       ) : (
         <HStack space={2}>
-          <Button color="primary" size="sm" onClick={toggleActivateFormVisible}>
-            Activate
-          </Button>
           <Button
+            variant="border"
             color="secondary"
             size="sm"
+            onClick={toggleActivateFormVisible}
+          >
+            Activate License
+          </Button>
+          <Button
+            size="sm"
+            color="primary"
             onClick={() => openUrl('https://yaak.app/pricing?s=purchase&ref=app.yaak.desktop')}
             rightSlot={<Icon icon="external_link" />}
           >
-            Purchase
+            Purchase License
           </Button>
         </HStack>
       )}

src-web/components/core/BadgeButton.tsx

@@ -1,6 +1,14 @@
+import classNames from 'classnames';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-export function BadgeButton(props: ButtonProps) {
-  return <Button size="2xs" variant="border" className="!rounded-full mx-1" {...props} />;
+export function BadgeButton({ className, ...props }: ButtonProps) {
+  return (
+    <Button
+      size="2xs"
+      variant="border"
+      className={classNames(className, '!rounded-full mx-1 !px-3')}
+      {...props}
+    />
+  );
 }