Merge pull request #3631 from mempool/simon/improved-warning-message

Redesigned testnet alert

frontend/src/app/components/liquid-master-page/liquid-master-page.component.html

@@ -90,6 +90,8 @@
 </nav>
 </header>
 
+<app-testnet-alert *ngIf="network.val === 'liquidtestnet'"></app-testnet-alert>
+
 <br />
 
 <router-outlet></router-outlet>

frontend/src/app/components/master-page/master-page.component.html

@@ -62,20 +62,7 @@
 </nav>
 </header>
 
-<div *ngIf="network.val === 'testnet' || network.val === 'signet' || network.val === 'liquidtestnet'">
+<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
-  <div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
-    <div class="alert alert-danger mb-0 text-center">
-      <div class="d-flex justify-content-center align-items-center">
-        <fa-icon class="between-arrow mr-1" [icon]="['fas', 'exclamation-triangle']" [fixedWidth]="true"></fa-icon>
-        <span i18n="warning-testnet">This is a test network. Coins have no value</span>
-        <fa-icon class="between-arrow ml-1" [icon]="['fas', 'exclamation-triangle']" [fixedWidth]="true"></fa-icon>
-      </div>
-      <button type="button" class="close" (click)="dismissWarning()">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  </div>
-</div>
 
 <br />
 

frontend/src/app/components/master-page/master-page.component.scss

@@ -193,18 +193,3 @@ nav {
     font-size: 7px;
   }
 }
-
-.close {
-  position: absolute;
-  color: black;
-  right: 10px;
-  top: 17px;
-  @media (max-width: 620px) {
-    right: 10px;
-    top: 0px;
-  };
-  @media (min-width: 992px) {
-    right: 10px;
-    top: 13px;
-  };
-}

frontend/src/app/components/master-page/master-page.component.ts

@@ -1,10 +1,9 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
 import { EnterpriseService } from '../../services/enterprise.service';
 import { NavigationService } from '../../services/navigation.service';
-import { StorageService } from '../../services/storage.service';
 
 @Component({
   selector: 'app-master-page',
@@ -27,7 +26,6 @@ export class MasterPageComponent implements OnInit {
     private languageService: LanguageService,
     private enterpriseService: EnterpriseService,
     private navigationService: NavigationService,
-    public storageService: StorageService
   ) { }
 
   ngOnInit() {
@@ -48,8 +46,4 @@ export class MasterPageComponent implements OnInit {
   onResize(event: any) {
     this.isMobile = window.innerWidth <= 767.98;
   }
-
-  dismissWarning() {
-    this.storageService.setValue('hideWarning', 'hidden');
-  }
 }

frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html

@@ -0,0 +1,8 @@
+<div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
+  <div class="alert alert-danger mb-0 text-center">
+    <div class="message-container" i18n="warning-testnet">This is a test network. Coins have no value.</div>
+    <button type="button" class="close" (click)="dismissWarning()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+</div>

frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss

@@ -0,0 +1,31 @@
+.alert-danger {
+  color: #fff;
+  background-color: #b71c1c;
+  border-color: #b71c1c;
+  padding: 0.5rem 1.25rem;
+  margin: 0px 10px 0px 10px;
+
+  display: flex;
+  justify-content: center;
+}
+
+.message-container {
+  display: flex;
+  margin-left: auto;
+}
+
+.close {
+  display: flex;
+  color: #fff;
+  align-items: center;
+}
+
+button {
+  display: flex;
+  margin-left: auto;
+}
+
+span {
+  position: relative;
+  top: -2px;
+}

frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { StorageService } from '../../../services/storage.service';
+
+@Component({
+  selector: 'app-testnet-alert',
+  templateUrl: './testnet-alert.component.html',
+  styleUrls: ['./testnet-alert.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestnetAlertComponent {
+
+  constructor(
+    public storageService: StorageService,
+  ) { }
+
+  dismissWarning(): void {
+    this.storageService.setValue('hideWarning', 'hidden');
+  }
+
+}

frontend/src/app/shared/shared.module.ts

@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@@ -84,6 +84,7 @@ import { SearchResultsComponent } from '../components/search-form/search-results
 import { TimestampComponent } from './components/timestamp/timestamp.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
 import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component';
+import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component';
 
 @NgModule({
   declarations: [
@@ -162,6 +163,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TimestampComponent,
     ToggleComponent,
     GeolocationComponent,
+    TestnetAlertComponent,
   ],
   imports: [
     CommonModule,
@@ -309,6 +311,5 @@ export class SharedModule {
     library.addIcons(faQrcode);
     library.addIcons(faArrowRightArrowLeft);
     library.addIcons(faExchangeAlt);
-    library.addIcons(faExclamationTriangle);
   }
 }