fix formatting oops

src/components/ActivitiesHeroBanner/activitiesherobanner.ce.vue

@@ -19,7 +19,7 @@
               class="mx-2 w-fit max-w-full gap-y-2 bg-white px-6 py-3"
             >
               <h1
-                class="w-full text-center text-2xl font-bold break-words sm:text-3xl"
+                class="w-full break-words text-center text-2xl font-bold sm:text-3xl"
               >
                 {{ decodedGroup }}
               </h1>
@@ -29,7 +29,7 @@
               class="mx-2 w-fit max-w-full bg-white px-6 py-3"
             >
               <h1
-                class="w-full text-center text-2xl font-bold break-words sm:text-2xl"
+                class="w-full break-words text-center text-2xl font-bold sm:text-2xl"
               >
                 {{ category }}
               </h1>
@@ -42,18 +42,18 @@
           >
             <a
               :href="'/shop?activity_id=' + id"
-              class="btn group hover:bg-light-blue flex w-fit items-center bg-white"
+              class="btn group flex w-fit items-center bg-white hover:bg-light-blue"
               >Memberships & Products
             </a>
             <a
               :href="'/events?activity=' + id"
-              class="btn group hover:bg-light-blue flex w-fit items-center bg-white"
+              class="btn group flex w-fit items-center bg-white hover:bg-light-blue"
               >Events</a
             >
             <a
               v-if="constitution"
               :href="constitution"
-              class="btn group hover:bg-light-blue flex w-fit items-center bg-white"
+              class="btn group flex w-fit items-center bg-white hover:bg-light-blue"
               target="_blank"
               >Constitution</a
             >

src/components/Carousel/carousel.ce.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-mustard flex justify-center overflow-x-hidden">
+  <div class="flex justify-center overflow-x-hidden bg-mustard">
     <div class="max:banner-container w-full">
       <transition-group
         :name="transition"

src/components/Events/events.ce.vue

@@ -3,7 +3,7 @@
     <div class="justify-center">
       <div
         v-if="!ShortView"
-        class="events-filters xs:grid-cols-2 grid grid-cols-1 gap-x-4 gap-y-4 lg:grid-cols-9"
+        class="events-filters grid grid-cols-1 gap-x-4 gap-y-4 xs:grid-cols-2 lg:grid-cols-9"
       >
         <div class="flex flex-col lg:col-span-2">
           <label>Category</label>
@@ -64,7 +64,7 @@
             </div>
           </div>
         </div>
-        <div class="xs:col-span-2 flex items-end justify-end lg:col-span-1">
+        <div class="flex items-end justify-end xs:col-span-2 lg:col-span-1">
           <Button
             title="Reset"
             @click="reset"
@@ -84,7 +84,7 @@
         </h2>
       </div>
       <div v-if="Events.length == 0 && !Loading" class="">
-        <h3 class="mt-16 mb-4 text-xl font-semibold text-[#555]">
+        <h3 class="mb-4 mt-16 text-xl font-semibold text-[#555]">
           There are currently no events
         </h3>
       </div>

src/components/Footer/footer.ce.vue

@@ -1,7 +1,7 @@
 <template>
   <footer id="footer" class="flex h-full items-end">
     <div class="w-full bg-black">
-      <div class="sm:px8 container mx-auto px-6 pt-6 pb-12 lg:px-6">
+      <div class="sm:px8 container mx-auto px-6 pb-12 pt-6 lg:px-6">
         <h1 class="sr-only text-white">Footer</h1>
         <div
           class="flex flex-col gap-y-12 py-4 text-white lg:grid lg:grid-cols-2 lg:gap-x-10 lg:gap-y-0 xl:gap-x-12"

src/components/HeroBanner/herobanner.ce.vue

@@ -7,7 +7,7 @@
       >
         <div v-if="title" class="mx-2 max-w-full bg-white px-6 py-3">
           <h1
-            class="mb-0 w-full text-center text-2xl font-bold break-words sm:text-3xl"
+            class="mb-0 w-full break-words text-center text-2xl font-bold sm:text-3xl"
           >
             {{ title }}
           </h1>

src/components/Navbar/navbar.ce.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bg-beige sticky top-0 left-0 z-10 w-full shadow">
+  <nav class="sticky left-0 top-0 z-10 w-full bg-beige shadow">
     <div class="container mx-auto flex justify-between py-0">
       <div class="my-7">
         <a href="/" aria-label="Homepage">
@@ -21,42 +21,42 @@
       <div class="my-5 flex flex-col justify-center">
         <div v-if="signedIn" class="mb-4 hidden text-sm lg:flex">
           <a
-            class="hover:bg-mustard ml-3 bg-black px-4 py-1 text-white hover:text-black"
+            class="ml-3 bg-black px-4 py-1 text-white hover:bg-mustard hover:text-black"
             href="/web-accessibility-statement"
             >Accessibility</a
           >
           <a
-            class="hover:bg-mustard ml-3 bg-black px-4 py-1 text-white hover:text-black"
+            class="ml-3 bg-black px-4 py-1 text-white hover:bg-mustard hover:text-black"
             @click="getBearerToken()"
             href="javascript:;"
             >Student Dashboard</a
           >
           <a
-            class="hover:bg-mustard ml-3 bg-black px-4 py-1 text-white hover:text-black"
+            class="ml-3 bg-black px-4 py-1 text-white hover:bg-mustard hover:text-black"
             href="/sign-out"
             >Sign Out</a
           >
         </div>
         <div v-else class="mb-4 hidden text-sm lg:flex">
           <a
-            class="hover:bg-mustard ml-3 bg-black px-4 py-1 text-white hover:text-black"
+            class="ml-3 bg-black px-4 py-1 text-white hover:bg-mustard hover:text-black"
             href="/web-accessibility-statement"
             >Accessibility</a
           >
           <a
-            class="hover:bg-mustard ml-3 bg-black px-4 py-1 text-white hover:text-black"
+            class="ml-3 bg-black px-4 py-1 text-white hover:bg-mustard hover:text-black"
             href="/associate-member"
             >Associate Sign In</a
           >
           <a
-            class="hover:bg-mustard ml-3 bg-black px-4 py-1 text-white hover:text-black"
+            class="ml-3 bg-black px-4 py-1 text-white hover:bg-mustard hover:text-black"
             href="/sign-in/sso"
             >Student Sign In</a
           >
         </div>
         <div class="flex items-center justify-end">
           <a
-            class="xs:flex hidden"
+            class="hidden xs:flex"
             href="/search#gsc.tab=0"
             aria-label="Search the website"
           >
@@ -66,7 +66,7 @@
             ></FontAwesomeIcon>
           </a>
           <a
-            class="xs:flex ml-7 hidden"
+            class="ml-7 hidden xs:flex"
             href="/shop/basket"
             aria-label="View your basket"
           >
@@ -95,46 +95,46 @@
       class="max-h-[calc(100vh-133px)] overflow-y-auto bg-[#f5f5f5]"
     >
       <div
-        class="container mx-auto flex flex-col py-0 pt-6 pb-8 lg:grid lg:grid-cols-5"
+        class="container mx-auto flex flex-col py-0 pb-8 pt-6 lg:grid lg:grid-cols-5"
       >
         <div class="order-2 lg:order-1 lg:col-span-4">
           <div
             v-if="signedIn"
             class="mb-10 flex flex-col justify-center gap-y-3 lg:hidden"
           >
             <a
-              class="hover:bg-mustard bg-black px-4 py-1 text-center text-white hover:text-black"
+              class="bg-black px-4 py-1 text-center text-white hover:bg-mustard hover:text-black"
               href="/web-accessibility-statement"
               >Accessibility</a
             >
             <a
-              class="hover:bg-mustard bg-black px-4 py-1 text-center text-white hover:text-black"
+              class="bg-black px-4 py-1 text-center text-white hover:bg-mustard hover:text-black"
               @click="getBearerToken()"
               href="javascript:;"
               >Member Dashboard</a
             >
             <a
-              class="hover:bg-mustard bg-black px-4 py-1 text-center text-white hover:text-black"
+              class="bg-black px-4 py-1 text-center text-white hover:bg-mustard hover:text-black"
               href="/sign-out"
               >Sign Out</a
             >
           </div>
           <div
             v-else
-            class="xs:flex-row mb-8 flex flex-col flex-wrap gap-x-3 gap-y-3 lg:hidden"
+            class="mb-8 flex flex-col flex-wrap gap-x-3 gap-y-3 xs:flex-row lg:hidden"
           >
             <a
-              class="hover:bg-mustard bg-black px-4 py-1 text-center text-white hover:text-black"
+              class="bg-black px-4 py-1 text-center text-white hover:bg-mustard hover:text-black"
               href="/web-accessibility-statement"
               >Accessibility</a
             >
             <a
-              class="hover:bg-mustard bg-black px-4 py-1 text-center text-white hover:text-black"
+              class="bg-black px-4 py-1 text-center text-white hover:bg-mustard hover:text-black"
               href="/associate-member"
               >Associate Sign In</a
             >
             <a
-              class="hover:bg-mustard bg-black px-4 py-1 text-center text-white hover:text-black"
+              class="bg-black px-4 py-1 text-center text-white hover:bg-mustard hover:text-black"
               href="/sign-in/sso"
               >Student Sign In</a
             >
@@ -202,10 +202,10 @@
               :key="section.name"
               class="nav-section flex flex-col pb-6"
             >
-              <div class="flex w-full items-end pr-10 pb-2">
+              <div class="flex w-full items-end pb-2 pr-10">
                 <p class="text-start font-bold">{{ section.name }}</p>
               </div>
-              <div class="pt-3 pb-7">
+              <div class="pb-7 pt-3">
                 <ul class="flex flex-col gap-2 text-sm">
                   <li
                     v-for="subheading in section.links"
@@ -228,10 +228,10 @@
           class="order-1 flex flex-col justify-between lg:order-2 lg:col-span-1 lg:pl-12"
         >
           <div
-            class="xs:flex xs:justify-between mb-6 grid w-full grid-cols-2 justify-center gap-y-4 lg:mb-0 lg:flex-col lg:gap-y-8"
+            class="mb-6 grid w-full grid-cols-2 justify-center gap-y-4 xs:flex xs:justify-between lg:mb-0 lg:flex-col lg:gap-y-8"
           >
             <a
-              class="xs:hidden xs:border-none flex gap-x-2 border-r border-black text-start text-lg font-bold hover:underline sm:gap-x-6"
+              class="flex gap-x-2 border-r border-black text-start text-lg font-bold hover:underline xs:hidden xs:border-none sm:gap-x-6"
               href="/search#gsc.tab=0"
             >
               <FontAwesomeIcon
@@ -241,7 +241,7 @@
               Search
             </a>
             <a
-              class="xs:hidden xs:justify-start flex justify-end gap-x-2 text-start text-lg font-bold hover:underline sm:gap-x-6"
+              class="flex justify-end gap-x-2 text-start text-lg font-bold hover:underline xs:hidden xs:justify-start sm:gap-x-6"
               href="/shop/basket"
             >
               <FontAwesomeIcon
@@ -251,7 +251,7 @@
               Basket
             </a>
             <a
-              class="xs:border-none flex gap-x-2 border-r border-black text-start text-lg font-bold hover:underline sm:gap-x-6"
+              class="flex gap-x-2 border-r border-black text-start text-lg font-bold hover:underline xs:border-none sm:gap-x-6"
               href="/events"
             >
               <FontAwesomeIcon
@@ -261,10 +261,10 @@
               Events
             </a>
             <div
-              class="xs:block hidden h-8 border-r border-black lg:hidden"
+              class="hidden h-8 border-r border-black xs:block lg:hidden"
             ></div>
             <a
-              class="xs:justify-start flex justify-end gap-x-2 text-start text-lg font-bold hover:underline sm:gap-x-6"
+              class="flex justify-end gap-x-2 text-start text-lg font-bold hover:underline xs:justify-start sm:gap-x-6"
               href="/news"
             >
               <FontAwesomeIcon
@@ -274,10 +274,10 @@
               News
             </a>
             <div
-              class="xs:block hidden h-8 border-r border-black lg:hidden"
+              class="hidden h-8 border-r border-black xs:block lg:hidden"
             ></div>
             <a
-              class="xs:border-none flex gap-x-2 border-r border-black text-start text-lg font-bold hover:underline sm:gap-x-6"
+              class="flex gap-x-2 border-r border-black text-start text-lg font-bold hover:underline xs:border-none sm:gap-x-6"
               href="/venues"
             >
               <FontAwesomeIcon
@@ -287,10 +287,10 @@
               Venues
             </a>
             <div
-              class="xs:block hidden h-8 border-r border-black lg:hidden"
+              class="hidden h-8 border-r border-black xs:block lg:hidden"
             ></div>
             <a
-              class="xs:justify-start flex justify-end gap-x-2 text-start text-lg font-bold hover:underline sm:gap-x-6"
+              class="flex justify-end gap-x-2 text-start text-lg font-bold hover:underline xs:justify-start sm:gap-x-6"
               href="/shop?category=8"
             >
               <FontAwesomeIcon

src/components/Tile/tile.ce.vue

@@ -31,7 +31,7 @@
             alt=""
             loading="lazy"
           />
-          <div v-if="wishlist" class="absolute top-2 right-2">
+          <div v-if="wishlist" class="absolute right-2 top-2">
             <InterestButton :activity-id="id" is-heart />
           </div>
         </div>
@@ -89,7 +89,7 @@
       <div v-if="categories">
         <div
           v-if="categories.length"
-          class="group absolute top-2.5 mr-3 ml-2 flex max-h-[232.33px] max-w-full flex-col overflow-y-auto rounded bg-[#40454d]"
+          class="group absolute top-2.5 ml-2 mr-3 flex max-h-[232.33px] max-w-full flex-col overflow-y-auto rounded bg-[#40454d]"
         >
           <div class="flex items-center">
             <FontAwesomeIcon icon="fas fa-tag" class="h-8 w-8 p-2 text-white" />
@@ -98,7 +98,7 @@
             </p>
           </div>
           <div class="hidden group-hover:flex">
-            <div class="pr-5 pb-4 pl-1 text-white">
+            <div class="pb-4 pl-1 pr-5 text-white">
               <ul class="mb-0 list-none ps-[10px]">
                 <li v-for="category in categories" :key="category.id">
                   <a :href="categoryLink + '=' + category.id"

src/components/account/account.ce.vue

@@ -23,7 +23,7 @@
       <div class="h-min w-full bg-gray-100 px-3 py-2">
         <h2 class="text-xl font-semibold">My Details</h2>
       </div>
-      <div class="mt-4 mb-10 flex flex-col gap-y-8 px-3 py-2">
+      <div class="mb-10 mt-4 flex flex-col gap-y-8 px-3 py-2">
         <div class="grid w-fit grid-cols-1 gap-y-2 sm:grid-cols-2">
           <p class="font-semibold">Full Name:</p>
           <p>Daniel Parker</p>
@@ -94,7 +94,7 @@
       <div class="h-min w-full bg-gray-100 px-3 py-2">
         <h2 class="text-xl font-semibold">My Activities</h2>
       </div>
-      <div class="mt-4 mb-10 flex flex-col gap-y-8 px-3 py-2">
+      <div class="mb-10 mt-4 flex flex-col gap-y-8 px-3 py-2">
         <div class="flex flex-col">
           <h3 class="mb-4 text-lg font-semibold">Nothing to show</h3>
           <p>
@@ -106,7 +106,7 @@
       <div class="h-min w-full bg-gray-100 px-3 py-2">
         <h2 class="text-xl font-semibold">My Committees</h2>
       </div>
-      <div class="mt-4 mb-10 flex flex-col gap-y-8 px-3 py-2">
+      <div class="mb-10 mt-4 flex flex-col gap-y-8 px-3 py-2">
         <div class="flex flex-col">
           <h3 class="mb-4 text-lg font-semibold">Nothing to show</h3>
           <p>You are not currently involved in any committees.</p>
@@ -121,7 +121,7 @@
       <div class="h-min w-full bg-gray-100 px-3 py-2">
         <h2 class="text-xl font-semibold">My Purchase History</h2>
       </div>
-      <div class="mt-4 mb-10 flex flex-col gap-y-8 px-3 py-2">
+      <div class="mb-10 mt-4 flex flex-col gap-y-8 px-3 py-2">
         <div class="flex flex-col">
           <h3 class="mb-4 text-lg font-semibold">Nothing to show</h3>
           <p>There are currently no purchases to show.</p>

src/components/activities/activities.ce.vue

@@ -105,7 +105,7 @@
         </div>
       </div>
       <div v-if="Groups.length == 0 && !loading" class="">
-        <h2 class="mt-16 mb-4 text-center text-2xl font-semibold">
+        <h2 class="mb-4 mt-16 text-center text-2xl font-semibold">
           No groups found
         </h2>
       </div>

src/components/activity-breadcrumb/activity-breadcrumb.ce.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto pt-12 pb-2 font-serif text-sm">
+  <div class="container mx-auto pb-2 pt-12 font-serif text-sm">
     <p>
       <a class="text-black no-underline hover:underline" href="/">Home</a>
       <span v-if="firstSegmentName">