From 18ad1c233307fd4d398ed344645c9e20c15a3c1f Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 15 Jan 2023 12:31:16 +0100
Subject: [PATCH] fix: improve vote ui

---
 components/status/StatusPoll.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/status/StatusPoll.vue b/components/status/StatusPoll.vue
index 9788a6c8..abc466b6 100644
--- a/components/status/StatusPoll.vue
+++ b/components/status/StatusPoll.vue
@@ -38,18 +38,22 @@ const votersCount = $computed(() => poll.votersCount ?? 0)
 </script>
 
 <template>
-  <div flex flex-col w-full items-stretch gap-3 dir="auto">
-    <form v-if="!poll.voted && !poll.expired" flex flex-col gap-4 accent-primary @click.stop="noop" @submit.prevent="vote">
-      <label v-for="(option, index) of poll.options" :key="index" flex items-center gap-2 px-2>
+  <div flex flex-col w-full items-stretch gap-2 py3 dir="auto">
+    <form v-if="!poll.voted && !poll.expired" flex="~ col gap3" accent-primary @click.stop="noop" @submit.prevent="vote">
+      <label v-for="(option, index) of poll.options" :key="index" flex="~ gap2" items-center>
         <input name="choices" :value="index" :type="poll.multiple ? 'checkbox' : 'radio'">
         {{ option.title }}
       </label>
-      <button btn-solid>
+      <button btn-solid mt-1>
         {{ $t('action.vote') }}
       </button>
     </form>
     <template v-else>
-      <div v-for="(option, index) of poll.options" :key="index" py-1 relative :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }">
+      <div
+        v-for="(option, index) of poll.options"
+        :key="index" py-1 relative
+        :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }"
+      >
         <div flex justify-between pb-2 w-full>
           <span inline-flex align-items>
             {{ option.title }}
@@ -62,7 +66,7 @@ const votersCount = $computed(() => poll.votersCount ?? 0)
         </div>
       </div>
     </template>
-    <div text-sm flex="~ inline" gap-x-1>
+    <div text-sm flex="~ inline" gap-x-1 text-secondary>
       <CommonLocalizedNumber
         keypath="status.poll.count"
         :count="poll.votesCount"