feat: enhance hero banner component with event schedule toggle and styling improvements

src/app/core/services/modal.service.spec.ts

@@ -163,6 +163,8 @@ describe('ModalService', () => {
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
 
+    expect(activeModal?.config.size).toBe('sm');
+
     activeModal?.ref.dismiss('escape');
 
     await expect(resultPromise).resolves.toBe(false);

src/app/core/services/modal.service.ts

@@ -166,7 +166,10 @@ export class ModalService {
   }
 
   openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
-    return this.open(ConfirmDeleteModalComponent, this.buildConfirmModalConfig(config));
+    return this.open(
+      ConfirmDeleteModalComponent,
+      this.buildConfirmModalConfig({ size: 'sm', ...config }),
+    );
   }
 
   openSimple(config: SimpleModalConfig): Observable<void> {

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.scss

@@ -74,6 +74,7 @@
 
 .ticket__actions {
   display: flex;
+  grid-column: 4;
   align-items: center;
   gap: 8px;
 }
@@ -91,6 +92,10 @@
   color: #8a8a8a;
 }
 
+.ticket--disabled .ticket__actions {
+  grid-column: 3;
+}
+
 :host ::ng-deep .ticket--disabled button.ticket__qr-button:disabled {
   --bs-btn-disabled-bg: #8a8a8a;
   --bs-btn-disabled-border-color: #8a8a8a;

src/app/shared/components/cart/cart.component.spec.ts

@@ -115,7 +115,7 @@ describe('CartComponent', () => {
 
     expect(openConfirmDelete).toHaveBeenCalledWith({
       title: 'Eliminar producto',
-      content: 'Se eliminara "Producto de prueba" del carrito. Esta accion no se puede deshacer.',
+      content: 'Se eliminará “Producto de prueba” del carrito. Esta acción no se puede deshacer.',
       confirmLabel: 'Eliminar',
       cancelLabel: 'Cancelar',
     });

src/app/shared/components/cart/cart.component.ts

@@ -204,7 +204,7 @@ export class CartComponent {
     this.modalService
       .openConfirmDelete({
         title: 'Eliminar producto',
-        content: `Se eliminara "${target.productName}" del carrito. Esta accion no se puede deshacer.`,
+        content: `Se eliminará “${target.productName}” del carrito. Esta acción no se puede deshacer.`,
         confirmLabel: 'Eliminar',
         cancelLabel: 'Cancelar',
       })

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.scss

@@ -1,19 +1,25 @@
 .confirm-modal {
   display: grid;
-  gap: 1.5rem;
-  justify-items: center;
+  width: 100%;
+  gap: 1.25rem;
   text-align: center;
 }
 
 .confirm-modal__content {
   margin: 0;
-  color: #666666;
-  line-height: 1.5;
+  color: #5f6368;
+  line-height: 1.55;
 }
 
 .confirm-modal__actions {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  width: 100%;
   gap: 0.75rem;
-  flex-wrap: wrap;
+}
+
+@media (max-width: 380px) {
+  .confirm-modal__actions {
+    grid-template-columns: 1fr;
+  }
 }

src/app/shared/components/hero-banner/hero-banner.component.html

@@ -1,13 +1,15 @@
 <div class="hero-banner-container">
-  <div
-    class="hero-banner position-relative rounded"
-  >
+  <div class="hero-banner position-relative rounded">
     <div
       class="hero-media"
       aria-hidden="true"
-      [ngStyle]="{'background-image': heroConfig?.background_image_id ? 'url(' + heroConfig.background_image_id + ')' : 'none'}"
+      [ngStyle]="{
+        'background-image': heroConfig?.background_image_id
+          ? 'url(' + heroConfig.background_image_id + ')'
+          : 'none',
+      }"
     ></div>
-    
+
     @if (heroConfig) {
       <div
         class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center"
@@ -20,7 +22,10 @@
             <div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
           }
           @if (heroConfig.button_text) {
-            <a [href]="heroConfig.button_href || '#'" class="hero-action text-decoration-none mt-3 d-inline-block">
+            <a
+              [href]="heroConfig.button_href || '#'"
+              class="hero-action text-decoration-none mt-3 d-inline-block"
+            >
               <app-button variant="primary">
                 {{ heroConfig.button_text }}
               </app-button>
@@ -29,37 +34,78 @@
         </div>
       </div>
     }
-
-    @if (eventConfig) {
-      <div class="event-card-container position-absolute w-100 d-flex justify-content-center">
-        <div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
-          @if (eventConfig.title) {
-            <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
-          }
-
-          <div
-            class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
-          >
-            @if (eventConfig.dates && eventConfig.dates.length > 0) {
-              <div class="d-flex align-items-center gap-2">
-                <i class="fa-regular fa-calendar event-icon"></i>
-                <span class="event-info-text">{{ formattedDates }}</span>
-              </div>
-            }
-            @if (eventConfig.location) {
-              <div class="d-flex align-items-center gap-2">
-                <i class="fa-solid fa-location-dot event-icon"></i>
-                <span class="event-info-text">{{ eventConfig.location }}</span>
-              </div>
-            }
-          </div>
-
-          <div class="event-schedule-label" aria-hidden="true">
-            <i class="fa-solid fa-chevron-down"></i>
-            <span>Ver horarios</span>
-          </div>
-        </div>
-      </div>
-    }
   </div>
+
+  @if (eventConfig) {
+    <div class="event-card-container w-100 d-flex justify-content-center">
+      <div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
+        @if (eventConfig.title) {
+          <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
+        }
+
+        <div
+          class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
+        >
+          @if (eventConfig.dates && eventConfig.dates.length > 0) {
+            <div class="d-flex align-items-center gap-2">
+              <i class="fa-regular fa-calendar event-icon"></i>
+              <span class="event-info-text">{{ formattedDates }}</span>
+            </div>
+          }
+          @if (eventConfig.location) {
+            <div class="d-flex align-items-center gap-2">
+              <i class="fa-solid fa-location-dot event-icon"></i>
+              <span class="event-info-text">{{ eventConfig.location }}</span>
+            </div>
+          }
+        </div>
+
+        @if (eventConfig.dates && eventConfig.dates.length > 0) {
+          <button
+            type="button"
+            class="event-schedule-toggle"
+            [attr.aria-expanded]="schedulesExpanded"
+            aria-controls="event-schedules"
+            (click)="toggleSchedules()"
+          >
+            <i
+              class="fa-solid"
+              [class.fa-chevron-down]="!schedulesExpanded"
+              [class.fa-chevron-up]="schedulesExpanded"
+              aria-hidden="true"
+            ></i>
+            <span>{{ schedulesExpanded ? 'Ocultar horarios' : 'Ver horarios' }}</span>
+          </button>
+
+          @if (schedulesExpanded) {
+            <div id="event-schedules" class="event-schedules">
+              <table class="table table-striped table-borderless mb-0">
+                <tbody>
+                  @for (eventDate of eventConfig.dates; track eventDate.id ?? eventDate.date) {
+                    <tr>
+                      <td>
+                        <span class="event-schedule-value">
+                          <i class="fa-regular fa-calendar" aria-hidden="true"></i>
+                          <span>{{ formatScheduleDate(eventDate.date) }}</span>
+                        </span>
+                      </td>
+                      <td>
+                        <span class="event-schedule-value">
+                          <i class="fa-regular fa-clock" aria-hidden="true"></i>
+                          <span>
+                            {{ formatScheduleTime(eventDate.start_time) }} -
+                            {{ formatScheduleTime(eventDate.end_time) }}
+                          </span>
+                        </span>
+                      </td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+        }
+      </div>
+    </div>
+  }
 </div>

src/app/shared/components/hero-banner/hero-banner.component.scss

@@ -1,5 +1,4 @@
 .hero-banner-container {
-  padding-bottom: 4rem; /* Spacing to accommodate the overlapping card */
   margin-bottom: 1rem;
 }
 
@@ -19,10 +18,15 @@
   border-radius: inherit;
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     inset: 0;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.7) 50%,
+      rgba(255, 255, 255, 0.95) 100%
+    );
     border-radius: inherit;
   }
 }
@@ -39,8 +43,8 @@
   flex-grow: 1;
 }
 
-
-::ng-deep .hero-title, .hero-title {
+::ng-deep .hero-title,
+.hero-title {
   color: #666666;
   font-size: 1.5rem;
   margin-bottom: 1rem;
@@ -49,7 +53,8 @@
   }
 }
 
-::ng-deep .hero-description, .hero-description {
+::ng-deep .hero-description,
+.hero-description {
   color: #666666;
   font-size: 1.1rem;
   line-height: 1.5;
@@ -59,8 +64,8 @@
 }
 
 .event-card-container {
-  bottom: -40px; /* Negative margin to pull it down and overlap */
-  left: 0;
+  position: relative;
+  margin-top: -40px;
   z-index: 10;
 }
 
@@ -70,12 +75,13 @@
 }
 
 .event-title {
-  font-size: 1.4rem;
+  font-size: 25px;
+  font-weight: 700;
   letter-spacing: 0.5px;
 }
 
 .event-details {
-  font-size: 1.1rem;
+  font-size: 21px;
 }
 
 .event-icon {
@@ -85,11 +91,55 @@
 
 .event-info-text {
   color: #8a8a8a;
-  font-weight: 500;
+  font-weight: 400;
 }
 
-.event-schedule-label {
-  display: none;
+.event-schedule-toggle {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.55rem;
+  margin-top: 1.75rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--tenant-primary, #009d4f);
+  font-size: 15px;
+  font-weight: 700;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 0.25rem;
+  }
+
+  i {
+    font-size: 0.7rem;
+  }
+}
+
+.event-schedules {
+  margin-top: 1.25rem;
+
+  td {
+    width: 50%;
+    padding: 0.65rem 1rem;
+    border-radius: 0.5rem;
+    vertical-align: middle;
+  }
+}
+
+.event-schedule-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #8a8a8a;
+  font-size: 19px;
+  font-weight: 400;
+
+  i {
+    width: 1rem;
+    color: #c9ccce;
+  }
 }
 
 @media (max-width: 767.98px) {
@@ -175,9 +225,7 @@
   }
 
   .event-card-container {
-    position: relative !important;
-    bottom: auto;
-    left: auto;
+    margin-top: 0;
     padding: 0 1.25rem 1.2rem;
   }
 
@@ -193,14 +241,12 @@
   .event-title {
     max-width: 16rem;
     margin: 0 auto 0.85rem !important;
-    font-size: 1rem;
     line-height: 1.1;
     letter-spacing: 0;
   }
 
   .event-details {
     gap: 0.45rem !important;
-    font-size: 0.7rem;
     line-height: 1.25;
   }
 
@@ -213,22 +259,23 @@
     font-size: 0.85rem;
   }
 
-  .event-info-text {
-    font-weight: 400;
-  }
-
-  .event-schedule-label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.55rem;
+  .event-schedule-toggle {
     margin-top: 1.9rem;
-    color: var(--tenant-primary, #009d4f);
-    font-size: 0.625rem;
-    font-weight: 700;
   }
 
-  .event-schedule-label i {
+  .event-schedule-toggle i {
     font-size: 0.65rem;
   }
+
+  .event-schedules {
+    margin-top: 1rem;
+
+    td {
+      padding: 0.55rem 0.4rem;
+    }
+  }
+
+  .event-schedule-value {
+    gap: 0.4rem;
+  }
 }

src/app/shared/components/hero-banner/hero-banner.component.spec.ts

@@ -0,0 +1,50 @@
+import { TestBed } from '@angular/core/testing';
+import { HeroBannerComponent } from './hero-banner.component';
+
+describe('HeroBannerComponent', () => {
+  it('expands and collapses the event schedules', async () => {
+    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();
+
+    const fixture = TestBed.createComponent(HeroBannerComponent);
+    fixture.componentRef.setInput('eventConfig', {
+      title: 'Fiesta Nacional del Fútbol Infantil',
+      location: 'Sunchales, Santa Fe',
+      dates: [
+        {
+          id: 1,
+          date: '2026-10-09',
+          start_time: '10:00:00',
+          end_time: '20:30:00',
+        },
+        {
+          id: 2,
+          date: '2026-10-10',
+          start_time: '10:00:00',
+          end_time: '22:00:00',
+        },
+      ],
+    });
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const toggle = element.querySelector<HTMLButtonElement>('.event-schedule-toggle');
+
+    expect(toggle?.textContent).toContain('Ver horarios');
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
+    expect(element.querySelector('.event-schedules')).toBeNull();
+
+    toggle?.click();
+    fixture.detectChanges();
+
+    expect(toggle?.textContent).toContain('Ocultar horarios');
+    expect(toggle?.getAttribute('aria-expanded')).toBe('true');
+    expect(element.querySelectorAll('.event-schedules tbody tr')).toHaveLength(2);
+    expect(element.querySelector('.event-schedules')?.textContent).toContain('9 de Octubre 2026');
+    expect(element.querySelector('.event-schedules')?.textContent).toContain('10:00 - 20:30');
+
+    toggle?.click();
+    fixture.detectChanges();
+
+    expect(element.querySelector('.event-schedules')).toBeNull();
+  });
+});

src/app/shared/components/hero-banner/hero-banner.component.ts

@@ -16,6 +16,8 @@ export class HeroBannerComponent {
   @Input() heroConfig?: HeroConfig | null;
   @Input() eventConfig?: EventConfig | null;
 
+  protected schedulesExpanded = false;
+
   get formattedDates(): string {
     if (this.eventConfig?.dates_text) {
       return this.eventConfig.dates_text;
@@ -27,4 +29,28 @@ export class HeroBannerComponent {
 
     return this.eventConfig.dates.map(({ date }) => date).join(', ');
   }
+
+  protected toggleSchedules(): void {
+    this.schedulesExpanded = !this.schedulesExpanded;
+  }
+
+  protected formatScheduleDate(date: string): string {
+    const [year, month, day] = date.split('-').map(Number);
+
+    if (!year || !month || !day) {
+      return date;
+    }
+
+    const monthName = new Intl.DateTimeFormat('es-AR', {
+      month: 'long',
+      timeZone: 'UTC',
+    }).format(new Date(Date.UTC(year, month - 1, day)));
+    const capitalizedMonth = `${monthName.charAt(0).toUpperCase()}${monthName.slice(1)}`;
+
+    return `${day} de ${capitalizedMonth} ${year}`;
+  }
+
+  protected formatScheduleTime(time: string): string {
+    return time.match(/^\d{2}:\d{2}/)?.[0] ?? time;
+  }
 }

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html

@@ -21,18 +21,10 @@
         </div>
 
         <div class="product-vertical-with-cart-card__variant-selectors">
-          @for (selector of variantSelectors(); track selector.key) {
-            <select
-              class="form-select product-vertical-with-cart-card__variant-select"
-              [attr.aria-label]="selector.label"
-              [ngModel]="selectedValues()[selector.key]"
-              (ngModelChange)="onVariantValueChange(selector.key, $event)"
-            >
-              @for (option of selector.options; track option) {
-                <option [ngValue]="option">{{ option }}</option>
-              }
-            </select>
-          }
+          <app-variant-selector
+            [variants]="selectorVariants()"
+            [(selectedVariant)]="selectedVariant"
+          />
         </div>
       </div>
     }

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss

@@ -66,24 +66,22 @@
   }
 
   &__variant-selectors {
-    display: flex;
-    align-items: center;
     width: 100%;
-    gap: 8px;
   }
 
-  &__variant-select {
-    flex: 1 1 0;
-    min-width: 0;
-    height: 40px;
-    border-color: #d8d8d8;
-    color: #6f6f6f;
-    font-size: 12px;
+  &__variant-selectors app-variant-selector {
+    width: 100%;
+  }
 
-    &:focus {
-      border-color: var(--tenant-primary, #009933);
-      box-shadow: 0 0 0 0.2rem color-mix(in srgb, transparent 75%, var(--tenant-primary, #009933));
-    }
+  &__variant-selectors ::ng-deep .variant-selector {
+    flex-wrap: nowrap;
+    width: 100%;
+  }
+
+  &__variant-selectors ::ng-deep .variant-selector__select {
+    flex: 1 1 0;
+    width: 0;
+    min-width: 0;
   }
 
   &__price {

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts

@@ -131,7 +131,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     expect(summary?.querySelector('.product-vertical-with-cart-card__price')).not.toBeNull();
     expect(summary?.querySelector('app-quantity-selector')).not.toBeNull();
     expect(
-      selectors?.querySelectorAll('.product-vertical-with-cart-card__variant-select'),
+      selectors?.querySelectorAll('.variant-selector__select'),
     ).toHaveLength(1);
     expect(selectors?.querySelector('app-quantity-selector')).toBeNull();
   });
@@ -150,7 +150,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     expect(layout?.querySelector('.product-vertical-with-cart-card__summary')).not.toBeNull();
     expect(
       layout?.querySelectorAll(
-        '.product-vertical-with-cart-card__variant-selectors .product-vertical-with-cart-card__variant-select',
+        '.product-vertical-with-cart-card__variant-selectors .variant-selector__select',
       ),
     ).toHaveLength(2);
   });
@@ -166,7 +166,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     fixture.componentInstance.buy.subscribe(buySpy);
 
     const select = fixture.nativeElement.querySelector(
-      '.product-vertical-with-cart-card__variant-select',
+      '.variant-selector__select',
     ) as HTMLSelectElement;
     select.value = select.options[1].value;
     select.dispatchEvent(new Event('change'));
@@ -207,7 +207,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     ).toBe('$ 10.000');
 
     const select = element.querySelector(
-      '.product-vertical-with-cart-card__variant-select',
+      '.variant-selector__select',
     ) as HTMLSelectElement;
     select.value = select.options[1].value;
     select.dispatchEvent(new Event('change'));

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts

@@ -2,17 +2,17 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   input,
   model,
   output,
-  signal,
-  untracked,
 } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import {
+  VariantSelectorComponent,
+  VariantSelectorVariant,
+} from '../variant-selector/variant-selector.component';
 
 export interface VerticalCartVariant {
   id: number;
@@ -21,15 +21,9 @@ export interface VerticalCartVariant {
   values: Record<string, string>;
 }
 
-interface VariantSelector {
-  key: string;
-  label: string;
-  options: string[];
-}
-
 @Component({
   selector: 'app-product-vertical-with-cart-card',
-  imports: [ButtonComponent, FormsModule, QuantitySelectorComponent],
+  imports: [ButtonComponent, QuantitySelectorComponent, VariantSelectorComponent],
   templateUrl: './product-vertical-with-cart-card.component.html',
   styleUrl: './product-vertical-with-cart-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -46,8 +40,6 @@ export class ProductVerticalWithCartCardComponent {
   readonly buy = output<{ quantity: number; variant: number | null }>();
   readonly addToCart = output<{ quantity: number; variant: number | null }>();
 
-  protected readonly selectedValues = signal<Record<string, string>>({});
-
   protected readonly selectedVariantData = computed(() =>
     this.variants().find((variant) => variant.id === this.selectedVariant()),
   );
@@ -60,54 +52,10 @@ export class ProductVerticalWithCartCardComponent {
     return Number.isFinite(variantPrice) ? variantPrice : this.price();
   });
   protected readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
-  protected readonly variantSelectors = computed<VariantSelector[]>(() => {
-    const variants = this.variants();
-    const keys = Array.from(new Set(variants.flatMap((variant) => Object.keys(variant.values))));
-
-    return keys.map((key) => ({
-      key,
-      label: this.formatVariantLabel(key),
-      options: Array.from(
-        new Set(
-          variants
-            .map((variant) => variant.values[key])
-            .filter((value): value is string => Boolean(value)),
-        ),
-      ),
-    }));
-  });
-
-  protected readonly hasVariants = computed(() => this.variantSelectors().length > 0);
-
-  constructor() {
-    effect(() => {
-      const variants = this.variants();
-
-      untracked(() => {
-        if (variants.length === 0) {
-          this.selectedValues.set({});
-          this.selectedVariant.set(null);
-          return;
-        }
-
-        const selected =
-          variants.find((variant) => variant.id === this.selectedVariant()) ?? variants[0];
-        this.selectedValues.set({ ...selected.values });
-        this.selectedVariant.set(selected.id);
-      });
-    });
-  }
-
-  protected onVariantValueChange(key: string, value: string): void {
-    const values = { ...this.selectedValues(), [key]: value };
-    const selectors = this.variantSelectors();
-    const matchingVariant = this.variants().find((variant) =>
-      selectors.every((selector) => variant.values[selector.key] === values[selector.key]),
-    );
-
-    this.selectedValues.set(values);
-    this.selectedVariant.set(matchingVariant?.id ?? null);
-  }
+  protected readonly selectorVariants = computed<VariantSelectorVariant[]>(() =>
+    this.variants().map((variant) => ({ value: variant.id, values: variant.values })),
+  );
+  protected readonly hasVariants = computed(() => this.selectorVariants().length > 0);
 
   protected onAddToCart(): void {
     this.addToCart.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
@@ -117,11 +65,6 @@ export class ProductVerticalWithCartCardComponent {
     this.buy.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
   }
 
-  private formatVariantLabel(key: string): string {
-    const label = key.replace(/[_-]+/g, ' ');
-    return label.charAt(0).toUpperCase() + label.slice(1);
-  }
-
   private formatCurrency(value: number): string {
     const rounded = Math.round(value);
     const parts = rounded.toString().split('.');

src/styles.scss

@@ -1,13 +1,14 @@
-@use "./fonts";
+@use './fonts';
 
-@import "@fortawesome/fontawesome-free/css/all.min.css";
+@import '@fortawesome/fontawesome-free/css/all.min.css';
 
-@import "./theme";
+@import './theme';
 
-@import "../node_modules/bootstrap/scss/bootstrap";
+@import '../node_modules/bootstrap/scss/bootstrap';
 
-:root, app-root {
-  --bs-body-font-family: "Gotham", sans-serif;
+:root,
+app-root {
+  --bs-body-font-family: 'Gotham', sans-serif;
   --color-primary: var(--tenant-primary);
   --color-primary-rgb: var(--tenant-primary-rgb);
   --color-secondary: var(--tenant-secondary);
@@ -57,3 +58,18 @@ label {
     color: var(--color-danger, #dc3545);
   }
 }
+
+.table-striped {
+  --bs-table-bg: transparent;
+  --bs-table-color: #8a8a8a;
+  --bs-table-color-state: #8a8a8a;
+  --bs-table-color-type: #8a8a8a;
+  --bs-table-striped-bg: transparent;
+  --bs-table-striped-color: #8a8a8a;
+
+  color: #8a8a8a;
+
+  > tbody > tr:nth-of-type(odd) {
+    background-color: rgba(221, 221, 221, 0.25);
+  }
+}