Refactor home component layout by adjusting heading margins and introducing icon-text containers for better alignment

Author: sondreb

src/app/home/home.css

@@ -364,6 +364,6 @@ drag-scroll::-webkit-scrollbar {
 }
 
 h3 {
-  margin-top: 0.4em;
-  margin-bottom: 0.4em;
+  margin-top: 1em;
+  margin-bottom: 0.6em;
 }

src/app/home/home.html

@@ -59,19 +59,23 @@
           <mat-card-title>Status</mat-card-title>
         </mat-card-header>
         <mat-card-content>
-          <h3><mat-icon>dns</mat-icon> Relays</h3>
+          <h3 class="icon-text-container"><mat-icon>dns</mat-icon> Relays</h3>
           <p>
             @for(relay of relayService.items; track relay.url) {
+              <span class="icon-text-container">
               <mat-icon class="relay-status-icon" *ngIf="!relay.enabled">cloud_off</mat-icon>
               <mat-icon class="relay-status-icon" *ngIf="relay.enabled && relay.status == 1" [ngClass]="['relay-status-' + relay.status]">cloud_done</mat-icon>
               <mat-icon class="relay-status-icon" *ngIf="relay.enabled && relay.status !== 1" [ngClass]="['relay-status-' + relay.status]">cloud</mat-icon>
               {{ relay.nip11?.name }} ({{ relay.eventcount }})
-              <br />
+              </span>
             }
           </p>
-          <h3><mat-icon>info</mat-icon> Data</h3>
+          <h3 class="icon-text-container"><mat-icon>info</mat-icon> Data</h3>
           <p>
-            <mat-icon>people</mat-icon> Following: {{ profileService.following.length }}<br />
+            <span class="icon-text-container">
+              <mat-icon>people</mat-icon> 
+              <span>Following: {{ profileService.following.length }}</span>
+            </span>
           </p>
         </mat-card-content>
       </mat-card>

src/styles.scss

@@ -58,6 +58,17 @@ a:hover {
   ));
 }
 
+.icon-text-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 4px;
+  
+  mat-icon {
+    margin-right: 0px;
+  }
+}
+
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!