Feat/styling refactoring

jafarijason · Jul 9, 2021 · 8ea1a1f · 8ea1a1f
1 parent 9747dde
commit 8ea1a1f
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 188 deletions.
diff --git a/README.md b/README.md
@@ -78,7 +78,7 @@ Before integrating a new feature, please quickly reach out to us in an issue so
 
 - If you find any bugs, submit an [issue](../../issues) or open [pull-request](../../pulls).
 - If you want to integrate a new blockchain, please read the contributing guidelines in the [airgap-coin-lib](https://github.com/airgap-it/airgap-coin-lib) project.
-- Engage with other users and developers on the [AirGap Telegram](https://t.me/AirGap).
+- Engage with other users and developers on the [AirGap Discord](https://discord.gg/gnWqCQsteh).
 
 ## Related Projects
 

diff --git a/src/app/components/current-wallet-group/current-wallet-group.component.html b/src/app/components/current-wallet-group/current-wallet-group.component.html
@@ -1,5 +1,5 @@
 <ion-item lines="none" button="true" detail="false" *ngIf="(groups$ | async) && (groups$ | async).length > 0">
-  <ion-text slot="start">{{ 'current-wallet-group.label' | translate }}</ion-text>
+  <ion-text slot="start" color="medium">{{ 'current-wallet-group.label' | translate }}</ion-text>
   <p slot="end" *ngIf="(groups$ | async) && (groups$ | async).length === 1">
     {{ currentGroup$ | async | groupLabel | translate }}
   </p>

diff --git a/src/app/components/permission-request/permission-request.component.html b/src/app/components/permission-request/permission-request.component.html
@@ -1,7 +1,7 @@
 <ng-container>
-  <ion-row>
+  <ion-row class="request--container ion-padding-top">
     <ion-col class="ion-text-center" size="3">
-      <ion-avatar>
+      <ion-avatar class="content--align__center-center">
         <airgap-identicon [address]="requesterName" *ngIf="!icon"></airgap-identicon>
         <img [src]="icon" *ngIf="icon" />
       </ion-avatar>
@@ -16,16 +16,16 @@
       <div class="divider--line"></div>
     </ion-col>
     <ion-col class="ion-text-center" size="3">
-      <ion-avatar>
+      <ion-avatar class="content--align__center-center">
         <airgap-identicon [address]="address"></airgap-identicon>
       </ion-avatar>
     </ion-col>
   </ion-row>
   <ion-row>
-    <ion-col class="ion-text-left" size="4">
-      <h5 class="ion-no-margin">{{ requesterName | shortenString }}</h5>
+    <ion-col class="ion-text-left" size="6">
+      <h5 class="ion-no-margin">{{ requesterName }}</h5>
     </ion-col>
-    <ion-col class="ion-text-right" size="4" push="4">
+    <ion-col class="ion-text-right" size="6">
       <h5 class="ion-no-margin">{{ address | shortenString }}</h5>
     </ion-col>
   </ion-row>
@@ -45,24 +45,17 @@ <h5 class="ion-no-margin">{{ address | shortenString }}</h5>
 
   <h2 [innerHTML]="'beacon-request.request.heading' | translate: { requesterName: requesterName }"></h2>
 
-  <ion-row class="ion-text-center ion-padding-top" size="3">
-    <ion-col>
+  <ion-item *ngIf="selectableWallets.length > 1" lines="none" class="ion-no-padding">
+    <ion-avatar slot="start">
       <airgap-identicon [address]="address"></airgap-identicon>
-      <h5 class="ion-no-margin">{{ address | shortenString }}</h5>
-
-      <ion-button
-        *ngIf="selectableWallets.length > 1"
-        (click)="changeAccount()"
-        color="secondary"
-        shape="round"
-        size="small"
-        fill="outline"
-      >
-        <ion-icon name="swap-vertical-outline"></ion-icon>
-        {{ 'beacon-request.select-account.button' | translate }}
-      </ion-button>
-    </ion-col>
-  </ion-row>
+    </ion-avatar>
+    <ion-label>
+      <p class="ion-no-margin">{{ address | shortenString }}</p>
+    </ion-label>
+    <ion-button (click)="changeAccount()" color="secondary" shape="round" size="small" fill="outline" slot="end">
+      {{ 'beacon-request.select-account.button' | translate }}
+    </ion-button>
+  </ion-item>
 
   <ng-container *ngIf="inputs && inputs.length > 0">
     <p class="ion-padding-top">{{ 'beacon-request.request.text' | translate }}</p>

diff --git a/src/app/components/permission-request/permission-request.component.scss b/src/app/components/permission-request/permission-request.component.scss
@@ -0,0 +1,15 @@
+.divider--line {
+  border-top: 2px solid var(--ion-color-primary);
+  margin-top: 32px;
+}
+.request--container {
+  h5 {
+    word-break: break-all;
+  }
+  ion-avatar {
+    margin: auto;
+  }
+}
+.badge__margin {
+  margin: 0px 6px 0px 0px;
+}
diff --git a/src/app/pages/beacon-request/beacon-request.page.html b/src/app/pages/beacon-request/beacon-request.page.html
@@ -13,15 +13,13 @@
   <ion-grid fixed="true" class="ion-no-padding">
     <ng-container *ngIf="request">
       <ng-container *ngIf="request.type != 'permission_request'">
-        <ion-card>
+        <ion-card class="ion-margin-bottom">
           <ion-item lines="none">
             <ion-avatar slot="start">
               <airgap-identicon [address]="requesterName"></airgap-identicon>
             </ion-avatar>
             <ion-label class="ion-margin-start">
-              <p>
-                {{ 'beacon-request.request-by-dapp_label' | translate }}
-              </p>
+              <p>{{ 'beacon-request.request-by-dapp_label' | translate }}</p>
               <h3>{{requesterName}}</h3>
             </ion-label>
             <img src="assets/img/beacon_logo.svg" slot="end" class="by-beacon__img" />
@@ -47,7 +45,7 @@ <h3>{{requesterName}}</h3>
         </ng-container>
       </ion-row>
 
-      <div *ngIf="request.type === 'sign_payload_request'" class="request--container">
+      <div *ngIf="request.type === 'sign_payload_request'" class="ion-padding-top">
         <ion-row class="rawdata--container ion-padding-bottom" *ngIf="request && request.payload">
           <ion-col class="ion-no-padding">
             <p>{{ 'beacon-request.sign-data_label' | translate }}</p>
@@ -62,31 +60,26 @@ <h3>{{requesterName}}</h3>
         </ion-row>
       </div>
 
-      <div *ngIf="request.type === 'operation_request'" class="request--container">
+      <div *ngIf="request.type === 'operation_request'" class="ion-padding-top">
         <ng-container *ngFor="let transaction of transactions">
           <airgap-from-to [transaction]="transaction"></airgap-from-to>
         </ng-container>
         <ng-container *ngIf="!transactions || (transactions && transactions.length === 0)">
-          <!-- TODO: Styling -->
-          <ion-spinner color="black"></ion-spinner>
-          Preparing opeartion...
+          <ion-row class="ion-padding-horizontal">
+            <p>Preparing operation...</p>
+            <ion-progress-bar type="indeterminate" value="0.5"></ion-progress-bar>
+          </ion-row>
         </ng-container>
       </div>
     </ng-container>
   </ion-grid>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-button shape="round" color="secondary" (click)="cancel()">
-      {{ 'beacon-request.cancel_label' | translate }}
-    </ion-button>
+    <ion-button shape="round" color="secondary" (click)="cancel()">{{ 'beacon-request.cancel_label' | translate }}</ion-button>
 
     <ion-button shape="round" color="primary" (click)="done()">
-      <ng-container *ngIf="request.type !== 'permission_request'">
-        {{ 'beacon-request.continue_label' | translate }}
-      </ng-container>
-      <ng-container *ngIf="request.type === 'permission_request'">
-        {{ 'beacon-request.connect_label' | translate }}
-      </ng-container>
+      <ng-container *ngIf="request.type !== 'permission_request'">{{ 'beacon-request.continue_label' | translate }}</ng-container>
+      <ng-container *ngIf="request.type === 'permission_request'">{{ 'beacon-request.connect_label' | translate }}</ng-container>
     </ion-button>
   </ion-fab>
 </ion-content>
diff --git a/src/app/pages/beacon-request/beacon-request.page.scss b/src/app/pages/beacon-request/beacon-request.page.scss
@@ -1,20 +1,3 @@
-.divider--line {
-  border-top: 2px solid var(--ion-color-primary);
-  margin-top: 32px;
-}
-img {
-  height: 48px !important;
-  width: 48px !important;
-}
-.request--container {
-  h5 {
-    word-break: break-all;
-  }
-  ion-avatar {
-    display: block;
-    margin: auto;
-  }
-}
-.badge__margin {
-  margin: 0px 6px 0px 0px;
+.by-beacon__img {
+  width: 32px;
 }
diff --git a/src/app/pages/health-check/health-check.page.html b/src/app/pages/health-check/health-check.page.html
@@ -1,30 +1,34 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>{{ 'health-check.title' | translate }}</ion-title>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <ion-grid fixed="true" class="ion-no-padding">
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button defaultHref="/tabs/settings"></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{ 'health-check.title' | translate }}</ion-title>
+    </ion-toolbar>
+  </ion-grid>
 </ion-header>
 
 <ion-content>
-  <ion-list>
-    <ion-card *ngFor="let item of items">
-      <ion-card-header>
-        <ion-item lines="none">
-          <ion-card-title>{{item.title}}</ion-card-title>
-          <ion-buttons slot="end">
-            <ion-button shape="round" size="small" color="secondary">
-              <ion-spinner name="lines-small" color="primary" *ngIf="item.status === 'pending'"></ion-spinner>
-              <span *ngIf="item.status === 'loading'">{{item.status}}</span>
-              <span *ngIf="item.status === 'fail'"><ion-icon size="large" color="danger" name="close-circle"></ion-icon></span>
-              <span *ngIf="item.status === 'success'">
-                <ion-icon size="large" color="success" name="checkmark-circle-outline"></ion-icon>
-              </span>
-            </ion-button>
-          </ion-buttons>
-        </ion-item>
-      </ion-card-header>
-    </ion-card>
-  </ion-list>
+  <ion-grid fixed="true" class="ion-no-padding">
+    <ion-list>
+      <ion-card *ngFor="let item of items">
+        <ion-card-header>
+          <ion-item lines="none">
+            <ion-card-title>{{item.title}}</ion-card-title>
+            <ion-buttons slot="end">
+              <ion-button shape="round" size="small" color="secondary">
+                <ion-spinner name="lines-small" color="primary" *ngIf="item.status === 'pending'"></ion-spinner>
+                <span *ngIf="item.status === 'loading'">{{item.status}}</span>
+                <span *ngIf="item.status === 'fail'"><ion-icon size="large" color="danger" name="close-circle"></ion-icon></span>
+                <span *ngIf="item.status === 'success'">
+                  <ion-icon size="large" color="success" name="checkmark-circle-outline"></ion-icon>
+                </span>
+              </ion-button>
+            </ion-buttons>
+          </ion-item>
+        </ion-card-header>
+      </ion-card>
+    </ion-list>
+  </ion-grid>
 </ion-content>
diff --git a/src/app/pages/qr-settings/qr-settings.page.html b/src/app/pages/qr-settings/qr-settings.page.html
@@ -1,12 +1,14 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>{{ 'qr-settings-page.title' | translate }}</ion-title>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <ion-grid fixed="true" class="ion-no-padding">
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button defaultHref="/tabs/settings"></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{ 'qr-settings-page.title' | translate }}</ion-title>
+    </ion-toolbar>
+  </ion-grid>
 </ion-header>
 
-<ion-content>
+<ion-grid fixed="true">
   <airgap-qr-settings></airgap-qr-settings>
-</ion-content>
+</ion-grid>
diff --git a/src/app/pages/scan/scan.html b/src/app/pages/scan/scan.html
@@ -6,7 +6,7 @@
         <ion-back-button defaultHref="/"></ion-back-button>
       </ion-buttons>
       <ion-title>{{ 'scan.title' | translate }}</ion-title>
-      <ion-text slot="end" *ngIf="isMultiQr">{{ percentageScanned | percentage }}</ion-text>
+      <ion-text slot="end" class="ion-padding-end" *ngIf="isMultiQr">{{ percentageScanned | percentage }}</ion-text>
     </ion-toolbar>
   </ion-grid>
 </ion-header>
@@ -19,7 +19,7 @@
         <ng-container *ngIf="isMultiQr">{{ 'scan.multi-qr_text' | translate }}</ng-container>
       </p>
     </ion-text>
-    <ion-progress-bar *ngIf="isMultiQr" style="height: 8px" color="light" [value]="percentageScanned"></ion-progress-bar>
+    <ion-progress-bar *ngIf="isMultiQr" style="height: 8px" color="secondary" [value]="percentageScanned"></ion-progress-bar>
 
     <ion-row [hidden]="!hasCameraPermission" class="row--height__100 ion-justify-content-center ion-align-items-center">
       <ion-col class="guides--container content--align__center-center">

diff --git a/src/app/pages/settings/settings.html b/src/app/pages/settings/settings.html
@@ -23,9 +23,9 @@
         <ion-icon name="help-circle-outline" slot="start"></ion-icon>
         {{ 'settings.faq_label' | translate }}
       </ion-item>
-      <ion-item (click)="telegram()" detail="true">
+      <ion-item (click)="discord()" detail="true">
         <ion-icon name="chatbubbles-outline" slot="start"></ion-icon>
-        {{ 'settings.telegram_label' | translate }}
+        {{ 'settings.discord_label' | translate }}
       </ion-item>
       <ion-item (click)="share()" detail="true">
         <ion-icon name="share-outline" slot="start"></ion-icon>

diff --git a/src/app/pages/settings/settings.ts b/src/app/pages/settings/settings.ts
@@ -3,7 +3,6 @@ import { Component, Inject } from '@angular/core'
 import { Router } from '@angular/router'
 import { SharePlugin } from '@capacitor/core'
 import { AlertController, ModalController, Platform } from '@ionic/angular'
-import { TranslateService } from '@ngx-translate/core'
 import { SHARE_PLUGIN } from 'src/app/capacitor-plugins/injection-tokens'
 import { BrowserService } from 'src/app/services/browser/browser.service'
 import { IACService } from 'src/app/services/iac/iac.service'
@@ -22,7 +21,6 @@ export class SettingsPage {
     public readonly serializerService: SerializerService,
     private readonly router: Router,
     private readonly modalController: ModalController,
-    private readonly translateService: TranslateService,
     private readonly clipboardProvider: ClipboardService,
     private readonly iacService: IACService,
     private readonly browserService: BrowserService,
@@ -76,48 +74,8 @@ export class SettingsPage {
     this.browserService.openUrl('https://github.com/airgap-it/airgap-wallet/issues')
   }
 
-  public async telegram(): Promise<void> {
-    const alert: HTMLIonAlertElement = await this.alertCtrl.create({
-      header: this.translateService.instant('settings.alert_title'),
-      inputs: [
-        {
-          type: 'radio',
-          label: this.translateService.instant('settings.channel.international'),
-          value: 'International',
-          checked: true
-        },
-        {
-          type: 'radio',
-          label: this.translateService.instant('settings.channel.chinese'),
-          value: 'Chinese'
-        }
-      ],
-      buttons: [
-        {
-          text: this.translateService.instant('settings.alert_cancel'),
-          role: 'cancel',
-          cssClass: 'secondary',
-          handler: (): void => {
-            console.log('Confirm Cancel')
-          }
-        },
-        {
-          text: this.translateService.instant('settings.telegram_label'),
-          handler: (data: string): void => {
-            switch (data) {
-              case 'Chinese':
-                this.browserService.openUrl('https://t.me/AirGap_cn')
-                break
-              case 'International':
-              default:
-                this.browserService.openUrl('https://t.me/AirGap')
-            }
-          }
-        }
-      ]
-    })
-
-    alert.present().catch(handleErrorSentry(ErrorCategory.IONIC_ALERT))
+  public async discord(): Promise<void> {
+    this.browserService.openUrl('https://discord.gg/gnWqCQsteh')
   }
 
   public translate(): void {
@@ -144,7 +102,7 @@ export class SettingsPage {
   }
 
   public faq(): void {
-    this.browserService.openUrl('https://airgap.it/#faq')
+    this.browserService.openUrl('https://support.airgap.it')
   }
 
   public aboutBeacon(): void {