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

complete: 1. поменять банер на закругленный 2. добавить значок лупы для куар - как в приложении x5 3. Зеленый цвет для текста взять такой же как для вернхей панели 4. кнопку оценить так же цвет из верхней панели 5. в тексте процент бонусов и сумму покупок выделить тем же цветом что и Уровень и Кешбек около куара 6. текст сделать пошире, что бы на телефоне было 2-3 строки
2023-07-19 10:33:18 +04:00 · 2023-07-19 10:33:18 +04:00 · 1e62141a45
commit 1e62141a45
parent 94b34e020e
8 changed files with 71 additions and 58 deletions
--- a/angular/src/app/app.module.ts
+++ b/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 {}
--- a/angular/src/app/pipes/safe-html.pipe.ts
+++ b/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);
+  }
+}
--- a/angular/src/app/presentation-options/default-option/default-option.module.ts
+++ b/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 {}
--- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html
+++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html
@ -14,23 +14,26 @@
      <ng-container *ngIf="authService.error || authService.userInfo.walletBalances >= 0">
 	<p class="top-info__bonus">	
 	  {{ authService.error ? '--' : Math.floor(authService.userInfo.walletBalances) }}
-          бонусов	  			    
+          бонусов
 	</p>
      </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>        
-        {{getLevelDescription()}}
-      </p>
+      <p [innerHtml]="getLevelDescription() | safeHtml"></p>
    </div>
    <ng-container *ngIf="!authService.error">
      <span id="bonuses-condition"></span>
--- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
+++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
@ -1,4 +1,4 @@
-:host {    
+:host {      
  .guest-card {
    display: flex;
    flex-direction: column;
@ -39,46 +39,42 @@
      border-radius: 6px;
      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;
+      flex-direction: column;      
      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;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
-        letter-spacing: -0.5px;
-      }
+        letter-spacing: -0.5px;        

-      .price,
-      .percent {
-        font-weight: bold;
-      }
+        #price,
+        .percent {
+          font-weight: bold;
+          color: var(--button-color);
+        }  
+      }      
    }

    &__purchases-description {
--- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts
+++ b/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}!',
-    'А ты хорош! Купи еще на {0}₽ и получай кешбек 10% с  {1}',
-    'Ты крут! Купи еще на {0}₽ и получай максимальный кешбек 15% с  {1}',
-    'Ты сделал это! Купи на {0}₽ и сохраняй максимальный кешбек 15% с  {1}',
+    'Поднимай свой уровень! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
+    'А ты хорош! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
+    'Ты крут! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
+    'Ты сделал это! Купи на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с  {1}',
  ],
  [
-    'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
-    'Ты можешь стать круче! Купи еще на {0}₽ и получай кешбек 10% с {1}',
-    'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на {0}₽ и получай максимальный кешбек 15% с {1}',
-    'Ты потрясающий! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}',
+    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
+    'Ты можешь стать круче! Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
+    'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
+    'Ты потрясающий! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
  ],
  [
-    'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
-    'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}',
-    'Ты почти на последнем уровне! Купи на {0}₽ и получай максимальный кешбек 15% с {1}',
-    'Ты лучший! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}',
+    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
+    'Ты вернулся на 2 уровень. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
+    'Ты почти на последнем уровне! Купи на <span style="color: var(--button-color);">{0}₽</span> и получай максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
+    'Ты лучший! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
  ],
  [
-    'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!',
-    'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}',
-    'Оу! Ты оказался на 3 уровне. Купи на {0}₽ и возвращай себе максимальный кешбек 15% с {1}',
-    'Ты наш герой! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}',
+    'Oops! Ты оказался на 1 уровне. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и твой кешбек будет <span style="color: var(--button-color);">6%</span> с {1}!',
+    'Ты вернулся на 2 уровень. Купи еще на <span style="color: var(--button-color);">{0}₽</span> и получай кешбек <span style="color: var(--button-color);">10%</span> с {1}',
+    'Оу! Ты оказался на 3 уровне. Купи на <span style="color: var(--button-color);">{0}₽</span> и возвращай себе максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
+    'Ты наш герой! Покупай на <span style="color: var(--button-color);">{0}₽</span> и сохраняй максимальный кешбек <span style="color: var(--button-color);">15%</span> с {1}',
  ],
 ];

--- a/angular/src/assets/970х250_3.png
+++ b/angular/src/assets/970х250_3.png
--- a/angular/src/styles.scss
+++ b/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 {