better colored icon

This commit is contained in:
SPRINX0\prochazka
2025-10-22 13:56:46 +02:00
parent 516c4e32be
commit ed1655ed8f
3 changed files with 15 additions and 4 deletions

View File

@@ -31,7 +31,7 @@
color: var(--theme-icon-inv-red); color: var(--theme-icon-inv-red);
} }
.color-icon-premium { .premium-background-gradient {
background: linear-gradient(135deg, #1686c8, #8a25b1); background: linear-gradient(135deg, #1686c8, #8a25b1);
} }

View File

@@ -353,8 +353,6 @@
'img data-deploy': 'mdi mdi-database-settings color-icon-green', 'img data-deploy': 'mdi mdi-database-settings color-icon-green',
'img arrow-start-here': 'mdi mdi-arrow-down-bold-circle 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 team-file': 'mdi mdi-account-file color-icon-red',
'img premium': 'mdi mdi-star color-icon-premium',
}; };
</script> </script>

View File

@@ -186,7 +186,15 @@
data-testid={`WidgetIconPanel_${item.name}`} data-testid={`WidgetIconPanel_${item.name}`}
on:click={() => handleChangeWidget(item.name)} on:click={() => handleChangeWidget(item.name)}
> >
<FontIcon icon={item.isPremiumPromo ? ($promoWidget?.icon ?? item.icon) : item.icon} title={item.title} /> {#if item.isPremiumPromo && $promoWidget?.isColoredIcon}
<FontIcon
icon={item.icon}
title={item.title}
colorClass="premium-background-gradient widget-icon-panel-rounded"
/>
{:else}
<FontIcon icon={item.icon} title={item.title} />
{/if}
{#if item.isPremiumPromo} {#if item.isPremiumPromo}
<div class="premium-promo">Premium</div> <div class="premium-promo">Premium</div>
{#if $promoWidget?.identifier != $seenPremiumPromoWidget} {#if $promoWidget?.identifier != $seenPremiumPromoWidget}
@@ -281,4 +289,9 @@
top: -5px; top: -5px;
right: 5px; right: 5px;
} }
:global(.widget-icon-panel-rounded) {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style> </style>