fix setup wizard styles and remove diagnostic from angular.json (#2656)

web/angular.json

@@ -302,6 +302,7 @@
               }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",
@@ -393,136 +394,6 @@
         }
       }
     },
-    "diagnostic-ui": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "projects/diagnostic-ui",
-      "sourceRoot": "projects/diagnostic-ui/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/raw/diagnostic-ui",
-            "index": "projects/diagnostic-ui/src/index.html",
-            "main": "projects/diagnostic-ui/src/main.ts",
-            "polyfills": "projects/diagnostic-ui/src/polyfills.ts",
-            "tsConfig": "projects/diagnostic-ui/tsconfig.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "projects/shared/assets",
-                "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
-              }
-            ],
-            "styles": [
-              "projects/shared/styles/variables.scss",
-              "projects/shared/styles/global.scss",
-              "projects/shared/styles/shared.scss",
-              "projects/diagnostic-ui/src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "projects/diagnostic-ui/src/environments/environment.ts",
-                  "with": "projects/diagnostic-ui/src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                }
-              ]
-            },
-            "ci": {
-              "progress": false
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "diagnostic-ui:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "diagnostic-ui:build:production"
-            },
-            "development": {
-              "browserTarget": "diagnostic-ui:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "diagnostic-ui:build"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "projects/diagnostic-ui/src/**/*.ts",
-              "projects/diagnostic-ui/src/**/*.html"
-            ]
-          }
-        },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "diagnostic-ui:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "diagnostic-ui:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "diagnostic-ui:ionic-cordova-build",
-            "devServerTarget": "diagnostic-ui:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "diagnostic-ui:ionic-cordova-build:production",
-              "devServerTarget": "diagnostic-ui:serve:production"
-            }
-          }
-        }
-      }
-    },
     "marketplace": {
       "projectType": "library",
       "root": "projects/marketplace",

web/projects/setup-wizard/src/app/pages/loading/loading.module.ts

@@ -1,12 +1,17 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { FormsModule } from '@angular/forms'
+import { TuiProgressModule } from '@taiga-ui/kit'
 import { LoadingPage } from './loading.page'
 import { LoadingPageRoutingModule } from './loading-routing.module'
+import { IonicModule } from '@ionic/angular'
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, LoadingPageRoutingModule],
+  imports: [
+    CommonModule,
+    IonicModule,
+    TuiProgressModule,
+    LoadingPageRoutingModule,
+  ],
   declarations: [LoadingPage],
 })
 export class LoadingPageModule {}

web/projects/setup-wizard/src/app/pages/loading/loading.page.html

@@ -1,17 +1,23 @@
-<section *ngIf="progress$ | async as progress">
-  <h1 [style.font-size.rem]="2.5" [style.margin.rem]="1">
-    Setting up your server
-  </h1>
-  <div class="center-wrapper" *ngIf="progress.total">
-    Progress: {{ (progress.total * 100).toFixed(0) }}%
-  </div>
-
-  <progress
-    tuiProgressBar
-    class="progress"
-    [style.max-width.rem]="40"
-    [style.margin]="'1rem auto'"
-    [attr.value]="progress.total"
-  ></progress>
-  <p>{{ progress.message }}</p>
-</section>
+<ion-content>
+  <ion-grid>
+    <ion-row class="ion-align-items-center">
+      <ion-col>
+        <section *ngIf="progress$ | async as progress">
+          <h1 [style.font-size.rem]="2" [style.margin-bottom.rem]="2">
+            Setting up your server
+          </h1>
+          <div *ngIf="progress.total">
+            Progress: {{ (progress.total * 100).toFixed(0) }}%
+          </div>
+          <progress
+            tuiProgressBar
+            [style.max-width.rem]="40"
+            [style.margin]="'1rem auto'"
+            [attr.value]="progress.total"
+          ></progress>
+          <p>{{ progress.message }}</p>
+        </section>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

web/projects/setup-wizard/src/app/pages/loading/loading.page.scss

@@ -0,0 +1,9 @@
+section {
+  border-radius: 0.25rem;
+  padding: 3rem;
+  margin: 2rem;
+  text-align: center;
+  background: #e0e0e0;
+  color: #333;
+  --tui-clear-inverse: rgba(0, 0, 0, 0.1);
+}

web/projects/ui/src/app/pages/init/init.page.html

@@ -2,7 +2,7 @@
   <h1 [style.font-size.rem]="2.5" [style.margin.rem]="1">
     Initializing StartOS
   </h1>
-  <div class="center-wrapper" *ngIf="progress.total">
+  <div *ngIf="progress.total">
     Progress: {{ (progress.total * 100).toFixed(0) }}%
   </div>