Add img-outline class to logo images and update styles for improved contrast (#34)

* Add img-outline class to logo images and update styles for improved contrast

* Bump version to 2.2.1 in package.json

Author: jlcvp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "authleu",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "author": "Leonardo 'Leu' Pereira <jlcvp@users.noreply.github.com>",
   "homepage": "https://github.com/jlcvp/AuthLeu",
   "description": "Open source authenticator and 2fa code generator to use across multiple devices and platforms",

src/app/home/components/account-detail/account-detail.component.html

@@ -3,7 +3,7 @@
       <ion-row>
         <ion-col size="2"></ion-col>
         <ion-col class="ion-padding" size="8">
-          <img class="service-logo" [src]="account.getLogo()">
+          <img class="service-logo img-outline" [src]="account.getLogo()">
         </ion-col>
         <ion-col size="2"></ion-col>
       </ion-row>

src/app/home/components/account-list/account-list.component.html

@@ -19,7 +19,7 @@
             <!-- <ion-ripple-effect></ion-ripple-effect> -->
             <ion-card-content class="ion-no-padding ion-padding-start ion-padding-end ">
               <ion-thumbnail class="thumbnail-card ion-no-padding ion-padding-top">
-                <img class="thumb-img" [src]="account.getLogo()">
+                <img class="thumb-img img-outline" [src]="account.getLogo()">
               </ion-thumbnail>
               <p class="small-text ion-text-center ion-no-padding ion-padding-top">{{account.label}}</p>
             </ion-card-content>
@@ -47,7 +47,7 @@ <h2>{{ 'ACCOUNT_LIST.ADD_ACCOUNT_LABEL' | translate }}</h2>
       <ng-template #accountsList>
         <ion-item button *ngFor="let account of accounts; trackBy:itemTrackBy" [disabled]="account.isLocked" (click)="selectAccount(account)">
           <ion-thumbnail slot="start" class="thumbnail-flex-container">
-            <img class="thumb-img" [src]="account.getLogo()">
+            <img class="thumb-img img-outline" [src]="account.getLogo()">
           </ion-thumbnail>
           <ion-label>
             <h2>{{ account.label }}</h2>

src/app/home/components/account-modal/account-modal.component.html

@@ -64,14 +64,14 @@
           <ion-row class="full-row">
             <ion-col size-xs="6" size-sm="4" size="4">
               <ion-card class="logo-card" (click)="selectLogo('')" [ngClass]="{ 'selected-logo': !draftLogoURL }">
-                <ion-img class="ion-padding logo-img" [src]="'assets/icon/favicon.png'"></ion-img>
+                <ion-img class="ion-padding" [src]="'assets/icon/favicon.png'"></ion-img>
                 <p>{{ "ADD_ACCOUNT_MODAL.NO_LOGO" | translate }}</p>
               </ion-card>
             </ion-col>
             <ion-col size-xs="6" size-sm="4" *ngFor="let logoResult of searchLogoResults">
               <ion-card class="logo-card" (click)="selectLogo(logoResult)"
                 [ngClass]="{ 'selected-logo': logoResult === draftLogoURL }">
-                <ion-img class="ion-padding ion-margin logo-img" [src]="logoResult"></ion-img>
+                <ion-img class="ion-padding ion-margin img-outline" [src]="logoResult"></ion-img>
               </ion-card>
             </ion-col>
           </ion-row>

src/app/home/components/account-modal/account-modal.component.scss

@@ -6,11 +6,6 @@
   border: 3px solid var(--ion-color-danger);
 }
 
-.logo-img {
-  background-color: whitesmoke;
-  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
-}
-
 .logo-card {
   aspect-ratio: 1;
   display: flex;

src/app/home/components/account-select-modal/account-select-modal.component.html

@@ -21,8 +21,8 @@
       <ion-button (click)="onSelectAllClick()">{{ selectAllLabelKey | translate }}</ion-button>
     </ion-item>
     <ion-item *ngFor="let item of selection; let i = index" button (click)="onItemClick(i)" detail="false" [color]="item.selected ? 'light' : ''">
-      <ion-thumbnail class="thumb" slot="start">
-        <img class="thumb-img" [src]="item.account.getLogo()" />
+      <ion-thumbnail slot="start">
+        <img class="thumb-img img-outline" [src]="item.account.getLogo()" />
       </ion-thumbnail>
       <ion-checkbox labelPlacement="start" [checked]="item.selected">
         {{item.account.label}}

src/app/home/components/account-select-modal/account-select-modal.component.scss

@@ -2,7 +2,3 @@
     object-fit: scale-down;
     padding: 2px;
 }
-
-.thumb {
-    background-color: white;
-}

src/global.scss

@@ -53,4 +53,11 @@ ion-popover.wider-popover {
 
 ion-popover.wider-popover .version-info {
     cursor: pointer;
+}
+
+.img-outline {
+    filter: drop-shadow(1px 1px 0 var(--ion-color-outline, --color)) 
+            drop-shadow(-1px 1px 0 var(--ion-color-outline, --color))
+            drop-shadow(1px -1px 0 var(--ion-color-outline, --color))
+            drop-shadow(-1px -1px 0 var(--ion-color-outline, --color));
 }

src/theme/variables.scss

@@ -63,6 +63,13 @@
 	--ion-color-dark-contrast-rgb: 255, 255, 255;
 	--ion-color-dark-shade: #1a0b22;
 	--ion-color-dark-tint: #34243d;
+	
+	--ion-color-outline: #1d0c2700;
+	--ion-color-outline-rgb: 29, 12, 39;
+	--ion-color-outline-contrast: #ffffff00;
+	--ion-color-outline-contrast-rgb: 255, 255, 255;
+	--ion-color-outline-shade: #1a0b2200;
+	--ion-color-outline-tint: #34243d00;
 }
 
 :root.ion-palette-dark {
@@ -128,4 +135,11 @@
 	--ion-color-dark-contrast-rgb: 0, 0, 0;
 	--ion-color-dark-shade: #d8d2e0;
 	--ion-color-dark-tint: #f7f1ff;
+
+	--ion-color-outline: #f6efff;
+	--ion-color-outline-rgb: 246, 239, 255;
+	--ion-color-outline-contrast: #000000;
+	--ion-color-outline-contrast-rgb: 0, 0, 0;
+	--ion-color-outline-shade: #d8d2e0;
+	--ion-color-outline-tint: #f7f1ff;
 }