feat: implement mobile header (#2559)

* feat: implement mobile header

* chore: remove remaining ties to old ui project

* chore: remove ionic from login page

* chore: address comments

web/projects/shared/src/components/initializing/initializing.component.html

@@ -1,32 +1,15 @@
-<ion-content>
-  <ion-grid>
-    <ion-row class="ion-align-items-center">
-      <ion-col class="ion-text-center">
-        <ion-card *tuiLet="progress$ | async as progress" color="dark">
-          <ion-card-header>
-            <ion-card-title>Initializing StartOS</ion-card-title>
-            <div class="center-wrapper">
-              <ion-card-subtitle *ngIf="progress">
-                Progress: {{ (progress * 100).toFixed(0) }}%
-              </ion-card-subtitle>
-            </div>
-          </ion-card-header>
+<div *tuiLet="progress$ | async as progress" class="card">
+  <h1 class="title">Initializing StartOS</h1>
+  <div *ngIf="progress" class="center-wrapper">
+    Progress: {{ (progress * 100).toFixed(0) }}%
+  </div>
 
-          <ion-card-content class="ion-margin">
-            <ion-progress-bar
-              color="tertiary"
-              class="progress"
-              [type]="
-                progress && progress < 1 ? 'determinate' : 'indeterminate'
-              "
-              [value]="progress || 0"
-            ></ion-progress-bar>
-            <p>{{ getMessage(progress) }}</p>
-          </ion-card-content>
-        </ion-card>
+  <progress
+    tuiProgressBar
+    class="progress"
+    [attr.value]="progress && progress < 1 ? progress : null"
+  ></progress>
+  <p>{{ getMessage(progress) }}</p>
+</div>
 
-        <logs-window class="logs" />
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</ion-content>
+<logs-window class="logs" />

web/projects/shared/src/components/initializing/initializing.component.scss

@@ -1,11 +1,22 @@
-ion-card-title {
-  font-size: 42px;
+.card {
+  border-radius: 0.25rem;
+  padding: 1rem;
+  margin: 1.5rem;
+  text-align: center;
+  // TODO: Theme
+  background: #e0e0e0;
+  color: #333;
+  --tui-clear-inverse: rgba(0, 0, 0, 0.1);
+}
+
+.title {
+  font-size: 2.5rem;
+  margin: 1rem;
 }
 
 .progress {
-  max-width: 700px;
-  padding-bottom: 20px;
-  margin: auto auto 40px;
+  max-width: 40rem;
+  margin: 1rem auto;
 }
 
 .logs {
@@ -13,7 +24,7 @@ ion-card-title {
   flex-direction: column;
   height: 18rem;
   padding: 1rem;
-  margin: 1.5rem 0.75rem;
+  margin: 0 1.5rem auto;
   text-align: left;
   overflow: hidden;
   border-radius: 2rem;

web/projects/shared/src/components/initializing/initializing.module.ts

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
 import { TuiLetModule } from '@taiga-ui/cdk'
+import { TuiProgressModule } from '@taiga-ui/kit'
 
 import { LogsWindowComponent } from './logs-window.component'
 import { InitializingComponent } from './initializing.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, TuiLetModule, LogsWindowComponent],
+  imports: [CommonModule, TuiLetModule, LogsWindowComponent, TuiProgressModule],
   declarations: [InitializingComponent],
   exports: [InitializingComponent],
 })

web/projects/shared/src/components/markdown/markdown.component.html

@@ -1,8 +1,6 @@
-<ion-item *ngIf="error$ | async as error">
-  <ion-label>
-    <ion-text safeLinks color="danger">{{ error }}</ion-text>
-  </ion-label>
-</ion-item>
+<tui-notification *ngIf="error$ | async as error" status="error" safeLinks>
+  {{ error }}
+</tui-notification>
 
 <div
   *ngIf="content$ | async as result; else loading"
@@ -12,5 +10,5 @@
 ></div>
 
 <ng-template #loading>
-  <text-spinner [text]="'Loading ' + title | titlecase"></text-spinner>
+  <tui-loader [textContent]="'Loading ' + title | titlecase" />
 </ng-template>

web/projects/shared/src/components/markdown/markdown.component.module.ts

@@ -1,22 +1,21 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
+import { TuiLoaderModule, TuiNotificationModule } from '@taiga-ui/core'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 
 import { MarkdownPipeModule } from '../../pipes/markdown/markdown.module'
 import { SafeLinksDirective } from '../../directives/safe-links.directive'
-import { TextSpinnerComponentModule } from '../text-spinner/text-spinner.component.module'
 import { MarkdownComponent } from './markdown.component'
 
 @NgModule({
   declarations: [MarkdownComponent],
   imports: [
     CommonModule,
-    IonicModule,
     MarkdownPipeModule,
-    TextSpinnerComponentModule,
     SafeLinksDirective,
     NgDompurifyModule,
+    TuiLoaderModule,
+    TuiNotificationModule,
   ],
   exports: [MarkdownComponent],
 })