bfg-common 1.5.643 → 1.5.645

package/components/common/wizards/network/add/AddOld.vue

@@ -1,454 +1,454 @@
-<template>
-  <atoms-wizard
-    v-model:show="props.show"
-    :wizard="props.wizard"
-    :selected-scheme="props.selectedScheme"
-    :title="props.title"
-    :localization="localization"
-    :class="[
-      'add-networking-wizard',
-      {
-        'is-dark': props.isDarkMode,
-      },
-    ]"
-    max-height="551px"
-    test-id="add-networking-wizard"
-    @change-steps="onChangeSteps"
-    @hide="emits('hide')"
-    @submit="emits('submit')"
-  >
-    <template #modalBody="{ selectedStep }">
-      <common-wizards-network-add-steps-select-connection-type
-        v-if="selectedStep.id === 0"
-        v-model="connectionTypeLocal"
-      />
-      <common-wizards-network-add-steps-select-target-device
-        v-if="selectedStep.id === 1"
-        :wizard="props.wizard"
-        :target-device="props.targetDevice"
-        :connection-type="connectionTypeLocal"
-        :standard-switches-initial="props.standardSwitchesInitial"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[1]"
-        :selected-standard-switch-id="props.selectedStandardSwitchId"
-        :selected-switch-id="props.selectedSwitchId"
-        @hide-alert="onHideAlert"
-        @change-target-device="onChangeTargetDevice"
-      />
-      <common-wizards-network-add-steps-create-standard-switch
-        v-if="selectedStep.id === 2 || selectedStep.id === 6"
-        :free-adapters="props.freeAdapters"
-        :added-adapters="props.addedAdapters"
-        :core-adapters="props.coreAdapters"
-        :adapter-status="props.adapterStatus"
-        :adapters="props.adapters"
-        :is-show-no-connected-active-adapters-modal="
-          props.isShowNoConnectedActiveAdaptersModal
-        "
-        :is-show-no-active-adapters-modal="props.isShowNoActiveAdaptersModal"
-        :is-dark-mode="props.isDarkMode"
-        @get-free-adapters="onGetFreeAdapters"
-        @change-added-adapters="onChangeAddedAdapters"
-        @change-adapter-status="onChangeAdapterStatus"
-        @confirm-no-active-adapters-modal="emits('confirm-no-active-adapters-modal')"
-        @hide-no-connected-active-adapters-modal="
-          emits('hide-no-connected-active-adapters-modal')
-        "
-        @hide-no-active-adapters-modal="emits('hide-no-active-adapters-modal')"
-      />
-      <common-wizards-network-add-steps-port-properties
-        v-if="selectedStep.id === 3"
-        :wizard="props.wizard"
-        :port-properties="props.portProperties"
-        :mtu-from-switch="props.mtuFromSwitch"
-        :project="props.project"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[3]"
-        :tcp-stacks="props.tcpStacks"
-        @change-gateway-flag="onChangeGatewayFlag"
-        @change-port-properties="onChangePortProperties"
-        @hide-alert="onHideAlert"
-      />
-      <common-wizards-network-add-steps-ip-four-settings
-        v-if="selectedStep.id === 4"
-        :wizard="props.wizard"
-        :ip-four-settings="props.ipFourSettings"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[4]"
-        :tcp-stacks="props.tcpStacks"
-        :tcp="props.portProperties.tcp"
-        :gateway-flag="props.gatewayFlag"
-        @change-gateway-flag="onChangeGatewayFlag"
-        @change-ip-four-settings="onChangeIpFourSettings"
-        @hide-alert="onHideAlert"
-      />
-      <common-wizards-network-add-steps-connection-settings
-        v-if="selectedStep.id === 5"
-        :wizard="props.wizard"
-        :connection-settings="props.connectionSettings"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[5]"
-        @change-connection-settings="onChangeConnectionSettings"
-        @hide-alert="onHideAlert"
-      />
-      <common-wizards-network-add-steps-ready-complete
-        v-if="selectedStep.id === 7"
-        :ready-complete-fields="props.readyCompleteFields"
-      />
-    </template>
-  </atoms-wizard>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_Localization,
-  UI_I_ItemsWithTotalCounts,
-} from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type {
-  UI_I_PortProperties,
-  UI_I_IpFourSettings,
-  UI_I_ConnectionSettings,
-  UI_I_TargetDevice,
-  UI_I_Switch,
-  UI_I_ReadyCompleteFields,
-  UI_I_TCPStack,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  UI_I_SwitchAdapterItem,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
-
-const props = defineProps<{
-  show: boolean
-  wizard: Wizard
-  selectedScheme: number[]
-  title: string
-  project: UI_T_Project
-  connectionType: string
-  targetDevice: UI_I_TargetDevice
-  standardSwitchesInitial: UI_I_Switch[]
-  alertMessages: string[][]
-  selectedStandardSwitchId?: string
-  selectedSwitchId: string
-  freeAdapters: UI_I_Adapter[]
-  addedAdapters: string[]
-  coreAdapters: string[]
-  adapterStatus: UI_I_AdapterStatus
-  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-  isShowNoConnectedActiveAdaptersModal: boolean
-  isShowNoActiveAdaptersModal: boolean
-  isDarkMode: boolean
-  portProperties: UI_I_PortProperties
-  mtuFromSwitch: number
-  tcpStacks: UI_I_TCPStack[]
-  ipFourSettings: UI_I_IpFourSettings
-  gatewayFlag: boolean
-  connectionSettings: UI_I_ConnectionSettings
-  readyCompleteFields: UI_I_ReadyCompleteFields[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'update:connection-type', value: string): void
-  (event: 'change-connection-settings', value: UI_I_ConnectionSettings): void
-  (event: 'hide-alert', value: number): void
-  (event: 'change-gateway-flag', value: boolean): void
-  (event: 'change-ip-four-settings', value: UI_I_IpFourSettings): void
-  (event: 'change-port-properties', value: UI_I_PortProperties): void
-  (event: 'get-free-adapters', cb: () => void): void
-  (event: 'change-added-adapters', value: string[]): void
-  (event: 'change-adapter-status', value: UI_I_AdapterStatus): void
-  (event: 'confirm-no-active-adapters-modal'): void
-  (event: 'hide-no-connected-active-adapters-modal'): void
-  (event: 'hide-no-active-adapters-modal'): void
-  (event: 'change-target-device', value: UI_I_TargetDevice): void
-  (event: 'change-steps', value: UI_I_WizardStep[]): void
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const connectionTypeLocal = computed<string>({
-  get() {
-    return props.connectionType
-  },
-  set(newValue: string) {
-    emits('update:connection-type', newValue)
-  },
-})
-
-const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
-  emits('change-added-adapters', addedAdaptersNew)
-}
-
-const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
-  emits('change-adapter-status', adapterStatusNew)
-}
-
-const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
-  emits('change-target-device', newTargetDevice)
-}
-
-const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
-  emits('change-port-properties', newFields)
-}
-
-const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
-  emits('change-ip-four-settings', newFields)
-}
-
-const onChangeGatewayFlag = (newValue: boolean) => {
-  emits('change-gateway-flag', newValue)
-}
-
-const onChangeConnectionSettings = (
-  newFields: UI_I_ConnectionSettings
-): void => {
-  emits('change-connection-settings', newFields)
-}
-
-const onHideAlert = (stepId: number): void => {
-  emits('hide-alert', stepId)
-}
-
-const onGetFreeAdapters = (showModal: () => void): void => {
-  emits('get-free-adapters', showModal)
-}
-
-const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
-  emits('change-steps', value)
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.modal) {
-  & > .modal-dialog > .modal-content > .modal-body {
-    height: calc(100% - 110px);
-    .disabled-on-time {
-      opacity: 0.4;
-      pointer-events: none;
-    }
-  }
-}
-:deep(.disabled-on-time) {
-  opacity: 0.4;
-  pointer-events: none;
-}
-:deep(.wizard-content-container.add-networking-step) {
-  padding: 0px 15px 10px 10px;
-
-  .danger-not-valid {
-    border: 2px solid red;
-    border-bottom: 1px solid #db2100;
-  }
-  .tooltip-field {
-    margin-right: 12px;
-  }
-
-  .horizontal-flex-container {
-    margin-bottom: 5px;
-    min-height: 36px;
-    display: flex;
-    flex-direction: row;
-  }
-  .property-label-group {
-    width: 140px;
-  }
-  .disabled {
-    opacity: 0.4;
-    pointer-events: none;
-  }
-  .wizard-content-port {
-    .margin-left-property-value-group {
-      margin-left: 10px;
-    }
-
-    .property-value-group {
-      padding-left: 23px;
-    }
-    .horizontal-flex-container {
-      min-height: 24px;
-      margin-bottom: 0;
-    }
-    .radio {
-      min-height: 39px;
-      margin: 10px 0;
-    }
-    .form-block {
-      margin: 12px 0 24px 0;
-      padding-left: 23px;
-
-      &.form-block-ipv {
-        input[type='text'] {
-          width: 143px;
-        }
-        .horizontal-flex-container > label {
-          margin-right: 50px;
-        }
-      }
-    }
-    .edit-vmkernel-adapter-section {
-      padding-top: 12px;
-
-      label {
-        input[type='checkbox'] {
-          margin-right: 4px;
-          transform: translateY(1px);
-        }
-      }
-      .horizontal-flex-container {
-        margin-bottom: 5px;
-      }
-    }
-    .port-properties-network-label {
-      width: 280px;
-    }
-    .port-properties-padding {
-      padding-top: 8px;
-    }
-    .port-properties-mtu-selector {
-      margin-right: 12px;
-    }
-    .port-properties-mtu-container {
-      display: flex;
-    }
-    select {
-      height: 24px;
-    }
-  }
-  .nw-property-value-group {
-    display: inline;
-  }
-}
-
-:deep(.modal-body-content.modal-body-content__confirmation) {
-  display: flex;
-  .confirm-icon-container {
-    margin-right: 20px;
-  }
-  .preserve-newlines {
-    white-space: pre-line;
-    font-size: 15px;
-  }
-}
-
-.add-networking-wizard.is-dark {
-  :deep(.wizard-content-container.add-networking-step) {
-    .ready-complete-container {
-      background-color: var(--pannel-bg-color);
-      margin-top: 12px;
-
-      span {
-        color: var(--description-color);
-      }
-    }
-
-    .add-networking-radio-button-description {
-      color: var(--description-color);
-    }
-
-    .property-label-group {
-      color: var(--main-color-mode2);
-    }
-    .flex-property-label-group {
-      color: var(--main-color-mode2);
-    }
-    .flex-property-value-group {
-      select {
-        color: #fff;
-      }
-    }
-    .failover-order-master {
-      .secondary-title label {
-        color: #fff;
-      }
-    }
-    .k-grid-content {
-      background-color: var(--modal-bg-color);
-    }
-    .vui-action-bar {
-      background-color: var(--pannel-bg-color);
-      color: var(--title-color);
-      padding: 8px 0 3px;
-
-      .action-link-container:not(.disabled) {
-        &:hover {
-          background-color: #29414e;
-          border: 1px solid #c7e9ff;
-        }
-      }
-
-      svg {
-        fill: #fff;
-      }
-    }
-
-    .k-grid.k-widget .k-grid-content {
-      border-left: 1px solid #485764;
-      border-right: 1px solid #485764;
-      border-top: 1px solid #ddd;
-      border-bottom: 1px solid #ddd;
-
-      tbody tr {
-        background-color: var(--modal-bg-color);
-
-        td {
-          border-bottom: 1px solid #666666;
-          border-color: #666666;
-        }
-
-        &:hover {
-          background-color: #324f61;
-          color: var(--title-color);
-
-          td {
-            border-bottom: 1px solid #ffffff;
-          }
-        }
-
-        &.k-state-selected {
-          background-color: #d8e3e9;
-          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-
-          td span {
-            color: #000;
-          }
-        }
-      }
-    }
-
-    .failover-order-details {
-      &.relative-container .absolute-container {
-        background-color: var(--pannel-bg-color);
-        color: var(--main-color-mode2);
-
-        &:has(.no-items-selected-container) {
-          background-color: transparent;
-        }
-      }
-
-      td span {
-        color: var(--main-color-mode2);
-      }
-      button span {
-        color: var(--main-color-mode2);
-
-        &:hover:not(.disabled) {
-          background-color: transparent;
-        }
-      }
-      button.active span {
-        color: #fff;
-      }
-    }
-  }
-
-  .select-adapter-info span {
-    color: var(--main-color-mode2);
-  }
-}
-</style>
+<template>
+  <atoms-wizard
+    v-model:show="props.show"
+    :wizard="props.wizard"
+    :selected-scheme="props.selectedScheme"
+    :title="props.title"
+    :localization="localization"
+    :class="[
+      'add-networking-wizard',
+      {
+        'is-dark': props.isDarkMode,
+      },
+    ]"
+    max-height="551px"
+    test-id="add-networking-wizard"
+    @change-steps="onChangeSteps"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  >
+    <template #modalBody="{ selectedStep }">
+      <common-wizards-network-add-steps-select-connection-type
+        v-if="selectedStep.id === 0"
+        v-model="connectionTypeLocal"
+      />
+      <common-wizards-network-add-steps-select-target-device
+        v-if="selectedStep.id === 1"
+        :wizard="props.wizard"
+        :target-device="props.targetDevice"
+        :connection-type="connectionTypeLocal"
+        :standard-switches-initial="props.standardSwitchesInitial"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="props.alertMessages[1]"
+        :selected-standard-switch-id="props.selectedStandardSwitchId"
+        :selected-switch-id="props.selectedSwitchId"
+        @hide-alert="onHideAlert"
+        @change-target-device="onChangeTargetDevice"
+      />
+      <common-wizards-network-add-steps-create-standard-switch
+        v-if="selectedStep.id === 2 || selectedStep.id === 6"
+        :free-adapters="props.freeAdapters"
+        :added-adapters="props.addedAdapters"
+        :core-adapters="props.coreAdapters"
+        :adapter-status="props.adapterStatus"
+        :adapters="props.adapters"
+        :is-show-no-connected-active-adapters-modal="
+          props.isShowNoConnectedActiveAdaptersModal
+        "
+        :is-show-no-active-adapters-modal="props.isShowNoActiveAdaptersModal"
+        :is-dark-mode="props.isDarkMode"
+        @get-free-adapters="onGetFreeAdapters"
+        @change-added-adapters="onChangeAddedAdapters"
+        @change-adapter-status="onChangeAdapterStatus"
+        @confirm-no-active-adapters-modal="emits('confirm-no-active-adapters-modal')"
+        @hide-no-connected-active-adapters-modal="
+          emits('hide-no-connected-active-adapters-modal')
+        "
+        @hide-no-active-adapters-modal="emits('hide-no-active-adapters-modal')"
+      />
+      <common-wizards-network-add-steps-port-properties
+        v-if="selectedStep.id === 3"
+        :wizard="props.wizard"
+        :port-properties="props.portProperties"
+        :mtu-from-switch="props.mtuFromSwitch"
+        :project="props.project"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="props.alertMessages[3]"
+        :tcp-stacks="props.tcpStacks"
+        @change-gateway-flag="onChangeGatewayFlag"
+        @change-port-properties="onChangePortProperties"
+        @hide-alert="onHideAlert"
+      />
+      <common-wizards-network-add-steps-ip-four-settings
+        v-if="selectedStep.id === 4"
+        :wizard="props.wizard"
+        :ip-four-settings="props.ipFourSettings"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="props.alertMessages[4]"
+        :tcp-stacks="props.tcpStacks"
+        :tcp="props.portProperties.tcp"
+        :gateway-flag="props.gatewayFlag"
+        @change-gateway-flag="onChangeGatewayFlag"
+        @change-ip-four-settings="onChangeIpFourSettings"
+        @hide-alert="onHideAlert"
+      />
+      <common-wizards-network-add-steps-connection-settings
+        v-if="selectedStep.id === 5"
+        :wizard="props.wizard"
+        :connection-settings="props.connectionSettings"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="props.alertMessages[5]"
+        @change-connection-settings="onChangeConnectionSettings"
+        @hide-alert="onHideAlert"
+      />
+      <common-wizards-network-add-steps-ready-complete
+        v-if="selectedStep.id === 7"
+        :ready-complete-fields="props.readyCompleteFields"
+      />
+    </template>
+  </atoms-wizard>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_PortProperties,
+  UI_I_IpFourSettings,
+  UI_I_ConnectionSettings,
+  UI_I_TargetDevice,
+  UI_I_Switch,
+  UI_I_ReadyCompleteFields,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
+
+const props = defineProps<{
+  show: boolean
+  wizard: Wizard
+  selectedScheme: number[]
+  title: string
+  project: UI_T_Project
+  connectionType: string
+  targetDevice: UI_I_TargetDevice
+  standardSwitchesInitial: UI_I_Switch[]
+  alertMessages: string[][]
+  selectedStandardSwitchId?: string
+  selectedSwitchId: string
+  freeAdapters: UI_I_Adapter[]
+  addedAdapters: string[]
+  coreAdapters: string[]
+  adapterStatus: UI_I_AdapterStatus
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  isShowNoConnectedActiveAdaptersModal: boolean
+  isShowNoActiveAdaptersModal: boolean
+  isDarkMode: boolean
+  portProperties: UI_I_PortProperties
+  mtuFromSwitch: number
+  tcpStacks: UI_I_TCPStack[]
+  ipFourSettings: UI_I_IpFourSettings
+  gatewayFlag: boolean
+  connectionSettings: UI_I_ConnectionSettings
+  readyCompleteFields: UI_I_ReadyCompleteFields[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:connection-type', value: string): void
+  (event: 'change-connection-settings', value: UI_I_ConnectionSettings): void
+  (event: 'hide-alert', value: number): void
+  (event: 'change-gateway-flag', value: boolean): void
+  (event: 'change-ip-four-settings', value: UI_I_IpFourSettings): void
+  (event: 'change-port-properties', value: UI_I_PortProperties): void
+  (event: 'get-free-adapters', cb: () => void): void
+  (event: 'change-added-adapters', value: string[]): void
+  (event: 'change-adapter-status', value: UI_I_AdapterStatus): void
+  (event: 'confirm-no-active-adapters-modal'): void
+  (event: 'hide-no-connected-active-adapters-modal'): void
+  (event: 'hide-no-active-adapters-modal'): void
+  (event: 'change-target-device', value: UI_I_TargetDevice): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return props.connectionType
+  },
+  set(newValue: string) {
+    emits('update:connection-type', newValue)
+  },
+})
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
+  emits('change-added-adapters', addedAdaptersNew)
+}
+
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
+  emits('change-target-device', newTargetDevice)
+}
+
+const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
+  emits('change-port-properties', newFields)
+}
+
+const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
+  emits('change-ip-four-settings', newFields)
+}
+
+const onChangeGatewayFlag = (newValue: boolean) => {
+  emits('change-gateway-flag', newValue)
+}
+
+const onChangeConnectionSettings = (
+  newFields: UI_I_ConnectionSettings
+): void => {
+  emits('change-connection-settings', newFields)
+}
+
+const onHideAlert = (stepId: number): void => {
+  emits('hide-alert', stepId)
+}
+
+const onGetFreeAdapters = (showModal: () => void): void => {
+  emits('get-free-adapters', showModal)
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
+  emits('change-steps', value)
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal) {
+  & > .modal-dialog > .modal-content > .modal-body {
+    height: calc(100% - 110px);
+    .disabled-on-time {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+}
+:deep(.disabled-on-time) {
+  opacity: 0.4;
+  pointer-events: none;
+}
+:deep(.wizard-content-container.add-networking-step) {
+  padding: 0px 15px 10px 10px;
+
+  .danger-not-valid {
+    border: 2px solid red;
+    border-bottom: 1px solid #db2100;
+  }
+  .tooltip-field {
+    margin-right: 12px;
+  }
+
+  .horizontal-flex-container {
+    margin-bottom: 5px;
+    min-height: 36px;
+    display: flex;
+    flex-direction: row;
+  }
+  .property-label-group {
+    width: 140px;
+  }
+  .disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .wizard-content-port {
+    .margin-left-property-value-group {
+      margin-left: 10px;
+    }
+
+    .property-value-group {
+      padding-left: 23px;
+    }
+    .horizontal-flex-container {
+      min-height: 24px;
+      margin-bottom: 0;
+    }
+    .radio {
+      min-height: 39px;
+      margin: 10px 0;
+    }
+    .form-block {
+      margin: 12px 0 24px 0;
+      padding-left: 23px;
+
+      &.form-block-ipv {
+        input[type='text'] {
+          width: 143px;
+        }
+        .horizontal-flex-container > label {
+          margin-right: 50px;
+        }
+      }
+    }
+    .edit-vmkernel-adapter-section {
+      padding-top: 12px;
+
+      label {
+        input[type='checkbox'] {
+          margin-right: 4px;
+          transform: translateY(1px);
+        }
+      }
+      .horizontal-flex-container {
+        margin-bottom: 5px;
+      }
+    }
+    .port-properties-network-label {
+      width: 280px;
+    }
+    .port-properties-padding {
+      padding-top: 8px;
+    }
+    .port-properties-mtu-selector {
+      margin-right: 12px;
+    }
+    .port-properties-mtu-container {
+      display: flex;
+    }
+    select {
+      height: 24px;
+    }
+  }
+  .nw-property-value-group {
+    display: inline;
+  }
+}
+
+:deep(.modal-body-content.modal-body-content__confirmation) {
+  display: flex;
+  .confirm-icon-container {
+    margin-right: 20px;
+  }
+  .preserve-newlines {
+    white-space: pre-line;
+    font-size: 15px;
+  }
+}
+
+.add-networking-wizard.is-dark {
+  :deep(.wizard-content-container.add-networking-step) {
+    .ready-complete-container {
+      background-color: var(--pannel-bg-color);
+      margin-top: 12px;
+
+      span {
+        color: var(--description-color);
+      }
+    }
+
+    .add-networking-radio-button-description {
+      color: var(--description-color);
+    }
+
+    .property-label-group {
+      color: var(--main-color-mode2);
+    }
+    .flex-property-label-group {
+      color: var(--main-color-mode2);
+    }
+    .flex-property-value-group {
+      select {
+        color: #fff;
+      }
+    }
+    .failover-order-master {
+      .secondary-title label {
+        color: #fff;
+      }
+    }
+    .k-grid-content {
+      background-color: var(--modal-bg-color);
+    }
+    .vui-action-bar {
+      background-color: var(--pannel-bg-color);
+      color: var(--title-color);
+      padding: 8px 0 3px;
+
+      .action-link-container:not(.disabled) {
+        &:hover {
+          background-color: #29414e;
+          border: 1px solid #c7e9ff;
+        }
+      }
+
+      svg {
+        fill: #fff;
+      }
+    }
+
+    .k-grid.k-widget .k-grid-content {
+      border-left: 1px solid #485764;
+      border-right: 1px solid #485764;
+      border-top: 1px solid #ddd;
+      border-bottom: 1px solid #ddd;
+
+      tbody tr {
+        background-color: var(--modal-bg-color);
+
+        td {
+          border-bottom: 1px solid #666666;
+          border-color: #666666;
+        }
+
+        &:hover {
+          background-color: #324f61;
+          color: var(--title-color);
+
+          td {
+            border-bottom: 1px solid #ffffff;
+          }
+        }
+
+        &.k-state-selected {
+          background-color: #d8e3e9;
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+
+          td span {
+            color: #000;
+          }
+        }
+      }
+    }
+
+    .failover-order-details {
+      &.relative-container .absolute-container {
+        background-color: var(--pannel-bg-color);
+        color: var(--main-color-mode2);
+
+        &:has(.no-items-selected-container) {
+          background-color: transparent;
+        }
+      }
+
+      td span {
+        color: var(--main-color-mode2);
+      }
+      button span {
+        color: var(--main-color-mode2);
+
+        &:hover:not(.disabled) {
+          background-color: transparent;
+        }
+      }
+      button.active span {
+        color: #fff;
+      }
+    }
+  }
+
+  .select-adapter-info span {
+    color: var(--main-color-mode2);
+  }
+}
+</style>