feat: add button size variants and improve positioning (#19)

Author: toddeTV

app/components/ui/UiButton.vue

@@ -7,6 +7,10 @@ defineProps({
   variant: {
     type: String as PropType<'primary' | 'secondary' | 'link' | 'danger'>,
     default: 'primary'
+  },
+  size: {
+    type: String as PropType<'normal' | 'small'>,
+    default: 'normal'
   }
 })
 </script>
@@ -15,10 +19,12 @@ defineProps({
   <button
     :type="type"
     :class="{
-      'p-3 bg-black text-white text-base uppercase cursor-pointer transition-all duration-300 hover:bg-white hover:text-black hover:shadow-inner-black': variant === 'primary',
-      'py-2 px-4 bg-white text-black border-2 border-black cursor-pointer uppercase hover:bg-black hover:text-white': variant === 'secondary',
-      'inline-block py-4 px-8 bg-white text-black border-[3px] border-black no-underline uppercase text-lg transition-all duration-300 cursor-pointer hover:bg-black hover:text-white hover:-translate-y-1 hover:shadow-[0_5px_0_#000]': variant === 'link',
-      'py-2 px-4 bg-red-600 text-white border-2 border-red-600 cursor-pointer uppercase hover:bg-red-700': variant === 'danger'
+      'bg-black text-white text-base uppercase cursor-pointer transition-all duration-300 hover:bg-white hover:text-black hover:shadow-inner-black': variant === 'primary',
+      'bg-white text-black border-2 border-black cursor-pointer uppercase hover:bg-black hover:text-white': variant === 'secondary',
+      'bg-white text-black border-[3px] border-black no-underline uppercase text-lg transition-all duration-300 cursor-pointer hover:bg-black hover:text-white hover:-translate-y-1 hover:shadow-[0_5px_0_#000]': variant === 'link',
+      'bg-red-600 text-white border-2 border-red-600 cursor-pointer uppercase hover:bg-red-700': variant === 'danger',
+      'p-3': size === 'normal',
+      'py-1 px-2 text-sm': size === 'small'
     }"
   >
     <slot />

app/pages/index.vue

@@ -134,12 +134,17 @@ async function submitAnswer() {
 
       <!-- Active Question -->
       <div v-if="activeQuestion" class="bg-white border-[4px] border-black p-8">
-        <div class="flex justify-between items-start mb-8">
-          <h2 class="text-2xl leading-tight flex-1">{{ activeQuestion.question_text }}</h2>
+        <div class="flex justify-between items-center mb-4">
+          <UiButton @click="refreshQuestion" variant="secondary" size="small">
+            🔄 Refresh
+          </UiButton>
           <div v-if="activeQuestion.is_locked" class="py-2 px-4 bg-black text-white uppercase text-sm whitespace-nowrap">
             🔒 Answers Locked
           </div>
         </div>
+        <div class="flex justify-between items-start">
+          <h2 class="text-2xl leading-tight flex-1">{{ activeQuestion.question_text }}</h2>
+        </div>
 
         <div class="flex flex-col gap-4 mb-5">
           <label
@@ -185,11 +190,6 @@ async function submitAnswer() {
         </div>
       </div>
 
-      <div class="flex justify-center gap-5 mt-8">
-        <UiButton @click="refreshQuestion" variant="link">
-          Refresh
-        </UiButton>
-      </div>
     </div>
   </div>
 </template>

app/pages/results.vue

@@ -92,12 +92,17 @@ function getPercentage(count: number) {
         <h2 class="text-3xl mb-4 leading-tight">{{ results.question.question_text }}</h2>
         <div class="flex justify-between items-center text-lg">
           <span class="font-bold py-2 px-4 bg-gray-100 border-2 border-black">Total Votes: {{ results.totalVotes }}</span>
-          <span
-            class="py-2 px-4 border-2 border-black uppercase font-bold"
-            :class="results.question.is_locked ? 'bg-black text-white' : 'bg-white text-black'"
-          >
-            {{ results.question.is_locked ? '🔒 Locked' : '🔓 Open' }}
-          </span>
+          <div class="flex items-center gap-4">
+            <UiButton @click="refreshResults" variant="secondary" size="small">
+              🔄 Refresh
+            </UiButton>
+            <span
+              class="py-2 px-4 border-2 border-black uppercase font-bold"
+              :class="results.question.is_locked ? 'bg-black text-white' : 'bg-white text-black'"
+            >
+              {{ results.question.is_locked ? '🔒 Locked' : '🔓 Open' }}
+            </span>
+          </div>
         </div>
       </div>
 
@@ -147,18 +152,10 @@ function getPercentage(count: number) {
     <!-- Navigation -->
     <div v-if="!isCoreView" class="flex flex-col items-center gap-5 mt-8">
       <div class="flex justify-center gap-5">
-        <UiButton @click="refreshResults" variant="link">
-          Refresh
-        </UiButton>
-        <NuxtLink to="/">
-          <UiButton variant="link">
-            ← Back to Quiz
-          </UiButton>
-        </NuxtLink>
       </div>
 
       <!-- Core View Controls -->
-      <div class="mt-8 p-4 border-t-2 border-black w-full max-w-md flex flex-col items-center gap-4">
+      <div class="p-4 w-full max-w-md flex flex-col items-center gap-4">
         <h3 class="text-lg font-bold">Core View Generator</h3>
         <div class="grid grid-cols-2 gap-4 w-full">
           <div class="flex flex-col gap-1">