Cleanup create intervention policy modal (#4797)

Co-authored-by: Brittany Kondo <[email protected]>

packages/client/hmi-client/src/components/drilldown/tera-drilldown-section.vue

@@ -68,7 +68,7 @@ header {
 header > div {
  display: inline-flex;
  gap: var(--gap-1);
- align-items: start;
+ align-items: center;
 
  &:first-child {
  flex: 1;

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="intervention-card">
  <header class="flex align-items-center gap-2">
- <tera-toggleable-input :model-value="intervention.name" @update:model-value="onUpdateName($event)" tag="h5" />
+ <tera-toggleable-input :model-value="intervention.name" @update:model-value="onUpdateName($event)" tag="h6" />
  <div class="flex align-items-center ml-auto">
  <RadioButton
  :model-value="interventionType"
@@ -290,6 +290,7 @@ const debounceUpdateState = debounce((intervention) => {
 }
 
 .intervention-card {
+ background-color: var(--surface-50);
  border: 1px solid var(--surface-border-light);
  border-radius: var(--border-radius-medium);
  padding: var(--gap-2) var(--gap);

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-card.vue

@@ -46,14 +46,16 @@ const toggleContextMenu = (event) => {
 
 <style scoped>
 .policy-card {
+ background-color: var(--gray-0);
+ border-left: 4px solid var(--surface-300);
+
  &.card-selected {
- background-color: var(--gray-100);
  border-left: 4px solid var(--primary-color);
  }
 
  &:not(.card-selected):hover {
  cursor: pointer;
- background-color: var(--gray-100);
+ background-color: var(--gray-50);
  }
 
  & > div {

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue

@@ -7,7 +7,12 @@
  hide-dropdown
  >
  <template #sidebar>
- <tera-slider-panel v-model:is-open="isSidebarOpen" content-width="360px" header="Intervention policies">
+ <tera-slider-panel
+ v-model:is-open="isSidebarOpen"
+ content-width="360px"
+ header="Intervention policies"
+ class="input-config"
+ >
  <template #content>
  <section>
  <tera-input-text v-model="filterInterventionsText" placeholder="Filter" />
@@ -27,8 +32,8 @@
  </tera-slider-panel>
  </template>
  <tera-columnar-panel>
- <tera-drilldown-section class="px-3">
- <template #header-controls-left> Select an intervention policy or create a new one here. </template>
+ <tera-drilldown-section class="px-3 intervention-settings-section">
+ <template #header-controls-left> Add and configure intervention settings for this policy. </template>
  <template #header-controls-right>
  <Button outlined severity="secondary" label="Reset" @click="onResetPolicy" />
  </template>
@@ -446,6 +451,10 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.intervention-settings-section {
+ background-color: var(--surface-100);
+}
+
 ul {
  list-style: none;
 }