fix: lint issue

Author: frontendfixer

src/components/AltHeroSection.tsx

@@ -5,7 +5,7 @@ const AltHeroSection = () => {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="my-16 flex flex-col items-center px-3 pb-6 sm:mb-20 sm:mt-20">
-        <h1 className="mb-16  text-center text-4xl font-black dark:text-primary-400 md:w-3/4 md:text-7xl lg:text-9xl">
+        <h1 className="mb-16  text-center text-4xl font-black md:w-3/4 md:text-7xl lg:text-9xl dark:text-primary-400">
           FullStack Web Developer
         </h1>
         <p className="text-center text-xl text-dark-900 dark:text-white">

src/components/BackToTop.tsx

@@ -24,12 +24,12 @@ const BackToTop = () => {
 
   return (
     <div
-      className="animate-slideLeft fixed bottom-6 right-0 z-50 w-14 rounded-l-full bg-red-500 shadow-lg"
+      className="fixed bottom-6 right-0 z-50 w-14 animate-slideLeft rounded-l-full bg-red-500 shadow-lg"
       hidden={!visible}
     >
       <button
         onClick={handleClick}
-        className="animate-fadeIn grid h-10 w-10 place-content-center rounded-full p-2 text-2xl text-white"
+        className="grid h-10 w-10 animate-fadeIn place-content-center rounded-full p-2 text-2xl text-white"
       >
         <FontAwesomeIcon icon={faArrowCircleUp} />
       </button>

src/components/ImageModal.tsx

@@ -14,11 +14,11 @@ const ImageModal = ({
   return (
     <>
       <div className="fixed inset-0 h-screen w-screen bg-black/50 backdrop-blur-[2px]" />
-      <div className="fixed left-1/2 top-1/2 z-10 w-[90%] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white px-2 py-6 dark:bg-dark-500 md:w-4/5 md:px-4 lg:w-2/5">
+      <div className="fixed left-1/2 top-1/2 z-10 w-[90%] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white px-2 py-6 md:w-4/5 md:px-4 lg:w-2/5 dark:bg-dark-500">
         <div className="relative grid grid-cols-1 gap-4">
           <FontAwesomeIcon
             icon={faClose}
-            className="absolute -right-6 -top-9 h-8 w-8 cursor-pointer rounded-full bg-dark-900 p-1 text-white dark:bg-white dark:text-dark-900 md:-right-8"
+            className="absolute -right-6 -top-9 h-8 w-8 cursor-pointer rounded-full bg-dark-900 p-1 text-white md:-right-8 dark:bg-white dark:text-dark-900"
             onClick={onClick}
           />
           <h2 className="border-b p-2 font-serif text-xl font-bold">

src/components/NavigationMenu.tsx

@@ -62,7 +62,7 @@ const NavigationMenu = ({ openState }: { openState: boolean }) => {
       {/* Mobile Navbar */}
       <nav
         className={twJoin(
-          'mt-3 grid w-full overflow-hidden rounded-md bg-white-full px-3 transition-[grid-template-rows]  duration-300 ease-linear dark:bg-dark-700 md:hidden',
+          'mt-3 grid w-full overflow-hidden rounded-md bg-white-full px-3 transition-[grid-template-rows]  duration-300 ease-linear md:hidden dark:bg-dark-700',
           !openState ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]',
         )}
       >

src/components/ToggleButton.tsx

@@ -12,15 +12,15 @@ const ToggleButton = ({
   return (
     <div
       className={twJoin(
-        'border-primary relative flex h-[27px] w-[54px] cursor-pointer items-center justify-between rounded-full border-2 px-1 transition-colors duration-300 ease-linear',
+        'relative flex h-[27px] w-[54px] cursor-pointer items-center justify-between rounded-full border-2 border-primary px-1 transition-colors duration-300 ease-linear',
         isDarkMode ? 'bg-primary-400' : 'bg-white',
       )}
       onClick={onClick}
     >
       <FontAwesomeIcon icon={faMoon} className="h-4 w-4 text-dark-900" />
       <span
         className={twJoin(
-          `bg-primary absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full shadow-md transition-all duration-300 ease-linear`,
+          `absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-primary shadow-md transition-all duration-300 ease-linear`,
           !isDarkMode ? 'left-[3px]' : 'left-[28px]',
         )}
       />

src/routes/Home.tsx

@@ -34,7 +34,7 @@ const Home = () => {
         </section>
         <section className="pb-16 pt-24" id="projects">
           <Container>
-            <h2 className="mb-16 text-center text-4xl font-bold capitalize text-dark-900 drop-shadow-md dark:text-gray-50 lg:text-6xl">
+            <h2 className="mb-16 text-center text-4xl font-bold capitalize text-dark-900 drop-shadow-md lg:text-6xl dark:text-gray-50">
               My recent projects
             </h2>
             <RecentWork />

src/routes/navigation.tsx

@@ -20,7 +20,7 @@ const Navigation = () => {
               <button
                 data-collapse-toggle="navbar-default"
                 type="button"
-                className="inline-flex items-center justify-center rounded border border-gray-700 p-1 text-sm text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:border-gray-200 dark:text-gray-200 dark:hover:text-gray-400 md:hidden"
+                className="inline-flex items-center justify-center rounded border border-gray-700 p-1 text-sm text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600 md:hidden dark:border-gray-200 dark:text-gray-200 dark:hover:text-gray-400"
                 aria-controls="navbar-default"
                 aria-expanded="false"
                 onClick={() => setOpen(!open)}