dev #13510

изменил карточку товара и общую цветовую схему

angular/src/app/app.constants.ts

@@ -27,7 +27,7 @@ export const PageListWithBonus: Page[] = [
         name: 'Ваша карта лояльности',
         description: '',
         resName: 'bonus-program',
-        onSideBar: true,
+        onSideBar: false,
     },
     {
         code: PageCode.Orders,

angular/src/app/app.module.ts

@@ -56,6 +56,10 @@ import { ChangeQuantityComponent } from './components/change-quantity/change-qua
 import { MenuComponent } from './components/menu/menu.component';
 import { SidebarModule } from 'primeng/sidebar';
 import {RippleModule} from 'primeng/ripple';
+import {MatTabsModule} from '@angular/material/tabs';
+import { ModifierComponent } from './components/modifier/modifier.component';
+import { OptionComponent } from './components/option/option.component';
+import { ChangeQuantityOptionDirective } from './directives/change-quantity-option.directive';
 
 const routes: Routes = [
   { path: '', redirectTo: 'products', pathMatch: 'full' },
@@ -88,7 +92,10 @@ const routes: Routes = [
     UserDataOrderComponent,
     InfoComponent,
     ChangeQuantityComponent,
-    MenuComponent
+    MenuComponent,
+    ModifierComponent,
+    OptionComponent,
+    ChangeQuantityOptionDirective
   ],
   imports: [
     BrowserModule,
@@ -127,7 +134,8 @@ const routes: Routes = [
     PaginatorModule,
     InputTextModule,
     SidebarModule,
-    RippleModule
+    RippleModule,
+    MatTabsModule
   ],
   providers: [DialogService, MessageService, MessagingService ],
   bootstrap: [AppComponent]

angular/src/app/components/change-quantity/change-quantity.component.scss

@@ -1,12 +1,14 @@
 :host {
     .change-quantity {
         border: 1px solid #dfdee2;
-        border-radius: 4px;
+        border-radius: 1.125rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 28px;
+        margin: 0;
-    margin: 4px 16px 4px 0;
+        height: 100%;
+        min-width: 100px;
+        padding: 0 8px;
 
         button {
             background: #ffffff;

angular/src/app/components/exit/exit.component.scss

@@ -2,7 +2,7 @@ button {
     margin-right: 1rem;
     padding: 4px 21px;
     margin-top: 8px;
-    background-color: #09467f;
+    background-color: var(--orange-main);
     color: #fff;
     border-radius: 3px;
     border: none;

angular/src/app/components/footer-buttons/footer-buttons.component.scss

@@ -15,7 +15,7 @@
       align-items: center;
       width: 60px;
       height: 60px;
-      background: #09467f;
+      background: var(--orange-main);
       border: solid #fff 1px !important;
       color: #fff;
       border-radius: 100%;

angular/src/app/components/modifier/modifier.component.html

@@ -0,0 +1,12 @@
+<div class="modifier-container">
+  <ng-content select="[counter]"></ng-content>
+  <h3>{{ modifier.name }}</h3>
+  <div class="modifier-container__options">
+    <app-option
+      *ngFor="let option of modifier.options"
+      [option]="option"
+      [modifier]="modifier"
+      [product]="product"
+    ></app-option>
+  </div>
+</div>

angular/src/app/components/modifier/modifier.component.scss

@@ -0,0 +1,15 @@
+:host {
+    .modifier-container {
+        margin-bottom: 32px;
+        &__options {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        h3 {
+            font-weight: 500;
+        }
+    }
+}

angular/src/app/components/modifier/modifier.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModifierComponent } from './modifier.component';
+
+describe('ModifierComponent', () => {
+  let component: ModifierComponent;
+  let fixture: ComponentFixture<ModifierComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModifierComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModifierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/modifier/modifier.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CartModifier, Modifier } from 'src/app/interface/data';
+import { CartProduct } from 'src/app/models/cart-product';
+
+@Component({
+  selector: 'app-modifier[modifier][product]',
+  templateUrl: './modifier.component.html',
+  styleUrls: ['./modifier.component.scss']
+})
+export class ModifierComponent implements OnInit {
+  @Input() product!: CartProduct
+  @Input() modifier!: CartModifier
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/components/navbar/navbar.component.scss

@@ -3,7 +3,7 @@
     padding: 0 54px;
     width: 100%;
     height: 54px;
-    // background: #09467f;
+    // background: var(--orange-main);
     color: #fff;
     display: flex;
     align-items: center;

angular/src/app/components/option/option.component.html

@@ -0,0 +1,17 @@
+<div
+  appChangeQuantityOption
+  [option]="option"
+  [modifier]="modifier"
+  [product]="product"
+  [ngClass]="{
+    'option-container': true,
+    'selected': option.quantity
+  }"
+  [attr.quantity]="option.quantity"
+>
+  <img
+    src="{{ option.image?.length ? option.image : './assets/no-image.png' }}"
+    alt="{{ option.name }}"
+  />
+  <h4>{{ option.name }}</h4>
+</div>

angular/src/app/components/option/option.component.scss

@@ -0,0 +1,67 @@
+:host {
+  width: 100%;
+  max-width: 170px;
+  .option-container {
+    align-items: center;
+    border: 1px solid #d8d8d8;
+    border-radius: 1.125rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0;
+    padding-bottom: 12px;
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    text-align: center;
+    cursor: pointer;
+
+    &.selected {
+      border-color: var(--orange-main);
+    }
+
+    &[quantity] {
+      &::before {
+        content: attr(quantity);
+        display: block;
+        width: 35px;
+        height: 35px;
+        background-color: var(--orange-main);
+        position: absolute;
+        border-radius: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        right: 10px;
+        top: 6px;
+        opacity: 0.8;
+      }
+    }
+
+    &[quantity="0"] {
+      &::before {
+        display: none;
+      }
+    }
+
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
+
+    h4 {
+      font-size: 14px;
+      margin: 0 10px;
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  :host {
+    max-width: calc(50% - 6px);
+  }
+}

angular/src/app/components/option/option.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OptionComponent } from './option.component';
+
+describe('OptionComponent', () => {
+  let component: OptionComponent;
+  let fixture: ComponentFixture<OptionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OptionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/option/option.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CartModifier, Modifier } from 'src/app/interface/data';
+import { CartProduct } from 'src/app/models/cart-product';
+
+@Component({
+  selector: 'app-option[option][modifier][product]',
+  templateUrl: './option.component.html',
+  styleUrls: ['./option.component.scss']
+})
+export class OptionComponent implements OnInit {
+  @Input() option!: Modifier
+  @Input() modifier!: CartModifier;
+  @Input() product!: CartProduct;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular/src/app/components/product-modal/product-modal.component.html

@@ -1,10 +1,20 @@
 <div class="product-modal">
-    <img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
+  <div class="product-modal__information-container">
-    <img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
+    <img
+      src="{{
+        product.image?.length ? product.image : './assets/no-image.png'
+      }}"
+      alt="{{ product.name }}"
+    />
+    <p class="product-modal__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quas libero consequatur dolorum itaque dolor deserunt aut facilis debitis!</p>
+  </div>
 
-    <div class="product-modal__modifiers-container">
+  <div
-        <ng-container *ngIf="product.modifiers_group.length">
+    *ngIf="product.modifiers_group.length"
-            <div *ngFor="let modifierGroup of cartProduct.modifiers" [attr.isShow]="false"
+    class="product-modal__modifiers-container"
+  >
+    <!-- <ng-container *ngIf="product.modifiers_group.length">
+      <div *ngFor="let modifierGroup of cartProduct.modifiers" [attr.isShow]="false"
                 [ngClass]="{'product-modal__modifier': true, 'no-valid': isValidate && modifierGroup.allQuantity < modifierGroup.restrictions.minQuantity}" #modifierContainer>
                 <a (click)="setOptionsView($event, modifierContainer)">
                     {{modifierGroup.name}}
@@ -22,13 +32,24 @@
                     </app-checkbox-group>
                 </div>
             </div>
-        </ng-container>
+        </ng-container> -->
-    </div>
+    <app-modifier
+      *ngFor="let modifier of cartProduct.modifiers; let index = index"
+      [modifier]="modifier"
+      [product]="cartProduct"
+    >
+      <span counter>{{ index + 1 }} из {{ cartProduct.modifiers.length }}</span>
+    </app-modifier>
+  </div>
 
-    <div class="product-modal__footer">
+  <div class="product-modal__footer">
-        <span class="product-modal__footer-price">{{product.price}}₽</span>
+    <!-- <app-change-quantity (onChangeValue)="changeProductAmount()"></app-change-quantity> -->
-        <button class="product-modal__add-to-cart" (click)="addToCart($event)">
+    <span class="product-modal__footer-price">{{ cartProduct.finalPrice }}₽</span>
-            Добавить
+    <div class="product-modal__footer-buttons">
-        </button>
+      <app-change-quantity [disabledButton]="cartProduct.amount === 1 ? 'minus' : 'none'" [value]="cartProduct.amount" (onChangeValue)="changeProductAmount($event)"></app-change-quantity>
+      <button class="product-modal__add-to-cart" (click)="addToCart($event)">
+        Добавить
+      </button>
     </div>
-</div>
+  </div>
+</div>

angular/src/app/components/product-modal/product-modal.component.scss

@@ -1,100 +1,140 @@
 :host {
-    .product-modal {
+  .product-modal {
-        position: relative;
+    position: relative;
-        padding-bottom: 60px;
+    padding-bottom: 39px;
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
 
-        &>img {
+    &__information-container {
-            width: 100%;
+      max-width: calc(50% - 16px);
-            border-radius: 1.125rem;
+      img {
-            margin-top: 16px;
+        width: 100%;
-        }
+        border-radius: 1.125rem;
-
+        height: fit-content;
-        &__footer {
+        object-fit: cover;
-            width: 100%;
+      }
-            height: auto;
-            display: flex;
-            position: absolute;
-            bottom: 0;
-            padding-top: 8px;
-            border-top: solid #d1d1d1 1px;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        &__footer-price {
-            font-size: 18px;
-            font-weight: 600;
-        }
-
-        &__add-to-cart {
-            padding: 8px 26px;
-            background: #C43F00;
-            border: none;
-            border-radius: 1.125rem;
-            color: #fff;
-        }
-
-        &__modifier {
-            border: 1px solid rgba(128, 128, 128, 0.23);
-            margin: 0.5em 0;
-            padding-bottom: 6px;
-            border-radius: 1.125rem;
-
-            a {
-                width: 100%;
-                display: block;
-                padding: 0.75em;
-                border-radius: 0.15em;
-                transition: background .3s ease;
-            }
-
-            .options-container {
-                transition: opacity .5s ease;
-                padding-left: 16px;
-                display: none;
-                opacity: 0;
-
-                &.isShow {
-                    display: block;
-                    opacity: 1;
-                }
-            }
-
-            &.no-valid {
-                border-color: #cc0000;
-            }
-        }
-
-        &__modifier-icon {
-            float: right;
-
-            &::before,
-            &::after {
-                display: inline-block;
-                font-size: 14px;
-                transition: transform .5s ease;
-            }
-
-            &::before {
-                content: "\\";
-                transform: rotate(346deg);
-            }
-
-            &::after {
-                content: "/";
-                transform: rotate(14deg);
-            }
-
-            &.isShow {
-                &::before {
-                    transform: rotate(76deg);
-                }
-
-                &::after {
-                    transform: rotate(104deg);
-                }
-            }
-        }
     }
-}
+
+    &__description {
+      margin-top: 8px;
+      font-size: 14px;
+    }
+
+    // & > img {
+    //   width: 50%;
+    //   border-radius: 1.125rem;
+    //   height: fit-content;
+    //   object-fit: cover;
+    // }
+
+    &__footer {
+      width: 100%;
+      height: auto;
+      display: flex;
+      position: absolute;
+      bottom: -14px;
+      padding-top: 16px;
+      border-top: solid #d1d1d1 1px;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__footer-price {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    &__footer-buttons {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+    }
+
+    &__add-to-cart {
+      padding: 8px 26px;
+      background: var(--orange-main);
+      border: none;
+      border-radius: 1.125rem;
+      color: #fff;
+    }
+
+    &__modifier {
+      border: 1px solid rgba(128, 128, 128, 0.23);
+      margin: 0.5em 0;
+      padding-bottom: 6px;
+      border-radius: 1.125rem;
+
+      a {
+        width: 100%;
+        display: block;
+        padding: 0.75em;
+        border-radius: 0.15em;
+        transition: background 0.3s ease;
+      }
+
+      .options-container {
+        transition: opacity 0.5s ease;
+        padding-left: 16px;
+        display: none;
+        opacity: 0;
+
+        &.isShow {
+          display: block;
+          opacity: 1;
+        }
+      }
+
+      &.no-valid {
+        border-color: #cc0000;
+      }
+    }
+
+    &__modifiers-container {
+      height: 400px;
+      overflow-y: auto;
+    }
+
+    &__modifier-icon {
+      float: right;
+
+      &::before,
+      &::after {
+        display: inline-block;
+        font-size: 14px;
+        transition: transform 0.5s ease;
+      }
+
+      &::before {
+        content: "\\";
+        transform: rotate(346deg);
+      }
+
+      &::after {
+        content: "/";
+        transform: rotate(14deg);
+      }
+
+      &.isShow {
+        &::before {
+          transform: rotate(76deg);
+        }
+
+        &::after {
+          transform: rotate(104deg);
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1070px) {
+    .product-modal {
+      flex-direction: column;
+
+      &__information-container {
+        max-width: 100%;
+      }
+    }
+  }
+}

angular/src/app/components/product-modal/product-modal.component.ts

@@ -32,7 +32,7 @@ export class ProductModalComponent implements OnInit {
     this.product = this.config.data.product
     this.modifiersGroups = this.config.data.modifiersGroups
     this.modifiers = this.config.data.modifiers
-    this.cartProduct = new CartProduct(this.product.id, this.product.name, this.modifiersFilter(), this.modifiers);
+    this.cartProduct = new CartProduct(this.product.id, this.product.name, this.modifiersFilter(), this.modifiers, this.product.price);
   }
 
   modifiersFilter(): ModifiersGroup[] {
@@ -43,25 +43,6 @@ export class ProductModalComponent implements OnInit {
     return this.modifiers.filter((modifier) => modifier.groupId === modifierGroup.id)
   }
 
-  changeQuantity(event: any) {
-    const value: ChangeValue = event.value
-    const modifierGroup: CartModifier = event.modifierGroup
-    const option: Modifier = event.option
-
-    const modifGroup = this.cartProduct.modifiers.find((modifGroup) => modifGroup.idLocal === modifierGroup.idLocal)
-    const modifier = modifGroup?.options.find((modifier) => modifier.idLocal == option.idLocal)
-
-    if (!modifier) return
-    if (!modifier.quantity && modifier.quantity !== 0) modifier.quantity = modifier.restrictions.byDefault
-    if (value.type === 'minus') {
-      modifier.quantity -= value.variableQuantity
-    } else {
-      modifier.quantity += value.variableQuantity
-    }
-  }
-
-
-
   selectedOptions(modifier: ModifiersGroup): Modifier[] {
     const cartModifier = this.cartProduct.modifiers.find(cartModifier => cartModifier.id === modifier.id)
     if (modifier.restrictions.maxQuantity === 1 && modifier.restrictions.minQuantity === 1) {
@@ -103,6 +84,15 @@ export class ProductModalComponent implements OnInit {
     element.setAttribute('isShow', 'true')
   }
 
+  changeProductAmount({type, variableQuantity}: ChangeValue) {
+    if (type === 'plus') {
+      this.cartProduct.increment()
+    } else {
+      this.cartProduct.decrement()
+    }
+    
+  }
+
   addToCart(event: Event) {
     if (event) {
       event.preventDefault()

angular/src/app/components/user-data-order/user-data-order.component.scss

@@ -68,7 +68,7 @@
       flex-direction: column;
       align-items: center;
       gap: 8px;
-      border: solid #09467f 1px;
+      border: solid var(--orange-main) 1px;
       border-radius: 16px;
       overflow: hidden;
       padding-bottom: 16px;
@@ -137,7 +137,7 @@
     }
 
     .elementor-button--checkout {
-      background-color: #09467f;
+      background-color: var(--orange-main);
       color: #fff;
       border-radius: 6px;
       display: flex;

angular/src/app/directives/change-quantity-option.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ChangeQuantityOptionDirective } from './change-quantity-option.directive';
+
+describe('ChangeQuantityOptionDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ChangeQuantityOptionDirective();
+    expect(directive).toBeTruthy();
+  });
+});

angular/src/app/directives/change-quantity-option.directive.ts

@@ -0,0 +1,65 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { CartModifier, Modifier } from '../interface/data';
+import { CartProduct } from '../models/cart-product';
+
+@Directive({
+  selector: '[appChangeQuantityOption]',
+})
+export class ChangeQuantityOptionDirective implements OnInit {
+  @Input() option!: Modifier;
+  @Input() modifier!: CartModifier;
+  @Input() product!: CartProduct;
+
+  constructor(private el: ElementRef) {}
+
+  ngOnInit(): void {
+    this.option.quantity = this.option.restrictions.byDefault;
+
+    if (!this.modifier.lastChangeOption && this.option.restrictions.byDefault) {
+      this.modifier.lastChangeOption = this.option.idLocal;
+    }
+  }
+
+  @HostListener('click') onOptionClick() {
+    this.changeQuantity({ option: this.option, modifier: this.modifier });
+  }
+
+  changeQuantity({
+    option,
+    modifier,
+  }: {
+    option: Modifier;
+    modifier: CartModifier;
+  }): void {
+    if (!option.quantity && option.quantity !== 0) {
+      return;
+    }
+    const quantity = option.quantity;
+    const allQuantity = modifier.allQuantity;
+    const maxOptionQ = option.restrictions.maxQuantity;
+    const minOptionQ = option.restrictions.minQuantity;
+    const maxModifierQ = modifier.restrictions.maxQuantity;
+    const minModifierQ = modifier.restrictions.minQuantity;
+    const plusCondition =
+      (quantity < maxOptionQ && allQuantity < maxModifierQ) ||
+      (maxOptionQ === 0 && (allQuantity < maxModifierQ || maxModifierQ === 0));
+
+    if (!plusCondition && quantity > minOptionQ && allQuantity > minModifierQ) {
+      this.product.decrementOption(modifier.idLocal, option.idLocal);
+    }
+    if (allQuantity === maxModifierQ && modifier.lastChangeOption) {
+      this.product.decrementOption(modifier.idLocal, modifier.lastChangeOption);
+      this.changeQuantity({ option, modifier });
+    }
+    if (plusCondition) {
+      this.product.incrementOption(modifier.idLocal, option.idLocal);
+      modifier.lastChangeOption = option.idLocal;
+    }
+  }
+}

angular/src/app/interface/data.ts

@@ -157,6 +157,7 @@ export interface Modifier {
     groupId: string,
     price?: number,
     quantity?: number,
+    image?: string; 
     restrictions: {
         minQuantity: number,
         maxQuantity: number,
@@ -166,6 +167,7 @@ export interface Modifier {
 }
 
 export interface CartModifier {
+    lastChangeOption?: string;
     id: string;
     idLocal: string;
     name: string;

angular/src/app/models/cart-product.ts

@@ -1,14 +1,15 @@
-import { CartModifier, Modifier, ModifiersGroup, Option } from "../interface/data";
+import { CartModifier, Modifier, ModifiersGroup } from "../interface/data";
 import { v4 as uuidv4 } from 'uuid';
 
 export class CartProduct {
 
 
-  constructor(id: string, name: string, modifiers: ModifiersGroup[] = [], options: Modifier[], amount: number = 1) {
+  constructor(id: string, name: string, modifiers: ModifiersGroup[] = [], options: Modifier[], price: number, amount: number = 1) {
     this.id = id;
     this.guid = uuidv4();
     this.amount = amount;
     this.name = name;
+    this.price = price * amount
     this.modifiers = modifiers.map(modifier => ({
       name: modifier.name,
       id: modifier.id,
@@ -33,6 +34,7 @@ export class CartProduct {
   guid: string;
   amount: number;
   name: string;
+  price: number;
   modifiers: CartModifier[];
 
   increment(): void {
@@ -45,6 +47,29 @@ export class CartProduct {
     }
   }
 
+  incrementOption(modifierId: string, optionId: string): void {
+    const modifier = this.modifiers.find((modifier) => modifier.idLocal === modifierId)
+    const option = modifier?.options.find((option) => option.idLocal === optionId)
+    if (!option?.quantity && option?.quantity !== 0) return
+    option.quantity++
+  }
+
+  decrementOption(modifierId: string, optionId: string): void {
+    const modifier = this.modifiers.find((modifier) => modifier.idLocal === modifierId)
+    const option = modifier?.options.find((option) => option.idLocal === optionId)
+    if (!option?.quantity && option?.quantity !== 0) return
+    option.quantity--
+  }
+
+  get finalPrice(): number{
+    const modifiersPrice = this.modifiers.reduce<number>((previousValue, currentValue) => {
+      return previousValue + currentValue.options.reduce<number>((previousOptionValue, currentOptionValue) => {
+        return previousOptionValue + Number(currentOptionValue.price ? currentOptionValue.price * (currentOptionValue.quantity ?? 0) : 0);
+      }, 0);
+    }, 0);
+    return (Number(this.price) + modifiersPrice) * this.amount;
+  }
+
   // addOption(modifier: ModifiersGroup, option: Modifier): void {
   //   const productModifier = this.modifiers.find(value => value.id === modifier.id);
   //   if (productModifier) {

angular/src/app/pages/account/account.component.html

@@ -6,7 +6,11 @@
 >
   <div *ngIf="!showAuthoriztion; else authEl" class="account-page">
     <div *ngIf="showAuthoriztion" class="top-left-attribute"></div>
-    <div [ngSwitch]="currentPage.code" class="">
+    <app-bonus-program
+      [currentPage]="currentPage"
+      (deauthorization)="changePage(pageList[0])"
+    ></app-bonus-program>
+    <!-- <div [ngSwitch]="currentPage.code" class="">
       <ng-container *ngSwitchCase="PageCode.Orders">
         <app-orders
           [currentPage]="currentPage"
@@ -14,10 +18,6 @@
         ></app-orders>
       </ng-container>
       <ng-container *ngSwitchCase="PageCode.BonusProgram">
-        <app-bonus-program
-          [currentPage]="currentPage"
-          (deauthorization)="changePage(pageList[0])"
-        ></app-bonus-program>
       </ng-container>
       <ng-container *ngSwitchCase="PageCode.UserData">
         <app-user-data></app-user-data>
@@ -25,8 +25,8 @@
       <ng-container *ngSwitchCase="PageCode.RefSystem">
         <app-ref-system></app-ref-system>
       </ng-container>
-    </div>
+    </div> -->
-    <nav *ngIf="!showAuthoriztion" class="woocommerce-MyAccount-navigation">
+    <!-- <nav *ngIf="!showAuthoriztion" class="woocommerce-MyAccount-navigation">
       <ul>
         <ng-container *ngFor="let page of pageList; let index = index">
           <li
@@ -59,7 +59,28 @@
           </div>
         </li>
       </ul>
-    </nav>
+    </nav> -->
+
+    <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center">
+      <ng-container *ngFor="let page of pageList">
+        <mat-tab *ngIf="page.onSideBar" label="{{ page.name }}">
+          <div [ngSwitch]="page.resName" class="">
+            <ng-container *ngSwitchCase="'orders'">
+              <app-orders
+                [currentPage]="currentPage"
+                (deauthorization)="changePage(pageList[0])"
+              ></app-orders>
+            </ng-container>
+            <ng-container *ngSwitchCase="'user-data'">
+              <app-user-data></app-user-data>
+            </ng-container>
+            <ng-container *ngSwitchCase="'ref-system'">
+              <app-ref-system></app-ref-system>
+            </ng-container>
+          </div>
+        </mat-tab>
+      </ng-container>
+    </mat-tab-group>
   </div>
 
   <p-toast

angular/src/app/pages/account/account.component.scss

@@ -1,10 +1,15 @@
+:host ::ng-deep .mat-tab-body {
+  padding: 16px 0;
+}
+
 :host {
   .woocommerce {
     min-height: calc(100vh - 39px);
     padding: 20px 18px 65px;
     position: relative;
 
-    &.auth-page {}
+    &.auth-page {
+    }
 
     .main-menu-container {
       position: fixed;
@@ -57,11 +62,11 @@
               position: absolute;
               right: calc(50% - 24px);
               top: 3px;
-              background: #D7120B;
+              background: #d7120b;
               border-radius: 50px;
               min-width: 1.2rem;
               line-height: 1.2rem;
-              font-size: .8rem;
+              font-size: 0.8rem;
               text-align: center;
             }
           }
@@ -70,6 +75,12 @@
     }
 
     .account-page {
+      max-width: 1208px;
+      display: flex;
+      margin: 0 auto;
+      gap: 32px;
+      width: 98%;
+      flex-direction: row;
       nav {
         margin-bottom: 24px;
         margin-top: 26px;
@@ -97,7 +108,7 @@
             border-radius: 15px;
 
             &.is-active {
-              border: solid #09467f 1px;
+              border: solid var(--orange-main) 1px;
               // display: none;
             }
 
@@ -113,7 +124,7 @@
               .menu-item-info {
                 margin-left: 16px;
 
-                &>a {
+                & > a {
                   font-style: normal;
                   font-weight: 700;
                   font-size: 18px;
@@ -124,7 +135,7 @@
                   text-align-last: left;
                 }
 
-                &>p {
+                & > p {
                   font-style: normal;
                   font-weight: 400;
                   font-size: 12px;
@@ -140,24 +151,28 @@
           }
         }
       }
-    }
 
+      .mat-tab-group {
+        width: calc(100% - 432px);
+      }
+    }
+    
     .top-left-attribute {
       width: 10px;
       height: 5px;
-      background: #09467f;
+      background: var(--orange-main);
       left: 0;
       position: absolute;
       top: 69px;
     }
-
+    
     .version {
       opacity: 0.5;
       position: absolute;
       bottom: 60px;
     }
-
   }
+  
 
   @media screen and (min-width: 550px) {
     .woocommerce {
@@ -170,18 +185,30 @@
         border: solid 1px #dfdfdf;
         border-radius: 12px;
         box-shadow: 0 0 6px 2px rgb(223 223 223);
-        transition: top .4s cubic-bezier(0.57, -0.43, 0.41, 1.3);
+        transition: top 0.4s cubic-bezier(0.57, -0.43, 0.41, 1.3);
         top: -60px;
-
+        
-        &[isShow=true] {
+        &[isShow="true"] {
           top: 8px;
         }
       }
-
+      
       .version {
         bottom: 20px;
       }
     }
   }
 
-}
+  @media screen and (max-width: 895px) {
+    .woocommerce {
+      .account-page {
+        flex-direction: column;
+        width: 100%;
+        
+        .mat-tab-group {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

angular/src/app/pages/account/bonus-program/bonus-program.component.scss

@@ -22,11 +22,12 @@
     }
 
     .card-container {
-      background: #09467f;
+      background: var(--orange-main);
       box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
       border-radius: 15px;
       margin-top: 11px;
       overflow: hidden;
+      min-width: 400px;
       max-width: 400px;
       width: 100%;
 
@@ -65,7 +66,7 @@
       }
 
       &__content {
-        background-color: #09467f;
+        background-color: var(--orange-main);
         color: #fff;
 
         .info {
@@ -195,9 +196,17 @@
       margin-top: 12px;
       height: 36px;
       border-radius: 8px;
-      background: #09467f;
+      background: var(--orange-main);
-      border-color: #09467f;
+      border-color: var(--orange-main);
       color: #fff;
     }
   }
+
+  @media screen and (max-width: 895px) {
+    .woocommerce-MyAccount-content {
+      .card-container {
+        min-width: auto;
+      }
+    }
+  }
 }

angular/src/app/pages/account/orders/orders.component.html

@@ -1,5 +1,5 @@
 <div class="orders">
-  <h2>{{ currentPage.name }}</h2>
+  <!-- <h2>{{ currentPage.name }}</h2> -->
   <table
     class="woocommerce-orders-table woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table"
   >

angular/src/app/pages/account/orders/orders.component.scss

@@ -1,7 +1,7 @@
 .show-more-orders {
   text-align: center;
   cursor: pointer;
-  color: #09467f;
+  color: var(--orange-main);
   margin-top: 16px;
 }
 .woocommerce-MyAccount-content {
@@ -9,7 +9,7 @@
   margin-left: calc(50vw - 200px);
 }
 .woocommerce-orders-table {
-  border: 2px solid #dee2e6;
+  // border: 2px solid #dee2e6;
   border-bottom: 0;
   border-radius: 0.25rem;
   border-collapse: separate;

angular/src/app/pages/account/ref-system/ref-system.component.scss

@@ -8,7 +8,7 @@
             margin: 0 auto;
             .share {
                 width: 50px;
-                background-color: #09467f;
+                background-color: var(--orange-main);
                 border-radius: 8px;
                 display: flex;
                 justify-content: center;
@@ -19,7 +19,7 @@
                 }
             }
             .copy {
-                background-color: #09467f;
+                background-color: var(--orange-main);
                 color: #fff;
                 border-radius: 8px;
                 width: calc(100% - 66px);

angular/src/app/pages/cart/cart.component.scss

@@ -155,7 +155,7 @@
         padding: 12px;
         display: block;
         width: fit-content;
-        background: #09467f;
+        background: var(--orange-main);
         border-radius: 4px;
         text-decoration: none;
         color: #fff;

angular/src/app/pages/products/products.component.html

@@ -1,111 +1,165 @@
 <p-toast position="top-center"></p-toast>
 <div *ngIf="!loading; else loadingEl" class="products-container">
-    <div class="products-container__filters-container">
+  <div class="products-container__filters-container">
-        <!-- <label>Категория</label>
+    <!-- <label>Категория</label>
         <p-treeSelect *ngIf="groups" [(ngModel)]="selectedGroup" [options]="groups"
             (onNodeSelect)="changeGroup()" (onNodeUnselect)="onGroupUnselect($event)" placeholder="Группа"></p-treeSelect> -->
-        <div class="products-container__categories-container">
+    <div class="products-container__categories-container">
-            <div *ngFor="let group of groups; let first = first" (click)="changeGroup(group)" [ngClass]="{
+      <div
-                    'group-container': true,
+        *ngFor="let group of groups; let first = first"
-                    'active': group.id === selectedGroup.id,
+        (click)="changeGroup(group)"
-                    'non-visible': first
+        [ngClass]="{
-                }">
+          'group-container': true,
-                <span>
+          active: group.id === selectedGroup.id,
-                    {{group.label}}
+          'non-visible': first
-                </span>
+        }"
-            </div>
+      >
-        </div>
+        <span>
-        <p-treeSelect *ngIf="terminalList" [(ngModel)]="selectedTerminal" [options]="terminalList"
+          {{ group.label }}
-            (onNodeSelect)="changeTerminal()" (onNodeUnselect)="onTerminalUnselect($event)"
+        </span>
-            placeholder="Пункт самовывоза" [disabled]="!!cartService.cartCount"></p-treeSelect>
+      </div>
-        <!-- <label>Пункт выдачи</label> -->
     </div>
-    <!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
+    <p-treeSelect
+      *ngIf="terminalList"
+      [(ngModel)]="selectedTerminal"
+      [options]="terminalList"
+      (onNodeSelect)="changeTerminal()"
+      (onNodeUnselect)="onTerminalUnselect($event)"
+      placeholder="Пункт самовывоза"
+      [disabled]="!!cartService.cartCount"
+    ></p-treeSelect>
+    <!-- <label>Пункт выдачи</label> -->
+  </div>
+  <!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
         [totalRecords]="filterByGroup().length" (onPageChange)="onPageChange($event)" [pageLinkSize]="3"
         [showPageLinks]="true"></p-paginator> -->
-    <div *ngIf="selectedGroup && selectedGroup.label !== 'Все'" class="products-container__category-name-container">
+  <div
-        <h1>{{selectedGroup.label}}</h1>
+    *ngIf="selectedGroup && selectedGroup.label !== 'Все'"
-        <div class="bread-crumbs">
+    class="products-container__category-name-container"
-            <span class="all" (click)="changeGroup(groups[0])">Все </span>
+  >
-            >
+    <h1>{{ selectedGroup.label }}</h1>
-            <span class="selected-category"> {{selectedGroup.label}}</span>
+    <div class="bread-crumbs">
-        </div>
+      <span class="all" (click)="changeGroup(groups[0])">Все </span>
+      >
+      <span class="selected-category"> {{ selectedGroup.label }}</span>
     </div>
-    <ng-container *ngIf="selectedGroup && selectedGroup.label === 'Все'">
+  </div>
-        <div *ngFor="let group of groups.slice(1)" [ngClass]="{
+  <ng-container *ngIf="selectedGroup && selectedGroup.label === 'Все'">
-                'products-container__category-container': true
+    <div
-            }">
+      *ngFor="let group of groups.slice(1)"
-            <div class="header">
+      [ngClass]="{
-                <h2>{{group.label}}</h2>
+        'products-container__category-container': true
-                <button (click)="changeGroup(group)">
+      }"
-                    Перейти в категорию
+    >
-                </button>
+      <div class="header">
-            </div>
+        <h2>{{ group.label }}</h2>
-            <div class="products-container__items">
+        <button (click)="changeGroup(group)">Перейти в категорию</button>
-                <div *ngFor="let product of filterByGroup(group)" (click)="addToCart($event, product)"
+      </div>
-                    class="products-container__item" #currentCategoryList>
+      <div class="products-container__items">
-                    <img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
+        <div
-                    <img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
+          *ngFor="let product of filterByGroup(group)"
-                    <div class="products-container__name-container">
+          (click)="addToCart($event, product)"
-                        <p>{{product.name}}</p>
+          class="products-container__item"
-                    </div>
+          #currentCategoryList
-                    <p class="products-container__product-composition">Lorem ipsum dolor sit amet consectetur
+        >
-                        adipisicing elit.
+          <img
-                        Odio consequuntur voluptates est.</p>
+            src="{{
-                    <div class="products-container__item-footer">
+              product.image?.length ? product.image : './assets/no-image.png'
-                        <span>{{product.price}}₽</span>
+            }}"
-                        <button class="products-container__add-to-cart">В корзину</button>
+            alt="{{ product.name }}"
-                    </div>
+          />
-                </div>
+          <div class="products-container__name-container">
-            </div>
+            <p>{{ product.name }}</p>
+          </div>
+          <p class="products-container__product-composition">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
+            consequuntur voluptates est.
+          </p>
+          <div class="products-container__item-footer">
+            <span>{{ product.price }}₽</span>
+            <button class="products-container__add-to-cart">В корзину</button>
+          </div>
         </div>
-    </ng-container>
+      </div>
-    <ng-container *ngIf="selectedGroup && selectedGroup.label !== 'Все'">
+    </div>
-        <div class="products-container__items">
+  </ng-container>
-            <div *ngFor="let product of filterByGroup()" (click)="addToCart($event, product)"
+  <ng-container *ngIf="selectedGroup && selectedGroup.label !== 'Все'">
-                class="products-container__item" #currentCategoryList>
+    <div class="products-container__items">
-                <img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
+      <div
-                <img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
+        *ngFor="let product of filterByGroup()"
-                <div class="products-container__name-container">
+        (click)="addToCart($event, product)"
-                    <p>{{product.name}}</p>
+        class="products-container__item"
-                </div>
+        #currentCategoryList
-                <p class="products-container__product-composition">Lorem ipsum dolor sit amet consectetur adipisicing
+      >
-                    elit.
+        <img
-                    Odio consequuntur voluptates est.</p>
+          *ngIf="!product.image"
-                <div class="products-container__item-footer">
+          src="./assets/no-image.png"
-                    <span>{{product.price}}₽</span>
+          alt="{{ product.name }}"
-                    <button class="products-container__add-to-cart">В корзину</button>
+        />
-                </div>
+        <img
-            </div>
+          *ngIf="product.image"
+          src="{{ product.image }}"
+          alt="{{ product.name }}"
+        />
+        <div class="products-container__name-container">
+          <p>{{ product.name }}</p>
         </div>
-    </ng-container>
+        <p class="products-container__product-composition">
-    <!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
+          consequuntur voluptates est.
+        </p>
+        <div class="products-container__item-footer">
+          <span>{{ product.price }}₽</span>
+          <button class="products-container__add-to-cart">В корзину</button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  <!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
         [totalRecords]="filterByGroup().length" (onPageChange)="onPageChange($event)" [pageLinkSize]="3"
         [showPageLinks]="true"></p-paginator> -->
-    <p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000">
+  <p-toast
-        <ng-template let-message pTemplate="message">
+    position="bottom-center"
-            <div class="flex flex-column" style="flex: 1">
+    key="c"
-                <div class="text-center">
+    (onClose)="onReject()"
-                    <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+    [baseZIndex]="5000"
-                    <h4>{{message.summary}}</h4>
+  >
-                    <p style="font-weight: 600;">{{message.detail}}</p>
+    <ng-template let-message pTemplate="message">
-                </div>
+      <div class="flex flex-column" style="flex: 1">
-                <div class="grid p-fluid">
+        <div class="text-center">
-                    <div class="col-6">
+          <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <button type="button" pButton (click)="onConfirm()" label="Да"
+          <h4>{{ message.summary }}</h4>
-                            class="p-button-success"></button>
+          <p style="font-weight: 600">{{ message.detail }}</p>
-                    </div>
+        </div>
-                    <div class="col-6">
+        <div class="grid p-fluid">
-                        <button type="button" pButton (click)="onReject()" label="Нет"
+          <div class="col-6">
-                            class="p-button-secondary"></button>
+            <button
-                    </div>
+              type="button"
-                </div>
+              pButton
-            </div>
+              (click)="onConfirm()"
-        </ng-template>
+              label="Да"
-    </p-toast>
+              class="p-button-success"
+            ></button>
+          </div>
+          <div class="col-6">
+            <button
+              type="button"
+              pButton
+              (click)="onReject()"
+              label="Нет"
+              class="p-button-secondary"
+            ></button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </p-toast>
 </div>
 <ng-template #loadingEl>
-    <div class="angular-spinner-container" style="width: fit-content; height: 100%; margin: 16px auto;">
+  <div
-        <p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
+    class="angular-spinner-container"
-    </div>
+    style="width: fit-content; height: 100%; margin: 16px auto"
-</ng-template>
+  >
+    <p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
+  </div>
+</ng-template>

angular/src/app/pages/products/products.component.scss

@@ -1,258 +1,269 @@
 :host {
-    .products-container {
+  .products-container {
-        width: 100%;
+    width: 100%;
-        max-width: 1208px;
+    max-width: 1208px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto 16px;
+
+    &__category-name-container {
+      margin-bottom: 16px;
+
+      h1 {
+        font-size: 30px;
+        font-weight: 500;
+      }
+
+      .bread-crumbs {
+        font-weight: 600;
+        color: #9d9d9d;
+        font-size: 16px;
+
+        .all {
+          margin-right: 4px;
+          cursor: pointer;
+        }
+
+        .selected-category {
+          color: var(--orange-main);
+          margin-left: 4px;
+        }
+      }
+    }
+
+    &__filters-container {
+      width: 100%;
+      margin: 12px auto 24px auto;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+
+      label {
+        margin: 8px;
+        font-size: 14px;
+      }
+    }
+
+    &__categories-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      font-size: 14px;
+      align-items: center;
+      overflow-x: auto;
+      width: 100%;
+      margin-right: 16px;
+      gap: 8px;
+
+      &::-webkit-scrollbar {
+        height: 0;
+    }
+    
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
+        background-color: #f9f9fd;
+        border-radius: 10px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: linear-gradient(180deg, #00c6fb, #005bea);
+      }
+
+      .group-container {
+        font-weight: 600;
+        padding: 8px 24px;
+        transition: all 0.5s;
+        border-radius: 1.125rem;
+        text-align: center;
+        background: #ededed;
+        border: none;
+        min-width: fit-content;
+        cursor: pointer;
+
+        &.non-visible {
+          display: none;
+        }
+
+        &.active {
+          color: #fff;
+          background: var(--orange-main);
+          border: none;
+          // box-shadow: 0 0 10px 5px rgb(221 221 221);
+        }
+
+        &:hover {
+          color: #fff;
+          background: var(--orange-main);
+          border: none;
+          // box-shadow: 0 0 10px 5px rgb(221 221 221);
+        }
+      }
+    }
+
+    &__items {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin: 0 auto;
+    }
+
+    &__category-container {
+      display: flex;
+      flex-direction: column;
+
+      .header {
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
-        margin: 0 auto 16px;
+        align-items: center;
+        margin: 48px 0 16px;
 
-        &__category-name-container {
+        h2 {
-            margin-bottom: 16px;
+          margin: 0;
-
+          font-size: 30px;
-            h1 {
+          font-weight: 500;
-                font-size: 30px;
+          max-width: 150px;
-                font-weight: 500;
-            }
-
-            .bread-crumbs {
-                font-weight: 600;
-                color: #9d9d9d;
-                font-size: 16px;
-
-                .all {
-                    margin-right: 4px;
-                    cursor: pointer;
-                }
-
-                .selected-category {
-                    color: #c43f00;
-                    margin-left: 4px;
-                }
-            }
         }
 
-        &__filters-container {
+        button {
-            width: 100%;
+          padding: 8px 26px;
-            margin: 12px auto 24px auto;
+          background: var(--orange-main);
-            display: flex;
+          border: none;
-            flex-wrap: nowrap;
+          border-radius: 1.125rem;
-            justify-content: space-between;
+          color: #fff;
-            flex-direction: row;
+          transition: all 0.3s;
-            align-items: center;
 
-            label {
+          &:hover {
-                margin: 8px;
+            box-shadow: 0 0 10px 5px rgb(211 211 211);
-                font-size: 14px;
+          }
-            }
-        }
-
-        &__categories-container {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            font-size: 14px;
-            align-items: center;
-            overflow-x: auto;
-            width: 100%;
-            margin-right: 16px;
-            gap: 8px;
-
-            &::-webkit-scrollbar {
-                width: 0;
-            }
-
-            .group-container {
-                font-weight: 600;
-                padding: 8px 24px;
-                transition: all 0.5s;
-                border-radius: 1.125rem;
-                text-align: center;
-                background: #ededed;
-                border: none;
-                cursor: pointer;
-
-                &.non-visible {
-                    display: none;
-                }
-
-                &.active {
-                    color: #fff;
-                    background: #09467f;
-                    border: none;
-                    // box-shadow: 0 0 10px 5px rgb(221 221 221);
-                }
-
-                &:hover {
-                    color: #fff;
-                    background: #09467f;
-                    border: none;
-                    // box-shadow: 0 0 10px 5px rgb(221 221 221);
-                }
-            }
-        }
-
-        &__items {
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 16px;
-            margin: 0 auto;
-
-        }
-
-        &__category-container {
-            display: flex;
-            flex-direction: column;
-
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin: 48px 0 16px;
-
-                h2 {
-                    margin: 0;
-                    font-size: 30px;
-                    font-weight: 500;
-                    max-width: 150px;
-                }
-
-                button {
-                    padding: 8px 26px;
-                    background: #1D3F5F;
-                    border: none;
-                    border-radius: 1.125rem;
-                    color: #fff;
-                    transition: all .3s;
-
-                    &:hover {
-                        box-shadow: 0 0 10px 5px rgb(211 211 211);
-                    }
-                }
-            }
-        }
-
-        &__item {
-            height: auto;
-            min-height: 200px;
-            width: 290px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            position: relative;
-            padding-bottom: 38Px;
-            transition: all .3s;
-            cursor: pointer;
-
-            img {
-                width: 100%;
-                margin: 0 auto;
-                height: 190px;
-                object-fit: cover;
-                border-radius: 1.125rem;
-                transition: all .3s;
-            }
-
-            &:hover {
-                scale: 1.01;
-                border: none;
-
-                img {
-                    box-shadow: 0 0 10px 5px rgb(221 221 221);
-                    border: none;
-                }
-            }
-        }
-
-        &__name-container {
-            width: 100%;
-            display: flex;
-            align-items: flex-start;
-            margin-top: 8px;
-
-            p {
-                font-size: 18px;
-                font-weight: 600;
-                width: 100%;
-                margin-bottom: 6px;
-            }
-        }
-
-        &__add-to-cart {
-            padding: 8px 26px;
-            background: #C43F00;
-            border: none;
-            border-radius: 1.125rem;
-            color: #fff;
-        }
-
-        &__item-footer {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-            align-items: center;
-            position: absolute;
-            bottom: 0;
-
-            &>span {
-                font-size: 18px;
-                font-weight: 600;
-            }
-        }
-
-        &__product-composition {
-            font-size: 12px;
-            font-weight: 400;
-            line-height: 1.375;
         }
+      }
     }
 
-    // @media screen and (max-width: 1549px) {
+    &__item {
-    //     .products-container {
+      height: auto;
-    //         &__items {
+      min-height: 200px;
-    //             max-width: 1208px;
+      width: 290px;
-    //         }
+      display: flex;
-    //         &__filters-container {
+      flex-direction: column;
-    //             max-width: 1208px;
+      align-items: center;
-    //         }
+      position: relative;
-    //     }
+      padding-bottom: 38px;
-    // }
+      transition: all 0.3s;
+      cursor: pointer;
 
-    @media screen and (max-width: 1243px) {
+      img {
-        .products-container {
+        width: 100%;
-            max-width: 902px;
+        margin: 0 auto;
+        height: 190px;
+        object-fit: cover;
+        border-radius: 1.125rem;
+        transition: all 0.3s;
+      }
+
+      &:hover {
+        scale: 1.01;
+        border: none;
+
+        img {
+          box-shadow: 0 0 10px 5px rgb(221 221 221);
+          border: none;
         }
+      }
     }
 
-    @media screen and (max-width: 937px) {
+    &__name-container {
-        .products-container {
+      width: 100%;
-            max-width: 596px;
+      display: flex;
+      align-items: flex-start;
+      margin-top: 8px;
 
-            &__filters-container {
+      p {
-                flex-direction: column-reverse;
+        font-size: 18px;
-                gap: 8px;
+        font-weight: 600;
-            }
+        width: 100%;
-        }
+        margin-bottom: 6px;
+      }
     }
 
-    @media screen and (max-width: 631px) {
+    &__add-to-cart {
-        .products-container {
+      padding: 8px 26px;
-            max-width: 400px;
+      background: var(--orange-main);
-
+      border: none;
-            &__item {
+      border-radius: 1.125rem;
-                width: 100%;
+      color: #fff;
-            }
-        }
     }
 
-    // @media screen and (max-width: 631px) {
+    &__item-footer {
-    //     .products-container {
+      display: flex;
-    //         // max-width: none;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+      position: absolute;
+      bottom: 0;
 
-    //         &__item {
+      & > span {
-    //             width: 100%;
+        font-size: 18px;
-    //         }
+        font-weight: 600;
-    //     }
+      }
-    // }
+    }
-}
+
+    &__product-composition {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.375;
+    }
+  }
+
+  // @media screen and (max-width: 1549px) {
+  //     .products-container {
+  //         &__items {
+  //             max-width: 1208px;
+  //         }
+  //         &__filters-container {
+  //             max-width: 1208px;
+  //         }
+  //     }
+  // }
+
+  @media screen and (max-width: 1243px) {
+    .products-container {
+      max-width: 902px;
+    }
+  }
+
+  @media screen and (max-width: 937px) {
+    .products-container {
+      max-width: 596px;
+
+      &__filters-container {
+        flex-direction: column-reverse;
+        gap: 8px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 631px) {
+    .products-container {
+      max-width: 400px;
+
+      &__item {
+        width: 100%;
+      }
+    }
+  }
+
+  // @media screen and (max-width: 631px) {
+  //     .products-container {
+  //         // max-width: none;
+
+  //         &__item {
+  //             width: 100%;
+  //         }
+  //     }
+  // }
+}

angular/src/app/pages/products/products.component.ts

@@ -130,20 +130,24 @@ export class ProductsComponent implements OnInit {
     if (event) {
       event.preventDefault()
     }
+    const productModalWidth = product.modifiers_group.length ? '94vw' : '50vw'
+    const productModalMaxWidth = product.modifiers_group.length ? '1400px' : '500px'
     const ref = this.dialogService.open(ProductModalComponent, {
       header: product.name,
-      width: 'auto',
+      width: 'fit-content',
       style: {
-        'max-width': '90vw',
+        'max-width': productModalMaxWidth,
+        'min-width': '300px',
         'max-height': '90vh',
-        'border-radius': '1.125rem'
+        'border-radius': '1.125rem',
+        width: productModalWidth
       },
       contentStyle: {
         'max-height': '90vh',
         height: 'auto',
-        'max-width': '600px',
         overflow: 'auto',
       },
+      styleClass: 'product-modal-view',
       data: {
         product: product,
         modifiersGroups: this.modifiersGroups,

angular/src/styles.scss

@@ -16,12 +16,14 @@ blockquote,q{quotes:none}
 blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
 table{border-collapse:collapse;border-spacing:0}
 
+:root {
+    --orange-main: #C43F00;
+}
+
 * {
     font-family: 'Raleway', sans-serif;
 }
 
-$base_color: red;
-
 .p-inputtext {
     width: 100%;
     border: 1px solid #B8DEFF;
@@ -71,11 +73,11 @@ button {
 
 .p-toast-message-custom {
     background-color: #fff;
-    border: solid #09467F;
+    border: solid var(--orange-main);
     border-width: 0 0 0 6px;
     color: #000;
     .p-toast-icon-close {
-        color: #09467F;
+        color: var(--orange-main);
     }
 }
 
@@ -197,6 +199,31 @@ p-toast[key="c"] .p-toast {
     }
 }
 
+@media screen and (max-width: 1070px) {
+    .product-modal-view {
+        width: 50vw !important;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .product-modal-view {
+        width: 70vw !important;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .product-modal-view {
+        width: 80vw !important;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .product-modal-view {
+        width: 94vw !important;
+    }
+}
+
+
 .p-calendar {
     width: 100%;