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>
Start9Labs · Mar 10, 2023 · 7c1e2bf · 7c1e2bf
1 parent 181b44e
commit 7c1e2bf
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 78 deletions.
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -43,8 +43,6 @@
               }
             ],
             "styles": [
-              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
-              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/projects/marketplace/package.json b/frontend/projects/marketplace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/marketplace",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",

diff --git a/frontend/projects/marketplace/src/pages/show/about/about.component.html b/frontend/projects/marketplace/src/pages/show/about/about.component.html
@@ -1,22 +1,16 @@
 <!-- release notes -->
 <ion-item-divider>
   New in {{ pkg.manifest.version | displayEmver }}
-  <ion-button
-    routerLink="notes"
-    class="all-notes"
-    fill="clear"
-    color="dark"
-    strong
-  >
-    Past Release Notes
-    <ion-icon slot="end" name="arrow-forward"></ion-icon>
-  </ion-button>
 </ion-item-divider>
 <ion-item lines="none" color="transparent">
   <ion-label>
     <div [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
   </ion-label>
 </ion-item>
+<ion-button routerLink="notes" fill="clear" strong>
+  Past Release Notes
+  <ion-icon slot="end" name="arrow-forward"></ion-icon>
+</ion-button>
 <!-- description -->
 <ion-item-divider>Description</ion-item-divider>
 <ion-item lines="none" color="transparent">
@@ -29,7 +23,7 @@ <h2>{{ pkg.manifest.description.long }}</h2>
   style="padding: 4px 0 10px 14px"
 >
   <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
-    View marketing website
+    View website
     <ion-icon slot="end" name="open-outline"></ion-icon>
   </ion-button>
 </div>
diff --git a/frontend/projects/setup-wizard/src/app/pages/home/home.page.html b/frontend/projects/setup-wizard/src/app/pages/home/home.page.html
@@ -78,11 +78,7 @@ <h2><ion-text color="danger">Recover</ion-text></h2>
                     <h2>
                       <ion-text color="success">Use Existing Drive</ion-text>
                     </h2>
-                    <p>
-                      Attach an existing embassyOS data drive (
-                      <b>not</b>
-                      a backup)
-                    </p>
+                    <p>Attach an existing embassyOS data drive (<b>not</b> a backup)</p>
                   </ion-label>
                 </ion-item>
 

diff --git a/frontend/projects/shared/package.json b/frontend/projects/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/shared",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",

diff --git a/frontend/projects/ui/src/app/pages/login/login.page.html b/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"

diff --git a/frontend/projects/ui/src/app/pages/updates/updates.page.html b/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 @@ <h1>{{ host.name }}</h1>
                         <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 @@ <h1>{{ host.name }}</h1>
                                 />
                               </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 @@ <h2 class="inline">
                                   <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 @@ <h2 class="inline">
                               *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 @@ <h2 class="inline">
                         </ion-item>
                         <div class="ion-padding" slot="content">
                           <div class="notes">
+                            <h4>What's new</h4>
                             <p
                               [innerHTML]="pkg.manifest['release-notes'] | markdown"
                             ></p>

diff --git a/frontend/projects/ui/src/app/pages/updates/updates.page.scss b/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;
 }

diff --git a/frontend/projects/ui/src/app/pages/updates/updates.page.ts b/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 } : {}