dev #14384 Правка ошибок отображения WPA КофеЛайк:

complete:
1. поменять банер на закругленный
2. добавить значок лупы для куар - как в приложении x5
3. Зеленый цвет для текста взять такой же как для вернхей панели
4. кнопку оценить так же цвет из верхней панели
5. в тексте процент бонусов и сумму покупок выделить тем же цветом что и Уровень и Кешбек около куара
6. текст сделать пошире, что бы на телефоне было 2-3 строки

angular/src/app/app.module.ts

@@ -107,7 +107,7 @@ import { DirectivesModule } from './directives/directives.module';
     MatSnackBarModule,
     MatBottomSheetModule,
     MatProgressSpinnerModule,
-    DirectivesModule
+    DirectivesModule,
   ],
   providers: [
     DialogService,
@@ -118,4 +118,4 @@ import { DirectivesModule } from './directives/directives.module';
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

angular/src/app/pipes/safe-html.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml',
+})
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(html: string) {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}

angular/src/app/presentation-options/default-option/default-option.module.ts

@@ -22,7 +22,7 @@ import { DirectivesModule } from 'src/app/directives/directives.module';
 import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
 import { MatButtonModule } from '@angular/material/button';
 import { ToastModule } from 'primeng/toast';
-
+import { SafeHtmlPipe } from 'src/app/pipes/safe-html.pipe';
 
 @NgModule({
   declarations: [
@@ -37,6 +37,7 @@ import { ToastModule } from 'primeng/toast';
     LoginComponent,
     LoyalityProgramComponent,
     MenuItemComponent,
+    SafeHtmlPipe,
   ],
   imports: [
     ToastModule,
@@ -51,8 +52,8 @@ import { ToastModule } from 'primeng/toast';
     ReactiveFormsModule,
     MatInputModule,
     DirectivesModule,
-    MatButtonModule
+    MatButtonModule,
   ],
   bootstrap: [IndexComponent],
 })
-export class DefaultOptionModule { }
+export class DefaultOptionModule {}

angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html

@@ -19,18 +19,21 @@
       </ng-container>            
     </div>
     <div class="guest-card__qr" (click)="qrCodeClick()">      
-      <qr-code
+      <div class="qr-code-wrapper">
+        <qr-code
         [value]="phone || 'Данные не найдены'"
         [margin]="0"
         [size]="qrCodeSize"	  	  
         errorCorrectionLevel="H"
         ></qr-code>        
+        <span class="material-icons zoom">
+          zoom_in
+        </span>           
+      </div>
         <span>Покажи бариста</span>   
     </div>
     <div class="guest-card__user-description">
-      <p>        
+      <p [innerHtml]="getLevelDescription() | safeHtml"></p>
-        {{getLevelDescription()}}
-      </p>
     </div>
     <ng-container *ngIf="!authService.error">
       <span id="bonuses-condition"></span>

angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss

@@ -40,32 +40,27 @@
       align-items: center;
       display: flex;
       flex-direction: column;      
-      // background-image: linear-gradient(
-      //     #008251 33%,
-      //     transparent 0px,
-      //     transparent 67%,
-      //     #008251 0px
-      //   ),
-      //   linear-gradient(
-      //     90deg,
-      //     #008251 33%,
-      //     transparent 0px,
-      //     transparent 66%,
-      //     #008251 0px
-      //   ),
-      //   linear-gradient(#008251 33%, transparent 0px, transparent 67%, #008251 0),
-      //   linear-gradient(90deg, #008251 33%, transparent 0, transparent 66%, #008251 0);
-      // background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
-      // background-position: 0 0, 0 0, 100% 100%, 100% 100%;
-      // background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
       cursor: pointer;
+
+      .qr-code-wrapper {
+        position: relative;
+      }
+
+      .zoom {
+        position: absolute;
+
+        bottom: 5px;
+        right: -35px;
+
+        color: var(--button-color);
+      }
     }
 
     &__user-description {
       padding: 14px 24px;
 
       p {
-        width: 60%;
+        width: 80%;
         text-align: center;
         margin: 0 auto;
         font-style: normal;
@@ -73,11 +68,12 @@
         font-size: 16px;
         line-height: 19px;
         letter-spacing: -0.5px;        
-      }
 
-      .price,
+        #price,
-      .percent {
+        .percent {
-        font-weight: bold;
+          font-weight: bold;
+          color: var(--button-color);
+        }  
       }      
     }
 

angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { ExitComponent } from 'src/app/components/exit/exit.component';
 import { CookiesService } from 'src/app/services/cookies.service';
@@ -9,28 +9,28 @@ import { format } from 'src/app/utils';
 
 const levelDescriptionsTable = [
   [
-    'Поднимай свой уровень! Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
+    'Поднимай свой уровень! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
-    'А ты хорош! Купи еще на {0}₽ и получай кешбек 10% с  {1}',
+    'А ты хорош! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
-    'Ты крут! Купи еще на {0}₽ и получай максимальный кешбек 15% с  {1}',
+    'Ты крут! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
-    'Ты сделал это! Купи на {0}₽ и сохраняй максимальный кешбек 15% с  {1}',
+    'Ты сделал это! Купи на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с  {1}',
   ],
   [
-    'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
+    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
-    'Ты можешь стать круче! Купи еще на {0}₽ и получай кешбек 10% с {1}',
+    'Ты можешь стать круче! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
-    'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на {0}₽ и получай максимальный кешбек 15% с {1}',
+    'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
-    'Ты потрясающий! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}',
+    'Ты потрясающий! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
   ],
   [
-    'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
+    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
-    'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}',
+    'Ты вернулся на 2 уровень. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
-    'Ты почти на последнем уровне! Купи на {0}₽ и получай максимальный кешбек 15% с {1}',
+    'Ты почти на последнем уровне! Купи на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
-    'Ты лучший! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}',
+    'Ты лучший! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
   ],
   [
-    'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
+    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
-    'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}',
+    'Ты вернулся на 2 уровень. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
-    'Оу! Ты оказался на 3 уровне. Купи на {0}₽ и возвращай себе максимальный кешбек 15% с {1}',
+    'Оу! Ты оказался на 3 уровне. Купи на <span style="color: var(--button-color);">{0}₽</span> и возвращай себе максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
-    'Ты наш герой! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}',
+    'Ты наш герой! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
   ],
 ];
 

angular/src/styles.scss

@@ -120,19 +120,19 @@ body {
     --text-color: #000000;
     --text-color_1: #8d8d8d;    
 
-    --button-color: #28AF49 ;
+    --button-color: #005C50;
     --button-color_disabled: rgb(40, 175, 73, 0.9);
     
     --button-text-color: #ffffff;
     --button-text-color_disabled: #cccccc;
 
-    --main-color_hover: rgba(40, 175, 73, 0.6);
+    --main-color_hover: rgba(0, 92, 80, 0.3);
 }
 
 .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__leading,
 .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__notch,
 .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__trailing {
-    border-color: var(--main-color_hover) !important;    
+    border-color: var(--main-color_2) !important;    
 }
 
 .mat-mdc-outlined-button:not(:disabled) {
@@ -144,7 +144,7 @@ body {
 }
 
 .mdc-text-field:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-floating-label {
-    color: var(--main-color_hover);
+    color: var(--main-color_2);
 }
 
 .mdc-text-field span {