diff --git a/packages/web/public/icon-colors.css b/packages/web/public/icon-colors.css index 42bdd3d5e..0e904452d 100644 --- a/packages/web/public/icon-colors.css +++ b/packages/web/public/icon-colors.css @@ -31,7 +31,7 @@ color: var(--theme-icon-inv-red); } -.color-icon-premium { +.premium-background-gradient { background: linear-gradient(135deg, #1686c8, #8a25b1); } diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte index e3135fee9..72fcd7c41 100644 --- a/packages/web/src/icons/FontIcon.svelte +++ b/packages/web/src/icons/FontIcon.svelte @@ -353,8 +353,6 @@ 'img data-deploy': 'mdi mdi-database-settings color-icon-green', 'img arrow-start-here': 'mdi mdi-arrow-down-bold-circle color-icon-green', 'img team-file': 'mdi mdi-account-file color-icon-red', - - 'img premium': 'mdi mdi-star color-icon-premium', }; diff --git a/packages/web/src/widgets/WidgetIconPanel.svelte b/packages/web/src/widgets/WidgetIconPanel.svelte index 808f2cd3c..5f3c1ff06 100644 --- a/packages/web/src/widgets/WidgetIconPanel.svelte +++ b/packages/web/src/widgets/WidgetIconPanel.svelte @@ -186,7 +186,15 @@ data-testid={`WidgetIconPanel_${item.name}`} on:click={() => handleChangeWidget(item.name)} > - + {#if item.isPremiumPromo && $promoWidget?.isColoredIcon} + + {:else} + + {/if} {#if item.isPremiumPromo}
Premium
{#if $promoWidget?.identifier != $seenPremiumPromoWidget} @@ -281,4 +289,9 @@ top: -5px; right: 5px; } + + :global(.widget-icon-panel-rounded) { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + }