From 0e9a19f24db7b7585f1b952b403b3f6e619cb53f Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Tue, 22 Aug 2023 17:50:45 +0530
Subject: [PATCH] ui: Fix project theme on reload or refresh (#7893)

* css fixes from main

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

* component: when in project, toggle the theme also

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

---------

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/header/ProjectMenu.vue        | 1 +
 ui/src/views/compute/CreateAutoScaleVmGroup.vue | 4 ++--
 ui/src/views/compute/DeployVM.vue               | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/header/ProjectMenu.vue b/ui/src/components/header/ProjectMenu.vue
index 722bc2877d6..95a12ffeb1d 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -78,6 +78,7 @@ export default {
       let projectIndex = 0
       if (this.$store.getters?.project?.id) {
         projectIndex = this.projects.findIndex(project => project.id === this.$store.getters.project.id)
+        this.$store.dispatch('ToggleTheme', projectIndex === undefined ? 'light' : 'dark')
       }
 
       return projectIndex
diff --git a/ui/src/views/compute/CreateAutoScaleVmGroup.vue b/ui/src/views/compute/CreateAutoScaleVmGroup.vue
index 81da8a9b6d7..b9dce0ed500 100644
--- a/ui/src/views/compute/CreateAutoScaleVmGroup.vue
+++ b/ui/src/views/compute/CreateAutoScaleVmGroup.vue
@@ -34,7 +34,7 @@
                   <div style="margin-top: 15px">
                     <span>{{ $t('message.select.a.zone') }}</span><br/>
                     <a-form-item :label="$t('label.zoneid')" name="zoneid" ref="zoneid">
-                      <div v-if="zones.length <= 9">
+                      <div v-if="zones.length <= 8">
                         <a-row type="flex" :gutter="[16,18]" justify="start">
                           <div v-for="(zoneItem, idx) in zones" :key="idx">
                             <a-radio-group
@@ -3168,7 +3168,7 @@ export default {
 
   .zone-radio-button {
     width:100%;
-    min-width: 225px;
+    min-width: 345px;
     height: 60px;
     display: flex;
     padding-left: 20px;
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index bb94c87db74..f31c48ee8d4 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -34,7 +34,7 @@
                   <div style="margin-top: 15px">
                     <span>{{ $t('message.select.a.zone') }}</span><br/>
                     <a-form-item :label="$t('label.zoneid')" name="zoneid" ref="zoneid">
-                      <div v-if="zones.length <= 9">
+                      <div v-if="zones.length <= 8">
                         <a-row type="flex" :gutter="[16, 18]" justify="start">
                           <div v-for="(zoneItem, idx) in zones" :key="idx">
                             <a-radio-group
@@ -2698,7 +2698,7 @@ export default {
 
   .zone-radio-button {
     width:100%;
-    min-width: 225px;
+    min-width: 345px;
     height: 60px;
     display: flex;
     padding-left: 20px;