WEBUI: Sila UI Theme

13 files changed, 1428 insertions, 16 deletions

diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0001-Set-login-brand.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0001-Set-login-brand.patch
index 25c894531b..b1616ed833 100644
--- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0001-Set-login-brand.patch
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0001-Set-login-brand.patch
@@ -1,14 +1,14 @@
-From 244844b723c7e3f11dd5ec217c60ae48231c273c Mon Sep 17 00:00:00 2001
+From c3455f6270c9434c61bddfda7e64a1ac1d50bfdc Mon Sep 17 00:00:00 2001
 From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
-Date: Fri, 10 Jun 2022 07:51:39 +0300
-Subject: [PATCH 1/2] Set login brand
+Date: Tue, 28 Jun 2022 07:07:41 +0300
+Subject: [PATCH] Set login brand
 
 ---
- src/layouts/LoginLayout.vue | 25 +++++++++++++++++++------
- 1 file changed, 19 insertions(+), 6 deletions(-)
+ src/layouts/LoginLayout.vue | 26 ++++++++++++++++++++------
+ 1 file changed, 20 insertions(+), 6 deletions(-)
 
 diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
-index cdff204..a26a819 100644
+index cdff2040..20d123be 100644
 --- a/src/layouts/LoginLayout.vue
 +++ b/src/layouts/LoginLayout.vue
 @@ -2,10 +2,17 @@
@@ -49,7 +49,7 @@ index cdff204..a26a819 100644
    min-width: 320px;
    min-height: 100vh;
    justify-content: space-around;
-@@ -76,6 +82,13 @@ export default {
+@@ -76,8 +82,16 @@ export default {
    }
  }
  
@@ -62,8 +62,11 @@ index cdff204..a26a819 100644
 +
  .login-form {
    @include media-breakpoint-up('md') {
++    width: 360px;
      max-width: 360px;
-@@ -88,11 +101,11 @@ export default {
+   }
+ }
+@@ -88,11 +102,11 @@ export default {
    justify-content: flex-end;
    gap: $spacer * 1.5;
    margin-right: $spacer * 3;
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0011-firmware-buttons-layout.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0011-firmware-buttons-layout.patch
index 0c27a6eb82..3288603c9a 100644
--- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0011-firmware-buttons-layout.patch
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0011-firmware-buttons-layout.patch
@@ -1,13 +1,13 @@
-From 8c17b6afbd107c12802c79890789366d0deda5ec Mon Sep 17 00:00:00 2001
+From d1d073607c677569a4056921078c7aaa3ceac229 Mon Sep 17 00:00:00 2001
 From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
-Date: Sun, 26 Jun 2022 12:12:55 +0300
-Subject: [PATCH 2/2] firmware: buttons layout
+Date: Tue, 28 Jun 2022 08:03:44 +0300
+Subject: [PATCH] firmware: buttons layout
 
 ---
  src/assets/styles/bmc/custom/_index.scss        |  1 +
- src/assets/styles/bmc/custom/ibs/_firmware.scss | 11 +++++++++++
+ src/assets/styles/bmc/custom/ibs/_firmware.scss | 13 +++++++++++++
  src/views/Operations/Firmware/Firmware.vue      | 12 +++++++-----
- 3 files changed, 19 insertions(+), 5 deletions(-)
+ 3 files changed, 21 insertions(+), 5 deletions(-)
  create mode 100644 src/assets/styles/bmc/custom/ibs/_firmware.scss
 
 diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
@@ -21,10 +21,10 @@ index bc05a82a..5fb98f6e 100644
 +@import "./ibs/firmware";
 diff --git a/src/assets/styles/bmc/custom/ibs/_firmware.scss b/src/assets/styles/bmc/custom/ibs/_firmware.scss
 new file mode 100644
-index 00000000..605a63e5
+index 00000000..de65dc10
 --- /dev/null
 +++ b/src/assets/styles/bmc/custom/ibs/_firmware.scss
-@@ -0,0 +1,11 @@
+@@ -0,0 +1,13 @@
 +
 +//
 +// Firmware Update:
@@ -35,6 +35,8 @@ index 00000000..605a63e5
 +}
 +.firmware-update .form-background {
 +  padding: $spacer * 2 !important;
++  border-radius: $border-radius;
++  background-color: $surface-secondary !important;
 +}
 diff --git a/src/views/Operations/Firmware/Firmware.vue b/src/views/Operations/Firmware/Firmware.vue
 index a2acb9b0..b4024323 100644
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0012-inventory-service-indicators.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0012-inventory-service-indicators.patch
new file mode 100644
index 0000000000..5315cb348a
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0012-inventory-service-indicators.patch
@@ -0,0 +1,54 @@
+From db9f3b648d1ca6d385776a0bc58a2e75ee94f41e Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 10:40:25 +0300
+Subject: [PATCH] inventory: service indicators
+
+---
+ src/assets/styles/bmc/custom/_index.scss         | 1 +
+ src/assets/styles/bmc/custom/ibs/_inventory.scss | 9 +++++++++
+ src/views/HardwareStatus/Inventory/Inventory.vue | 4 +++-
+ 3 files changed, 13 insertions(+), 1 deletion(-)
+ create mode 100644 src/assets/styles/bmc/custom/ibs/_inventory.scss
+
+diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
+index 5fb98f6e..85a93356 100644
+--- a/src/assets/styles/bmc/custom/_index.scss
++++ b/src/assets/styles/bmc/custom/_index.scss
+@@ -18,3 +18,4 @@
+ @import "./toasts";
+ @import "./ibs/virtual-media";
+ @import "./ibs/firmware";
++@import "./ibs/inventory";
+diff --git a/src/assets/styles/bmc/custom/ibs/_inventory.scss b/src/assets/styles/bmc/custom/ibs/_inventory.scss
+new file mode 100644
+index 00000000..6f065ad4
+--- /dev/null
++++ b/src/assets/styles/bmc/custom/ibs/_inventory.scss
+@@ -0,0 +1,9 @@
++
++//
++// Service Indicators:
++//
++.service-indicators .form-background {
++  padding: $spacer * 2 !important;
++  border-radius: $border-radius;
++  background-color: $surface-secondary !important;
++}
+diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
+index fcdbf8d2..0cc542e7 100644
+--- a/src/views/HardwareStatus/Inventory/Inventory.vue
++++ b/src/views/HardwareStatus/Inventory/Inventory.vue
+@@ -3,7 +3,9 @@
+     <page-title />
+ 
+     <!-- Service indicators -->
+-    <service-indicator />
++    <div class="service-indicators">
++      <service-indicator />
++    </div>
+ 
+     <!-- Quicklinks section -->
+     <page-section :section-title="$t('pageInventory.quicklinkTitle')">
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0013-power-operations-boot-settings.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0013-power-operations-boot-settings.patch
new file mode 100644
index 0000000000..04b0698c53
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0013-power-operations-boot-settings.patch
@@ -0,0 +1,62 @@
+From e8efe44db456a2f271c2aa398241ed48ee2ba192 Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 11:15:37 +0300
+Subject: [PATCH] power operations: boot settings
+
+---
+ src/assets/styles/bmc/custom/_index.scss             |  1 +
+ .../styles/bmc/custom/ibs/_power-operations.scss     |  9 +++++++++
+ .../ServerPowerOperations/ServerPowerOperations.vue  | 12 +++++++-----
+ 3 files changed, 17 insertions(+), 5 deletions(-)
+ create mode 100644 src/assets/styles/bmc/custom/ibs/_power-operations.scss
+
+diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
+index 85a93356..2be710cc 100644
+--- a/src/assets/styles/bmc/custom/_index.scss
++++ b/src/assets/styles/bmc/custom/_index.scss
+@@ -19,3 +19,4 @@
+ @import "./ibs/virtual-media";
+ @import "./ibs/firmware";
+ @import "./ibs/inventory";
++@import "./ibs/power-operations";
+diff --git a/src/assets/styles/bmc/custom/ibs/_power-operations.scss b/src/assets/styles/bmc/custom/ibs/_power-operations.scss
+new file mode 100644
+index 00000000..0921323e
+--- /dev/null
++++ b/src/assets/styles/bmc/custom/ibs/_power-operations.scss
+@@ -0,0 +1,9 @@
++
++//
++// Power Operations:
++//
++.boot-settings .form-background {
++  padding: $spacer * 2 $spacer * 2 $spacer !important;
++  border-radius: $border-radius;
++  background-color: $surface-secondary !important;
++}
+diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+index 9e030837..e6b685f4 100644
+--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
++++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+@@ -50,11 +50,13 @@
+     </b-row>
+     <b-row>
+       <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
+-        <page-section
+-          :section-title="$t('pageServerPowerOperations.serverBootSettings')"
+-        >
+-          <boot-settings />
+-        </page-section>
++        <div class="boot-settings">
++          <page-section
++            :section-title="$t('pageServerPowerOperations.serverBootSettings')"
++          >
++            <boot-settings />
++          </page-section>
++        </div>
+       </b-col>
+       <b-col sm="8" md="6" xl="7">
+         <page-section
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0014-security-ldap-settings.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0014-security-ldap-settings.patch
new file mode 100644
index 0000000000..daf85c3539
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0014-security-ldap-settings.patch
@@ -0,0 +1,411 @@
+From 3826216e8f7a6c11291dde78b437f7554819f7ff Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 11:56:53 +0300
+Subject: [PATCH] security: ldap settings
+
+---
+ src/assets/styles/bmc/custom/_index.scss      |   1 +
+ .../styles/bmc/custom/ibs/_security.scss      |   9 +
+ src/views/SecurityAndAccess/Ldap/Ldap.vue     | 348 +++++++++---------
+ 3 files changed, 185 insertions(+), 173 deletions(-)
+ create mode 100644 src/assets/styles/bmc/custom/ibs/_security.scss
+
+diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
+index 2be710cc..16170b72 100644
+--- a/src/assets/styles/bmc/custom/_index.scss
++++ b/src/assets/styles/bmc/custom/_index.scss
+@@ -20,3 +20,4 @@
+ @import "./ibs/firmware";
+ @import "./ibs/inventory";
+ @import "./ibs/power-operations";
++@import "./ibs/security";
+diff --git a/src/assets/styles/bmc/custom/ibs/_security.scss b/src/assets/styles/bmc/custom/ibs/_security.scss
+new file mode 100644
+index 00000000..45473a53
+--- /dev/null
++++ b/src/assets/styles/bmc/custom/ibs/_security.scss
+@@ -0,0 +1,9 @@
++
++//
++// Security and Access:
++//
++.ldap-settings .form-background {
++  padding: $spacer * 2 $spacer * 2 $spacer !important;
++  border-radius: $border-radius;
++  background-color: $surface-secondary !important;
++}
+diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
+index 1f2108de..b4eba281 100644
+--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
++++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
+@@ -20,192 +20,194 @@
+             </b-form-group>
+           </b-col>
+         </b-row>
+-        <div class="form-background p-3">
+-          <b-form-group
+-            class="m-0"
+-            :label="$t('pageLdap.ariaLabel.ldapSettings')"
+-            label-class="sr-only"
+-            :disabled="!form.ldapAuthenticationEnabled || loading"
+-          >
+-            <b-row>
+-              <b-col md="3" lg="4" xl="3">
+-                <b-form-group
+-                  class="mb-4"
+-                  :label="$t('pageLdap.form.secureLdapUsingSsl')"
+-                >
+-                  <b-form-text id="enable-secure-help-block">
+-                    {{ $t('pageLdap.form.secureLdapHelper') }}
+-                  </b-form-text>
+-                  <b-form-checkbox
+-                    id="enable-secure-ldap"
+-                    v-model="form.secureLdapEnabled"
+-                    aria-describedby="enable-secure-help-block"
+-                    data-test-id="ldap-checkbox-secureLdapEnabled"
+-                    :disabled="
+-                      !caCertificateExpiration || !ldapCertificateExpiration
+-                    "
+-                    @change="$v.form.secureLdapEnabled.$touch()"
++        <div class="ldap-settings">
++          <div class="form-background p-3">
++            <b-form-group
++              class="m-0"
++              :label="$t('pageLdap.ariaLabel.ldapSettings')"
++              label-class="sr-only"
++              :disabled="!form.ldapAuthenticationEnabled || loading"
++            >
++              <b-row>
++                <b-col md="3" lg="4" xl="3">
++                  <b-form-group
++                    class="mb-4"
++                    :label="$t('pageLdap.form.secureLdapUsingSsl')"
+                   >
+-                    {{ $t('global.action.enable') }}
+-                  </b-form-checkbox>
+-                </b-form-group>
+-                <dl>
+-                  <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
+-                  <dd v-if="caCertificateExpiration">
+-                    {{ caCertificateExpiration | formatDate }}
+-                  </dd>
+-                  <dd v-else>--</dd>
+-                  <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
+-                  <dd v-if="ldapCertificateExpiration">
+-                    {{ ldapCertificateExpiration | formatDate }}
+-                  </dd>
+-                  <dd v-else>--</dd>
+-                </dl>
+-                <b-link
+-                  class="d-inline-block mb-4 m-md-0"
+-                  to="/security-and-access/certificates"
+-                >
+-                  {{ $t('pageLdap.form.manageSslCertificates') }}
+-                </b-link>
+-              </b-col>
+-              <b-col md="9" lg="8" xl="9">
+-                <b-row>
+-                  <b-col>
+-                    <b-form-group :label="$t('pageLdap.form.serviceType')">
+-                      <b-form-radio
+-                        v-model="form.activeDirectoryEnabled"
+-                        data-test-id="ldap-radio-activeDirectoryEnabled"
+-                        :value="false"
+-                        @change="onChangeServiceType"
+-                      >
+-                        OpenLDAP
+-                      </b-form-radio>
+-                      <b-form-radio
+-                        v-model="form.activeDirectoryEnabled"
+-                        data-test-id="ldap-radio-activeDirectoryEnabled"
+-                        :value="true"
+-                        @change="onChangeServiceType"
++                    <b-form-text id="enable-secure-help-block">
++                      {{ $t('pageLdap.form.secureLdapHelper') }}
++                    </b-form-text>
++                    <b-form-checkbox
++                      id="enable-secure-ldap"
++                      v-model="form.secureLdapEnabled"
++                      aria-describedby="enable-secure-help-block"
++                      data-test-id="ldap-checkbox-secureLdapEnabled"
++                      :disabled="
++                        !caCertificateExpiration || !ldapCertificateExpiration
++                      "
++                      @change="$v.form.secureLdapEnabled.$touch()"
++                    >
++                      {{ $t('global.action.enable') }}
++                    </b-form-checkbox>
++                  </b-form-group>
++                  <dl>
++                    <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
++                    <dd v-if="caCertificateExpiration">
++                      {{ caCertificateExpiration | formatDate }}
++                    </dd>
++                    <dd v-else>--</dd>
++                    <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
++                    <dd v-if="ldapCertificateExpiration">
++                      {{ ldapCertificateExpiration | formatDate }}
++                    </dd>
++                    <dd v-else>--</dd>
++                  </dl>
++                  <b-link
++                    class="d-inline-block mb-4 m-md-0"
++                    to="/security-and-access/certificates"
++                  >
++                    {{ $t('pageLdap.form.manageSslCertificates') }}
++                  </b-link>
++                </b-col>
++                <b-col md="9" lg="8" xl="9">
++                  <b-row>
++                    <b-col>
++                      <b-form-group :label="$t('pageLdap.form.serviceType')">
++                        <b-form-radio
++                          v-model="form.activeDirectoryEnabled"
++                          data-test-id="ldap-radio-activeDirectoryEnabled"
++                          :value="false"
++                          @change="onChangeServiceType"
++                        >
++                          OpenLDAP
++                        </b-form-radio>
++                        <b-form-radio
++                          v-model="form.activeDirectoryEnabled"
++                          data-test-id="ldap-radio-activeDirectoryEnabled"
++                          :value="true"
++                          @change="onChangeServiceType"
++                        >
++                          Active Directory
++                        </b-form-radio>
++                      </b-form-group>
++                    </b-col>
++                  </b-row>
++                  <b-row>
++                    <b-col sm="6" xl="4">
++                      <b-form-group label-for="server-uri">
++                        <template #label>
++                          {{ $t('pageLdap.form.serverUri') }}
++                          <info-tooltip
++                            :title="$t('pageLdap.form.serverUriTooltip')"
++                          />
++                        </template>
++                        <b-input-group :prepend="ldapProtocol">
++                          <b-form-input
++                            id="server-uri"
++                            v-model="form.serverUri"
++                            data-test-id="ldap-input-serverUri"
++                            :state="getValidationState($v.form.serverUri)"
++                            @change="$v.form.serverUri.$touch()"
++                          />
++                          <b-form-invalid-feedback role="alert">
++                            {{ $t('global.form.fieldRequired') }}
++                          </b-form-invalid-feedback>
++                        </b-input-group>
++                      </b-form-group>
++                    </b-col>
++                    <b-col sm="6" xl="4">
++                      <b-form-group
++                        :label="$t('pageLdap.form.bindDn')"
++                        label-for="bind-dn"
+                       >
+-                        Active Directory
+-                      </b-form-radio>
+-                    </b-form-group>
+-                  </b-col>
+-                </b-row>
+-                <b-row>
+-                  <b-col sm="6" xl="4">
+-                    <b-form-group label-for="server-uri">
+-                      <template #label>
+-                        {{ $t('pageLdap.form.serverUri') }}
+-                        <info-tooltip
+-                          :title="$t('pageLdap.form.serverUriTooltip')"
+-                        />
+-                      </template>
+-                      <b-input-group :prepend="ldapProtocol">
+                         <b-form-input
+-                          id="server-uri"
+-                          v-model="form.serverUri"
+-                          data-test-id="ldap-input-serverUri"
+-                          :state="getValidationState($v.form.serverUri)"
+-                          @change="$v.form.serverUri.$touch()"
++                          id="bind-dn"
++                          v-model="form.bindDn"
++                          data-test-id="ldap-input-bindDn"
++                          :state="getValidationState($v.form.bindDn)"
++                          @change="$v.form.bindDn.$touch()"
+                         />
+                         <b-form-invalid-feedback role="alert">
+                           {{ $t('global.form.fieldRequired') }}
+                         </b-form-invalid-feedback>
+-                      </b-input-group>
+-                    </b-form-group>
+-                  </b-col>
+-                  <b-col sm="6" xl="4">
+-                    <b-form-group
+-                      :label="$t('pageLdap.form.bindDn')"
+-                      label-for="bind-dn"
+-                    >
+-                      <b-form-input
+-                        id="bind-dn"
+-                        v-model="form.bindDn"
+-                        data-test-id="ldap-input-bindDn"
+-                        :state="getValidationState($v.form.bindDn)"
+-                        @change="$v.form.bindDn.$touch()"
+-                      />
+-                      <b-form-invalid-feedback role="alert">
+-                        {{ $t('global.form.fieldRequired') }}
+-                      </b-form-invalid-feedback>
+-                    </b-form-group>
+-                  </b-col>
+-                  <b-col sm="6" xl="4">
+-                    <b-form-group
+-                      :label="$t('pageLdap.form.bindPassword')"
+-                      label-for="bind-password"
+-                    >
+-                      <input-password-toggle
+-                        data-test-id="ldap-input-togglePassword"
++                      </b-form-group>
++                    </b-col>
++                    <b-col sm="6" xl="4">
++                      <b-form-group
++                        :label="$t('pageLdap.form.bindPassword')"
++                        label-for="bind-password"
++                      >
++                        <input-password-toggle
++                          data-test-id="ldap-input-togglePassword"
++                        >
++                          <b-form-input
++                            id="bind-password"
++                            v-model="form.bindPassword"
++                            type="password"
++                            :state="getValidationState($v.form.bindPassword)"
++                            class="form-control-with-button"
++                            @change="$v.form.bindPassword.$touch()"
++                          />
++                          <b-form-invalid-feedback role="alert">
++                            {{ $t('global.form.fieldRequired') }}
++                          </b-form-invalid-feedback>
++                        </input-password-toggle>
++                      </b-form-group>
++                    </b-col>
++                    <b-col sm="6" xl="4">
++                      <b-form-group
++                        :label="$t('pageLdap.form.baseDn')"
++                        label-for="base-dn"
+                       >
+                         <b-form-input
+-                          id="bind-password"
+-                          v-model="form.bindPassword"
+-                          type="password"
+-                          :state="getValidationState($v.form.bindPassword)"
+-                          class="form-control-with-button"
+-                          @change="$v.form.bindPassword.$touch()"
++                          id="base-dn"
++                          v-model="form.baseDn"
++                          data-test-id="ldap-input-baseDn"
++                          :state="getValidationState($v.form.baseDn)"
++                          @change="$v.form.baseDn.$touch()"
+                         />
+                         <b-form-invalid-feedback role="alert">
+                           {{ $t('global.form.fieldRequired') }}
+                         </b-form-invalid-feedback>
+-                      </input-password-toggle>
+-                    </b-form-group>
+-                  </b-col>
+-                  <b-col sm="6" xl="4">
+-                    <b-form-group
+-                      :label="$t('pageLdap.form.baseDn')"
+-                      label-for="base-dn"
+-                    >
+-                      <b-form-input
+-                        id="base-dn"
+-                        v-model="form.baseDn"
+-                        data-test-id="ldap-input-baseDn"
+-                        :state="getValidationState($v.form.baseDn)"
+-                        @change="$v.form.baseDn.$touch()"
+-                      />
+-                      <b-form-invalid-feedback role="alert">
+-                        {{ $t('global.form.fieldRequired') }}
+-                      </b-form-invalid-feedback>
+-                    </b-form-group>
+-                  </b-col>
+-                  <b-col sm="6" xl="4">
+-                    <b-form-group label-for="user-id-attribute">
+-                      <template #label>
+-                        {{ $t('pageLdap.form.userIdAttribute') }} -
+-                        <span class="form-text d-inline">
+-                          {{ $t('global.form.optional') }}
+-                        </span>
+-                      </template>
+-                      <b-form-input
+-                        id="user-id-attribute"
+-                        v-model="form.userIdAttribute"
+-                        data-test-id="ldap-input-userIdAttribute"
+-                        @change="$v.form.userIdAttribute.$touch()"
+-                      />
+-                    </b-form-group>
+-                  </b-col>
+-                  <b-col sm="6" xl="4">
+-                    <b-form-group label-for="group-id-attribute">
+-                      <template #label>
+-                        {{ $t('pageLdap.form.groupIdAttribute') }} -
+-                        <span class="form-text d-inline">
+-                          {{ $t('global.form.optional') }}
+-                        </span>
+-                      </template>
+-                      <b-form-input
+-                        id="group-id-attribute"
+-                        v-model="form.groupIdAttribute"
+-                        data-test-id="ldap-input-groupIdAttribute"
+-                        @change="$v.form.groupIdAttribute.$touch()"
+-                      />
+-                    </b-form-group>
+-                  </b-col>
+-                </b-row>
+-              </b-col>
+-            </b-row>
+-          </b-form-group>
++                      </b-form-group>
++                    </b-col>
++                    <b-col sm="6" xl="4">
++                      <b-form-group label-for="user-id-attribute">
++                        <template #label>
++                          {{ $t('pageLdap.form.userIdAttribute') }} -
++                          <span class="form-text d-inline">
++                            {{ $t('global.form.optional') }}
++                          </span>
++                        </template>
++                        <b-form-input
++                          id="user-id-attribute"
++                          v-model="form.userIdAttribute"
++                          data-test-id="ldap-input-userIdAttribute"
++                          @change="$v.form.userIdAttribute.$touch()"
++                        />
++                      </b-form-group>
++                    </b-col>
++                    <b-col sm="6" xl="4">
++                      <b-form-group label-for="group-id-attribute">
++                        <template #label>
++                          {{ $t('pageLdap.form.groupIdAttribute') }} -
++                          <span class="form-text d-inline">
++                            {{ $t('global.form.optional') }}
++                          </span>
++                        </template>
++                        <b-form-input
++                          id="group-id-attribute"
++                          v-model="form.groupIdAttribute"
++                          data-test-id="ldap-input-groupIdAttribute"
++                          @change="$v.form.groupIdAttribute.$touch()"
++                        />
++                      </b-form-group>
++                    </b-col>
++                  </b-row>
++                </b-col>
++              </b-row>
++            </b-form-group>
++          </div>
+         </div>
+         <b-row class="mt-4 mb-5">
+           <b-col>
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0071-IBS-custom-styles-_alert.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0071-IBS-custom-styles-_alert.scss.patch
new file mode 100644
index 0000000000..1f98959558
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0071-IBS-custom-styles-_alert.scss.patch
@@ -0,0 +1,143 @@
+From 2c38628afd6d5799f47fb3f13faaa1116b9e72e9 Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Mon, 27 Jun 2022 23:16:16 +0300
+Subject: [PATCH 1/7] IBS: custom styles _alert.scss
+
+---
+ src/assets/styles/bmc/custom/_alert.scss | 110 +++++++++++------------
+ 1 file changed, 55 insertions(+), 55 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
+index 0e78ba64..d85e9127 100644
+--- a/src/assets/styles/bmc/custom/_alert.scss
++++ b/src/assets/styles/bmc/custom/_alert.scss
+@@ -1,70 +1,70 @@
+ .alert {
+-    display: flex;
+-    padding: $spacer;
+-    border-width: 0 0 0 3px;
+-    color: gray("800");
+-    margin-bottom: $spacer;
++  display: flex;
++  padding: $spacer;
++  border-width: 0 0 0 3px;
++  color: gray("800");
++  margin-bottom: $spacer;
+ 
+-    &.small {
+-      padding: $spacer / 2;
+-      font-size: 1rem;
+-    }
++  &.small {
++    padding: $spacer / 2;
++    font-size: 1rem;
++  }
+ 
+-    .close {
+-      font-weight: 300;
+-      opacity: 1;
+-    }
++  .close {
++    font-weight: 300;
++    opacity: 1;
++  }
+ 
+-    .alert-icon {
+-      display: inline-flex;
+-      align-items: flex-start;
+-      margin-right: $spacer;
+-      margin-bottom: $spacer;
++  .alert-icon {
++    display: inline-flex;
++    align-items: flex-start;
++    margin-right: $spacer;
++    margin-bottom: $spacer;
+ 
+-      @include media-breakpoint-up(sm) {
+-        margin-bottom: 0;
+-      }
++    @include media-breakpoint-up(sm) {
++      margin-bottom: 0;
+     }
++  }
+ 
+-    .alert-content {
+-      flex: 1 1 auto;
+-    }
++  .alert-content {
++    flex: 1 1 auto;
++  }
+ 
+-    .alert-title {
+-      margin-bottom: $spacer / 2;
+-    }
++  .alert-title {
++    margin-bottom: $spacer / 2;
++  }
+ 
+-    .alert-msg {
+-      p + p {
+-        margin-bottom: $spacer;
+-      }
+-
+-      p:last-of-type {
+-        margin-bottom: 0;
+-      }
++  .alert-msg {
++    p + p {
++      margin-bottom: $spacer;
+     }
+ 
+-    &.alert-info {
+-      border-left-color: theme-color("info");
+-      background-color: theme-color-light("info");
+-      fill: theme-color("info");
++    p:last-of-type {
++      margin-bottom: 0;
+     }
++  }
+ 
+-    &.alert-success {
+-      border-left-color: theme-color("success");
+-      background-color: theme-color-light("success");
+-      fill: theme-color("success");
+-    }
++  &.alert-info {
++    border-left-color: theme-color("info");
++    background-color: theme-color-light("info");
++    fill: theme-color("info");
++  }
+ 
+-    &.alert-danger {
+-      border-left-color: theme-color("danger");
+-      background-color: theme-color-light("danger");
+-      fill: theme-color("danger");
+-    }
++  &.alert-success {
++    border-left-color: theme-color("success");
++    background-color: theme-color-light("success");
++    fill: theme-color("success");
++  }
+ 
+-    &.alert-warning {
+-      border-left-color: theme-color("warning");
+-      background-color: theme-color-light("warning");
+-      fill: theme-color("warning");
+-    }
+-  }
+\ No newline at end of file
++  &.alert-danger {
++    border-left-color: theme-color("danger");
++    background-color: theme-color-light("danger");
++    fill: theme-color("danger");
++  }
++
++  &.alert-warning {
++    border-left-color: theme-color("warning");
++    background-color: theme-color-light("warning");
++    fill: theme-color("warning");
++  }
++}
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0072-IBS-custom-styles-_base.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0072-IBS-custom-styles-_base.scss.patch
new file mode 100644
index 0000000000..a97a4f0510
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0072-IBS-custom-styles-_base.scss.patch
@@ -0,0 +1,103 @@
+From bf9a66d5b998b439399e15feb957fbb90212011b Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 04:17:24 +0300
+Subject: [PATCH] IBS: custom styles _base.scss
+
+---
+ src/assets/styles/bmc/custom/_base.scss | 52 +++++++++++++++++--------
+ 1 file changed, 36 insertions(+), 16 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
+index c11e046c..ae59da51 100644
+--- a/src/assets/styles/bmc/custom/_base.scss
++++ b/src/assets/styles/bmc/custom/_base.scss
+@@ -1,50 +1,70 @@
+-dt,
+-legend,
+-label {
+-  color: gray("800");
+-  font-size: 14px;
+-  font-weight: 400;
+-  line-height: 1.4285;
+-}
+ 
+ h1,
+ .h1 {
+-  font-size: 2.625rem;
+-  font-weight: 300;
++  font-size: 1.75rem !important;
++  font-weight: 700;
+   line-height: 1.238;
+ }
+ 
+ h2,
+ .h2 {
+-  font-size: 2.25rem;
+-  font-weight: 300;
++  font-size: 1.25rem !important;
++  font-weight: 500;
+   line-height: 1.3333;
+ }
+ 
+ h3,
+ .h3 {
+-  font-size: 1.75rem;
++  font-size: 1rem !important;
+   font-weight: 400;
+   line-height: 1.2857;
+ }
+ 
+ h4,
+ .h4 {
+-  font-size: 1.25rem;
++  font-size: 0.875rem !important;
+   font-weight: 400;
+   line-height: 1.3;
+ }
+ 
+ h5,
+ .h5 {
+-  font-size: 1rem;
++  font-size: 0.75rem !important;
+   font-weight: 500;
+   line-height: 1.375;
+ }
+ 
+ h6,
+ .h6 {
+-  font-size: 0.875rem;
++  font-size: 0.625rem !important;
+   font-weight: 500;
+   line-height: 1.2857;
+ }
++
++
++.nav-link--current{
++  background-color: $red-light-background !important;
++  color: $red !important;
++  &:hover,
++  &:focus {
++    background-color: $red-light-background !important;
++    color: $red !important;
++  }
++}
++
++.btn-link:active, .nav-link:active {
++  background-color: $red-light-background !important;
++  color: $red !important;
++}
++
++.app-header .navbar-text, .app-header .nav-link, .app-header .btn-link {
++  &:hover {
++    background-color: $red-40 !important;
++  }
++  &:active {
++    background-color: $red-active !important;
++  }
++  &:focus {
++    outline: 0;
++  }
++}
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0073-IBS-custom-styles-_buttons.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0073-IBS-custom-styles-_buttons.scss.patch
new file mode 100644
index 0000000000..0ff4344c10
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0073-IBS-custom-styles-_buttons.scss.patch
@@ -0,0 +1,187 @@
+From 990924d19a56b5dace9ca596bb55fa407e698715 Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 05:02:55 +0300
+Subject: [PATCH] IBS: custom styles _buttons.scss
+
+---
+ src/assets/styles/bmc/custom/_buttons.scss | 132 +++++++++++++++++----
+ 1 file changed, 112 insertions(+), 20 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
+index 2a7b8169..b3a69757 100644
+--- a/src/assets/styles/bmc/custom/_buttons.scss
++++ b/src/assets/styles/bmc/custom/_buttons.scss
+@@ -10,7 +10,7 @@
+     margin-right: $spacer / 4;
+   }
+   &:disabled {
+-    color: gray("600");
++    color: $red;
+     fill: currentColor;
+     box-shadow: none !important;
+     &:not(.btn-link) {
+@@ -21,27 +21,114 @@
+ }
+ 
+ .btn-primary {
+-  fill: currentColor;
+-  &:focus,
+-  &:not(:disabled):not(.disabled):active:focus {
+-    border-color: $white;
+-    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
++  background-color: $red;
++  border-radius: $border-radius;
++  border: none;
++  box-shadow: 1px 2px 2px -1px #4f252566 inset;
++  &:hover {
++    background-color: $red-hover;
++  }
++  &:not(:disabled):not(.disabled):active:focus,
++  &:focus-visible {
++    border: none;
++    box-shadow: none;
++    background-color: $red-click;
++  }
++  &:focus {
++    border: none;
++    box-shadow: 0px 0px 0px 4px $red-shadow;
++    background-color: $red;
++  }
++  &:active {
++    border: none;
++    box-shadow: none;
++    background-color: $red;
+   }
+ }
+ 
+ .btn-secondary {
+-  fill: currentColor;
+-  &:focus,
+-  &:not(:disabled):not(.disabled):active:focus {
+-    border-color: $white;
+-    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
++  background-color: $dark;
++  color: $gray-2;
++  border-radius: $border-radius;
++  border: none;
++  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
++  font-style: normal;
++  font-weight: 600;
++  font-size: 16px;
++  line-height: 20px;
++  &:hover {
++    background-color: $dark-hover;
++    color: $gray-2;
++  }
++  &:focus {
++    border: none;
++    box-shadow: 0px 0px 0px 4px $red-shadow;
++    color: $gray-2;
++    background-color: $dark;
++  }
++  &:not(:disabled):not(.disabled):active:focus,
++  &:focus-visible {
++    border: none;
++    box-shadow: none;
++    color: $gray-2;
++    background-color: $dark;
++  }
++}
++
++.btn-unstiled {
++  border: none;
++  &:focus {
++    box-shadow: none;
++  }
++  &:active {
++    box-shadow: none;
++  }
++}
++
++.btn-popover {
++  border: none;
++  color: $red;
++  height: 28px;
++  border-radius: $border-radius;
++  font-weight: 500;
++  font-size: 12px;
++  transition: ease-in 0.2s;
++  &:hover {
++    color: $white;
++    transition: ease-in 0.2s;
++  }
++  &:focus {
++    box-shadow: none;
++  }
++  &:active {
++    box-shadow: none;
++  }
++  &.selected-unit-button {
++    transition: ease-in 0.2s;
++    color: $white;
++  }
++  &.selected-choice-button {
++    transition: ease-in 0.2s;
++    color: $white;
++  }
++}
++
++.btn-toogle-popover {
++  justify-content: flex-start;
++  width: 25px;
++  height: 16px;
++  padding: 0;
++  &:focus {
++    box-shadow: none;
++  }
++  &:active {
++    box-shadow: none;
+   }
+ }
+ 
+ // Global style for all button link
+ .btn-link {
+-  font-weight: $headings-font-weight;
+-  fill: theme-color("primary");
++  color: $text-primary;
+   text-decoration: none !important;
+   &:hover {
+     background-color: gray("200");
+@@ -50,14 +137,19 @@
+   &:active {
+     background-color: gray("300");
+   }
+-  &:focus {
+-    box-shadow: inset 0 0 0 2px theme-color("primary");
+-    color: theme-color("primary");
+-    outline: none;
+-  }
+   &:disabled {
+     box-shadow: $btn-focus-box-shadow;
+   }
++  &.collapsed {
++    .icon-expand {
++      transform: rotate(180deg);
++      transition: 0.3s linear;
++    }
++    .icon-expand-right {
++      transform: rotate(180deg);
++      transition: 0.3s linear;
++    }
++  }
+ }
+ 
+ // Icon only buttons
+@@ -77,6 +169,6 @@
+ // Contain input buttons within input
+ .btn-datepicker .dropdown-toggle,
+ .input-action-btn {
+-  padding: 7px;
++  padding: 6px;
+   margin: 1px;
+-}
+\ No newline at end of file
++}
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0074-IBS-custom-styles-_card.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0074-IBS-custom-styles-_card.scss.patch
new file mode 100644
index 0000000000..ac995b68a5
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0074-IBS-custom-styles-_card.scss.patch
@@ -0,0 +1,46 @@
+From 2825cb4e355a5ed1957b73990f58e6469a5070fa Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Mon, 27 Jun 2022 23:17:50 +0300
+Subject: [PATCH 4/7] IBS: custom styles _card.scss
+
+---
+ src/assets/styles/bmc/custom/_card.scss | 24 +++++++++++++++++++++++-
+ 1 file changed, 23 insertions(+), 1 deletion(-)
+
+diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
+index 5f2a5962..34334687 100644
+--- a/src/assets/styles/bmc/custom/_card.scss
++++ b/src/assets/styles/bmc/custom/_card.scss
+@@ -1,5 +1,27 @@
+ .card {
++  border-radius: $border-radius;
+   .bg-success {
+     background-color: theme-color-light('success')!important;
+   }
+-}
+\ No newline at end of file
++}
++
++.card-header {
++  .card-header-tabs {
++    border: none !important;
++
++    .nav-link {
++      border: none !important;
++      color: $text-secondary;
++      font-weight: 500 !important;
++      background: none !important;
++      &:hover {
++        color: $red-hover
++      }
++    }
++
++    .nav-link.active {
++      color: $red-active !important;
++      text-decoration: underline;
++    }
++  }
++}
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0075-IBS-custom-styles-_dropdown.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0075-IBS-custom-styles-_dropdown.scss.patch
new file mode 100644
index 0000000000..b50139d13e
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0075-IBS-custom-styles-_dropdown.scss.patch
@@ -0,0 +1,63 @@
+From 3b53c5e3193c43aa9cbf5628ef25678e1d102c82 Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 06:15:28 +0300
+Subject: [PATCH] IBS: custom styles _dropdown.scss
+
+---
+ src/assets/styles/bmc/custom/_dropdown.scss | 26 +++++++++++++++++----
+ 1 file changed, 22 insertions(+), 4 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
+index 969c4c68..02e4e855 100644
+--- a/src/assets/styles/bmc/custom/_dropdown.scss
++++ b/src/assets/styles/bmc/custom/_dropdown.scss
+@@ -1,18 +1,36 @@
+ // Make calendar visible over the table
+ .dropdown-menu {
+   z-index: $zindex-dropdown + 1;
+-  padding: 0;
++  padding: $spacer / 2;
++  border-radius: $border-radius;
+ }
++
+ .dropdown-item {
+-  padding-left: $spacer/4;
+-  margin-top: -1 * $spacer/4;
++  padding: $spacer / 4 $spacer / 2;
++  margin: $spacer / 4;
++  width: auto;
++  border-radius: $border-radius;
++  &:hover {
++    background-color: $red-hover;
++    color: $white;
++  }
++  &:active {
++    background-color: $red-active;
++  }
++  &:focus {
++    outline: none;
++    background-color: $red-click;
++    box-shadow: inset 0 0 0 2px theme-color("primary");
++  }
+ }
++
+ .b-dropdown-form {
+   padding: $spacer/2;
+   .form-group {
+     margin-bottom: $spacer/2;
+   }
+ }
++
+ // Table filter dropdown clear button style
+ .table-filter {
+   .dropdown-item {
+@@ -28,4 +46,4 @@
+       box-shadow: inset 0 0 0 2px theme-color("primary");
+     }
+   }
+-}
+\ No newline at end of file
++}
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch
new file mode 100644
index 0000000000..293ad54330
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0076-IBS-custom-styles-_forms.scss.patch
@@ -0,0 +1,189 @@
+From f96c5c0e25f921cc8738817dd04ecfc1badbcbc6 Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Tue, 28 Jun 2022 06:41:02 +0300
+Subject: [PATCH] IBS: custom styles _forms.scss
+
+---
+ src/assets/styles/bmc/custom/_forms.scss | 120 +++++++++++++++++++----
+ 1 file changed, 99 insertions(+), 21 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
+index 428a40c2..914bf379 100644
+--- a/src/assets/styles/bmc/custom/_forms.scss
++++ b/src/assets/styles/bmc/custom/_forms.scss
+@@ -21,20 +21,12 @@
+ .custom-select,
+ .form-control,
+ .input-group-text {
+-  border-color: gray("500") !important;
+-  background-color: gray("100");
++  border-radius: $border-radius;
++  background-color: $white;
+ }
+ 
+ .custom-select,
+ .form-control {
+-  &:active {
+-    border: 1px solid $primary!important;
+-  }
+-  &:focus {
+-    color: theme-color("dark");
+-    background-color: gray("100");
+-    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
+-  }
+   &:disabled {
+     background-color: gray("400");
+     color: gray("600");
+@@ -48,26 +40,52 @@
+   }
+ }
+ 
+-.custom-select,
+-.custom-control-label,
++.form-control::-webkit-outer-spin-button,
++.form-control::-webkit-inner-spin-button {
++  -webkit-appearance: none;
++  margin: 0;
++}
++.form-control[type='number'] {
++  -moz-appearance: textfield;
++}
++
+ .form-control {
+-  color: theme-color("dark") !important;
+-  font-size: 1rem;
++  color: $text-secondary;
++  border-radius: $border-radius;
++  border: none;
++  background-color: $gray-5;
++  font-size: 0.875rem;
++  &:focus {
++    color: $text-secondary;
++  }
++  &:hover {
++    background-color: $gray-5-hover;
++  }
+ }
+ 
+ // Inverted form colors
+ .form-background {
+-  background-color: gray("100");
++  background-color: none;
++  padding: 0 !important;
+   .custom-select,
+   .form-control {
+-    background-color: $white;
++    color: #0c1c29e6;
++    border-radius: $border-radius;
++    border: none;
++    background-color: $gray-5;
++    &:hover {
++      background-color: $gray-5-hover;
++    }
+     &:focus {
+-      background-color: $white;
++      border: 1px solid gray("400");
+     }
+     &:disabled {
+       background-color: gray("400");
+       color: gray("600");
+     }
++    &.is-valid {
++      border: 1px solid gray("400");
++    }
+   }
+ }
+ 
+@@ -76,12 +94,22 @@
+   line-height: $form-line-height;
+ }
+ 
++.custom-checkbox ::before {
++  box-shadow: none !important;
++  border: 2px solid $on-surface-secondary;
++  background-color: #fff;
++  border-radius: 3px;
++}
++
+ .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
+ .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
+ .custom-control-input:checked ~ .custom-control-label::before  {
+-  background-color: $black;
+-  border-color: $black;
++  background-color: $red;
++  border-color: $red;
+   cursor: pointer;
++  &:focus {
++    box-shadow: none !important;
++  }
+ }
+ 
+ .custom-control {
+@@ -94,8 +122,35 @@
+   }
+ }
+ 
+-.custom-control-input:focus ~ .custom-control-label::before{
+-  box-shadow: 0 0 0 2px  theme-color("primary");
++.custom-switch {
++  width: 28px;
++  height: 16px;
++}
++
++.custom-switch
++.custom-control-input:focus ~ .custom-control-label::before {
++  box-shadow: none;
++}
++
++.custom-switch
++.custom-control-input ~ .custom-control-label::after {
++  border: 1px solid $gray-20;
++  background: $white;
++}
++
++.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
++  border-color: $gray-20;
++}
++
++.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
++  background-color: rgba(4, 10, 15, 0.3);
++  border-color: $gray-20;
++}
++
++.custom-switch
++.custom-control-input ~ .custom-control-label::before {
++  border: 1px solid $gray-20;
++  background: rgba(4, 10, 15, 0.3);
+ }
+ 
+ .custom-control-label::after {
+@@ -130,3 +185,26 @@
+     background-position: right 3rem bottom 50%;
+   }
+ }
++// For invisible label of fields
++.invisible {
++  height: 0;
++  margin-bottom: 0;
++}  
++// Global style progress bar
++.progress {
++  height: 8px;
++  background-color: $gray-10;
++}
++
++.progress-bar {
++  background-color: $red;
++  border-radius: 4px;
++}
++
++.progress_bar_percent {
++  color: $red;
++}
++
++.system-control__radio label {
++  padding-top: 4px;
++}
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0077-IBS-custom-styles-_tables.scss.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0077-IBS-custom-styles-_tables.scss.patch
new file mode 100644
index 0000000000..fd5a90eaa8
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0077-IBS-custom-styles-_tables.scss.patch
@@ -0,0 +1,139 @@
+From cef5d582b6b67188882d347b20630218837f42fe Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Mon, 27 Jun 2022 23:19:20 +0300
+Subject: [PATCH 7/7] IBS: custom styles _tables.scss
+
+---
+ src/assets/styles/bmc/custom/_tables.scss | 49 +++++++++++++----------
+ 1 file changed, 28 insertions(+), 21 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
+index e8b5a832..f2213e80 100644
+--- a/src/assets/styles/bmc/custom/_tables.scss
++++ b/src/assets/styles/bmc/custom/_tables.scss
+@@ -3,16 +3,16 @@
+   z-index: $zindex-dropdown;
+ 
+   td {
+-    border-top: 1px solid gray("300");
+-    border-bottom: 1px solid gray("300");
++    border-top: 1px solid $gray-10;
++    border-bottom: 1px solid $gray-10;
+     &:first-of-type {
+-      border-left: 1px solid gray("300");
++      border-left: 1px solid $gray-10;
+     }
+     &:last-of-type {
+-      border-right: 1px solid gray("300");
++      border-right: 1px solid $gray-10;
+     }
+     vertical-align: middle;
+-
++    font-size: 0.875rem;
+     // Table action buttons
+     .btn-link {
+       width: 40px;
+@@ -26,19 +26,24 @@
+ 
+   // thead-light added for specificity
+   .thead-light th {
++    background-color: $gray-10;
+     vertical-align: middle;
+-    border-top: 1px solid gray("300");
+-    border-bottom: 1px solid gray("300");
++    border-top: 1px solid $gray-10;
++    border-bottom: 1px solid $gray-10;
+     &:first-of-type {
+-      border-left: 1px solid gray("300");
++      border-left: 1px solid $gray-10;
+     }
+     &:last-of-type {
+-      border-right: 1px solid gray("300");
++      border-right: 1px solid $gray-10;
+     }
+-    color: theme-color("dark");
++    text-transform: uppercase;
++    color: $text-primary;
+     &:focus {
+       outline: none;
+     }
++    & > div {
++      font-size: 0.875rem !important;
++    }
+   }
+ 
+   .status-icon svg {
+@@ -56,20 +61,22 @@
+   }
+ 
+   .b-table-details {
+-    background-color: theme-color("light");
++    background-color: inherit;
+     td {
+-      padding-left: calc(50px + (#{$table-cell-padding} * 2));
+-      padding-right: calc(50px + (#{$table-cell-padding} * 2));
++      padding-left: $table-cell-padding;
++      padding-right: $table-cell-padding;
+     }
+     dl {
+       margin: 0;
+     }
+     dt {
++      font-size: 0.75rem !important;
+       float: left;
+       clear: left;
+       margin-right: $spacer / 2;
+     }
+     dd {
++      font-size: 0.75rem !important;
+       line-height: 1.2
+     }
+   }
+@@ -78,7 +85,7 @@
+     width: 50px;
+     .btn {
+       padding: 0;
+-      width: 50px;
++      width: 40px;
+     }
+     svg {
+       fill: theme-color("dark");
+@@ -104,12 +111,12 @@
+ // Table stacked style for small screen only
+ @include media-breakpoint-down(xs) {
+   .b-table-stacked-sm {
+-    border: 1px solid gray("300");
++    border: 1px solid $gray-10;
+ 
+     tr {
+ 
+-      &:not(:first-child) > td[aria-colindex='1'] {
+-        border-top: 1px solid gray("300");
++      &:not(:first-child) > td[aria-colindex='1'] {        
++        border-top: 1px solid $gray-10;
+         padding-top: 0.625rem;
+       }
+ 
+@@ -157,15 +164,15 @@
+   .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
+     &::before {
+       text-align: left;
+-      padding-left: $spacer /2;
++      padding-left: $spacer / 2;
+     }
+ 
+     > div {
+       padding-left: 1rem;
+     }
+   }
++}
+ 
+-  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+-    border-top-width: 1px;
+-  }
++.table-responsive, .table-responsive-md {
++  margin-top: 0.5rem;
+ }
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
index 7566d95ec0..5750a70eca 100644
--- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
@@ -7,7 +7,7 @@ LICENSE = "Apache-2.0"
 LIC_FILES_CHKSUM = "file://LICENSE;md5=e3fc50a88d0a364313df4b21ef20c29e"
 
 SRC_URI = "git://git@git.sila.ru/srv/pub/scm/git/openbmc/webui-vue.git;branch=sila;protocol=ssh"
-SRCREV  = "1dbada9b95957247ee732741b19f51782883acad"
+SRCREV  = "d8970475611ccfe83dd353e8b8b4ddbf43bb1f59"
 
 SRC_URI += "\
     file://favicon.ico \
@@ -26,6 +26,16 @@ SRC_URI += "\
     file://0009-AppHeader-color-nav-trigger-width-wrap.patch \
     file://0010-virtual-media-layout-and-styles.patch \
     file://0011-firmware-buttons-layout.patch \
+    file://0012-inventory-service-indicators.patch \
+    file://0013-power-operations-boot-settings.patch \
+    file://0014-security-ldap-settings.patch \
+    file://0071-IBS-custom-styles-_alert.scss.patch \
+    file://0072-IBS-custom-styles-_base.scss.patch \
+    file://0073-IBS-custom-styles-_buttons.scss.patch \
+    file://0074-IBS-custom-styles-_card.scss.patch \
+    file://0075-IBS-custom-styles-_dropdown.scss.patch \
+    file://0076-IBS-custom-styles-_forms.scss.patch \
+    file://0077-IBS-custom-styles-_tables.scss.patch \
     file://0099-AppLayout-refresh-UI-on-time.patch \
     "