layout improvements

jlcvp · Jul 19, 2024 · f1c0f03 · f1c0f03
1 parent c0f7792
commit f1c0f03
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 25 deletions.
diff --git a/src/app/components/account-detail/account-detail.component.html b/src/app/components/account-detail/account-detail.component.html
@@ -13,16 +13,16 @@
       </ion-row>
       <ion-row class="center-vertical">
         <ion-col size="auto" class="center-vertical">
-          <ion-button size="large" fill="clear" (click)="copyCode($event)">
-            <ion-text color="light"><strong>{{token}}</strong></ion-text>
+          <ion-button class="large-text" size="large" fill="clear" (click)="copyCode($event)">
+            <ion-text class="code-color"><strong>{{token}}</strong></ion-text>
             <ion-icon slot="end" name="copy-outline"></ion-icon>
           </ion-button>
         </ion-col>
 
       </ion-row>
       <ion-row>
         <ion-col size="12">
-          Expira em: <h2><strong>{{timer}}</strong>s</h2>
+         <h2>{{timer}}s</h2>
         </ion-col>
       </ion-row>
   </ng-container>

diff --git a/src/app/components/account-detail/account-detail.component.scss b/src/app/components/account-detail/account-detail.component.scss
@@ -10,4 +10,12 @@
 
 .service-logo {
     object-fit: scale-down;
+}
+
+.large-text {
+    font-size: x-large;
+}
+
+.code-color {
+    color: var(--ion-text-color, var(--ion-color-primary), #555);
 }
diff --git a/src/app/components/account-list/account-list.component.html b/src/app/components/account-list/account-list.component.html
@@ -1,7 +1,7 @@
 <div class="account-list-container">
   <ion-grid *ngIf="isGridType; else listView">
     <ion-row>
-      <ion-col *ngFor="let account of accounts" size-xs="4" size-sm="3" size-md="2" size-lg="2" size-xl="2">
+      <ion-col *ngFor="let account of accounts" size-xs="4" size-sm="3" size-md="2">
         <ion-card (click)="selectAccount(account)" class="ion-no-padding ion-no-margin square fill-parent ion-activatable ripple-parent">
           <ion-ripple-effect></ion-ripple-effect>
           <ion-card-content class="ion-no-padding">
@@ -16,7 +16,7 @@
   </ion-grid>
   <ng-template #listView>
     <ion-list>
-      <ion-item *ngFor="let account of accounts" (click)="selectAccount(account)">
+      <ion-item button *ngFor="let account of accounts" (click)="selectAccount(account)">
         <ion-thumbnail slot="start">
           <img class="thumb-img" [src]="account.getLogo()">
         </ion-thumbnail>

diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
@@ -16,11 +16,6 @@ ion-content {
   flex-direction: column;
 }
 
-#code-container {
-  color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))));
-  background-color: var(--ion-card-background, var(--ion-color-light, var(--ion-color-step-50, #f4f4f4)));
-}
-
 #code-container.landscape {
   width: 40%;
   height: 100%;
@@ -44,18 +39,3 @@ ion-content {
   width: 100%;
   height: 60%;
 }
-
-.square-ratio {
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1;
-}
-
-.fill-parent {
-  width: 100%;
-  height: 100%;
-}
-
-.small-text {
-  font-size: 0.87em;
-}