Update/misc fe (#2463)

* update to use transparent icon; add icon to login * update setup mocks to imitate reality * update webmanifest version * fix version in webmanifest * reset icons with background; update login page style * adjust login header * cleanup + adjust icon size * revert icon * cleanup and reposition error message
Start9Labs · Oct 18, 2023 · bb6a484 · bb6a484
1 parent 2467279
commit bb6a484
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 106 deletions.
diff --git a/frontend/projects/setup-wizard/src/app/services/api/mock-api.service.ts b/frontend/projects/setup-wizard/src/app/services/api/mock-api.service.ts
@@ -56,14 +56,14 @@ export class MockApiService extends ApiService {
     await pauseFor(1000)
     return [
       {
-        logicalname: 'abcd',
-        vendor: 'Samsung',
-        model: 'T5',
+        logicalname: '/dev/nvme0n1p3',
+        vendor: 'Unknown Vendor',
+        model: 'Samsung SSD - 970 EVO Plus 2TB',
         partitions: [
           {
             logicalname: 'pabcd',
             label: null,
-            capacity: 73264762332,
+            capacity: 1979120929996,
             used: null,
             'embassy-os': {
               version: '0.2.17',
@@ -75,13 +75,13 @@ export class MockApiService extends ApiService {
             guid: null,
           },
         ],
-        capacity: 123456789123,
+        capacity: 1979120929996,
         guid: 'uuid-uuid-uuid-uuid',
       },
       {
         logicalname: 'dcba',
-        vendor: 'Crucial',
-        model: 'MX500',
+        vendor: 'CT1000MX',
+        model: '500SSD1',
         partitions: [
           {
             logicalname: 'pbcba',
@@ -98,13 +98,13 @@ export class MockApiService extends ApiService {
             guid: null,
           },
         ],
-        capacity: 124456789123,
+        capacity: 1000190509056,
         guid: null,
       },
       {
-        logicalname: 'wxyz',
-        vendor: 'SanDisk',
-        model: 'Specialness',
+        logicalname: '/dev/sda',
+        vendor: 'ASMT',
+        model: '2115',
         partitions: [
           {
             logicalname: 'pbcba',
@@ -121,7 +121,7 @@ export class MockApiService extends ApiService {
             guid: 'guid-guid-guid-guid',
           },
         ],
-        capacity: 123459789123,
+        capacity: 1000190509056,
         guid: null,
       },
     ]

diff --git a/frontend/projects/ui/src/app/pages/login/login.page.html b/frontend/projects/ui/src/app/pages/login/login.page.html
@@ -23,53 +23,58 @@ <h2 style="font-weight: bold">Http detected</h2>
     <ion-grid class="grid">
       <ion-row class="row">
         <ion-col>
-          <ion-card class="card">
+          <ion-card>
+            <img
+              alt="StartOS Icon"
+              class="header-icon"
+              src="assets/img/icon.png"
+            />
             <ion-card-header>
-              <ion-card-title class="title">StartOS Login</ion-card-title>
+              <ion-card-title class="title">Login to StartOS</ion-card-title>
             </ion-card-header>
-
             <ion-card-content class="ion-margin">
-              <form class="form" (submit)="submit()">
-                <ion-item-group>
-                  <ion-item color="dark" class="login-item">
+              <form (submit)="submit()">
+                <ion-item color="dark" fill="solid">
+                  <ion-icon
+                    slot="start"
+                    size="small"
+                    color="base"
+                    name="key-outline"
+                    style="margin-right: 16px"
+                  ></ion-icon>
+                  <ion-input
+                    name="password"
+                    placeholder="Password"
+                    [type]="unmasked ? 'text' : 'password'"
+                    [(ngModel)]="password"
+                    (ionChange)="error = ''"
+                    maxlength="64"
+                  ></ion-input>
+                  <ion-button
+                    slot="end"
+                    fill="clear"
+                    color="dark"
+                    (click)="unmasked = !unmasked"
+                  >
                     <ion-icon
-                      slot="start"
-                      name="key-outline"
-                      style="margin-right: 16px"
+                      slot="icon-only"
+                      size="small"
+                      [name]="unmasked ? 'eye-off-outline' : 'eye-outline'"
                     ></ion-icon>
-                    <ion-input
-                      name="password"
-                      placeholder="Password"
-                      [type]="unmasked ? 'text' : 'password'"
-                      [(ngModel)]="password"
-                      (ionChange)="error = ''"
-                      maxlength="64"
-                    ></ion-input>
-                    <ion-button
-                      fill="clear"
-                      color="light"
-                      (click)="unmasked = !unmasked"
-                    >
-                      <ion-icon
-                        slot="icon-only"
-                        size="small"
-                        [name]="unmasked ? 'eye-off-outline' : 'eye-outline'"
-                      ></ion-icon>
-                    </ion-button>
-                  </ion-item>
-                </ion-item-group>
+                  </ion-button>
+                </ion-item>
+                <p class="error ion-text-center">
+                  <ion-text color="danger">{{ error }}</ion-text>
+                </p>
                 <ion-button
-                  class="login-button side-button"
+                  class="login-button"
                   type="submit"
                   expand="block"
                   color="tertiary"
                 >
                   Login
                 </ion-button>
               </form>
-              <p class="error">
-                <ion-text color="danger">{{ error }}</ion-text>
-              </p>
             </ion-card-content>
           </ion-card>
         </ion-col>

diff --git a/frontend/projects/ui/src/app/pages/login/login.page.scss b/frontend/projects/ui/src/app/pages/login/login.page.scss
@@ -1,15 +1,5 @@
 .content {
-  --background: #222428;
-}
-
-.card {
-  background: #414141;
-}
-
-.title {
-  margin: 24px 0 16px;
-  color: #e0e0e0;
-  font-size: 1.8rem;
+  --background: #333333;
 }
 
 .grid {
@@ -23,12 +13,6 @@
   text-align: center;
 }
 
-.error {
-  display: block;
-  text-align: left;
-  padding-top: 4px;
-}
-
 .banner {
   position: absolute;
   padding: 20px;
@@ -41,58 +25,52 @@
   }
 }
 
-.side-button {
-  --border-radius: 0 4px 4px 0;
-}
-
-.login-item {
-  --border-style: solid;
-  --border-color: var(--ion-color-light);
-  --border-radius: 4px 0 0 4px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
-  .side-button {
-    --border-radius: 4px;
-  }
-}
-
 ion-card {
-  background: var(--ion-color-step-200);
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 44px;
+  background: #414141;
+  box-shadow: 0 4px 4px rgba(17, 17, 17, 0.144);
+  border-radius: 35px;
   min-height: 16rem;
+  contain: unset;
+  overflow: unset;
+  position: relative;
 }
 
-.login-button {
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  height: 49px;
-  font-size: larger;
-  font-weight: bold;
+ion-item {
+  --background: transparent;
+  --border-radius: 0px;
+}
+
+.title {
+  padding-top: 55px;
+  color: #e0e0e0;
+  font-size: 1.3rem;
 }
 
-.form {
-  margin-bottom: 12px;
-
-  * {
-    display: inline-block;
-    vertical-align: middle;
+.header {
+  &-icon {
+    width: 100px;
+    position: absolute;
+    left: 50%;
+    margin-left: -50px;
+    top: -17%;
+    z-index: 100;
   }
 }
 
+.login-button {
+  height: 45px;
+  width: 120px;
+  --border-radius: 50px;
+  margin: 0 auto;
+  margin-top: 27px;
+  margin-bottom: 10px;
+}
+
 .item-interactive {
   --highlight-background: #5260ff !important;
 }
 
-
-@media (max-width: 500px) {
-  .side-button {
-    --border-radius: 4px;
-    margin-top: 0.7rem;
-  }
-
-  .login-item {
-    --border-radius: 4px;
-  }
+.error {
+  display: block;
+  padding-top: 4px;
 }
diff --git a/frontend/projects/ui/src/manifest.webmanifest b/frontend/projects/ui/src/manifest.webmanifest
@@ -5,8 +5,8 @@
   "background_color": "#1e1e1e",
   "display": "standalone",
   "scope": ".",
-  "start_url": "/?version=0344",
-  "id": "/?version=0344",
+  "start_url": "/?version=035",
+  "id": "/?version=035",
   "icons": [
     {
       "src": "assets/img/icon.png",