run eslint

web/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-screen overflow-y-auto">
+  <div class="h-screen w-full overflow-y-auto">
     <NuxtLayout :name="layout" />
   </div>
 </template>

web/components/Whitelist.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full text-primary flex items-center flex-col">
+  <div class="flex w-full flex-col items-center text-primary">
     <div v-if="!user.minecraft.uuid" class="flex flex-col items-center">
-      <p class="max-w-xl mb-10 sm:text-base text-sm">
+      <p class="mb-10 max-w-xl text-sm sm:text-base">
         Je bent momenteel niet gewhitelist. Om toegang te krijgen tot de Minecraft server moet je in Minecraft naar de
         server met het ip <span class="highlight">play.polarcraft.xeovalyte.com</span> gaan. Vervolgens krijg je een code
         te zien, vul deze code hieronder in.

web/components/layout/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-neutral-800 border-b border-b-gray-700 flex items-center px-5">
+  <div class="flex items-center border-b border-b-gray-700 bg-neutral-800 px-5">
-    <h1 class="text-primary text-2xl font-bold">Polarcraft</h1>
+    <h1 class="text-2xl font-bold text-primary">Polarcraft</h1>
     <Button outline class="ml-auto" @click="logout">Logout</Button>
   </div>
 </template>

web/components/layout/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-neutral-800 text-gray-300 px-2 pt-5 pb-14 flex flex-col">
+  <div class="flex flex-col bg-neutral-800 px-2 pb-14 pt-5 text-gray-300">
     <NuxtLink to="/" class="sidebar-item">
       <Icon size="1.5em" name="ph:house" class="mr-3" />
       Home

web/components/team/None.vue

@@ -1,15 +1,16 @@
 <template>
-  <p class="text-gray-300 text-center my-10">
+  <p class="my-10 text-center text-gray-300">
     Je zit momenteel niet in een team. Maak een team aan of wacht tot dat je geinvite wordt
   </p>
-  <div class="flex w-full justify-center gap-10 mb-5">
+  <div class="mb-5 flex w-full justify-center gap-10">
     <span
-      class="text-primary font-bold hover:cursor-pointer" :class="{ 'underline underline-offset-4': !createTeam }"
+      class="font-bold text-primary hover:cursor-pointer" :class="{ 'underline underline-offset-4': !createTeam }"
       @click="createTeam = false"
     >
       Team Invites
     </span>
-    <span class="text-primary font-bold hover:cursor-pointer" :class="{ 'underline underline-offset-4': createTeam }"
+    <span
+      class="font-bold text-primary hover:cursor-pointer" :class="{ 'underline underline-offset-4': createTeam }"
       @click="createTeam = true"
     >
       Create Team
@@ -18,7 +19,7 @@
   <div v-if="!createTeam" class="text-center text-gray-300">
     You don't have any team invites
   </div>
-  <div v-else class="w-full flex flex-col items-center gap-5">
+  <div v-else class="flex w-full flex-col items-center gap-5">
     <Input class="w-full max-w-sm">Naam / Prefix</Input>
     <Colorpicker class="w-full max-w-sm" />
     <Button>Create Team</Button>

web/layouts/default.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="h-full bg-neutral-900">
-    <div class="hidden sm:grid grid-cols-desktoplayout grid-rows-desktoplayout h-full">
+    <div class="hidden h-full grid-cols-desktoplayout grid-rows-desktoplayout sm:grid">
       <LayoutNavbar class="col-span-2" />
       <LayoutSidebar v-if="user.minecraft.uuid" class="" />
       <div class="overflow-y-auto px-10 pt-5" :class="{ 'col-span-2': !user.minecraft.uuid }">
         <NuxtPage />
       </div>
     </div>
-    <div class="sm:hidden h-full">
+    <div class="h-full sm:hidden">
-      <div class="overflow-y-auto px-2 py-2">
+      <div class="overflow-y-auto p-2">
         <NuxtPage />
       </div>
     </div>

web/package.json

@@ -7,7 +7,8 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix"
   },
   "devDependencies": {
     "@nuxt/devtools": "^0.4.2",

web/pages/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="w-full h-full text-primary flex flex-col">
+  <div class="flex h-full w-full flex-col text-primary">
-    <h1 class="text-5xl font-bold text-center mt-20 mb-10">Welkom, {{ user.discord.username }}</h1>
+    <h1 class="mb-10 mt-20 text-center text-5xl font-bold">Welkom, {{ user.discord.username }}</h1>
     <Whitelist v-if="!user.minecraft.uuid" />
-    <div v-else class="flex justify-center gap-4 flex-wrap max-w-3xl w-full">
+    <div v-else class="flex w-full max-w-3xl flex-wrap justify-center gap-4">
       <img :src="'https://api.mineatar.io/face/' + user.minecraft.uuid + '?scale=16'" class="w-24 rounded shadow">
-      <div class="rounded flex border-2 border-primary p-4 w-full max-w-md">
+      <div class="flex w-full max-w-md rounded border-2 border-primary p-4">
         <ul class="my-auto">
           <li>Username: <b>{{ user.minecraft.username }}</b></li>
           <li>UUID: <b>{{ user.minecraft.uuid }}</b></li>
         </ul>
       </div>
-      <div class="w-full flex justify-center gap-4 mt-2">
+      <div class="mt-2 flex w-full justify-center gap-4">
         <Button type="danger" @click="removeWhitelist">
           Remove from whitelist
         </Button>

web/pages/login.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="w-full h-screen text-primary bg-opacity-0 flex justify-center items-center flex-col px-2">
+  <div class="flex h-screen w-full flex-col items-center justify-center bg-transparent px-2 text-primary">
-    <h1 class="sm:text-5xl text-3xl font-bold text-center mb-5">Polarcraft S5</h1>
+    <h1 class="mb-5 text-center text-3xl font-bold sm:text-5xl">Polarcraft S5</h1>
-    <p class="max-w-xl mb-10 sm:text-base text-sm">
+    <p class="mb-10 max-w-xl text-sm sm:text-base">
-      <b>Welkom bij Polarcraft seizoen 5!</b> Start door in te loggen met Discord en vervolgens je account te koppelen met Minecraft. Als je problemen hebt maak dan in Discord een ticket aan door het <span class="bg-black bg-opacity-50 px-2 rounded">/ticket</span> commando uit te voeren.
+      <b>Welkom bij Polarcraft seizoen 5!</b> Start door in te loggen met Discord en vervolgens je account te koppelen met Minecraft. Als je problemen hebt maak dan in Discord een ticket aan door het <span class="highlight">/ticket</span> commando uit te voeren.
     </p>
     <Button @click="navigateTo(config.public.redirectUrl, { external: true })">
       Log in with Discord
       <Icon size="1.6em" name="ic:baseline-discord" />
     </Button>
 
-    <div class="absolute top-0 left-0 -z-10 w-full h-screen overflow-hidden">
+    <div class="absolute left-0 top-0 -z-10 h-screen w-full overflow-hidden">
-      <img src="../assets/pictures/diamond_wall.png" class="h-full w-full object-cover brightness-75 blur-[1px] scale-105">
+      <img src="../assets/pictures/diamond_wall.png" class="h-full w-full scale-105 object-cover blur-[1px] brightness-75">
     </div>
   </div>
 </template>

web/pages/team.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1 class="font-bold text-2xl text-primary">
+    <h1 class="text-2xl font-bold text-primary">
       Team
     </h1>
     <TeamNone />