fix the winner displaying

src/components/election/CandidateCard.vue

@@ -78,7 +78,7 @@ const vote = () =>
     class="rounded-lg text-center shadow bg-gray-50"
     :class="{
       '!bg-secondary-50': isVotingOpen,
-      '!bg-green-50 shadow-lg': isVotingClosed
+      '!bg-white shadow-lg': isVotingClosed
     }"
   >
     <div class="flex flex-1 flex-col p-8">
@@ -94,7 +94,7 @@ const vote = () =>
         {{ props.candidate.owner }}
       </p>
       <dl
-        v-if="isVotingOpen"
+        v-if="isVotingOpen || isVotingClosed"
         class="mt-1 flex flex-grow flex-col justify-between"
       >
         <dt class="sr-only">Role</dt>

src/components/hero/ElectionHero.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import CandidateCard from '@/components/election/CandidateCard.vue';
 
@@ -15,6 +15,8 @@ const candidatesSorted = computed(
   () => store.getters['ballot/candidatesSorted']
 );
 
+const ballot = computed(() => store.state.ballot.ballots);
+
 const content = {
   isNominationOpen: {
     headline: 'Nominate Now!',
@@ -30,6 +32,11 @@ const content = {
     subline: 'The election has concluded. A new IG has been elected - Exciting times ahead!'
   }
 };
+
+onMounted(() => {
+  if (!ballot.value.length) store.dispatch('ballot/fetchBallots');
+});
+
 </script>
 
 <template>

src/store/modules/ballot.js

@@ -103,7 +103,7 @@ const actions = {
 
       commit('pushCandidates', rows);
 
-      if (getters.isVotingOpen) {
+      if (getters.isVotingOpen || getters.isVotingClosed) {
         dispatch('fetchVotingBallots');
       }
     } catch (err) {