diff --git a/src/WebApp/Components/Layout/CartMenu.razor.css b/src/WebApp/Components/Layout/CartMenu.razor.css index 38e07d428..d6a008abb 100644 --- a/src/WebApp/Components/Layout/CartMenu.razor.css +++ b/src/WebApp/Components/Layout/CartMenu.razor.css @@ -9,9 +9,9 @@ right: -0.5rem; top: 1rem; border-radius: 20px; - border: 1px solid #000; - background: #000; - color: #FFF; + border: 1px solid var(--color-button-primary-bg); + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); font-size: 0.75rem; font-style: normal; font-weight: 400; diff --git a/src/WebApp/Components/Layout/FooterBar.razor.css b/src/WebApp/Components/Layout/FooterBar.razor.css index b933010bd..3e720b1fb 100644 --- a/src/WebApp/Components/Layout/FooterBar.razor.css +++ b/src/WebApp/Components/Layout/FooterBar.razor.css @@ -1,7 +1,8 @@ .eshop-footer { margin-top: 3.5rem; - background-color: #000; + background-color: var(--color-surface); width: 100%; + border-top: 1px solid var(--color-border); } .eshop-footer-content { @@ -11,14 +12,14 @@ .eshop-footer-row { padding: 3.5rem 10rem; - color: white; + color: var(--color-text); display: flex; justify-content: flex-end; align-items: center; } .eshop-footer .logo-footer { - color: white; + color: var(--color-text); margin-right: auto; width: 100px; height: auto; diff --git a/src/WebApp/Components/Layout/HeaderBar.razor b/src/WebApp/Components/Layout/HeaderBar.razor index 9f8d1acf8..f356dfa76 100644 --- a/src/WebApp/Components/Layout/HeaderBar.razor +++ b/src/WebApp/Components/Layout/HeaderBar.razor @@ -13,6 +13,7 @@ + diff --git a/src/WebApp/Components/Layout/HeaderBar.razor.css b/src/WebApp/Components/Layout/HeaderBar.razor.css index 062cf160c..2078bbcf7 100644 --- a/src/WebApp/Components/Layout/HeaderBar.razor.css +++ b/src/WebApp/Components/Layout/HeaderBar.razor.css @@ -36,7 +36,7 @@ } .eshop-header-intro h1 { - color: #000; + color: var(--color-header-text); font-size: 3.5rem; font-style: normal; font-weight: 700; @@ -45,7 +45,7 @@ } .eshop-header-intro p { - color: #000; + color: var(--color-header-text); font-size: 2rem; font-style: normal; font-weight: 700; diff --git a/src/WebApp/Components/Layout/MainLayout.razor b/src/WebApp/Components/Layout/MainLayout.razor index ab7be4a3b..09d679fa7 100644 --- a/src/WebApp/Components/Layout/MainLayout.razor +++ b/src/WebApp/Components/Layout/MainLayout.razor @@ -1,5 +1,7 @@ @using eShop.WebApp.Components.Chatbot +@using eShop.WebApp.Services @inherits LayoutComponentBase +@inject IThemeService ThemeService @Body @@ -11,3 +13,13 @@ Reload 🗙 + +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await ThemeService.InitializeAsync(); + } + } +} diff --git a/src/WebApp/Components/Layout/MainLayout.razor.css b/src/WebApp/Components/Layout/MainLayout.razor.css index df8c10ff2..b3dcf0102 100644 --- a/src/WebApp/Components/Layout/MainLayout.razor.css +++ b/src/WebApp/Components/Layout/MainLayout.razor.css @@ -1,5 +1,5 @@ #blazor-error-ui { - background: lightyellow; + background: var(--color-hover); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; @@ -8,6 +8,8 @@ position: fixed; width: 100%; z-index: 1000; + color: var(--color-text); + border-top: 1px solid var(--color-border); } #blazor-error-ui .dismiss { @@ -15,4 +17,5 @@ position: absolute; right: 0.75rem; top: 0.5rem; + color: var(--color-text); } diff --git a/src/WebApp/Components/Layout/ThemeToggle.razor b/src/WebApp/Components/Layout/ThemeToggle.razor new file mode 100644 index 000000000..a9a3dfc15 --- /dev/null +++ b/src/WebApp/Components/Layout/ThemeToggle.razor @@ -0,0 +1,36 @@ +@using eShop.WebApp.Services +@inject IThemeService ThemeService +@implements IDisposable + + + +@code { + protected override async Task OnInitializedAsync() + { + ThemeService.ThemeChanged += StateHasChanged; + await ThemeService.InitializeAsync(); + } + + private async Task ToggleTheme() + { + await ThemeService.ToggleThemeAsync(); + } + + public void Dispose() + { + ThemeService.ThemeChanged -= StateHasChanged; + } +} \ No newline at end of file diff --git a/src/WebApp/Components/Layout/ThemeToggle.razor.css b/src/WebApp/Components/Layout/ThemeToggle.razor.css new file mode 100644 index 000000000..9e50ff268 --- /dev/null +++ b/src/WebApp/Components/Layout/ThemeToggle.razor.css @@ -0,0 +1,29 @@ +.theme-toggle { + background: transparent; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border-radius: 0.25rem; + transition: background-color 0.2s ease; + color: var(--color-text); +} + +.theme-toggle:hover { + background-color: var(--color-hover); +} + +.theme-toggle:focus { + outline: 2px solid var(--color-focus); + outline-offset: 2px; +} + +.theme-toggle svg { + transition: transform 0.2s ease; +} + +.theme-toggle:hover svg { + transform: scale(1.1); +} \ No newline at end of file diff --git a/src/WebApp/Components/Layout/UserMenu.razor.css b/src/WebApp/Components/Layout/UserMenu.razor.css index 142685b72..96dd6e90a 100644 --- a/src/WebApp/Components/Layout/UserMenu.razor.css +++ b/src/WebApp/Components/Layout/UserMenu.razor.css @@ -6,21 +6,24 @@ .dropdown-content { display: none; position: absolute; - background-color: #FFF; + background-color: var(--color-dropdown-bg); min-width: 8rem; box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2); z-index: 1; + border: 1px solid var(--color-border); + border-radius: 0.25rem; } .dropdown-item { padding: 0.75rem 1rem; text-decoration: none; display: block; - color: #000; + color: var(--color-dropdown-text); + transition: background-color 0.2s ease; } .dropdown-item:hover { - background-color: #ddd; + background-color: var(--color-dropdown-hover); } .dropdown-menu:hover .dropdown-content { @@ -34,4 +37,5 @@ width: 100%; padding: 0; text-align: left; + color: inherit; } diff --git a/src/WebApp/Components/Pages/Cart/CartPage.razor.css b/src/WebApp/Components/Pages/Cart/CartPage.razor.css index 3b9c56829..83ecb22d8 100644 --- a/src/WebApp/Components/Pages/Cart/CartPage.razor.css +++ b/src/WebApp/Components/Pages/Cart/CartPage.razor.css @@ -17,7 +17,7 @@ padding: 0.5rem 0; align-items: center; align-self: stretch; - border-bottom: 1px solid #D2D2D2; + border-bottom: 1px solid var(--color-border); flex-grow: 1; } @@ -27,7 +27,7 @@ justify-content: space-between; align-items: center; align-self: stretch; - border-bottom: 1px solid #D2D2D2; + border-bottom: 1px solid var(--color-border); } .cart-items .cart-item .catalog-item-info { @@ -55,6 +55,9 @@ .cart-items .cart-item .catalog-item-quantity input { max-width: 3rem; padding: 1rem 0.75rem; + background-color: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-border); } .cart-items .cart-item .catalog-item-info img { @@ -69,7 +72,8 @@ align-items: flex-start; gap: 1rem; flex-shrink: 0; - background: #F7F7F7; + background: var(--color-surface); + border: 1px solid var(--color-border); } .cart-summary-header { @@ -78,9 +82,9 @@ justify-content: space-between; align-items: center; align-self: stretch; - border-bottom: 1px solid #000; + border-bottom: 1px solid var(--color-button-primary-bg); gap: 0.5rem; - color: #000; + color: var(--color-text); font-size: 1.25rem; font-weight: 600; line-height: 120%; @@ -93,7 +97,7 @@ align-items: flex-start; gap: 0.5rem; align-self: stretch; - border-bottom: 1px solid #444; + border-bottom: 1px solid var(--color-border); } .cart-summary-breakdown-line { @@ -101,6 +105,7 @@ justify-content: space-between; align-items: flex-start; align-self: stretch; + color: var(--color-text); } .cart-summary-total { @@ -108,19 +113,20 @@ justify-content: space-between; align-items: flex-start; align-self: stretch; + color: var(--color-text); } .cart-summary .cart-summary-link { display: flex; align-items: center; gap: 0.5rem; - color: #000; + color: var(--color-text); text-decoration: none; } .cart-summary .filter-badge { - background: #000; - color: #FFF; + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); font-size: 1rem; font-weight: 600; border-radius: 0.75rem; diff --git a/src/WebApp/Components/Pages/Catalog/Catalog.razor.css b/src/WebApp/Components/Pages/Catalog/Catalog.razor.css index f957f63f2..6192cce8a 100644 --- a/src/WebApp/Components/Pages/Catalog/Catalog.razor.css +++ b/src/WebApp/Components/Pages/Catalog/Catalog.razor.css @@ -26,8 +26,8 @@ } .catalog .catalog-filter .filter-badge { - background: #000; - color: #FFF; + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); font-size: 1rem; font-weight: 600; border-radius: 0.75rem; @@ -40,14 +40,14 @@ } .catalog .catalog-filter-group h3 { - color: #000; + color: var(--color-text); font-size: 1rem; font-weight: 600; line-height: 150%; } .catalog .catalog-filter-group .catalog-filter-group-tags { - border-top: 1px solid #404040; + border-top: 1px solid var(--color-border); display: flex; padding: 0.75rem 0; align-items: center; @@ -64,21 +64,23 @@ align-items: center; gap: 0.25rem; border-radius: 1.25rem; - color: #404040; + color: var(--color-text-secondary); font-family: 'Open Sans'; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; + transition: background-color 0.2s ease, color 0.2s ease; } .catalog-filter-group-tags .catalog-filter-tag:hover { cursor: pointer; + background-color: var(--color-hover); } .catalog-filter-group-tags .catalog-filter-tag.active { - background: #000; - color: #FFF; + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); } .catalog .catalog-items { @@ -105,14 +107,15 @@ justify-content: center; align-items: center; gap: 4px; - background: #F7F7F7; - color: #000; + background: var(--color-hover); + color: var(--color-text); text-decoration: none; + transition: background-color 0.2s ease, color 0.2s ease; } .page-links ::deep a.active-page { - color: #F7F7F7; - background-color: #000; + color: var(--color-button-primary-text); + background-color: var(--color-button-primary-bg); } diff --git a/src/WebApp/Components/Pages/Item/ItemPage.razor.css b/src/WebApp/Components/Pages/Item/ItemPage.razor.css index c21fa93da..9070e48af 100644 --- a/src/WebApp/Components/Pages/Item/ItemPage.razor.css +++ b/src/WebApp/Components/Pages/Item/ItemPage.razor.css @@ -4,6 +4,7 @@ align-items: flex-start; gap: 4rem; line-height: 1.7rem; + color: var(--color-text); } p:first-of-type { @@ -28,11 +29,12 @@ img { .price { font-size: 1.6rem; font-weight: 600; + color: var(--color-text); } .add-to-cart button { - background-color: black; - color: white; + background-color: var(--color-button-primary-bg); + color: var(--color-button-primary-text); border-radius: .25rem; border: 0; padding: 0.5rem 1.25rem; @@ -40,18 +42,20 @@ img { display: flex; align-items: center; gap: 0.5rem; + transition: background-color 0.2s ease; } .add-to-cart button:hover { - background-color: #666; + background-color: var(--color-hover); } .add-to-cart button:active { - background-color: #333; + background-color: var(--color-button-primary-bg); + opacity: 0.8; } a { - color: black; + color: var(--color-text); } @media only screen and (max-width: 480px) { diff --git a/src/WebApp/Extensions/Extensions.cs b/src/WebApp/Extensions/Extensions.cs index bcfe09a97..71f520d0a 100644 --- a/src/WebApp/Extensions/Extensions.cs +++ b/src/WebApp/Extensions/Extensions.cs @@ -1,5 +1,6 @@ using eShop.Basket.API.Grpc; using eShop.WebApp.Services.OrderStatus.IntegrationEvents; +using eShop.WebApp.Services; using eShop.WebAppComponents.Services; using Microsoft.AspNetCore.Authentication.Cookies; using Microsoft.AspNetCore.Authentication.OpenIdConnect; @@ -25,6 +26,7 @@ public static void AddApplicationServices(this IHostApplicationBuilder builder) builder.Services.AddSingleton(); builder.Services.AddSingleton(); builder.Services.AddSingleton(); + builder.Services.AddScoped(); builder.AddAIServices(); // HTTP and GRPC client registrations diff --git a/src/WebApp/Services/IThemeService.cs b/src/WebApp/Services/IThemeService.cs new file mode 100644 index 000000000..f1480e8aa --- /dev/null +++ b/src/WebApp/Services/IThemeService.cs @@ -0,0 +1,9 @@ +namespace eShop.WebApp.Services; + +public interface IThemeService +{ + bool IsDarkMode { get; } + event Action? ThemeChanged; + Task ToggleThemeAsync(); + Task InitializeAsync(); +} \ No newline at end of file diff --git a/src/WebApp/Services/ThemeService.cs b/src/WebApp/Services/ThemeService.cs new file mode 100644 index 000000000..cd04530f1 --- /dev/null +++ b/src/WebApp/Services/ThemeService.cs @@ -0,0 +1,58 @@ +using Microsoft.JSInterop; + +namespace eShop.WebApp.Services; + +public class ThemeService : IThemeService +{ + private readonly IJSRuntime _jsRuntime; + private bool _isDarkMode = false; + + public ThemeService(IJSRuntime jsRuntime) + { + _jsRuntime = jsRuntime; + } + + public bool IsDarkMode => _isDarkMode; + + public event Action? ThemeChanged; + + public async Task InitializeAsync() + { + try + { + // Check if dark mode is saved in localStorage + var savedTheme = await _jsRuntime.InvokeAsync("localStorage.getItem", "eshop-theme"); + _isDarkMode = savedTheme == "dark"; + await ApplyThemeAsync(); + } + catch + { + // Fallback to light mode if localStorage is not available + _isDarkMode = false; + } + } + + public async Task ToggleThemeAsync() + { + _isDarkMode = !_isDarkMode; + await ApplyThemeAsync(); + ThemeChanged?.Invoke(); + } + + private async Task ApplyThemeAsync() + { + try + { + // Save theme preference to localStorage + await _jsRuntime.InvokeVoidAsync("localStorage.setItem", "eshop-theme", _isDarkMode ? "dark" : "light"); + + // Apply theme class to document body + var themeClass = _isDarkMode ? "dark-theme" : "light-theme"; + await _jsRuntime.InvokeVoidAsync("eval", $"document.body.className = '{themeClass}';"); + } + catch + { + // Ignore JS errors during theme application + } + } +} \ No newline at end of file diff --git a/src/WebApp/wwwroot/css/app.css b/src/WebApp/wwwroot/css/app.css index 52c953084..fb65133f2 100644 --- a/src/WebApp/wwwroot/css/app.css +++ b/src/WebApp/wwwroot/css/app.css @@ -232,8 +232,53 @@ src: url('../fonts/open-sans-v36-latin-800italic.woff2') format('woff2'); } +/* Color Variables for Light and Dark Theme */ +:root { + --color-background: #ffffff; + --color-surface: #ffffff; + --color-text: #000000; + --color-text-secondary: #404040; + --color-border: #444444; + --color-button-primary-bg: #000000; + --color-button-primary-text: #ffffff; + --color-button-secondary-bg: #ffffff; + --color-button-secondary-text: #000000; + --color-hover: #f5f5f5; + --color-focus: #007acc; + --color-dropdown-bg: #ffffff; + --color-dropdown-text: #000000; + --color-dropdown-hover: #dddddd; + --color-header-text: #000000; + --color-error: #b32121; + --color-success: #26b050; +} + +/* Dark Theme */ +.dark-theme { + --color-background: #121212; + --color-surface: #1e1e1e; + --color-text: #ffffff; + --color-text-secondary: #b0b0b0; + --color-border: #333333; + --color-button-primary-bg: #ffffff; + --color-button-primary-text: #000000; + --color-button-secondary-bg: #1e1e1e; + --color-button-secondary-text: #ffffff; + --color-hover: #2a2a2a; + --color-focus: #4d9fff; + --color-dropdown-bg: #1e1e1e; + --color-dropdown-text: #ffffff; + --color-dropdown-hover: #333333; + --color-header-text: #ffffff; + --color-error: #ff6b6b; + --color-success: #51cf66; +} + body { font-family: 'Plus Jakarta Sans'; + background-color: var(--color-background); + color: var(--color-text); + transition: background-color 0.3s ease, color 0.3s ease; } .container { @@ -251,17 +296,18 @@ body { align-self: stretch; border: none; text-decoration: none; + transition: background-color 0.2s ease, color 0.2s ease; } .button.button-primary { - background: #000; - color: #FFF; + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); } .button.button.button-secondary { - border: 1px solid #444; - background: #FFF; - color: #000; + border: 1px solid var(--color-border); + background: var(--color-button-secondary-bg); + color: var(--color-button-secondary-text); } h1:focus { @@ -269,19 +315,19 @@ h1:focus { } .valid.modified:not([type=checkbox]) { - outline: 1px solid #26b050; + outline: 1px solid var(--color-success); } .invalid { - outline: 1px solid red; + outline: 1px solid var(--color-error); } .validation-message { - color: red; + color: var(--color-error); } .blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-error); padding: 1rem 1rem 1rem 3.7rem; color: white; } diff --git a/src/WebAppComponents/Catalog/CatalogListItem.razor.css b/src/WebAppComponents/Catalog/CatalogListItem.razor.css index 6d4e8f368..5a85929c6 100644 --- a/src/WebAppComponents/Catalog/CatalogListItem.razor.css +++ b/src/WebAppComponents/Catalog/CatalogListItem.razor.css @@ -3,12 +3,13 @@ flex-shrink: 0; box-sizing: border-box; padding: 2px; + transition: border 0.2s ease, padding 0.2s ease; } .catalog-item:hover { cursor: pointer; padding: 0; - border: 2px solid #000; + border: 2px solid var(--color-button-primary-bg); } .catalog-product { @@ -31,7 +32,7 @@ } .catalog-product-content .name { - color: #000; + color: var(--color-text); font-size: 1rem; font-style: normal; font-weight: 600; @@ -40,7 +41,7 @@ } .catalog-product-content .price { - color: #444; + color: var(--color-text-secondary); text-align: right; font-size: 1rem; font-style: normal; diff --git a/src/WebAppComponents/Catalog/CatalogSearch.razor.css b/src/WebAppComponents/Catalog/CatalogSearch.razor.css index ad213b97b..9a2d3f0ca 100644 --- a/src/WebAppComponents/Catalog/CatalogSearch.razor.css +++ b/src/WebAppComponents/Catalog/CatalogSearch.razor.css @@ -11,8 +11,8 @@ } .catalog-search .search-badge { - background: #000; - color: #FFF; + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); font-size: 1rem; font-weight: 600; border-radius: 0.75rem; @@ -25,14 +25,14 @@ } .catalog-search-group h3 { - color: #000; + color: var(--color-text); font-size: 1rem; font-weight: 600; line-height: 150%; } .catalog-search-group .catalog-search-group-tags { - border-top: 1px solid #404040; + border-top: 1px solid var(--color-border); display: flex; padding: 0.75rem 0; align-items: center; @@ -50,23 +50,24 @@ align-items: center; gap: 0.25rem; border-radius: 1.25rem; - color: #404040; + color: var(--color-text-secondary); font-family: 'Open Sans'; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; + transition: background-color 0.2s ease, color 0.2s ease; } .catalog-search-tag:hover { cursor: pointer; - background: #ddd; + background: var(--color-hover); } .catalog-search-tag.active { - background: #000; - color: #FFF; + background: var(--color-button-primary-bg); + color: var(--color-button-primary-text); } .catalog-search.button {