tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: differentiate between header and footer colors

Browse Source
This commit is contained in:
ncoronel
2026-07-01 15:37:44 -03:00
parent b61ae3cb32
commit ad39ccb561
12 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -220,7 +220,7 @@
<div class="col-md-6 mb-3 mb-md-0">
<div class="tenant-logo-card">
<div class="tenant-logo-card__label">Logo del Header</div>
<div class="tenant-logo-card__container header-footer-bg">
<div class="tenant-logo-card__container header-bg">
@if (tenant()?.header_logo) {
<img [src]="tenant()?.header_logo" alt="Header Logo" class="tenant-logo-card__img" />
} @else {
@@ -236,7 +236,7 @@
<div class="col-md-6">
<div class="tenant-logo-card">
<div class="tenant-logo-card__label">Logo del Footer</div>
<div class="tenant-logo-card__container header-footer-bg">
<div class="tenant-logo-card__container footer-bg">
@if (tenant()?.footer_logo) {
<img [src]="tenant()?.footer_logo" alt="Footer Logo" class="tenant-logo-card__img" />
} @else {
@@ -295,6 +295,26 @@
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-header-bg)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Header BG</span>
<code class="color-swatch-card__value">{{ tenant()?.header_bg_color || 'Default' }}</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-footer-bg)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Footer BG</span>
<code class="color-swatch-card__value">{{ tenant()?.footer_bg_color || 'Default' }}</code>
</div>
</div>
</div>
</div>
</div>
</div>

8
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -164,8 +164,12 @@ h1 {
}
}
.header-footer-bg {
background-color: var(--tenant-header-footer-bg, #f8f9fa);
.header-bg {
background-color: var(--tenant-header-bg, #f8f9fa);
}
.footer-bg {
background-color: var(--tenant-footer-bg, #f8f9fa);
}
.color-swatch-card {

3
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts
View File

@@ -14,7 +14,8 @@ const tenant: Tenant = {
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};