ui: fixes style ui issues (#6261)

This PR for fixes some UI Bugs

 The project selected color is not displayed after switching project
 Project view, the cards are not separated but stick together
 Dashboard: The color of the selected zone is not displayed
 Dark mode: Hover through row tables that are discolored

ui/src/components/header/ProjectMenu.vue

@@ -20,9 +20,8 @@
     <a-select
       v-if="!isDisabled()"
       class="project-select"
-      :defaultValue="$t('label.default.view')"
       :loading="loading"
-      :value="($store.getters.project && 'id' in $store.getters.project) ? ($store.getters.project.displaytext || $store.getters.project.name) : $t('label.default.view')"
+      v-model:value="projectSelected"
       :filterOption="filterProject"
       @change="changeProject"
       @focus="fetchData"
@@ -40,7 +39,10 @@
         </a-tooltip>
       </template>
 
-      <a-select-option v-for="(project, index) in projects" :key="index" :label="project.displaytext || project.name">
+      <a-select-option
+        v-for="(project, index) in projects"
+        :key="index"
+        :label="project.displaytext || project.name">
         <span>
           <resource-icon v-if="project.icon && project.icon.base64image" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
           <project-outlined v-else style="margin-right: 5px" />
@@ -71,6 +73,16 @@ export default {
   created () {
     this.fetchData()
   },
+  computed: {
+    projectSelected () {
+      let projectIndex = 0
+      if (this.$store.getters?.project?.id) {
+        projectIndex = this.projects.findIndex(project => project.id === this.$store.getters.project.id)
+      }
+
+      return projectIndex
+    }
+  },
   methods: {
     fetchData () {
       if (this.isDisabled()) {
@@ -135,6 +147,6 @@ export default {
   position: absolute;
   top: 0;
   right: 1px;
-  margin-top: -3px;
+  margin-top: -5px;
 }
 </style>

ui/src/style/dark-mode.less

@@ -283,7 +283,7 @@
       & > tr:hover.ant-table-row-selected > td,
       & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
       & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-        background-color: @table-body-hover-bgColor;
+        background-color: @table-body-hover-bgColor !important;
       }
 
       & > tr > th.ant-table-column-sort {
@@ -551,7 +551,7 @@
       &-option-active:not(.ant-select-item-option-disabled),
       &:hover:not(.ant-select-item-disabled),
       &-active:hover:not(.ant-select-item-disabled) {
-        background-color: @dropdown-hover-bgColor;
+        background-color: @dropdown-hover-bgColor !important;
       }
     }
   }
@@ -714,7 +714,7 @@
 
     &-item:not(.ant-dropdown-menu-item-selected):hover,
     &-submenu-title:not(.ant-dropdown-menu-item-selected):hover {
-      background-color: @dropdown-hover-bgColor;
+      background-color: @dropdown-hover-bgColor !important;
     }
 
     &-title-content > a,

ui/src/views/dashboard/CapacityDashboard.vue

@@ -21,9 +21,8 @@
       <div class="capacity-dashboard-wrapper">
         <div class="capacity-dashboard-select">
           <a-select
-            :defaultValue="zoneSelected.name"
             :placeholder="$t('label.select.a.zone')"
-            :value="zoneSelected.name"
+            v-model:value="zoneSelectedKey"
             @change="changeZone"
             showSearch
             optionFilterProp="label"
@@ -164,6 +163,15 @@ export default {
       }
     }
   },
+  computed: {
+    zoneSelectedKey () {
+      if (this.zones.length === 0) {
+        return this.zoneSelected.name
+      }
+      const zoneIndex = this.zones.findIndex(zone => zone.id === this.zoneSelected.id)
+      return zoneIndex
+    }
+  },
   created () {
     this.fetchData()
   },

ui/src/views/dashboard/UsageDashboard.vue

@@ -252,7 +252,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .usage-dashboard {
+  :deep(.usage-dashboard) {
 
     &-chart-tile {
       margin-bottom: 12px;