Feat/4.11.1 (#132)

* Mobile table styles * 4.11.1 * 4.11.1 * 4.11.1
dev-ptera · Feb 14, 2024 · f36ca96 · f36ca96
1 parent 5d3afe7
commit f36ca96
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Change Log
 
+## v4.11.1 (February 14, 2024)
+
+### Changed
+
+-  Changed new wallet styles and secure secret verbiage. 
+-  Changed mobile dashboard's table-view styles.
+
+### Fixed
+
+-  Fixed excessive warn logging of missing TheBananoStand API query params. 
+-  Fixed warn color palettes not applying since `4.11.0`.
+-  Fixed copy-icon button vertical alignment.
+-  Fixed expansion panel indicator icon alignment.
+
 ## v4.11.0 (February 12, 2024)
 
 ### Changed

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "thebananostand",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --host 0.0.0.0",

diff --git a/src/app/overlays/actions/create-wallet/create-wallet.component.scss b/src/app/overlays/actions/create-wallet/create-wallet.component.scss
@@ -15,6 +15,6 @@
         button {
             margin-left: 8px;
         }
-        @include common.small-icon-button(16px, 32px);
+        @include common.small-icon-button();
     }
 }
diff --git a/src/app/overlays/actions/create-wallet/create-wallet.component.ts b/src/app/overlays/actions/create-wallet/create-wallet.component.ts
@@ -14,6 +14,10 @@ import { SecretService } from '@app/services/secret.service';
         <div class="create-wallet-overlay overlay-action-container">
             <div class="overlay-header">Create a new wallet?</div>
             <div class="overlay-body">
+                <div class="mat-body-2" style="margin-top: 0px; margin-bottom: 16px">
+                    This secret text allows you to access your Banano using any wallet, like
+                    <a href="https://kalium.banano.cc/" target="_blank" class="link">Kalium</a>.
+                </div>
                 <mat-accordion style="margin-bottom: 24px">
                     <mat-expansion-panel [expanded]="true" class="mat-elevation-z0 divider-border">
                         <mat-expansion-panel-header>
@@ -50,13 +54,9 @@ import { SecretService } from '@app/services/secret.service';
                         </div>
                     </mat-expansion-panel>
                 </mat-accordion>
-                <div class="mat-body-2" style="margin-top: 24px; margin-bottom: 16px">
-                    This secret text allows you to access your Banano using any wallet, like
-                    <a href="https://kalium.banano.cc/" target="_blank" class="link">Kalium</a>.
-                </div>
-                <div class="mat-body-2">
+                <div class="mat-body-2" style="margin-top: 16px;">
                     Losing this secret means losing access to your accounts.
-                    <strong>Save your secret phrase in a secure place & don't lose it!</strong>
+                    <strong>Save your seed and/or mnemonic phrase in a secure place & don't lose it!</strong>
                 </div>
                 <mat-checkbox style="margin: 16px 0" [(ngModel)]="hasConfirmedBackup">
                     I have saved my secret

diff --git a/src/app/pages/account/account.component.scss b/src/app/pages/account/account.component.scss
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     padding: 4px 36px 4px 36px !important;
-    @include common.small-icon-button(16px, 32px);
+    @include common.small-icon-button();
     * {
         color: var(--text-contrast);
     }

diff --git a/src/app/pages/account/components/transaction/transaction.component.scss b/src/app/pages/account/components/transaction/transaction.component.scss
@@ -15,7 +15,7 @@
     }
     .copy-address-button {
         margin-left: 4px;
-        @include small-icon-button.small-icon-button(16px, 32px);
+        @include small-icon-button.small-icon-button();
     }
 }
 

diff --git a/src/app/pages/dashboard/components/account-table/account-table.component.scss b/src/app/pages/dashboard/components/account-table/account-table.component.scss
@@ -16,7 +16,16 @@
         border-radius: 1rem;
         th,
         td {
-            padding: 0 8px !important;
+            font-size: 13px;
+            padding: 0 4px;
+        }
+        th:first-child,
+        td:first-child {
+            padding-left: 32px;
+        }
+        th:last-child,
+        td:last-child {
+            padding-right: 4px;
         }
     }
 }
diff --git a/src/app/pages/dashboard/components/account-table/account-table.component.ts b/src/app/pages/dashboard/components/account-table/account-table.component.ts
@@ -48,7 +48,9 @@ import * as Colors from '@brightlayer-ui/colors';
             </th>
             <td mat-cell *matCellDef="let element">
                 <div style="display: flex; align-items: center; flex-wrap: wrap">
-                    <div style="margin-right: 16px">{{ element.balance | appComma }}</div>
+                    <div [style.marginRight.px]="vp.sm || element.balance === 0 ? 0 : 16">
+                        {{ element.balance | appComma }}
+                    </div>
                     <div
                         class="hint mat-caption"
                         *ngIf="!vp.sm && element.balance !== 0"

diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
@@ -67,14 +67,14 @@ export class DashboardComponent {
     }
 
     private _checkForApiRequestViaQueryParams(params: Params): void {
-        if (!this._isValidParams(params)) {
-            if (params) {
-                console.warn('Invalid query parameters provided while creating a BananoStand API request.');
-                console.warn('Parameter Options: "request (send | change), address, amount (send only)');
-                console.warn('Parameters provided: ', params);
-            }
+        if (this._util.isEmpty(params)) {
             return;
         }
+        if (!this._isValidParams(params)) {
+            console.warn('Invalid query parameters provided while creating a BananoStand API request.');
+            console.warn('Parameter Options: "request (send | change), address, amount (send only)');
+            console.warn('Parameters provided: ', params);
+        }
         if (this.vp.sm) {
             setTimeout(() => {
                 this._sheet.open(ApiRequestBottomSheetComponent);

diff --git a/src/app/services/util.service.ts b/src/app/services/util.service.ts
@@ -76,6 +76,15 @@ export class UtilService {
         return address && address.length === 64 && address.startsWith('ban_');
     }
 
+    isEmpty(obj: object): boolean {
+        for (const prop in obj) {
+            if (Object.hasOwn(obj, prop)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
     isValidHex(hex: string): boolean {
         const validHexChars: string[] = [
             '0',

diff --git a/src/assets/themes/mixins/mdc-customization.scss b/src/assets/themes/mixins/mdc-customization.scss
@@ -1,5 +1,18 @@
 @mixin mdc-overrides() {
 
+    .mat-expansion-panel-header.mat-expanded {
+        .mat-expansion-indicator {
+            margin-top: 12px;
+        }
+    }
+    .mat-expansion-panel-header {
+        .mat-expansion-indicator {
+            transition: all 200ms;
+            margin-top: 0px;
+            margin-bottom: 4px;
+        }
+    }
+
     .mat-mdc-menu-item .mat-icon-no-color, .mat-mdc-menu-submenu-icon {
         color: var(--icon-secondary);
     }

diff --git a/src/assets/themes/mixins/small-icon-button.scss b/src/assets/themes/mixins/small-icon-button.scss
@@ -1,4 +1,5 @@
-@mixin small-icon-button($icon-size, $button-size) {
+@mixin small-icon-button() {
+    $icon-size: 16px;
     mat-icon {
         font-size: $icon-size;
         width: $icon-size;
@@ -7,7 +8,7 @@
     }
     .mat-mdc-icon-button,
     .mat-mdc-icon-button .mat-mdc-button-touch-target {
-        --mdc-icon-button-state-layer-size: #{$button-size};
+        --mdc-icon-button-state-layer-size: 28px;
         padding: 0;
         height: var(--mdc-icon-button-state-layer-size);
         width: var(--mdc-icon-button-state-layer-size);

diff --git a/src/assets/themes/palettes/palette-classes.scss b/src/assets/themes/palettes/palette-classes.scss
@@ -3,7 +3,7 @@
     .primary * {
         color: var(--primary);
     }
-    .warn, .warn * {
+    .warn, .warn *, .mat-warn {
         color: var(--warn);
     }
 
@@ -19,6 +19,10 @@
         color: var(--icon-primary);
     }
 
+    .mat-icon.mat-warn {
+        color: var(--warn);
+    }
+
     .icon-secondary {
         color: var(--icon-secondary);
     }

diff --git a/tsconfig.json b/tsconfig.json
@@ -12,6 +12,7 @@
         "importHelpers": true,
         "target": "es2015",
         "module": "es2020",
+        "lib": ["es2022", "dom"],
         "allowSyntheticDefaultImports": true,
         "paths": {
             "@angular/*": ["../node_modules/@angular/*"],
@@ -22,7 +23,6 @@
             "@app/overlays/*": ["app/overlays/*"],
             "stream": ["node_modules/stream-browserify"]
         },
-        "lib": ["es2021", "dom"]
     },
     "exclude": [
         "cypress",