chore: update Taiga UI and remove unnecessary styles (#2200)

* chore: update Taiga UI and remove unnecessary styles * update workflow and package lock --------- Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>
2026-03-26 02:11:53 +00:00 · 2023-03-11 01:15:38 +08:00
parent f7793976fb
commit 181b44e117
14 changed files with 95 additions and 161 deletions
--- a/.github/workflows/frontend.yaml
+++ b/.github/workflows/frontend.yaml
@@ -5,7 +5,7 @@ on:
  workflow_dispatch:

 env:
-  NODEJS_VERSION: '16'
+  NODEJS_VERSION: '16.11.0'
  ENVIRONMENT: "dev"

 jobs:
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -45,7 +45,7 @@
            "styles": [
              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
-              "node_modules/@taiga-ui/styles/taiga-ui-global.less",
+              "projects/shared/styles/variables.scss",
              "projects/shared/styles/global.scss",
              "projects/shared/styles/shared.scss",
              "projects/ui/src/styles.scss"
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,12 +23,11 @@
        "@ng-web-apis/resize-observer": "^2.0.0",
        "@start9labs/argon2": "^0.1.0",
        "@start9labs/emver": "^0.1.5",
-        "@taiga-ui/addon-charts": "^3.16.0",
-        "@taiga-ui/cdk": "^3.16.0",
-        "@taiga-ui/core": "^3.16.0",
-        "@taiga-ui/icons": "^3.16.0",
-        "@taiga-ui/kit": "^3.16.0",
-        "@taiga-ui/styles": "^3.16.0",
+        "@taiga-ui/addon-charts": "3.20.0",
+        "@taiga-ui/cdk": "3.20.0",
+        "@taiga-ui/core": "3.20.0",
+        "@taiga-ui/icons": "3.20.0",
+        "@taiga-ui/kit": "3.20.0",
        "angular-svg-round-progressbar": "^9.0.0",
        "ansi-to-html": "^0.7.2",
        "base64-js": "^1.5.1",
@@ -3575,9 +3574,9 @@
      }
    },
    "node_modules/@taiga-ui/addon-charts": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.16.0.tgz",
-      "integrity": "sha512-b4jvFRKle+jBHCq71BH09ut9cs0mztR+ht99c6OZf6IeyHZuNUsVjOqONxpL3FMKbvIWvW+YXQdkcHx3+vDcFA==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.20.0.tgz",
+      "integrity": "sha512-EH/mhwCv7Dq/JaEmGgJnDFr2ZYCzlTJWMS9BHwEZXaLqKVQWiSeXOhB/5sGhuAXiitZb2XvSumlVslAECpe/Kg==",
      "dependencies": {
        "tslib": ">=2.0.0"
      },
@@ -3585,26 +3584,26 @@
        "@angular/common": ">=12.0.0",
        "@angular/core": ">=12.0.0",
        "@ng-web-apis/common": ">=2.0.0",
-        "@taiga-ui/cdk": ">=3.16.0",
-        "@taiga-ui/core": ">=3.16.0",
+        "@taiga-ui/cdk": ">=3.20.0",
+        "@taiga-ui/core": ">=3.20.0",
        "@tinkoff/ng-polymorpheus": ">=4.0.0"
      }
    },
    "node_modules/@taiga-ui/cdk": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.16.0.tgz",
-      "integrity": "sha512-r6buMYMYsQfokYLwUvwZibR0JJODf/jrWDYTITxuHb4ZTVLz0YYNbERiD6Y2cgtBRUhj9W3lr712eWdYJxZpGA==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.20.0.tgz",
+      "integrity": "sha512-fXX8pV/MELxfoEjStcTe0Eh+1f3vp/jXrHU5JR7p1yA3KtYw+a8WBPLa2+BNAYYSxhpfLsplCb4K2XcVEdUiew==",
      "dependencies": {
        "@ng-web-apis/common": "2.1.0",
        "@ng-web-apis/mutation-observer": "2.0.0",
        "@ng-web-apis/resize-observer": "2.0.0",
        "@tinkoff/ng-event-plugins": "3.1.0",
        "@tinkoff/ng-polymorpheus": "4.0.10",
-        "tslib": "^2.0.0"
+        "tslib": "2.5.0"
      },
      "optionalDependencies": {
-        "ng-morph": "^2.1.0",
-        "parse5": "^6.0.1"
+        "ng-morph": "2.1.0",
+        "parse5": "6.0.1"
      },
      "peerDependencies": {
        "@angular/animations": ">=12.0.0",
@@ -3614,12 +3613,17 @@
        "rxjs": ">=6.0.0"
      }
    },
+    "node_modules/@taiga-ui/cdk/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
    "node_modules/@taiga-ui/core": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.16.0.tgz",
-      "integrity": "sha512-HCJhDOIE1hO4JZxL2ZK6+bFkZB/dREIbqBr684GhcBo4s6VA9mW1tqqr4gqXXXu0FvM9FGFzZpF9Gm+teeprXw==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.20.0.tgz",
+      "integrity": "sha512-TzhU2Nos80tpvcM9DiQ4xcO/RvDjUwOvbQyeu5RTk7mPLsEVoRHaFagO4KXOFhr7D5BFMQimqQaQLFI3Y5c8Xw==",
      "dependencies": {
-        "@taiga-ui/i18n": "^3.16.0",
+        "@taiga-ui/i18n": "^3.20.0",
        "tslib": ">=2.0.0"
      },
      "peerDependencies": {
@@ -3631,17 +3635,17 @@
        "@angular/router": ">=12.0.0",
        "@ng-web-apis/common": ">=2.0.0",
        "@ng-web-apis/mutation-observer": ">=2.0.0",
-        "@taiga-ui/cdk": ">=3.16.0",
-        "@taiga-ui/i18n": ">=3.16.0",
+        "@taiga-ui/cdk": ">=3.20.0",
+        "@taiga-ui/i18n": ">=3.20.0",
        "@tinkoff/ng-event-plugins": ">=3.1.0",
        "@tinkoff/ng-polymorpheus": ">=4.0.0",
        "rxjs": ">=6.0.0"
      }
    },
    "node_modules/@taiga-ui/i18n": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.16.0.tgz",
-      "integrity": "sha512-ieFXTSUY4phXL4YuW5+26Ceqxx4JVMj1En3rXUr3mysLDPRYzyKfeW+gqql4n3hmkqGDsdnmtHvkqcEVePzWAw==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.20.0.tgz",
+      "integrity": "sha512-R0cKNSnvcAXZgfF4j7MPqkja1pQD87XudXG5T3o9qore0ysKCqEW/8A036hBXjLzkHUaMbOutIjy26RZLcoDbQ==",
      "dependencies": {
        "tslib": ">=2.0.0"
      },
@@ -3651,20 +3655,20 @@
      }
    },
    "node_modules/@taiga-ui/icons": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.16.0.tgz",
-      "integrity": "sha512-7EeFTUIpwEJbwFmyRmHvgN2rECygVg/VzqCPgjxM4ThS9VNbtTa0rJzORuA4t4jN+vBBA80wMjcxcI5Kq+jvow==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.20.0.tgz",
+      "integrity": "sha512-N4lwb/XLUogHY7goTNwdfz03gsYczjP7Qnq+IbuqI1iwuH+e3rUWuOCZBjFZ5m1aAB3d/xnKos8bBf84wixJWQ==",
      "dependencies": {
        "tslib": "^2.2.0"
      }
    },
    "node_modules/@taiga-ui/kit": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.16.0.tgz",
-      "integrity": "sha512-HfFGutcJmpzXv+99GxV8ciSOgTyOATls4lYvVoWOwnm+4fJAMJ2vh7OA5+yWBrn8I0XpVXtPGIM7e4H2tXk2HQ==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.20.0.tgz",
+      "integrity": "sha512-fo2FDlTWaynaU9fbyLX4uQdKVsFmIRB+K4zHBwnyzrr2JgNqPQfRUXPZNyGA0cOf+r5Sz7Hs5K5i8TGhGKoFZQ==",
      "dependencies": {
-        "@ng-web-apis/intersection-observer": "^3.0.0",
-        "text-mask-core": "^5.1.2",
+        "@ng-web-apis/intersection-observer": "3.0.0",
+        "text-mask-core": "5.1.2",
        "tslib": ">=2.0.0"
      },
      "peerDependencies": {
@@ -3674,18 +3678,13 @@
        "@angular/router": ">=12.0.0",
        "@ng-web-apis/common": ">=2.0.0",
        "@ng-web-apis/mutation-observer": ">=2.0.0",
-        "@taiga-ui/cdk": ">=3.16.0",
-        "@taiga-ui/core": ">=3.16.0",
-        "@taiga-ui/i18n": ">=3.16.0",
+        "@taiga-ui/cdk": ">=3.20.0",
+        "@taiga-ui/core": ">=3.20.0",
+        "@taiga-ui/i18n": ">=3.20.0",
        "@tinkoff/ng-polymorpheus": ">=4.0.0",
        "rxjs": ">=6.0.0"
      }
    },
-    "node_modules/@taiga-ui/styles": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.16.0.tgz",
-      "integrity": "sha512-Wp2tq5njfdGCgr7t54+5XfI7Bj69+M0BdGYKoXEr74pTzFq2yG2Rqo3vSaujD8L8NnmRfHR7ue9v/BSNgbIcwg=="
-    },
    "node_modules/@tinkoff/ng-event-plugins": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.1.0.tgz",
@@ -17680,68 +17679,70 @@
      "integrity": "sha512-NLEY8Jq59smyiivBAxHKipsp9YkkW/K/Vm90zAyXQqukb12i2SFucWHJ1Ik7ropVlhmMVvigyxXgRfQ9quIqtg=="
    },
    "@taiga-ui/addon-charts": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.16.0.tgz",
-      "integrity": "sha512-b4jvFRKle+jBHCq71BH09ut9cs0mztR+ht99c6OZf6IeyHZuNUsVjOqONxpL3FMKbvIWvW+YXQdkcHx3+vDcFA==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.20.0.tgz",
+      "integrity": "sha512-EH/mhwCv7Dq/JaEmGgJnDFr2ZYCzlTJWMS9BHwEZXaLqKVQWiSeXOhB/5sGhuAXiitZb2XvSumlVslAECpe/Kg==",
      "requires": {
        "tslib": ">=2.0.0"
      }
    },
    "@taiga-ui/cdk": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.16.0.tgz",
-      "integrity": "sha512-r6buMYMYsQfokYLwUvwZibR0JJODf/jrWDYTITxuHb4ZTVLz0YYNbERiD6Y2cgtBRUhj9W3lr712eWdYJxZpGA==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.20.0.tgz",
+      "integrity": "sha512-fXX8pV/MELxfoEjStcTe0Eh+1f3vp/jXrHU5JR7p1yA3KtYw+a8WBPLa2+BNAYYSxhpfLsplCb4K2XcVEdUiew==",
      "requires": {
        "@ng-web-apis/common": "2.1.0",
        "@ng-web-apis/mutation-observer": "2.0.0",
        "@ng-web-apis/resize-observer": "2.0.0",
        "@tinkoff/ng-event-plugins": "3.1.0",
        "@tinkoff/ng-polymorpheus": "4.0.10",
-        "ng-morph": "^2.1.0",
-        "parse5": "^6.0.1",
-        "tslib": "^2.0.0"
+        "ng-morph": "2.1.0",
+        "parse5": "6.0.1",
+        "tslib": "2.5.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
      }
    },
    "@taiga-ui/core": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.16.0.tgz",
-      "integrity": "sha512-HCJhDOIE1hO4JZxL2ZK6+bFkZB/dREIbqBr684GhcBo4s6VA9mW1tqqr4gqXXXu0FvM9FGFzZpF9Gm+teeprXw==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.20.0.tgz",
+      "integrity": "sha512-TzhU2Nos80tpvcM9DiQ4xcO/RvDjUwOvbQyeu5RTk7mPLsEVoRHaFagO4KXOFhr7D5BFMQimqQaQLFI3Y5c8Xw==",
      "requires": {
-        "@taiga-ui/i18n": "^3.16.0",
+        "@taiga-ui/i18n": "^3.20.0",
        "tslib": ">=2.0.0"
      }
    },
    "@taiga-ui/i18n": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.16.0.tgz",
-      "integrity": "sha512-ieFXTSUY4phXL4YuW5+26Ceqxx4JVMj1En3rXUr3mysLDPRYzyKfeW+gqql4n3hmkqGDsdnmtHvkqcEVePzWAw==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.20.0.tgz",
+      "integrity": "sha512-R0cKNSnvcAXZgfF4j7MPqkja1pQD87XudXG5T3o9qore0ysKCqEW/8A036hBXjLzkHUaMbOutIjy26RZLcoDbQ==",
      "requires": {
        "tslib": ">=2.0.0"
      }
    },
    "@taiga-ui/icons": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.16.0.tgz",
-      "integrity": "sha512-7EeFTUIpwEJbwFmyRmHvgN2rECygVg/VzqCPgjxM4ThS9VNbtTa0rJzORuA4t4jN+vBBA80wMjcxcI5Kq+jvow==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.20.0.tgz",
+      "integrity": "sha512-N4lwb/XLUogHY7goTNwdfz03gsYczjP7Qnq+IbuqI1iwuH+e3rUWuOCZBjFZ5m1aAB3d/xnKos8bBf84wixJWQ==",
      "requires": {
        "tslib": "^2.2.0"
      }
    },
    "@taiga-ui/kit": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.16.0.tgz",
-      "integrity": "sha512-HfFGutcJmpzXv+99GxV8ciSOgTyOATls4lYvVoWOwnm+4fJAMJ2vh7OA5+yWBrn8I0XpVXtPGIM7e4H2tXk2HQ==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.20.0.tgz",
+      "integrity": "sha512-fo2FDlTWaynaU9fbyLX4uQdKVsFmIRB+K4zHBwnyzrr2JgNqPQfRUXPZNyGA0cOf+r5Sz7Hs5K5i8TGhGKoFZQ==",
      "requires": {
-        "@ng-web-apis/intersection-observer": "^3.0.0",
-        "text-mask-core": "^5.1.2",
+        "@ng-web-apis/intersection-observer": "3.0.0",
+        "text-mask-core": "5.1.2",
        "tslib": ">=2.0.0"
      }
    },
-    "@taiga-ui/styles": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.16.0.tgz",
-      "integrity": "sha512-Wp2tq5njfdGCgr7t54+5XfI7Bj69+M0BdGYKoXEr74pTzFq2yG2Rqo3vSaujD8L8NnmRfHR7ue9v/BSNgbIcwg=="
-    },
    "@tinkoff/ng-event-plugins": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.1.0.tgz",
@@ -22451,8 +22452,7 @@
      "dev": true
    },
    "ng-morph": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ng-morph/-/ng-morph-2.1.3.tgz",
+      "version": "https://registry.npmjs.org/ng-morph/-/ng-morph-2.1.3.tgz",
      "integrity": "sha512-bFeSMSn2ORgtYw4ZmwISJ/RGdZxi03IwODrnXB6FbTEvmyfuTCB7x0FyQsm8euNX43fTp3FZclCZpRmO8t5w8w==",
      "optional": true,
      "requires": {
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,12 +47,11 @@
    "@ng-web-apis/resize-observer": "^2.0.0",
    "@start9labs/argon2": "^0.1.0",
    "@start9labs/emver": "^0.1.5",
-    "@taiga-ui/addon-charts": "^3.16.0",
-    "@taiga-ui/cdk": "^3.16.0",
-    "@taiga-ui/core": "^3.16.0",
-    "@taiga-ui/icons": "^3.16.0",
-    "@taiga-ui/kit": "^3.16.0",
-    "@taiga-ui/styles": "^3.16.0",
+    "@taiga-ui/addon-charts": "3.20.0",
+    "@taiga-ui/cdk": "3.20.0",
+    "@taiga-ui/core": "3.20.0",
+    "@taiga-ui/icons": "3.20.0",
+    "@taiga-ui/kit": "3.20.0",
    "angular-svg-round-progressbar": "^9.0.0",
    "ansi-to-html": "^0.7.2",
    "base64-js": "^1.5.1",
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.html
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.html
@@ -1,3 +0,0 @@
-<div class="wrapper" (elasticContainer)="height = $event">
-  <ng-content></ng-content>
-</div>
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss
@@ -1,10 +0,0 @@
-:host {
-  display: block;
-  overflow: hidden;
-  transition: height 0.25s;
-}
-
-.wrapper {
-  padding-top: 1px;
-  margin-top: -1px;
-}
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.ts
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.ts
@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'
-
-@Component({
-  selector: 'elastic-container',
-  templateUrl: './elastic-container.component.html',
-  styleUrls: ['./elastic-container.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ElasticContainerComponent {
-  @HostBinding('style.height.px')
-  height = NaN
-}
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts
@@ -1,35 +0,0 @@
-import { Directive, ElementRef, inject, Output } from '@angular/core'
-import { ResizeObserverService } from '@ng-web-apis/resize-observer'
-import {
-  MUTATION_OBSERVER_INIT,
-  MutationObserverService,
-} from '@ng-web-apis/mutation-observer'
-import { distinctUntilChanged, map, merge } from 'rxjs'
-
-@Directive({
-  selector: '[elasticContainer]',
-  providers: [
-    ResizeObserverService,
-    MutationObserverService,
-    {
-      provide: MUTATION_OBSERVER_INIT,
-      useValue: {
-        childList: true,
-        characterData: true,
-        subtree: true,
-      },
-    },
-  ],
-})
-export class ElasticContainerDirective {
-  private readonly elementRef = inject(ElementRef)
-
-  @Output()
-  readonly elasticContainer = merge(
-    inject(ResizeObserverService),
-    inject(MutationObserverService),
-  ).pipe(
-    map(() => this.elementRef.nativeElement.clientHeight - 1), // Compensate for padding
-    distinctUntilChanged(),
-  )
-}
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.module.ts
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.module.ts
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-
-import { ElasticContainerComponent } from './elastic-container.component'
-import { ElasticContainerDirective } from './elastic-container.directive'
-
-@NgModule({
-  declarations: [ElasticContainerComponent, ElasticContainerDirective],
-  exports: [ElasticContainerComponent],
-})
-export class ElasticContainerModule {}
--- a/frontend/projects/shared/src/public-api.ts
+++ b/frontend/projects/shared/src/public-api.ts
@@ -9,9 +9,6 @@ export * from './components/alert/alert.component'
 export * from './components/alert/alert.module'
 export * from './components/alert/alert-button.directive'
 export * from './components/alert/alert-input.directive'
-export * from './components/elastic-container/elastic-container.component'
-export * from './components/elastic-container/elastic-container.directive'
-export * from './components/elastic-container/elastic-container.module'
 export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'
 export * from './components/text-spinner/text-spinner.component'
--- a/frontend/projects/ui/src/app/components/form-object/form-object.component.module.ts
+++ b/frontend/projects/ui/src/app/components/form-object/form-object.component.module.ts
@@ -15,7 +15,8 @@ import {
 } from './form-object.pipes'
 import { IonicModule } from '@ionic/angular'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ElasticContainerModule, SharedPipesModule } from '@start9labs/shared'
+import { SharedPipesModule } from '@start9labs/shared'
+import { TuiElasticContainerModule } from '@taiga-ui/kit'
 import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'

@NgModule({
@@ -37,7 +38,7 @@ import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
    ReactiveFormsModule,
    SharedPipesModule,
    EnumListPageModule,
-    ElasticContainerModule,
+    TuiElasticContainerModule,
  ],
  exports: [FormObjectComponent, FormLabelComponent],
 })
--- a/frontend/projects/ui/src/app/components/form-object/form-union.component.html
+++ b/frontend/projects/ui/src/app/components/form-object/form-union.component.html
@@ -31,7 +31,7 @@
    </ion-select>
  </ion-item-divider>

-  <elastic-container [id]="objectId | toElementId: 'union'" class="indent">
+  <tui-elastic-container [id]="objectId | toElementId: 'union'" class="indent">
    <form-object
      [objectSpec]="spec.variants[unionValue]"
      [formGroup]="formGroup"
@@ -39,5 +39,5 @@
      [original]="original"
      (onResize)="resize()"
    ></form-object>
-  </elastic-container>
+  </tui-elastic-container>
 </div>
--- a/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.html
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="installed$ | async as installed" class="wrapper">
  <button
    *ngFor="let widget of widgets | tuiFilter: filter:installed; empty: empty"
-    class="tui-island tui-island_size_l"
+    class="button"
    (click)="context.completeWith(widget)"
  >
-    <span class="tui-island__title">{{ widget.meta.name }}</span>
+    {{ widget.meta.name }}
  </button>
  <ng-template #empty>No additional widgets found</ng-template>
 </div>
--- a/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.scss
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.scss
@@ -4,6 +4,13 @@
  gap: 12px;
 }

-.tui-island {
+.button {
+  background: transparent;
  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  border: none;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: inset 0 0 0 1px var(--tui-base-03);
 }