UI: mobile qrcode improvements

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html

@@ -20,9 +20,10 @@
   <div class="tb-flex row align-center shrink"
        [class.row]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.RIGHT"
        [class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT">
+<!--    <canvas #canvas class="tb-qrcode"></canvas>-->
     <canvas #canvas class="tb-qrcode"></canvas>
     <div *ngIf="mobileAppSettings?.qrCodeConfig.badgeEnabled"
-         class="tb-flex column no-gap tb-badge-container"
+         class="tb-flex column tb-badge-container"
          [class.tb-badge-container]="!previewMode && !ctx">
       <ng-container *ngIf="mobileAppSettings.qrCodeConfig.badgeStyle === badgeStyle.ORIGINAL;else white">
         <img *ngIf="mobileAppSettings.iosConfig.enabled" [src]="badgeStyleURLMap.get(badgeStyle.ORIGINAL).iOS">

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss

@@ -51,7 +51,7 @@
 }
 
 .tb-badge-container {
-  @media #{$mat-lt-lg} {
+  @media #{$mat-md} {
     display: none;
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts

@@ -25,7 +25,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { interval, mergeMap, Observable, Subject, takeUntil } from 'rxjs';
 import { MINUTE } from '@shared/models/time/time.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import { MobileAppQrCodeWidgetSettings } from '@home/components/widget/lib/cards/mobile-app-qr-code-widge.models';
+import { MobileAppQrCodeWidgetSettings } from '@home/components/widget/lib/cards/mobile-app-qr-code-widget.models';
 
 @Component({
   selector: 'tb-mobile-app-qrcode-widget',
@@ -104,7 +104,10 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
 
   updateQRCode(link: string) {
     import('qrcode').then((QRCode) => {
-      QRCode.toCanvas(this.canvasRef.nativeElement, link, { width: 90 });
+      QRCode.toCanvas(this.canvasRef.nativeElement, link, { width: 100 });
+      // QRCode.toCanvas(this.canvasRef.nativeElement, link);
+      // this.canvasRef.nativeElement.style.width = '4.6vw';
+      // this.canvasRef.nativeElement.style.height = '4.6vw';
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.ts

@@ -20,7 +20,7 @@ import { WidgetSettings, WidgetSettingsComponent } from "@shared/models/widget.m
 import { AppState } from '@core/core.state';
 import { Store } from "@ngrx/store";
 import { badgePositionTranslationsMap, badgeStyleTranslationsMap } from '@shared/models/mobile-app.models';
-import { mobileAppQrCodeWidgetDefaultSettings } from '@home/components/widget/lib/cards/mobile-app-qr-code-widge.models';
+import { mobileAppQrCodeWidgetDefaultSettings } from '@home/components/widget/lib/cards/mobile-app-qr-code-widget.models';
 
 @Component({
   selector: 'tb-mobile-app-qr-code-widget-settings',

ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts

@@ -29,6 +29,7 @@ import {
   badgeStyleTranslationsMap,
   MobileAppQRCodeSettings
 } from '@shared/models/mobile-app.models';
+import { AuthService } from '@core/auth/auth.service';
 
 @Component({
   selector: 'tb-mobile-app-settings',
@@ -48,7 +49,7 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf
 
   constructor(protected store: Store<AppState>,
               private mobileAppService: MobileAppService,
-              public fb: FormBuilder) {
+              private fb: FormBuilder) {
     super(store);
     this.buildMobileAppSettingsForm();
     this.mobileAppService.getMobileAppSettings()

ui-ngx/src/assets/dashboard/tenant_admin_home_page.json

@@ -1258,7 +1258,9 @@
                 "sizeX": 35,
                 "sizeY": 16,
                 "row": 42,
-                "col": 85
+                "col": 85,
+                "mobileOrder": 5,
+                "mobileHeight": 7
               }
             },
             "gridSettings": {