From 87f5b01ea58048fa206d34c9e9564d34f13df518 Mon Sep 17 00:00:00 2001
From: Ben Brown <9870007+brownben@users.noreply.github.com>
Date: Fri, 1 Mar 2024 18:40:56 +0000
Subject: [PATCH] new buttony link style (with icons)

---
 frontend/assets/main.css                  |  6 ---
 frontend/components/ButtonSmall.vue       | 31 ++++++++++++
 frontend/components/Event.vue             | 57 ++++++++++++-----------
 frontend/components/LeagueClass.vue       | 35 +++++++-------
 frontend/components/LeagueGroup.vue       | 23 ++++-----
 frontend/components/Result.vue            | 21 +++------
 frontend/components/Table/Competitors.vue |  7 +--
 frontend/pages/leagues/[name]/index.vue   | 40 +++++++---------
 8 files changed, 113 insertions(+), 107 deletions(-)
 create mode 100644 frontend/components/ButtonSmall.vue

diff --git a/frontend/assets/main.css b/frontend/assets/main.css
index 338312b8..7a7347a9 100644
--- a/frontend/assets/main.css
+++ b/frontend/assets/main.css
@@ -45,12 +45,6 @@ button {
   background: var(--main-100, #fae8ff);
 }
 
-@media print {
-  @page {
-    size: A3;
-  }
-}
-
 .theme-purple {
   --main-50: #fdf4ff;
   --main-100: #fae8ff;
diff --git a/frontend/components/ButtonSmall.vue b/frontend/components/ButtonSmall.vue
new file mode 100644
index 00000000..0db611c2
--- /dev/null
+++ b/frontend/components/ButtonSmall.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps({
+  link: { type: String, default: '' },
+  coloured: { type: Boolean, default: false },
+  external: { type: Boolean, default: false },
+})
+</script>
+<template>
+  <NuxtLink
+    v-if="link"
+    :to="link"
+    :external="external"
+    class="inline-flex items-center gap-2 rounded border px-2 py-1 text-sm font-medium leading-tight transition duration-100 hover:border-main-300 hover:bg-main-100 hover:text-main-800"
+    :class="{
+      'border-gray-200 bg-gray-50 text-gray-500': !coloured,
+      'border-main-200 bg-main-50 text-main-700': coloured,
+    }"
+  >
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    class="inline-flex items-center gap-2 rounded border px-2 py-1 text-sm font-medium leading-tight transition duration-100 hover:border-main-300 hover:bg-main-100 hover:text-main-800"
+    :class="{
+      'border-gray-200 bg-gray-50 text-gray-500': !coloured,
+      'border-main-200 bg-main-50 text-main-700': coloured,
+    }"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/components/Event.vue b/frontend/components/Event.vue
index dd439410..00abe82d 100644
--- a/frontend/components/Event.vue
+++ b/frontend/components/Event.vue
@@ -6,6 +6,9 @@ import {
   GlobeEuropeAfricaIcon as GlobeIcon,
   PuzzlePieceIcon,
   TagIcon,
+  CloudArrowUpIcon,
+  TrashIcon,
+  PencilSquareIcon,
 } from '@heroicons/vue/24/outline'
 import { displayDate } from '~/utils/date'
 import type { Event } from '~/api-types'
@@ -23,6 +26,9 @@ const resultsLinks = computed(() =>
     (link) => props.event.results_links[link],
   ),
 )
+const uploadLink = `/upload/file?event_id=${encodeURIComponent(
+  props.event.id,
+)}&upload_key=${encodeURIComponent(props.event.upload_key ?? '')}`
 
 const deleteEvent = async () => {
   if (
@@ -44,6 +50,7 @@ const deleteEvent = async () => {
     <h3 v-else class="text-3xl font-black text-gray-900 sm:text-4xl">
       {{ event.name }}
     </h3>
+
     <div class="flex flex-col gap-x-7 gap-y-2 sm:flex-row sm:flex-wrap">
       <ImageRow :icon="CalendarIcon" darker>
         {{ displayDate(event.date) }}
@@ -65,25 +72,26 @@ const deleteEvent = async () => {
         </a>
       </ImageRow>
     </div>
+
     <p v-if="event.more_information && !small" class="text-gray-600">
       {{ event.more_information }}
     </p>
+
     <div v-if="event.results_uploaded" class="mt-3 flex flex-wrap gap-3">
-      <NuxtLink
-        :to="`/events/${event.id}/results`"
-        class="rounded bg-main-100 px-2 py-1 text-sm font-medium text-main-700 transition hover:bg-main-200"
-      >
+      <ButtonSmall :link="`/events/${event.id}/results`" coloured>
         Results
-      </NuxtLink>
-      <a
+      </ButtonSmall>
+      <ButtonSmall
         v-for="result_type in resultsLinks"
         :key="result_type"
-        :href="props.event.results_links[result_type]"
-        class="rounded bg-main-100 px-2 py-1 text-sm font-medium text-main-700 transition hover:bg-main-200"
+        :link="props.event.results_links[result_type]"
+        coloured
+        external
       >
         {{ result_type }}
-      </a>
+      </ButtonSmall>
     </div>
+
     <template v-if="admin">
       <dl class="text-gray-800">
         <div class="flex gap-2">
@@ -95,27 +103,20 @@ const deleteEvent = async () => {
           <dd class="select-all">{{ event.upload_key }}</dd>
         </div>
       </dl>
+
       <div class="-mb-2 flex flex-wrap gap-3">
-        <NuxtLink
-          :to="`/upload/file?event_id=${encodeURIComponent(
-            event.id,
-          )}&upload_key=${encodeURIComponent(event.upload_key ?? '')}`"
-          class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-        >
+        <ButtonSmall :link="uploadLink">
+          <CloudArrowUpIcon class="size-4" aria-hidden="true" />
           Upload Results
-        </NuxtLink>
-        <NuxtLink
-          :to="`/events/${event.id}/edit`"
-          class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-        >
-          Edit Event
-        </NuxtLink>
-        <button
-          class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-          @click="deleteEvent"
-        >
-          Delete Event
-        </button>
+        </ButtonSmall>
+        <ButtonSmall :link="`/events/${event.id}/edit`">
+          <PencilSquareIcon class="size-4" aria-hidden="true" />
+          Edit
+        </ButtonSmall>
+        <ButtonSmall @click="deleteEvent">
+          <TrashIcon class="size-4" aria-hidden="true" />
+          Delete
+        </ButtonSmall>
       </div>
     </template>
   </article>
diff --git a/frontend/components/LeagueClass.vue b/frontend/components/LeagueClass.vue
index 3434a408..d42dd9e0 100644
--- a/frontend/components/LeagueClass.vue
+++ b/frontend/components/LeagueClass.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  DocumentTextIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from '@heroicons/vue/24/outline'
 import type { PropType } from 'vue'
 import type { LeagueClass } from '~/api-types'
 
@@ -25,25 +30,19 @@ const deleteClass = async () => {
       {{ cls.name }}
     </h3>
 
-    <div>
-      <NuxtLink
-        :to="`/leagues/${props.cls.league}/results/${props.cls.name}`"
-        class="mr-2 rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-      >
+    <div class="flex flex-wrap items-center gap-2">
+      <ButtonSmall :link="`/leagues/${cls.league}/results/${cls.name}`">
+        <DocumentTextIcon class="size-4" aria-hidden="true" />
         Results
-      </NuxtLink>
-      <NuxtLink
-        :to="`/leagues/${props.cls.league}/classes/${props.cls.name}/edit`"
-        class="mr-2 rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-      >
-        Edit Class
-      </NuxtLink>
-      <button
-        class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-        @click="deleteClass"
-      >
-        Delete Class
-      </button>
+      </ButtonSmall>
+      <ButtonSmall :link="`/leagues/${cls.league}/classes/${cls.name}/edit`">
+        <PencilSquareIcon class="size-4" aria-hidden="true" />
+        Edit
+      </ButtonSmall>
+      <ButtonSmall @click="deleteClass">
+        <TrashIcon class="size-4" aria-hidden="true" />
+        Delete
+      </ButtonSmall>
     </div>
   </article>
 </template>
diff --git a/frontend/components/LeagueGroup.vue b/frontend/components/LeagueGroup.vue
index 33079559..5c97092e 100644
--- a/frontend/components/LeagueGroup.vue
+++ b/frontend/components/LeagueGroup.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/24/outline'
 import type { PropType } from 'vue'
 import type { LeagueGroup } from '~/api-types'
 
@@ -25,19 +26,15 @@ const deleteGroup = async () => {
       {{ group.name }}
     </h3>
 
-    <div>
-      <NuxtLink
-        :to="`/leagues/${props.group.league}/groups/${props.group.name}/edit`"
-        class="mr-2 rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-      >
-        Edit Group
-      </NuxtLink>
-      <button
-        class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-        @click="deleteGroup"
-      >
-        Delete Group
-      </button>
+    <div class="flex flex-wrap items-center gap-2">
+      <ButtonSmall :link="`/leagues/${group.league}/groups/${group.name}/edit`">
+        <PencilSquareIcon class="size-4" aria-hidden="true" />
+        Edit
+      </ButtonSmall>
+      <ButtonSmall @click="deleteGroup">
+        <TrashIcon class="size-4" aria-hidden="true" />
+        Delete
+      </ButtonSmall>
     </div>
   </article>
 </template>
diff --git a/frontend/components/Result.vue b/frontend/components/Result.vue
index 7d38fc50..d97145ca 100644
--- a/frontend/components/Result.vue
+++ b/frontend/components/Result.vue
@@ -72,26 +72,17 @@ const showTransferForm = ref(false)
         </div>
       </dl>
       <div class="-mb-2 mt-4 flex flex-wrap gap-3">
-        <button
-          class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-          @click="toggleIncomplete"
-        >
+        <ButtonSmall @click="toggleIncomplete">
           <template v-if="result.incomplete"> Mark as Complete </template>
           <template v-else> Mark as Incomplete </template>
-        </button>
-        <button
-          class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-          @click="toggleVisibility"
-        >
+        </ButtonSmall>
+        <ButtonSmall @click="toggleVisibility">
           <template v-if="result.visible"> Hide Result </template>
           <template v-else> Include Result </template>
-        </button>
-        <button
-          class="rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-          @click="showTransferForm = !showTransferForm"
-        >
+        </ButtonSmall>
+        <ButtonSmall @click="showTransferForm = !showTransferForm">
           Transfer Result
-        </button>
+        </ButtonSmall>
       </div>
       <LazyResultTransferForm
         v-if="showTransferForm"
diff --git a/frontend/components/Table/Competitors.vue b/frontend/components/Table/Competitors.vue
index 9385795d..74e564d6 100644
--- a/frontend/components/Table/Competitors.vue
+++ b/frontend/components/Table/Competitors.vue
@@ -137,13 +137,10 @@ const ariaSorted = computed(
         </td>
         <td>
           <div class="flex flex-wrap justify-around gap-2">
-            <NuxtLink
-              :to="`/competitors/${competitor.id}/edit`"
-              class="flex gap-2 rounded border border-gray-200 px-2 py-1 text-sm font-medium leading-tight text-gray-600 transition hover:border-main-300 hover:bg-main-100 hover:text-main-800"
-            >
+            <ButtonSmall :to="`/competitors/${competitor.id}/edit`">
               <PencilSquareIcon class="size-4" aria-hidden="true" />
               Edit
-            </NuxtLink>
+            </ButtonSmall>
           </div>
         </td>
       </tr>
diff --git a/frontend/pages/leagues/[name]/index.vue b/frontend/pages/leagues/[name]/index.vue
index 027c55c6..8a0cdfea 100644
--- a/frontend/pages/leagues/[name]/index.vue
+++ b/frontend/pages/leagues/[name]/index.vue
@@ -138,13 +138,12 @@ if (league.value) {
           class="mx-auto flex max-w-screen-lg grid-cols-3 flex-col gap-8 px-6 py-6 sm:grid sm:pb-6 sm:pt-10 lg:px-8"
         >
           <div class="pb-4">
-            <h2 class="col-span-1 text-2xl font-bold text-gray-500">Classes</h2>
-            <NuxtLink
-              :to="`/leagues/${route.params.name}/classes/create`"
-              class="mt-2 inline-block rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-            >
-              + Add Class
-            </NuxtLink>
+            <h2 class="col-span-1 mb-2 text-2xl font-bold text-gray-600">
+              Classes
+            </h2>
+            <ButtonSmall :link="`/leagues/${route.params.name}/classes/create`">
+              + Create Class
+            </ButtonSmall>
           </div>
 
           <div class="col-span-2 -mt-6 flex flex-col divide-y">
@@ -176,13 +175,12 @@ if (league.value) {
           class="mx-auto flex max-w-screen-lg grid-cols-3 flex-col gap-8 px-6 py-6 sm:grid sm:pb-4 sm:pt-10 lg:px-8"
         >
           <div class="pb-4">
-            <h2 class="col-span-1 text-2xl font-bold text-gray-600">Groups</h2>
-            <NuxtLink
-              :to="`/leagues/${route.params.name}/groups/create`"
-              class="mt-2 inline-block rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
-            >
+            <h2 class="col-span-1 mb-2 text-2xl font-bold text-gray-600">
+              Groups
+            </h2>
+            <ButtonSmall :link="`/leagues/${route.params.name}/groups/create`">
               + Create Group
-            </NuxtLink>
+            </ButtonSmall>
           </div>
 
           <div class="col-span-2 -mt-6 flex flex-col divide-y">
@@ -202,23 +200,21 @@ if (league.value) {
       >
         <div class="flex grid-cols-3 flex-col sm:grid">
           <div class="col-span-1 pb-8 sm:pb-0">
-            <h2 class="text-2xl font-bold text-gray-500">Events</h2>
+            <h2 class="text-2xl font-bold text-gray-600">Events</h2>
 
             <div class="mt-2 flex flex-wrap gap-2">
-              <NuxtLink
+              <ButtonSmall
                 v-if="loggedIn"
-                :to="`/events/create?league=${league.name}`"
-                class="inline-block rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
+                :link="`/events/create?league=${league.name}`"
               >
                 + Create Event
-              </NuxtLink>
-              <NuxtLink
+              </ButtonSmall>
+              <ButtonSmall
                 v-if="loggedIn && league.competitor_pool != league.name"
-                :to="`/events/add?league=${league.name}`"
-                class="inline-block rounded bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700 transition hover:bg-gray-200"
+                :link="`/events/add?league=${league.name}`"
               >
                 + Add Event from Another League
-              </NuxtLink>
+              </ButtonSmall>
             </div>
           </div>