Redesigned testnet alert

fixes #3625
This commit is contained in:
softsimon
2023-04-03 16:25:10 +09:00
parent 6ac0e887f7
commit a1b6fc5a7b
8 changed files with 66 additions and 38 deletions

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -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');
}
}

View File

@@ -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);
}
}