fix spacing and font size (#2199)

* fix spacing and font size

* fix spacing reverted by linting

* fix styles and event propagation on updates tab

* fix login theme

* remove global font setting

* remove taiga theming for now

* move website button and bump shared and marketplace libs

---------

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/projects/ui/src/app/pages/login/login.page.html

@@ -12,7 +12,7 @@
           <ion-card-content class="ion-margin">
             <form class="form" (submit)="submit()">
               <ion-item-group>
-                <ion-item color="light">
+                <ion-item color="dark">
                   <ion-icon
                     slot="start"
                     name="key-outline"
@@ -25,7 +25,7 @@
                     [(ngModel)]="password"
                     (ionChange)="error = ''"
                   ></ion-input>
-                  <ion-button fill="clear" color="dark" (click)="toggleMask()">
+                  <ion-button fill="clear" color="light" (click)="toggleMask()">
                     <ion-icon
                       slot="icon-only"
                       size="small"

frontend/projects/ui/src/app/pages/updates/updates.page.html

@@ -13,7 +13,7 @@
       <div class="header">
         <div class="header_items">
           <store-icon [url]="host.url" size="48px"></store-icon>
-          <div class="pl-1">
+          <div class="header_title pl-1">
             <h1>{{ host.name }}</h1>
             <p>{{ host.url }}</p>
           </div>
@@ -40,7 +40,7 @@
                         <ion-item slot="header">
                           <ion-col class="accordian-padding">
                             <ion-row
-                              (click)="viewInMarketplace(local)"
+                              (click)="viewInMarketplace($event, local)"
                               style="cursor: pointer"
                             >
                               <ion-thumbnail class="align-center">
@@ -49,8 +49,8 @@
                                 />
                               </ion-thumbnail>
                               <ion-label class="pl-1">
-                                <h1>{{ pkg.manifest.title }}</h1>
-                                <h2 class="inline">
+                                <h2>{{ pkg.manifest.title }}</h2>
+                                <h3 class="inline">
                                   <span>
                                     {{ local.manifest.version | displayEmver }}
                                   </span>
@@ -60,7 +60,7 @@
                                   <ion-text color="success">
                                     {{ pkg.manifest.version | displayEmver }}
                                   </ion-text>
-                                </h2>
+                                </h3>
                                 <p
                                   *ngIf="marketplaceService.updateErrors[pkg.manifest.id] as error"
                                 >
@@ -76,8 +76,8 @@
                               *ngIf="local.state === PackageState.Updating else notUpdating"
                               [current]="local['install-progress'] | installProgress"
                               [max]="100"
-                              [radius]="15"
-                              [stroke]="4"
+                              [radius]="13"
+                              [stroke]="3"
                               [rounded]="true"
                               color="var(--ion-color-primary)"
                             ></round-progress>
@@ -103,6 +103,7 @@
                         </ion-item>
                         <div class="ion-padding" slot="content">
                           <div class="notes">
+                            <h4>What's new</h4>
                             <p
                               [innerHTML]="pkg.manifest['release-notes'] | markdown"
                             ></p>

frontend/projects/ui/src/app/pages/updates/updates.page.scss

@@ -5,6 +5,11 @@
 
 .notes {
   margin-left: 20px;
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+  }
 }
 
 .header {
@@ -18,8 +23,6 @@
   }
 
   h1 {
-    font-size: 28px;
-    letter-spacing: 1px;
     margin: 0 0 5px 0;
   }
 
@@ -53,6 +56,16 @@ ion-item {
   --background-hover: none;
 }
 
+ion-label {
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+  }
+}
+
 .accordian-padding {
   padding: 0.5rem;
 }

frontend/projects/ui/src/app/pages/updates/updates.page.ts

@@ -58,7 +58,8 @@ export class UpdatesPage {
     private readonly alertCtrl: AlertController,
   ) {}
 
-  viewInMarketplace(pkg: PackageDataEntry) {
+  viewInMarketplace(event: Event, pkg: PackageDataEntry) {
+    event.stopPropagation()
     const url = pkg.installed?.['marketplace-url']
     const queryParams = url ? { url } : {}