dev #12401

изменил верстку под новый дизайн

src/app/app.constants.ts

@@ -22,16 +22,25 @@ export const PageListWithBonus: Page[] = [
         resName: 'auth',
         onSideBar: false,
     },
+    {
+        code: PageCode.BonusProgram,
+        name: 'Ваша карта лояльности',
+        description: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.',
+        resName: 'bonus-program',
+        onSideBar: true,
+    },
     {
         code: PageCode.Orders,
-        name: 'Заказы',
+        name: 'Ваши чеки',
+        description: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.',
         resName: 'orders',
         onSideBar: true,
     },
     {
-        code: PageCode.BonusProgram,
-        name: 'Бонусная карта',
-        resName: 'bonus-program',
+        code: PageCode.RefSystem,
+        name: 'Пригласить друга',
+        description: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.',
+        resName: 'ref-system',
         onSideBar: true,
     },
 ];

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

@@ -10,7 +10,7 @@
         &__button {
             width: 100%;
             height: 34px;
-            background: #197664;
+            background: #09467f;
             color: #fff;
             border-radius: 5px;
             font-weight: 600;

src/app/components/navbar/navbar.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: fit-content;"
+    <!-- <svg version="1.0" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: fit-content;"
     width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
     preserveAspectRatio="xMidYMid meet">
 
@@ -18,6 +18,6 @@
     <path d="M960 1680 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
     </g>
     </svg>
-    <h1 class="title">Card Project</h1>
-
+    <h1 class="title">Card Project</h1> -->
+    <img src="../../../assets/logo.svg" alt="Логотип">
 </div>

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

@@ -1,18 +1,14 @@
 .container {
-    display: flex;
     box-sizing: border-box;
-    padding: 12px 16px;
+    padding: 7px 0 0 5px;
     width: 100%;
-    flex-direction: row;
-    align-items: center;
-    white-space: nowrap;
-    height: 64px;
-    background: #008376;
+    height: 39px;
+    background: #09467F;
     color: #fff;
 }
 
 .title {
     font-weight: 400;
-    font-size: 20px;
+    font-size: 18px;
     margin-left: 12px;
 }

src/app/interface/data.ts

@@ -3,13 +3,15 @@
 export enum PageCode {
     Auth,
     Orders,
-    BonusProgram
+    BonusProgram,
+    RefSystem
 }
   
 export interface Page {
     code: PageCode;
     component?: any;
     name: string;
+    description?: string;
     getMethod?: string;
     resName?: string;
     onSideBar: boolean

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

@@ -1,34 +1,57 @@
 <div class="woocommerce">
-    <nav *ngIf="currentPage.code !== PageCode.Auth" class="woocommerce-MyAccount-navigation">
-      <ul>
-        <ng-container *ngFor="let page of pageList; let index = index;">
-            <li
-                *ngIf="page.onSideBar"
-                class="woocommerce-MyAccount-navigation-link"
-                [ngClass]="{
-                    'is-active': page === currentPage,
-                    'first': index === 1
-                }"
-                (click)="changePage($event, page)"
-            >
-            <a href="#">{{page.name}}</a>
-          </li>
-        </ng-container>
-        <li class="woocommerce-MyAccount-navigation-link">
-          <a href="#" (click)="logout($event)">Выход</a>
-        </li>
-      </ul>
-    </nav>
-    <div [ngSwitch]="currentPage.code" class="">
-      <ng-container *ngSwitchCase="PageCode.Auth">
-        <app-auth [handleHttpError]="handleHttpErrorFunc" (phoneConfirmed)="phoneConfirmed()"></app-auth>
-      </ng-container>
-      <ng-container *ngSwitchCase="PageCode.Orders">
-        <app-orders></app-orders>
-      </ng-container>
-      <ng-container *ngSwitchCase="PageCode.BonusProgram">
-        <app-bonus-program></app-bonus-program>
-      </ng-container>
-    </div>
+  <div *ngIf="currentPage.code !== PageCode.Auth" class="top-left-attribute"></div>
+  <div [ngSwitch]="currentPage.code" class="">
+    <ng-container *ngSwitchCase="PageCode.Auth">
+      <app-auth
+        [handleHttpError]="handleHttpErrorFunc"
+        (phoneConfirmed)="phoneConfirmed()"
+      ></app-auth>
+    </ng-container>
+    <ng-container *ngSwitchCase="PageCode.Orders">
+      <app-orders></app-orders>
+    </ng-container>
+    <ng-container *ngSwitchCase="PageCode.BonusProgram">
+      <app-bonus-program></app-bonus-program>
+    </ng-container>
   </div>
-  
+  <nav
+    *ngIf="currentPage.code !== PageCode.Auth"
+    class="woocommerce-MyAccount-navigation"
+  >
+    <ul>
+      <ng-container *ngFor="let page of pageList; let index = index">
+        <li
+          *ngIf="page.onSideBar"
+          class="woocommerce-MyAccount-navigation-link"
+          [ngClass]="{
+            'is-active': page === currentPage,
+            first: index === 1
+          }"
+          (click)="changePage($event, page)"
+        >
+          <div class="container">
+            <img
+              src="{{ '../../../assets/menu-icons/' + page.resName + '.png' }}"
+              alt="Иконка меню"
+            />
+            <div class="menu-item-info">
+              <a href="#">{{ page.name }}</a>
+              <p>{{ page.description }}</p>
+            </div>
+          </div>
+        </li>
+      </ng-container>
+      <li class="woocommerce-MyAccount-navigation-link">
+        <div class="container">
+          <img
+            src="../../../assets/menu-icons/exit.png"
+            alt="Иконка меню"
+          />
+          <div class="menu-item-info">
+            <a href="#" (click)="logout($event)">Выход</a>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </nav>
+</div>

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

@@ -1,36 +1,74 @@
 :host {
-    .woocommerce {
-        min-height: calc(100vh - 64px);
-        padding: 24px 12px;
-        nav {
-            margin-bottom: 24px;
+  .woocommerce {
+    min-height: calc(100vh - 39px);
+    padding: 20px 18px;
+    nav {
+      margin-bottom: 24px;
+      display: flex;
+      justify-content: center;
+      ul {
+        max-width: 400px;
+        width: 100%;
+        border-radius: 6px;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        li {
+          padding: 12px;
+          width: 100%;
+          text-align: center;
+          cursor: pointer;
+          height: 81px;
+          margin-bottom: 10px;
+          background: #ffffff;
+          box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
+          color: #000;
+          border-radius: 15px;
+          &.is-active {
+            // background-color: #009688;
+            display: none;
+          }
+          &.first {
+            // border-radius: 7px 0 0 7px;
+          }
+          .container {
             display: flex;
-            justify-content: center;
-            ul {
-                max-width: 400px;
-                width: 100%;
-                background: #161616;
-                border-radius: 6px;
-                display: flex;  
-                justify-content: space-between;
-                li {
-                    padding: 12px;
-                    width: 100%;
-                    white-space: nowrap;
-                    text-align: center;
-                    cursor: pointer;
-                    &.is-active {
-                        background-color: #009688;
-                    }
-                    &.first {
-                        border-radius: 7px 0 0 7px;
-                    }
-                    a {
-                        text-decoration: none;
-                        color: #fff;
-                    }
-                }
+            align-items: center;
+            height: 100%;
+            .menu-item-info {
+              margin-left: 16px;
+              & > a {
+                font-style: normal;
+                font-weight: 700;
+                font-size: 18px;
+                line-height: 22px;
+                text-decoration: none;
+                color: #000;
+                display: block;
+                text-align-last: left;
+              }
+              & > p {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 15px;
+                text-align: left;
+              }
             }
+          }
         }
+        li:nth-child(odd) {
+            background-color: #EBEBEB;
+        }
+      }
     }
-}
+    .top-left-attribute {
+      width: 10px;
+      height: 5px;
+      background: #09467f;
+      left: 0;
+      position: absolute;
+      top: 69px;
+    }
+  }
+}

src/app/pages/account/account.component.ts

@@ -32,12 +32,12 @@ export class AccountComponent implements OnInit {
   readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
 
   ngOnInit(): void {
-    this.currentPage = this.getToken() ? this.pageList[2] : this.pageList[0];
+    this.currentPage = this.getToken() ? this.pageList[1] : this.pageList[0];
     document.body.classList.add('woocommerce-account', 'woocommerce-page', 'woocommerce-orders');
   }
 
   phoneConfirmed(): void{
-      this.currentPage = this.pageList[2];
+      this.currentPage = this.pageList[1];
   }
 
   changePage(event: MouseEvent, page: Page): void{

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

@@ -1,16 +1,14 @@
 <div class="woocommerce-notices-wrapper"></div>
-<h2>Вход</h2>
 <ng-container *ngIf="!isCodeConfirm; else confirmPhoneField">
   <form
     class="woocommerce-form woocommerce-form-login login"
     (submit)="getCode($event)"
   >
+    <h2>Вход</h2>
     <p
       class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
     >
-      <label for="phone"
-        >Номер телефона&nbsp;<span class="required">*</span></label
-      >
+      <label for="phone">Введите Ваш номер телефона</label>
       <p-inputMask
         mask="+7 (999) 999-99-99"
         characterPattern="[0-9]"
@@ -18,7 +16,7 @@
         name="phone"
         inputId="phone"
         autocomplete="phone"
-        placeholder="+7 (___) ___-__-__"
+        placeholder="+7 (000) 000-00-00"
         [unmask]="true"
         [(ngModel)]="phone"
       ></p-inputMask>
@@ -40,24 +38,23 @@
         ></p-progressSpinner>
       </button>
     </p>
+    <div class="decoration-pattern"></div>
   </form>
 </ng-container>
 <ng-template #confirmPhoneField>
   <form
     class="woocommerce-form woocommerce-form-login login"
     action="false"
+    style="height: 334px;"
     (submit)="confirmCode($event)"
   >
+  <h2>Вход</h2>
     <p
       class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
     >
       <label for="code">
         Введите 4 последних цифры позвонившего вам номера телефона. На звонок
-        отвечать не нужно.<br />
-        Например: +7 (XXX) XXX-<span style="color: #d7120b">XX</span>-<span
-          style="color: #d7120b"
-          >XX</span
-        >
+        отвечать не нужно.
       </label>
       <input
         pInputText
@@ -66,11 +63,11 @@
         name="code"
         id="code"
         autocomplete="code"
-        placeholder="****"
+        placeholder="00-00"
         [(ngModel)]="code"
       />
     </p>
-    <p class="form-row">
+    <p class="form-row" style="margin-bottom: 6px;">
       <button
         type="submit"
         class="woocommerce-button button woocommerce-form-login__submit"
@@ -90,5 +87,6 @@
     <p style="color: red; margin: 0" *ngIf="errorConfirmCode">
       Пароль введен неверно
     </p>
+    <div class="decoration-pattern"></div>
   </form>
 </ng-template>

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

@@ -1,52 +1,95 @@
-:host{
-    .woocommerce-form-login__submit{
-      width: 150px;
-    }
+:host {
+  .woocommerce-form-login__submit {
+    width: 150px;
+  }
 
-    h2 {
-        color: #fff;
-        text-align: center;
-        font-size: 24px;
-        margin-bottom: 16px;
+  h2 {
+    color: #fff;
+    width: 100%;
+    height: 49px;
+    text-align: left;
+    padding-top: 13px;
+    padding-left: 32px;
+    background: #0d457e;
+    position: relative;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
+    &::before {
+      content: "";
+      width: 19px;
+      height: 4px;
+      background: #fff;
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 24px;
     }
+  }
 
-    .woocommerce-form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  .woocommerce-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
+    border-radius: 15px;
+    height: 262px;
+    overflow: auto;
+    position: relative;
+  }
 
-    .form-row {
-        width: 80%;
-        margin-bottom: 16px;
-        max-width: 400px;
-        .button {
-            width: 100%;
-            height: 37px;
-            background: #197664;
-            color: #fff;
-            border-radius: 5px;
-            font-weight: 600;
-            letter-spacing: 2px;
-            border: none;
-        }
-        label {
-            display:inline-block;
-            margin-bottom: 8px;
-            color: #fff;
-        }
-        .input-text {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-            font-size: 1rem;
-            color: #495057;
-            background: #ffffff;
-            padding: 0.5rem 0.75rem;
-            border: 1px solid #ced4da;
-            transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
-            -webkit-appearance: none;
-            appearance: none;
-            border-radius: 4px;
-            width: 100%;
-        }
+  .form-row {
+    width: 80%;
+    margin-bottom: 16px;
+    max-width: 400px;
+    .button {
+      width: 100%;
+      font-weight: 600;
+      letter-spacing: 2px;
+      border: none;
+      height: 45px;
+      background: #b8deff;
+      border-radius: 15px;
+      color: #000;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
     }
-}
+    label {
+      display: inline-block;
+      margin-bottom: 8px;
+      margin-top: 15px;
+      color: #000;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 22px;
+    }
+    .input-text {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol";
+      font-size: 1rem;
+      color: #495057;
+      background: #ffffff;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid #ced4da;
+      transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+      -webkit-appearance: none;
+      appearance: none;
+      border-radius: 4px;
+      width: 100%;
+    }
+  }
+  .decoration-pattern {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+    height: 34px;
+    background: url("../../../../assets/card-decorative-pattern.png") repeat-x;
+  }
+}

src/app/pages/account/bonus-program/bonus-program.component.html

@@ -1,6 +1,34 @@
 <div class="woocommerce-MyAccount-content">
-    <span class="explanation">*Нажмите на карту, чтобы перевернуть её</span>
-    <div [ngClass]="{
+    <h2>{{currentPage.name}}</h2>
+    <p>{{currentPage.description}}</p>
+    <div class="card-container">
+        <div class="card-container__header">
+            <img src="../../../../assets/logo.svg" alt="Логотип карта">
+            <span *ngIf="accountData">#{{accountData.CardNumber}}</span>
+        </div>
+        <div class="card-container__decorative-pattern">
+            <div class="imgs-row"></div>
+            <div class="imgs-row" style="background-position-x: -22px;"></div>
+            <div class="imgs-row"></div>
+        </div>
+        <div class="card-container__content">
+            <div class="info" *ngIf="accountData">
+                <div class="row">
+                    <span class="key">Имя</span>
+                    <span class="value" *ngIf="accountData.BonusProgramName">{{accountData.BonusProgramName}}</span>
+                    <span class="value" *ngIf="!accountData.BonusProgramName">Не задано</span>
+                </div>
+                <div class="row">
+                    <span class="key">Баланс карты</span>
+                    <span class="value">{{accountData.Bonuses}}</span>
+                </div>
+            </div>
+            <div class="card-container__barcode-container">
+                <svg id="barcode"></svg>
+            </div>
+        </div>
+    </div>
+    <!-- <div [ngClass]="{
         'card-content': true,
         'active_back': isCardBack
     }" (click)="rotateCard()">
@@ -47,17 +75,11 @@
                     </div>
                 </div>
             </div>
-            <!-- <div class="bonus-account__container">
-                <h3>Доступно</h3>
-                <div *ngIf="accountData" class="bonus-account__value">
-                    {{ accountData.Bonuses }}
-                </div>
-            </div> -->
         </div>
         <div class="card-content__back">
             <div class="card-content__barcode-container">
                 <svg id="barcode"></svg>
             </div>
         </div>
-    </div>
+    </div> -->
 </div>

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

@@ -1,87 +1,169 @@
 :host {
-    .woocommerce-MyAccount-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        .card-content {
-            position: relative;
-            height: 200px;
-            width: 100%;
-            max-width: 400px;
-            -moz-user-select: none;
-            -webkit-user-select: none;
-            -ms-user-select: none;
-            -o-user-select: none;
-            user-select: none;
-            &__front, &__back {
-                display: block;
-                transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
-                transition-duration: .7s;
-                transition-property: transform, opacity;
-                color: #fff;
-                width: 100%;
-                height: 100%;
-                background: #fdfdfd;
-                border-radius: 12px;
-                border: solid #a3a3a3 1px;
-                box-shadow: 0 0 3px 1px #fff;
-                padding: 12px;
-                background-size: cover;
-            }
-            &__front {
-                transform: rotateY(0deg);
-                background-image: url(../../../../assets/background.svg);
-            }
-            &__back {
-                position: absolute;
-                opacity: 0;
-                top: 0px;
-                left: 0px;
-                transform: rotateY(-180deg);
-                background: #000;
-            }
-            &.active_back {
-                > .card-content__front {
-                    transform: rotateY(180deg);
-                    opacity: 0;
-                }
-                > .card-content__back {
-                    opacity: 1;
-                    transform: rotateY(0deg);
-                }
-            }
-            &__logo {
-                height: 30px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                .title {
-                    color: #03d1be;
-                    font-weight: 600;
-                    letter-spacing: 2px;
-                }
-            }
-            &__footer {
-                display: flex;
-                justify-content: space-between;
-                align-items: flex-end;
-                position: absolute;
-                bottom: 12px;
-                width: calc(100% - 24px);
-                .count {
-                    font-size: 22px;
-                }
-            }
-            &__barcode-container {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
-            }
-        }
-        .explanation {
-            font-size: 12px;
-            margin-bottom: 8px;
-        }
+  .woocommerce-MyAccount-content {
+    display: flex;
+    flex-direction: column;
+    & > h2 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
     }
-}
+    & > p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 18px;
+      margin-top: 8px;
+    }
+    .card-container {
+      background: #09467f;
+      box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
+      border-radius: 15px;
+      height: 466px;
+      margin-top: 11px;
+      overflow: hidden;
+      &__header {
+        height: 62px;
+        color: #fff;
+        display: flex;
+        justify-content: space-between;
+        img {
+          height: 38px;
+          margin-top: 15px;
+        }
+        span {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 20px;
+          line-height: 24px;
+          margin-top: 19px;
+          margin-right: 18px;
+        }
+      }
+      &__decorative-pattern {
+        height: 122px;
+        background-color: #fff;
+        padding-top: 9px;
+        .imgs-row {
+          background: url("../../../../assets/card-decorative-pattern.png")
+            repeat-x;
+          height: 32%;
+        }
+      }
+      &__content {
+        background-color: #b8deff;
+        .info {
+          height: 79px;
+          border-bottom: solid #0d457e 1px;
+          padding: 14px 18px;
+          .row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 7px;
+            .key {
+              font-size: 14px;
+              line-height: 17px;
+              font-weight: 400;
+            }
+            .value {
+              font-size: 18px;
+              font-weight: 600;
+            }
+          }
+        }
+      }
+      &__barcode-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 33px 0;
+        #barcode {
+            border-radius: 16px;
+        }
+      }
+    }
+
+    .card-content {
+      position: relative;
+      height: 200px;
+      width: 100%;
+      max-width: 400px;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+      &__front,
+      &__back {
+        display: block;
+        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        transition-duration: 0.7s;
+        transition-property: transform, opacity;
+        color: #fff;
+        width: 100%;
+        height: 100%;
+        background: #fdfdfd;
+        border-radius: 12px;
+        border: solid #a3a3a3 1px;
+        box-shadow: 0 0 3px 1px #fff;
+        padding: 12px;
+        background-size: cover;
+      }
+      &__front {
+        transform: rotateY(0deg);
+        background-image: url(../../../../assets/background.svg);
+      }
+      &__back {
+        position: absolute;
+        opacity: 0;
+        top: 0px;
+        left: 0px;
+        transform: rotateY(-180deg);
+        background: #000;
+      }
+      &.active_back {
+        > .card-content__front {
+          transform: rotateY(180deg);
+          opacity: 0;
+        }
+        > .card-content__back {
+          opacity: 1;
+          transform: rotateY(0deg);
+        }
+      }
+      &__logo {
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title {
+          color: #03d1be;
+          font-weight: 600;
+          letter-spacing: 2px;
+        }
+      }
+      &__footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        position: absolute;
+        bottom: 12px;
+        width: calc(100% - 24px);
+        .count {
+          font-size: 22px;
+        }
+      }
+      &__barcode-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+      }
+    }
+    .explanation {
+      font-size: 12px;
+      margin-bottom: 8px;
+    }
+  }
+}

src/app/pages/account/bonus-program/bonus-program.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
-import { orderStatuses } from 'src/app/app.constants';
-import { BonusProgramAccount, Purchase, Transaction } from 'src/app/interface/data';
+import { orderStatuses, PageList, PageListWithBonus } from 'src/app/app.constants';
+import { BonusProgramAccount, Page, Purchase, Transaction } from 'src/app/interface/data';
 import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
 import * as moment from 'moment-timezone';
 import * as barcode from 'jsbarcode';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-bonus-program',
@@ -19,6 +20,8 @@ export class BonusProgramComponent implements OnInit {
   public isCardBack: boolean = false;
   readonly orderStatuses = orderStatuses;
   readonly moment = moment;
+  readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
+  public currentPage: Page = this.pageList[1];
 
   constructor(
     private jsonrpc: JsonrpcService,

src/app/pages/main/main.component.scss

@@ -1,6 +1,4 @@
 .main-container {
     width: 100vw;
     min-height: 100vh;
-    background-image: url(../../../assets/background.svg);
-    background-position: center;
 }

src/index.html

@@ -13,7 +13,7 @@
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1976d2">
 </head>
-<body style="background: #161616;">
+<body>
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>

src/styles.scss

@@ -1,7 +1,7 @@
 // Сброс стилей
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle}
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
-html{height:100%;color:#fff;}
+html{height:100%;color:#000;}
 body{line-height:1}
 ol,ul{list-style:none}
 blockquote,q{quotes:none}
@@ -14,6 +14,9 @@ table{border-collapse:collapse;border-spacing:0}
 
 .p-inputtext {
     width: 100%;
+    border: 1px solid #B8DEFF;
+    border-radius: 15px;
+    height: 45px;
 }
 
 mark {