Many new improvments and features to the UI (#76)

* feat(general): many new improvments and features to the UI

* fix: fix lints and run preetier

* fix: furthermore fixes

* chore: fix preetier eslint issue

* stlye: reposition mark all as read button for better placement

* fix: fix inccorect positioning on the mark all as read buton, again

* fix: fix account related issue with predefined types and styling

* fix: fix notification button dissapearance & type definition

* fix: fix auth page styling

* stlye: fixed styling on users list

* fix: fix lint dead code collector

* fix: please the prettier gods

* fix(notifications): seriously serialising

* chore: please the prettier gods once again, o holy one

* fix: remove eslint thing, im blaming eslint for that one

---------

Co-authored-by: Aden <aden@adenmgb.com>

pages/admin/metadata/games/[id]/index.vue

@@ -77,7 +77,7 @@
                 >
                   <button
                     type="button"
-                    class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                    class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                     @click="() => removeImageFromCarousel(element)"
                   >
                     Remove image
@@ -182,7 +182,7 @@
           <NuxtLink
             :href="`/admin/library/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           >
             Open in Library
             <ArrowTopRightOnSquareIcon
@@ -194,7 +194,7 @@
           <NuxtLink
             :href="`/store/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           >
             Open in Store
             <ArrowTopRightOnSquareIcon
@@ -245,7 +245,7 @@
                 <button
                   v-if="image !== game.mBannerObjectId"
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                   @click="() => updateBannerImage(image)"
                 >
                   Set as banner
@@ -253,14 +253,14 @@
                 <button
                   v-if="image !== game.mCoverObjectId"
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                   @click="() => updateCoverImage(image)"
                 >
                   Set as cover
                 </button>
                 <button
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                   @click="() => deleteImage(image)"
                 >
                   Delete image
@@ -298,7 +298,9 @@
     />
     <ModalTemplate v-model="showAddCarouselModal">
       <template #default>
-        <div class="grid grid-cols-2 grid-flow-dense gap-4">
+        <div
+          class="grid grid-cols-2 grid-flow-dense gap-4 max-h-[70vh] overflow-y-auto p-4"
+        >
           <div
             v-for="(image, imageIdx) in validAddCarouselImages"
             :key="imageIdx"
@@ -310,7 +312,7 @@
             >
               <button
                 type="button"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => addImageToCarousel(image)"
               >
                 Add
@@ -329,10 +331,10 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showAddCarouselModal = false"
         >
-          Cancel
+          Close
         </button>
       </template>
     </ModalTemplate>
@@ -350,7 +352,7 @@
             >
               <button
                 type="button"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => insertImageAtCursor(image)"
               >
                 Insert
@@ -369,7 +371,7 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showAddCarouselModal = false"
         >
           Cancel
@@ -447,7 +449,7 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showEditCoreMetadata = false"
         >
           Cancel
@@ -713,7 +715,6 @@ async function uploadAfterImageUpload(result: Game) {
 }
 
 function addImageToCarousel(id: string) {
-  showAddCarouselModal.value = false;
   game.value.mImageCarouselObjectIds.push(id);
   updateImageCarousel();
 }

pages/admin/metadata/index.vue

@@ -20,6 +20,9 @@
         to="/admin/metadata/games"
         class="transition group aspect-[3/2] flex flex-col justify-center items-center rounded-lg bg-zinc-950 hover:bg-zinc-950/50 shadow"
       >
+        <RectangleStackIcon
+          class="mb-2 h-12 w-12 text-zinc-500 group-hover:text-blue-500 transition-all duration-200"
+        />
         <span
           class="transition-all text-4xl font-bold text-zinc-400 group-hover:text-zinc-100 uppercase tracking-widest"
           >Games</span
@@ -29,6 +32,9 @@
         to="/admin/metadata/companies"
         class="transition group aspect-[3/2] flex flex-col justify-center items-center rounded-lg bg-zinc-950 hover:bg-zinc-950/50 shadow"
       >
+        <BuildingOffice2Icon
+          class="mb-2 h-12 w-12 text-zinc-500 group-hover:text-blue-500 transition-all duration-200"
+        />
         <span
           class="transition-all text-4xl font-bold text-zinc-400 group-hover:text-zinc-100 uppercase tracking-widest"
           >Companies</span
@@ -39,6 +45,11 @@
 </template>
 
 <script setup lang="ts">
+import {
+  RectangleStackIcon,
+  BuildingOffice2Icon,
+} from "@heroicons/vue/24/solid";
+
 definePageMeta({
   layout: "admin",
 });