chore: ran linter on whole project

Author: technikhil314

components/buttons/copyLink.vue

@@ -3,23 +3,7 @@
     <button
       id="copyLinkButton"
       type="button"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        gap-1
-        p-2
-        text-sm
-        transition-transform
-        transform
-        rounded-md
-        shadow
-        justify-self-end
-        focus-visible:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-        copy-uri-button
-      "
+      class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow  justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
       aria-label="Click here to copy url to clipboard"
       :class="{
         'bg-blue-500 text-white': !copied,

components/buttons/nextDiff.vue

@@ -2,24 +2,7 @@
   <div id="nextDiffSection" class="inline-flex items-center gap-1">
     <button
       id="nextDiff"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        px-1
-        py-1
-        text-sm text-gray-600
-        transition-transform
-        transform
-        bg-gray-300
-        border border-gray-800
-        rounded-sm
-        dark:border-gray-400 dark:text-white dark:bg-gray-800
-        align-center
-        focus-visible:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-      "
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
       aria-label="Go to next diff"
       type="button"
       @click="clickHandler"

components/buttons/prevDiff.vue

@@ -2,24 +2,7 @@
   <div id="prevDiffSection" class="inline-flex items-center gap-1">
     <button
       id="prevDiff"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        px-1
-        py-1
-        text-sm text-gray-600
-        transition-transform
-        transform
-        bg-gray-300
-        border border-gray-800
-        rounded-sm
-        focus-visible:ring-4
-        dark:border-gray-400 dark:text-white dark:bg-gray-800
-        align-center
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-      "
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm  focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
       aria-label="Go to previous diff"
       type="button"
       @click="clickHandler"

components/buttons/stickyCopy.vue

@@ -1,20 +1,7 @@
 <template>
   <div class="sticky top-0 text-right z-1">
     <button
-      class="
-        absolute
-        top-0
-        right-0
-        p-2
-        text-gray-800
-        transition-all
-        transform
-        rounded-full
-        shadow
-        dark:text-gray-50
-        z-1
-        hover:shadow-lg hover:scale-110 hover:rotate-12
-      "
+      class="absolute top-0 right-0 p-2 text-gray-800 transition-all transform rounded-full shadow  dark:text-gray-50 z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
       :class="{
         'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,

components/buttons/toggleInSync.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="toggleScrollInSyncSection" class="inline-flex items-center gap-1">
     <label
+      id="toggleScrollInSyncLabel"
       for="toggleScrollInSync"
       class="text-gray-800 select-none dark:text-gray-50"
-      id="toggleScrollInSyncLabel"
       aria-controls="toggleScrollInSync"
     >
       Scroll in sync
     </label>
     <input
-      aria-labelledby="toggleScrollInSyncLabel"
       id="toggleScrollInSync"
+      aria-labelledby="toggleScrollInSyncLabel"
       type="checkbox"
       :checked="isEnabled"
       class="form-checkbox"

components/buttons/toggleInlineDiffView.vue

@@ -3,25 +3,7 @@
     <button
       id="toggleInlineDiffView"
       type="button"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        px-1
-        py-1
-        text-sm text-gray-600
-        transition-transform
-        transform
-        bg-gray-300
-        border border-gray-800
-        rounded-sm
-        outline-none
-        dark:border-gray-400 dark:text-white dark:bg-gray-800
-        align-center
-        focus:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-      "
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
       @click="toggleInlineDiffView"
     >
       <svg

components/diffActionBar.vue

@@ -1,6 +1,25 @@
 <template>
   <section
-    class="flex items-center justify-between px-4 py-2 mb-4 sticky top-[70px] dark:bg-gray-700 bg-gray-300 dark:bg-opacity-50 bg-opacity-50 backdrop-blur-sm rounded-md shadow-lg border border-gray-500 w-full z-10"
+    class="
+      flex
+      items-center
+      justify-between
+      px-4
+      py-2
+      mb-4
+      sticky
+      top-[70px]
+      dark:bg-gray-700
+      bg-gray-300
+      dark:bg-opacity-50
+      bg-opacity-50
+      backdrop-blur-sm
+      rounded-md
+      shadow-lg
+      border border-gray-500
+      w-full
+      z-10
+    "
   >
     <div class="flex gap-4">
       <ToggleInSync />

components/footer.vue

@@ -1,15 +1,6 @@
 <template>
   <footer
-    class="
-      sticky
-      py-4
-      mt-4
-      text-center text-gray-800
-      top-full
-      bg-inherit
-      dark:text-gray-50
-      min-h-max
-    "
+    class="sticky py-4 mt-4 text-center text-gray-800  top-full bg-inherit dark:text-gray-50 min-h-max"
   >
     Made with &hearts; using
     <a

components/navbar.vue

@@ -1,17 +1,6 @@
 <template>
   <nav
-    class="
-      sticky
-      top-0
-      left-0
-      right-0
-      z-10
-      text-gray-800
-      shadow-lg
-      dark:shadow-dark
-      bg-gray-50
-      dark:bg-gray-900 dark:text-gray-50
-    "
+    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
     <div class="container flex items-center py-4 m-auto">
       <div
@@ -46,20 +35,7 @@
           <slot name="right" />
           <button
             type="button"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              ml-4
-              bg-transparent
-              border-2 border-gray-700
-              rounded-full
-              shadow-lg
-              w-9
-              h-9
-              active:scale-y-75
-              hover:scale-105 hover:shadow-lg
-            "
+            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
             aria-label="Toggle Dark Mode"
             @click="toggleDarkMode"
           >

components/singleDiff.vue

@@ -5,7 +5,7 @@
     </p>
     <div
       :id="id"
-      class="relative flex-1 px-4 py-2 border-2 rounded-md dark:border-gray-500 line-number-gutter min-h-80"
+      class="relative flex-1 px-4 py-2 border-2 rounded-md  dark:border-gray-500 line-number-gutter min-h-80"
       :class="{
         'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
       }"