fix(license): strings + styles for the Manage Licenses dialog rework

src/nls/root/strings.js

@@ -2114,10 +2114,17 @@ define({
     "GET_PHOENIX_PRO": "Get Phoenix Pro",
     "USER_FREE_PLAN_NAME_DO_NOT_TRANSLATE": "Community Edition",
     // license dialogs
-    "MANAGE_LICENSE_DIALOG_TITLE": "Manage Device License",
+    "MANAGE_LICENSE_DIALOG_TITLE": "Manage Licenses",
+    "LICENSE_ACCOUNT_HEADING": "Account License",
+    "LICENSE_DEVICE_HEADING": "Device License",
+    "LICENSE_SIGN_IN": "Sign In",
+    "LICENSE_PLAN_UNKNOWN": "Unknown",
+    "LICENSE_GET_PRO": "Get Phoenix Pro",
+    "LICENSE_MANAGE_ACCOUNT": "Manage Account",
     "LICENSE_KEY": "License Key",
+    "LICENSE_KEY_PROMPT": "Have a device license key?",
     "LICENSE_KEY_PLACEHOLDER": "Enter your license key\u2026",
-    "LICENSE_KEY_ACTIVATE": "Activate License",
+    "LICENSE_KEY_ACTIVATE": "Activate",
     "LICENSE_KEY_ACTIVATING": "Activating\u2026",
     "LICENSE_KEY_CURRENT": "Current Device License",
     "LICENSE_KEY_CHECKING": "Checking license status\u2026",
@@ -2134,9 +2141,15 @@ define({
     "LICENSE_ACTIVATE_SUCCESS": "License activated system-wide. Please restart {APP_NAME} for the changes to take effect.",
     "LICENSE_ACTIVATE_SUCCESS_PARTIAL": "License activated for your account only (not system-wide). Please restart {APP_NAME} for the changes to take effect.",
     "LICENSE_ACTIVATE_FAIL": "Failed to activate license",
-    "LICENSE_ACTIVATE_FAIL_APPLY": "'Failed to apply license to device'",
+    "LICENSE_ACTIVATE_FAIL_APPLY": "Failed to apply license to device",
     "LICENSE_ENTER_KEY": "Please enter a license key",
-    "LICENSE_REAPPLY_TO_DEVICE": "Already activated? Reapply system-wide",
+    "LICENSE_REACTIVATE": "Reactivate License",
+    "LICENSE_DEACTIVATE": "Deactivate",
+    "LICENSE_DEACTIVATING": "Deactivating…",
+    "LICENSE_DEACTIVATE_SUCCESS": "License deactivated on this device. Please restart {APP_NAME} for the changes to take effect.",
+    "LICENSE_DEACTIVATE_FAIL": "Failed to deactivate license on this device",
+    "LICENSE_NOT_ACTIVATED_HERE": "This license isn't activated on this device — Phoenix Pro features won't be enabled until you click Reactivate License.",
+    "LICENSE_STATUS_NOT_ACTIVATED_HERE": "Available, but not activated",
     // Deprecated Extensions Dialog
     "DEPRECATED_EXTENSIONS_TITLE": "Deprecated Extensions Detected",
     "DEPRECATED_EXTENSIONS_MESSAGE": "The following installed extensions are now natively supported by {APP_NAME} and can be safely uninstalled from the Extension Manager:",

src/styles/phoenix-pro.less

@@ -344,13 +344,27 @@
 
 /* ---- License Management Dialog ---- */
 .license-management-dialog {
+  /* The base modal caps body height at ~400px and turns on overflow:auto.
+     This dialog has two stacked sections that exceed that; let it grow
+     up to the viewport so the user doesn't have to scroll. */
+  .modal-body {
+    max-height: calc(100vh - 160px);
+  }
+
   /* ---- Layout ---- */
-  .license-activation-section {
-    margin-bottom: 24px;
+  .license-account-section {
+    margin-bottom: 8px;
+
+    /* Account section uses a bare <h3> (no flex header), so add the
+       breathing room that .license-section-header would otherwise
+       provide. */
+    > .license-section-title {
+      margin-bottom: 12px;
+    }
   }
 
   .license-status-section {
-    margin-top: 24px;
+    margin-top: 8px;
   }
 
   /* ---- Form Elements ---- */
@@ -362,31 +376,43 @@
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
-    font-size: 16px;
-    color: @bc-text-emphasized;
+    font-size: 14px;
+    color: @bc-text-medium;
 
     .dark & {
-      color: @dark-bc-text-alt;
+      color: @dark-bc-text-medium;
     }
   }
 
   .license-form-input {
-    width: 100%;
     box-sizing: border-box;
     height: 38px;
     margin: 0;
   }
 
+  /* Activate-key row sits above the current-license card; input
+     stretches, the Activate button hugs the right edge. */
+  .license-key-row {
+    display: flex;
+    gap: 8px;
+    align-items: stretch;
+
+    .license-form-input {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
   /* ---- Activation Button ---- */
   .license-activate-btn {
-    width: 100%;
     box-sizing: border-box;
     margin: 0;
-    padding: 10px 16px;
+    padding: 0 16px;
     font-size: 14px;
     font-weight: 500;
     border-radius: @bc-border-radius;
     transition: background-color 0.15s ease, border-color 0.15s ease;
+    white-space: nowrap;
 
     .btn-spinner {
       display: none;
@@ -398,9 +424,25 @@
     }
   }
 
+  /* Account section action row: right-aligned, tight spacing. */
+  .license-account-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  /* Signed-in account card: plan name on the left, action on the right,
+     all on one line — drops the redundant "Plan:" label. */
+  .license-account-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
   /* ---- Section Divider ---- */
   .license-divider {
-    margin: 24px 0;
+    margin: 16px 0;
     border: none;
     border-top: 1px solid @bc-panel-border;
 
@@ -410,8 +452,16 @@
   }
 
   /* ---- Section Headers ---- */
+  .license-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
   .license-section-title {
-    margin: 0 0 16px 0;
+    margin: 0;
     font-size: 16px;
     font-weight: 500;
     color: @bc-text-emphasized;
@@ -421,6 +471,30 @@
     }
   }
 
+  /* ---- "License isn't applied to this device" banner ---- */
+  .license-not-applied-warning {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 12px;
+    margin-bottom: 12px;
+    border: 1px solid #f0ad4e;
+    border-radius: @bc-border-radius;
+    background-color: rgba(240, 173, 78, 0.12);
+    color: #b8761c;
+    font-size: 13px;
+    line-height: 1.4;
+
+    .dark & {
+      color: #f0c170;
+    }
+
+    .fa-exclamation-triangle {
+      font-size: 16px;
+      margin-top: 1px;
+    }
+  }
+
   /* ---- Status States ---- */
   .license-status-loading,
   .license-status-none,
@@ -524,6 +598,12 @@
     border-radius: 12px;
     font-size: 12px;
     font-weight: 500;
+
+    /* Warning variant: server-side license valid, but the local
+       activation marker is missing so Pro features won't work yet. */
+    &.warning {
+      background-color: #f0ad4e;
+    }
   }
 
   /* ---- Activation Messages ---- */

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "644be1987bcca30f3fad0be0515cc763b42dc4c0"
+    "commitID": "56a8bdd8e3cac3a92a9f75789e76b40ad4ec307e"
   }
 }