feat(event-schedules): add border radius and clip-path to table rows for improved styling

- Adjust modal padding to account for scrollbar width.
- Update modal background opacity for better visibility.

style(product-list): refine layout and spacing
- Remove gap in product list rows for a cleaner look.

feat(product-list): improve variant handling
- Update variant mapping to include description and price.

refactor(product-row-card): restructure HTML for better layout
- Simplify structure by combining price and quantity controls.
- Enhance button placement for better UX.

style(product-row-card): improve card styling
- Adjust flex properties for better alignment and spacing.
- Update button styles for consistency.

feat(product-vertical-with-cart-card): enhance variant selection
- Implement variant selector for better user interaction.
- Update price and description display based on selected variant.

test(product-vertical-with-cart-card): add tests for variant selection
- Ensure correct variant description and price are displayed.

fix(environment): update API URL for testing environment
- Change backend URL to point to the QA server.

style(global): update global styles for better readability
- Adjust table styles for improved visibility and aesthetics.

angular.json

@@ -64,7 +64,13 @@
             "local": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
             },
             "homo": {
               "fileReplacements": [
@@ -79,6 +85,9 @@
         },
         "serve": {
           "builder": "@angular/build:dev-server",
+          "options": {
+            "port": 4300
+          },
           "configurations": {
             "production": {
               "buildTarget": "shopit-front:build:production"
@@ -93,7 +102,7 @@
               "buildTarget": "shopit-front:build:homo"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "local"
         },
         "test": {
           "builder": "@angular/build:unit-test"

src/app/app.scss

@@ -17,7 +17,7 @@
 .tenant-status__card {
   width: min(100%, 34rem);
   padding: 2rem;
-  border: 1px solid rgba(32, 32, 32, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 1.5rem;
   background-color: rgba(255, 255, 255, 0.92);
   box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.1);
@@ -55,7 +55,7 @@
 .tenant-status__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.08);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary);
   border-radius: 999px;
   animation: tenant-status-spin 0.8s linear infinite;

src/app/core/layout/store-layout/store-footer/store-footer.component.scss

@@ -46,7 +46,7 @@
   place-items: center;
   width: 2.75rem;
   height: 2.75rem;
-  border: 1px dashed rgba(255, 255, 255, 0.35);
+  border: 1px dashed var(--border-color);
   border-radius: 999px;
   font-size: 1.05rem;
   font-weight: 700;
@@ -133,8 +133,8 @@
     display: block;
     order: 2;
     grid-column: 1 / -1;
-    width: 100vw;
-    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    width: 100%;
+    border-top: 1px solid var(--border-color);
   }
 
   .store-layout__brand-column,

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -150,7 +150,7 @@
         <div class="store-layout__category-menu">
           <button
             type="button"
-            class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
+            class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-3 text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
             aria-label="Categorias"
             aria-controls="store-category-dropdown"
             [attr.aria-expanded]="isCategoryDropdownOpen()"

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -1,11 +1,10 @@
 .store-layout__header {
   color: #ffffff;
-  background-color: transparent;
-  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
+  background-color: var(--tenant-header-bg);
 }
 
 .store-layout__header-main {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .store-layout__brand-slot {
@@ -77,7 +76,7 @@
 
 .store-layout__search-input {
   color: #666666;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   background-color: rgba(255, 255, 255, 0.96);
 }
 
@@ -86,21 +85,21 @@
 }
 
 .store-layout__search-input:focus {
-  border-color: #cccccc;
+  border-color: var(--border-color);
   box-shadow: none;
   outline: none;
 }
 
 .store-layout__search-button {
   color: #a0a0a0;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   background-color: rgba(255, 255, 255, 0.96);
 }
 
 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
   color: #8a8a8a;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   background-color: #ffffff;
 }
 
@@ -172,7 +171,7 @@
   }
 
   .store-layout__mobile-separator {
-    border-color: #dddddd;
+    border-color: var(--border-color);
     opacity: 1;
     margin: 0 -1rem;
   }

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss

@@ -10,7 +10,7 @@
 .user-dropdown {
   display: grid;
   background: #ffffff;
-  border: 1px solid rgba(32, 32, 32, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
   padding: 0.75rem;

src/app/core/layout/store-layout/store-layout.component.scss

@@ -21,7 +21,7 @@
 
 .store-layout__cart-dropdown {
   position: absolute;
-  top: 76px;
+  top: 100px;
   right: calc((100% - 1320px) / 2 + 1.5rem);
   width: 100%;
   max-width: 400px;
@@ -29,7 +29,7 @@
   z-index: 1050;
   background-color: #ffffff;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--border-color);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   animation: store-layout-slide-down 0.2s ease-out;

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

@@ -72,13 +72,13 @@ describe('AuthService', () => {
     expect(service.token()).toBe('plain-text-token');
     expect(service.user()?.email).toBe('ada@example.com');
     expect(service.isAuthenticated()).toBe(true);
-    expect(cookieStore['shopit.auth.token']).toBe('plain-text-token');
+    expect(cookieStore['shopit.front.auth.token']).toBe('plain-text-token');
 
     httpController.verify();
   });
 
   it('hydrates token from cookies and loads the current user during bootstrap', async () => {
-    cookieStore['shopit.auth.token'] = 'persisted-token';
+    cookieStore['shopit.front.auth.token'] = 'persisted-token';
 
     TestBed.configureTestingModule({
       providers: [
@@ -152,7 +152,7 @@ describe('AuthService', () => {
   });
 
   it('clears an expired session when /me returns 401', async () => {
-    cookieStore['shopit.auth.token'] = 'expired-token';
+    cookieStore['shopit.front.auth.token'] = 'expired-token';
 
     TestBed.configureTestingModule({
       providers: [
@@ -176,7 +176,7 @@ describe('AuthService', () => {
     expect(service.user()).toBeNull();
     expect(service.token()).toBeNull();
     expect(service.isAuthenticated()).toBe(false);
-    expect(cookieStore['shopit.auth.token']).toBeUndefined();
+    expect(cookieStore['shopit.front.auth.token']).toBeUndefined();
 
     httpController.verify();
   });
@@ -384,7 +384,7 @@ describe('AuthService', () => {
 
     expect(service.token()).toBe('plain-text-token');
     expect(service.user()?.email).toBe('ada@example.com');
-    expect(cookieStore['shopit.auth.token']).toBe('plain-text-token');
+    expect(cookieStore['shopit.front.auth.token']).toBe('plain-text-token');
 
     httpController.verify();
   });

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

@@ -21,7 +21,7 @@ import {
 import { CookieService } from '../cookie/cookie.service';
 import { TenantService } from '../tenant.service';
 
-const AUTH_TOKEN_COOKIE_KEY = 'shopit.auth.token';
+const AUTH_TOKEN_COOKIE_KEY = 'shopit.front.auth.token';
 const AUTH_USER_SSR_STATE_KEY = makeStateKey<AuthUser>('shopit.auth.user');
 
 @Injectable({

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

@@ -77,7 +77,7 @@ h1 {
 
 .modal-showcase__result {
   padding: 0.875rem 1rem;
-  border: 1px dashed rgba(32, 32, 32, 0.14);
+  border: 1px dashed var(--border-color);
   border-radius: 0.875rem;
   background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98));
   color: #495057;
@@ -231,7 +231,7 @@ h1 {
       justify-content: center;
       height: 120px;
       border-radius: 8px;
-      border: 1px solid #dee2e6;
+      border: 1px solid var(--border-color);
       padding: 1rem;
       overflow: hidden;
       box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -281,7 +281,7 @@ h1 {
     display: flex;
     flex-direction: column;
     border-radius: 8px;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--border-color);
     overflow: hidden;
     background-color: #ffffff;
     transition:
@@ -296,7 +296,7 @@ h1 {
     &__preview {
       height: 80px;
       width: 100%;
-      border-bottom: 1px solid #dee2e6;
+      border-bottom: 1px solid var(--border-color);
       transition: opacity 0.2s ease;
 
       &:hover {
@@ -337,7 +337,7 @@ h1 {
     background-color: #eaeaea;
     padding: 1.5rem;
     border-radius: 8px;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--border-color);
   }
 
   &__row {

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss

@@ -54,7 +54,7 @@
   }
 
   &__text-option {
-    border: 1px solid #dcdcdc;
+    border: 1px solid var(--border-color);
     background: #ffffff;
     color: #666666;
     transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 :host(:last-child) {
@@ -24,7 +24,7 @@
   aspect-ratio: 4 / 3;
   border-radius: 5px 0 0 5px;
   background-color: #ffffff;
-  border: 1px solid #eaeaea;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 
   img {

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -23,7 +23,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem 0;
-  border-bottom: 1px solid #DDDDDD;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .skeleton-item:last-child {

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

@@ -27,7 +27,7 @@
 .tickets-list__generating-spinner {
   width: 24px;
   height: 24px;
-  border: 3px solid #dce8e0;
+  border: 3px solid var(--border-color);
   border-top-color: var(--tenant-primary, #009933);
   border-radius: 50%;
   animation: tickets-spinner 0.75s linear infinite;
@@ -39,7 +39,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 12px;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__header--inactive {
@@ -89,7 +89,7 @@
 }
 
 .tickets-list app-ticket {
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__empty {
@@ -104,7 +104,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 12px;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__skeleton-selection,
@@ -130,7 +130,7 @@
   align-items: center;
   gap: 16px;
   padding: 16px 0;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__skeleton-check,

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -64,7 +64,7 @@
 .checkout-page__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.08);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary);
   border-radius: 50%;
   animation: checkout-page-spin 0.8s linear infinite;

src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss

@@ -15,7 +15,7 @@
 
 .faq-page__empty {
   padding: 1rem 0;
-  border-bottom: 1px solid #dedede;
+  border-bottom: 1px solid var(--border-color);
   color: #888888;
   font-size: 0.8125rem;
 }

src/app/features/store/pages/login-page/login-page.component.scss

@@ -31,6 +31,6 @@
 .login-page__divider-dot {
   width: 16px;
   height: 16px;
-  border-color: #d9d9d9 !important;
+  border-color: var(--border-color) !important;
   background-color: #ffffff;
 }

src/app/features/store/pages/product-detail-page/product-detail-page.component.scss

@@ -14,7 +14,7 @@
   }
 
   &__divider {
-    border-top: 1px solid #e6e6e6;
+    border-top: 1px solid var(--border-color);
   }
 
   &__title {
@@ -25,7 +25,7 @@
   }
 
   &__title-price-divider {
-    border-top: 1px solid #e6e6e6;
+    border-top: 1px solid var(--border-color);
   }
 
   &__price-group {

src/app/shared/components/accordion/accordion.component.scss

@@ -4,7 +4,7 @@
 }
 
 .accordion {
-  --bs-accordion-border-color: #dedede;
+  --bs-accordion-border-color: var(--border-color);
   --bs-accordion-border-radius: 0;
   --bs-accordion-inner-border-radius: 0;
   --bs-accordion-bg: transparent;

src/app/shared/components/cart-item/cart-item.component.scss

@@ -43,7 +43,7 @@
   aspect-ratio: 1 / 1;
   border-radius: 5px 0 0 5px;
   background-color: #ffffff;
-  border: 1px solid #eaeaea;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 
   img {

src/app/shared/components/global-loading/global-loading.component.scss

@@ -12,7 +12,7 @@
 .global-loading__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.12);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary, #6376f3);
   border-radius: 50%;
   animation: global-loading-spin 0.75s linear infinite;

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

@@ -124,7 +124,6 @@
   td {
     width: 50%;
     padding: 0.65rem 1rem;
-    border-radius: 0.5rem;
     vertical-align: middle;
   }
 }

src/app/shared/components/input/input.component.scss

@@ -23,7 +23,7 @@
   min-height: 40px;
   padding: 0.625rem 1rem;
   border-radius: 5px;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   color: #666666;
   font-size: 15px;
   font-weight: 400;

src/app/shared/components/product-row-card/product-row-card.component.scss

@@ -10,7 +10,7 @@
   gap: 2rem;
   width: 100%;
   padding: 2rem 0;
-  border-bottom: 1px solid #e3e3e3;
+  border-bottom: 1px solid var(--border-color);
   background: transparent;
 
   &__title {
@@ -41,7 +41,7 @@
 
   &__actions {
     display: grid;
-    grid-template-columns: minmax(0, auto) 160px;
+    grid-template-columns: minmax(0, auto) minmax(0, 230px);
     align-items: stretch;
     gap: 0.75rem 2.5rem;
   }
@@ -54,6 +54,11 @@
     gap: 0.5rem;
   }
 
+  &__buttons {
+    width: 100%;
+    max-width: 230px;
+  }
+
   &__controls {
     display: flex;
     align-items: center;
@@ -62,8 +67,6 @@
   }
 
   &__btn-wrapper {
-    min-width: 160px;
-
     app-button {
       display: block;
       width: 100%;
@@ -83,26 +86,8 @@
       min-width: 0;
     }
 
-    &__actions,
-    &__summary,
-    &__buttons {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
     &__actions {
       flex: 0 0 auto;
-      gap: 0.75rem;
-    }
-
-    &__summary,
-    &__buttons {
-      gap: 0.5rem;
-    }
-
-    &__price {
-      align-self: center;
     }
 
     &__selectors {
@@ -119,9 +104,6 @@
       }
     }
 
-    &__btn-wrapper {
-      min-width: 140px;
-    }
   }
 }
 
@@ -131,7 +113,7 @@
     flex-direction: column;
 
     &__actions {
-      grid-template-columns: minmax(0, 1fr) 160px;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
     }
   }
 }

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

@@ -19,7 +19,7 @@
   padding: 30px 20px;
   overflow: hidden;
   background-color: #ffffff;
-  border: 1px solid #dedede;
+  border: 1px solid var(--border-color);
   border-radius: 7px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -3,7 +3,7 @@
 }
 
 .quantity-selector {
-  border: 1px solid #d8d8d8;
+  border: 1px solid var(--border-color);
   width: 78px;
   height: 40px;
   min-height: 40px;
@@ -42,7 +42,7 @@
     width: 62px;
     height: 28px;
     min-height: 28px;
-    border-color: #cccccc;
+    border-color: var(--border-color);
     background-color: #ffffff;
 
     .quantity-selector__button {

src/app/shared/components/variant-selector/variant-selector.component.scss

@@ -19,7 +19,7 @@
   max-width: none;
   height: 38px;
   color: #666666;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   font-size: 14px;
   cursor: pointer;
 

src/styles.scss

@@ -8,6 +8,9 @@
 
 :root,
 app-root {
+  --border-color: #dddddd;
+  --bs-border-color: var(--border-color);
+  --bs-border-color-translucent: var(--border-color);
   --bs-body-font-family: 'Gotham', sans-serif;
   --color-primary: var(--tenant-primary);
   --color-primary-rgb: var(--tenant-primary-rgb);
@@ -69,6 +72,11 @@ label {
 
   color: #8a8a8a;
 
+  > tbody > tr {
+    border-radius: 0.5rem;
+    clip-path: inset(0 round 0.5rem);
+  }
+
   > tbody > tr:nth-of-type(odd) {
     background-color: rgba(221, 221, 221, 0.25);
   }