Refactor Zap Dialog component: updated HTML and SCSS for button layou…

…t and styling
block-core · Nov 11, 2024 · 09e72f7 · 09e72f7
1 parent 7f1cb20
commit 09e72f7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 19 deletions.
diff --git a/src/app/shared/zap-dialog/zap-dialog.component.html b/src/app/shared/zap-dialog/zap-dialog.component.html
@@ -8,15 +8,9 @@ <h1>⚡Zap</h1>
 
 <mat-dialog-content *ngIf="!showInvoiceSection || !lightningInvoice" class="p-0 mt-4">
     <div class="preset-buttons">
-        <button
-            mat-mini-fab
-            color="primary"
-            *ngFor="let button of zapButtons"
-            (click)="sendZapForm.get('amount')?.setValue(button.value)"
-            aria-label="Set zap amount to {{button.label}}"
-        >
-            <mat-icon>{{ button.icon }}</mat-icon>
-            <span>{{ button.label }}</span>
+        <button class="mr-1 px-3" mat-button *ngFor="let button of zapButtons" (click)="sendZapForm.get('amount')?.setValue(button.value)">
+            <mat-icon class="text-orange-500 icon-size-5">{{ button.icon }}</mat-icon>
+            <span class="ml-2">{{ button.label }}</span>
         </button>
     </div>
 
@@ -63,7 +57,7 @@ <h1>⚡Zap</h1>
     </mat-dialog-actions>
 </mat-dialog-content>
 
-<mat-dialog-content *ngIf="showInvoiceSection && lightningInvoice" class="flex flex-col items-center justify-center text-center h-full space-y-4">
+<mat-dialog-content *ngIf="showInvoiceSection && lightningInvoice" class="flex flex-col items-center justify-center text-center p-1 mt-4">
     <div *ngIf="displayQRCode" class="w-full flex flex-col items-center">
         <span class="mb-2">Scan with phone to pay ({{ invoiceAmount }} sats)</span>
         <mat-divider class="w-full mb-4"></mat-divider>

diff --git a/src/app/shared/zap-dialog/zap-dialog.component.scss b/src/app/shared/zap-dialog/zap-dialog.component.scss
@@ -1,18 +1,15 @@
 .preset-buttons {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 15px;
+    gap: 10px;
     justify-items: center;
     margin-bottom: 20px;
 }
 
 .preset-buttons button {
     font-size: 14px;
     font-weight: bold;
-    width: 100px;
-    height: 60px;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     max-height: 60px !important;
@@ -24,9 +21,5 @@
 }
 
 .lightning-buttons {
-    display: flex;
-    justify-content: space-evenly;
-    margin: 10px 0;
+    margin: 5px 0;
 }
-
-