promo widget colors

packages/api/src/controllers/cloud.js

@@ -286,7 +286,7 @@ module.exports = {
 
   premiumPromoWidget_meta: true,
   async premiumPromoWidget() {
-    const data = getPromoWidgetData();
+    const data = await getPromoWidgetData();
     if (data?.state != 'data') {
       return null;
     }

packages/api/src/utility/cloudIntf.js

@@ -18,6 +18,7 @@ const logger = getLogger('cloudIntf');
 
 let cloudFiles = null;
 let promoWidgetData = null;
+let promoWidgetDataLoaded = false;
 
 const DBGATE_IDENTITY_URL = process.env.LOCAL_DBGATE_IDENTITY
   ? 'http://localhost:3103'
@@ -260,13 +261,21 @@ async function getPublicFileData(path) {
   return resp.data;
 }
 
-async function updatePremiumPromoWidget() {
+async function ensurePromoWidgetDataLoaded() {
+  if (promoWidgetDataLoaded) {
+    return;
+  }
   try {
     const fileContent = await fs.readFile(path.join(datadir(), 'promo-widget.json'), 'utf-8');
     promoWidgetData = JSON.parse(fileContent);
   } catch (err) {
     promoWidgetData = null;
   }
+  promoWidgetDataLoaded = true;
+}
+
+async function updatePremiumPromoWidget() {
+  await ensurePromoWidgetDataLoaded();
 
   const tags = (await collectCloudFilesSearchTags()).join(',');
 
@@ -466,7 +475,8 @@ async function getPublicIpInfo() {
   }
 }
 
-function getPromoWidgetData() {
+async function getPromoWidgetData() {
+  await ensurePromoWidgetDataLoaded();
   return promoWidgetData;
 }
 

packages/web/public/icon-colors.css

@@ -34,3 +34,11 @@
 .color-icon-premium {
   background: linear-gradient(135deg, #1686c8, #8a25b1);
 }
+
+.web-color-primary {
+  background:  #1686c8;
+}
+
+.web-color-secondary {
+  background:  #8a25b1;
+}

packages/web/src/buttons/FormStyledButton.svelte

@@ -9,6 +9,7 @@
   export let title = null;
   export let skipWidth = false;
   export let outline = false;
+  export let colorClass = '';
 
   function handleClick() {
     if (!disabled) dispatch('click');
@@ -31,6 +32,8 @@
   bind:this={domButton}
   class:skipWidth
   class:outline
+  class={colorClass}
+  class:setBackgroundColor={!colorClass}
 />
 
 <style>
@@ -38,19 +41,26 @@
     border: 1px solid var(--theme-bg-button-inv-2);
     padding: 5px;
     margin: 2px;
-    background-color: var(--theme-bg-button-inv);
     color: var(--theme-font-inv-1);
     border-radius: 2px;
   }
 
+  .setBackgroundColor {
+    background-color: var(--theme-bg-button-inv);
+  }
+
   input:not(.skipWidth) {
     width: 100px;
   }
 
-  input:hover:not(.disabled):not(.outline) {
+  input:not(.setBackgroundColor) {
+    cursor: pointer;
+  }
+
+  input.setBackgroundColor:hover:not(.disabled):not(.outline) {
     background-color: var(--theme-bg-button-inv-2);
   }
-  input:active:not(.disabled):not(.outline) {
+  input.setBackgroundColor:active:not(.disabled):not(.outline) {
     background-color: var(--theme-bg-button-inv-3);
   }
   input.disabled {

packages/web/src/jsonui/JsonUiLinkButton.svelte

@@ -4,14 +4,14 @@
 
   export let text: string;
   export let link: string;
-  export let newTab: boolean = true;
+  export let colorClass: string = '';
 
   // very light url guard
   const safe = /^(https?:)?\/\//i.test(link) || link.startsWith('/');
 </script>
 
 <div class="center">
-  <FormStyledButton on:click={() => openWebLink(link)} value={text} skipWidth />
+  <FormStyledButton on:click={() => openWebLink(link)} value={text} skipWidth {colorClass} />
 </div>
 
 <style>