From 588663f80f53f7c74f33dd55dc8b16d562ee9a03 Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Wed, 22 May 2024 17:49:24 +0530
Subject: [PATCH] [PM 4983] migrate vault timeout input component (#8661)

* migrate vault timeout input component

* migrate vault timeout input component
---
 .../vault-timeout-input.component.html        | 68 +++++++------------
 1 file changed, 25 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/app/settings/vault-timeout-input.component.html b/apps/web/src/app/settings/vault-timeout-input.component.html
index 3791fa7e543..4911b1d57db 100644
--- a/apps/web/src/app/settings/vault-timeout-input.component.html
+++ b/apps/web/src/app/settings/vault-timeout-input.component.html
@@ -1,47 +1,29 @@
 <div [formGroup]="form">
-  <div class="form-group">
-    <label for="vaultTimeout">{{ "vaultTimeout" | i18n }}</label>
-    <select
-      id="vaultTimeout"
-      name="VaultTimeout"
-      formControlName="vaultTimeout"
-      class="form-control"
-    >
-      <option *ngFor="let o of vaultTimeoutOptions" [ngValue]="o.value">{{ o.name }}</option>
-    </select>
-    <small class="form-text text-muted">{{
+  <bit-form-field>
+    <bit-label>{{ "vaultTimeout" | i18n }}</bit-label>
+    <bit-select formControlName="vaultTimeout">
+      <bit-option
+        *ngFor="let o of vaultTimeoutOptions"
+        [value]="o.value"
+        [label]="o.name"
+      ></bit-option>
+    </bit-select>
+    <bit-hint class="tw-text-sm">{{
       ((canLockVault$ | async) ? "vaultTimeoutDesc" : "vaultTimeoutLogoutDesc") | i18n
-    }}</small>
-  </div>
-  <div class="form-group" *ngIf="showCustom" formGroupName="custom">
-    <label for="customVaultTimeout">{{ "customVaultTimeout" | i18n }}</label>
-    <div class="row">
-      <div class="col-6">
-        <input
-          id="hours"
-          class="form-control"
-          type="number"
-          min="0"
-          name="hours"
-          formControlName="hours"
-        />
-        <small>{{ "hours" | i18n }}</small>
-      </div>
-      <div class="col-6">
-        <input
-          id="minutes"
-          class="form-control"
-          type="number"
-          min="0"
-          name="minutes"
-          formControlName="minutes"
-        />
-        <small>{{ "minutes" | i18n }}</small>
-      </div>
-    </div>
-
-    <small *ngIf="!exceedsMinimumTimout" class="tw-text-danger">
-      <i class="bwi bwi-error" aria-hidden="true"></i> {{ "vaultCustomTimeoutMinimum" | i18n }}
-    </small>
+    }}</bit-hint>
+  </bit-form-field>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showCustom" formGroupName="custom">
+    <bit-form-field class="tw-col-span-6">
+      <bit-label>{{ "customVaultTimeout" | i18n }}</bit-label>
+      <input bitInput type="number" min="0" formControlName="hours" />
+      <bit-hint>{{ "hours" | i18n }}</bit-hint>
+    </bit-form-field>
+    <bit-form-field class="tw-col-span-6 tw-self-end">
+      <input bitInput type="number" min="0" name="minutes" formControlName="minutes" />
+      <bit-hint>{{ "minutes" | i18n }}</bit-hint>
+    </bit-form-field>
   </div>
+  <small *ngIf="!exceedsMinimumTimout" class="tw-text-danger">
+    <i class="bwi bwi-error" aria-hidden="true"></i> {{ "vaultCustomTimeoutMinimum" | i18n }}
+  </small>
 </div>