titles to tooltips, transparent padding for logo

openwallet-foundation · Apr 16, 2024 · 1f8bd65 · 1f8bd65
1 parent 34540d2
commit 1f8bd65
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/viewer/src/app/wallets-show/wallets-show.component.html b/viewer/src/app/wallets-show/wallets-show.component.html
@@ -58,23 +58,23 @@ <h1>{{ wallet.name }}</h1>
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutAlign="space-between start">
     <mat-list>
-      <mat-list-item title="{{walletsService.getTooltip('type')}}">
+      <mat-list-item [matTooltip]="walletsService.getTooltip('type')">
         <div matListItemTitle><b>Type</b></div>
         <span matListItemLine>{{ wallet.type }}</span>
       </mat-list-item>
-      <mat-list-item title="{{walletsService.getTooltip('capability')}}">
+      <mat-list-item [matTooltip]="walletsService.getTooltip('capability')">
         <div matListItemTitle><b>Capabilities</b></div>
         <span matListItemLine>{{
           wallet.capability?.join(', ')
         }}</span>
       </mat-list-item>
-      <mat-list-item title="{{walletsService.getTooltip('portability')}}">
+      <mat-list-item [matTooltip]="walletsService.getTooltip('portability')">
         <div matListItemTitle><b>Portability</b></div>
         <span matListItemLine>{{ wallet.portability ?? 'unknown' }}</span>
       </mat-list-item>
     </mat-list>
     <mat-list>
-      <mat-list-item title="{{walletsService.getTooltip('openSource')}}">
+      <mat-list-item [matTooltip]="walletsService.getTooltip('openSource')">
         <div matListItemTitle><b>Open Source</b></div>
         <span matListItemLine *ngIf="!wallet.downloadSource"
           >{{ wallet.openSource }}
@@ -87,7 +87,7 @@ <h1>{{ wallet.name }}</h1>
         >
       </mat-list-item>
       <mat-list-item>
-        <div matListItemTitle title="{{walletsService.getTooltip('license')}}"><b>License</b></div>
+        <div matListItemTitle [matTooltip]="walletsService.getTooltip('license')"><b>License</b></div>
         <span matListItemLine>{{ wallet.license ?? 'unknown' }}</span>
       </mat-list-item>
     </mat-list>

diff --git a/viewer/src/app/wallets-show/wallets-show.component.scss b/viewer/src/app/wallets-show/wallets-show.component.scss
@@ -24,11 +24,12 @@ a:hover {
 }
 
 .logo {
-  max-height: 200px;
-  max-width: 50%;
+  background-color: transparent;
   border-radius: 20px;
   // make a shadow for the box
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  max-height: 200px;
+  max-width: 50%;
   padding: 10px;
 }
 

diff --git a/viewer/src/app/wallets-show/wallets-show.component.ts b/viewer/src/app/wallets-show/wallets-show.component.ts
@@ -9,6 +9,7 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-wallets-show',
@@ -22,6 +23,7 @@ import { MatListModule } from '@angular/material/list';
     FlexLayoutModule,
     MatIconModule,
     MatListModule,
+    MatTooltipModule,
   ],
   providers: [WalletsService],
   templateUrl: './wallets-show.component.html',