From 4d23fb14671ed7fd94ee5da84dc184f5caf1c5c5 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Sun, 4 Dec 2022 19:04:40 +0100
Subject: [PATCH] feat(poll): changed ui of poll results (#328)

---
 components/status/StatusPoll.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/status/StatusPoll.vue b/components/status/StatusPoll.vue
index 3155131f..6b76897c 100644
--- a/components/status/StatusPoll.vue
+++ b/components/status/StatusPoll.vue
@@ -42,15 +42,16 @@ async function vote(e: Event) {
       </button>
     </form>
     <template v-else>
-      <div v-for="(option, index) of poll.options" :key="index" flex justify-between p-1 relative :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }">
-        <div absolute top-0 left-0 bottom-0 bg-primary-active rounded-l-sm rounded-r-lg h-full class="w-[var(--bar-width)]" />
-        <div z-1 flex items-center gap-1 px-1 text-inverted>
-          {{ option.title }}
-
-          <div v-if="poll.voted && poll.ownVotes?.includes(index)" i-ri:checkbox-circle-line />
+      <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 }}
+            <span v-if="poll.voted && poll.ownVotes?.includes(index)" ml-2 mt-1 inline-block i-ri:checkbox-circle-line />
+          </span>
+          <span text-primary-active> {{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }}</span>
         </div>
-        <div z-1>
-          {{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }}
+        <div class="bg-gray/40" rounded-l-sm rounded-r-lg h-5px w-full>
+          <div bg-primary-active h-full class="w-[var(--bar-width)]" />
         </div>
       </div>
     </template>