From 9569eacc285ed43191a52fc6b2b8af1b24618931 Mon Sep 17 00:00:00 2001
From: Florian Scheuner <github@florian-scheuner.de>
Date: Sun, 24 Dec 2023 16:51:16 +0100
Subject: [PATCH] refactor: fix lint (#510)

---
 src/components/home/A320Header.tsx            | 12 +++---
 src/components/home/Community.tsx             | 16 +++----
 src/components/home/Donate.tsx                | 10 ++---
 src/components/home/Installer.tsx             |  8 ++--
 src/components/home/PartnerSection.tsx        |  4 +-
 src/components/projects/A32NX/Download.tsx    | 42 +++++++++----------
 .../projects/A32NX/ExtendedFeatures.tsx       | 18 ++++----
 src/components/projects/A32NX/Features.tsx    |  6 +--
 src/components/projects/A32NX/Hero.tsx        | 14 +++----
 src/components/utils/Button.tsx               |  2 +-
 src/components/utils/Card.tsx                 |  2 +-
 src/components/utils/Container.tsx            |  2 +-
 src/components/utils/Dropdown.tsx             | 10 ++---
 src/components/utils/Footer.tsx               | 14 +++----
 src/components/utils/NavBar.tsx               | 12 +++---
 src/components/utils/NavLinks.tsx             |  2 +-
 src/components/utils/ScrollToTopButton.tsx    |  7 +++-
 src/pages/404.tsx                             |  4 +-
 src/pages/a32nx.tsx                           |  2 +-
 src/pages/map.tsx                             |  2 +-
 src/pages/notams/[id].tsx                     |  8 ++--
 src/pages/notams/index.tsx                    | 22 +++++-----
 src/pages/privacy.tsx                         | 14 +++----
 src/pages/tos.tsx                             | 14 +++----
 24 files changed, 126 insertions(+), 121 deletions(-)

diff --git a/src/components/home/A320Header.tsx b/src/components/home/A320Header.tsx
index 77198dae..77221881 100644
--- a/src/components/home/A320Header.tsx
+++ b/src/components/home/A320Header.tsx
@@ -13,15 +13,15 @@ export const A320Header = () => {
     return (
         <header>
             <video
-                className="object-cover fixed -z-10 w-screen h-screen opacity-10"
+                className="fixed -z-10 h-screen w-screen object-cover opacity-10"
                 src="https://cdn.flybywiresim.com/assets/website/video/A32NX.mp4"
                 playsInline
                 autoPlay
                 muted
                 loop
             />
-            <Container className="relative max-w-6xl min-h-screen">
-                <div className="absolute bottom-0 left-0 h-2/3 px-page">
+            <Container className="relative min-h-screen max-w-6xl">
+                <div className="px-page absolute bottom-0 left-0 h-2/3">
                     <h1 className="text-8xl font-bold">
                         <span className="text-teal">A32</span>
                         <span className="text-blue">N</span>
@@ -31,17 +31,17 @@ export const A320Header = () => {
                         A community built and maintained project aiming to provide high quality and detailed aircraft
                         for Microsoft Flight Simulator.
                     </p>
-                    <div className="flex gap-4 my-5 max-w-md">
+                    <div className="my-5 flex max-w-md gap-4">
                         <Button
                             onClick={handleClick}
-                            className="w-40 hover:text-blue-light bg-blue-light hover:bg-white border-2 border-blue-light"
+                            className="w-40 border-2 border-blue-light bg-blue-light hover:bg-white hover:text-blue-light"
                         >
                             Installer
                         </Button>
 
                         <Link href="/a32nx">
                             <Button
-                                className="w-44 text-blue-light hover:text-blue-light hover:bg-white border-2 border-blue-light"
+                                className="w-44 border-2 border-blue-light text-blue-light hover:bg-white hover:text-blue-light"
                             >
                                 Learn More
                             </Button>
diff --git a/src/components/home/Community.tsx b/src/components/home/Community.tsx
index e5d2d48d..17c0d4dc 100644
--- a/src/components/home/Community.tsx
+++ b/src/components/home/Community.tsx
@@ -49,15 +49,15 @@ export const Community = () => {
         return () => clearInterval(interval);
     }, []);
     return (
-        <section id="community" className="flex flex-col justify-between items-center text-blue-dark-contrast bg-gray-50 lg:flex-row">
-            <Container className="flex flex-col py-12 max-w-6xl lg:px-24">
-                <span className="mb-3 w-24 h-2 bg-teal-light-contrast rounded-full" />
+        <section id="community" className="flex flex-col items-center justify-between bg-gray-50 text-blue-dark-contrast lg:flex-row">
+            <Container className="flex max-w-6xl flex-col py-12 lg:px-24">
+                <span className="mb-3 h-2 w-24 rounded-full bg-teal-light-contrast" />
                 <h1>Community Insights</h1>
                 <p className="max-w-prose text-gray-800">
                     Discover the extensive community behind every FlyByWire Simulations aircraft - a vibrant and active online group that prioritises collaborative work and openness.
                 </p>
 
-                <div className="grid grid-cols-2 gap-y-8 my-6 sm:grid-cols-4">
+                <div className="my-6 grid grid-cols-2 gap-y-8 sm:grid-cols-4">
                     <Statistic statCount={liveFlights} statName="Live Flights" />
                     <Statistic statCount={commitCount} statName="Commits" />
                     <Statistic statCount={contributorCount} statName="Contributors" />
@@ -67,7 +67,7 @@ export const Community = () => {
                 <div className="my-8">
                     <Card bgColour="gray-100" className="border-discord shadow-lg">
                         <CardTitle>
-                            <span className="flex justify-center items-center p-2 mr-2 bg-discord rounded-xl">
+                            <span className="mr-2 flex items-center justify-center rounded-xl bg-discord p-2">
                                 <Image src="/svg/discordLogo.svg" width={23} height={23} />
                             </span>
                             Discord
@@ -78,18 +78,18 @@ export const Community = () => {
                         </CardBody>
 
                         <a
-                            className="self-center py-2 px-3 text-xl font-semibold text-white bg-discord hover:bg-discord-dark rounded-xl transition"
+                            className="self-center rounded-xl bg-discord px-3 py-2 text-xl font-semibold text-white transition hover:bg-discord-dark"
                             href="https://discord.gg/flybywire"
                             target="_blank"
                             rel="noreferrer"
                         >
                             Join the Community
-                            <IconArrowRight className="inline-flex mb-1 ml-1" size={20} stroke={2} />
+                            <IconArrowRight className="mb-1 ml-1 inline-flex" size={20} stroke={2} />
                         </a>
                     </Card>
                 </div>
             </Container>
-            <div className="relative z-10 w-full h-144 lg:w-1/2 lg:h-200">
+            <div className="relative z-10 h-144 w-full lg:h-200 lg:w-1/2">
                 <MapDisplay refreshInterval={mapRefreshInterval} disableMenu disableWeather={false} disableScroll forceTileset="carto-light" />
             </div>
         </section>
diff --git a/src/components/home/Donate.tsx b/src/components/home/Donate.tsx
index 7c45e1df..0ffc10f2 100644
--- a/src/components/home/Donate.tsx
+++ b/src/components/home/Donate.tsx
@@ -4,9 +4,9 @@ import Container from '../utils/Container';
 export const Donate = () => (
     <section className="bg-blue-darker">
         <div className="relative">
-            <img className="object-cover absolute w-full h-full opacity-10" src="/img/donate.jpg" alt="" />
+            <img className="absolute h-full w-full object-cover opacity-10" src="/img/donate.jpg" alt="" />
 
-            <Container className="flex relative top-0 flex-col items-center py-12 max-w-7xl lg:items-start">
+            <Container className="relative top-0 flex max-w-7xl flex-col items-center py-12 lg:items-start">
                 <div className="max-w-4xl text-center lg:text-left">
                     <h1 className="text-teal">Donate</h1>
                     <p>
@@ -17,13 +17,13 @@ export const Donate = () => (
                         We use Open Collective to transparently manage our donations and expenses, which means you can see how we utilize donated funds at any time.
                     </p>
                 </div>
-                <div className="flex flex-col items-center space-y-3 space-x-4 text-center md:space-y-0 lg:flex-row lg:items-start lg:text-left">
+                <div className="flex flex-col items-center space-x-4 space-y-3 text-center md:space-y-0 lg:flex-row lg:items-start lg:text-left">
                     <a href="https://opencollective.com/flybywire/" target="_blank" rel="noreferrer">
-                        <Button className="w-40 hover:text-teal-light-contrast bg-teal-light-contrast hover:bg-white border-2 border-teal-light-contrast">
+                        <Button className="w-40 border-2 border-teal-light-contrast bg-teal-light-contrast hover:bg-white hover:text-teal-light-contrast">
                             Donate
                         </Button>
                     </a>
-                    <em className="self-center max-w-prose text-teal-100">
+                    <em className="max-w-prose self-center text-teal-100">
                         *No profit is generated from donations. Donating does not guarantee access to additional content nor its exclusivity if such content is ever given.
                     </em>
                 </div>
diff --git a/src/components/home/Installer.tsx b/src/components/home/Installer.tsx
index e2caf69e..d60037bc 100644
--- a/src/components/home/Installer.tsx
+++ b/src/components/home/Installer.tsx
@@ -7,10 +7,10 @@ import Container from '../utils/Container';
 export const installerRef = createRef<HTMLDivElement>();
 
 export const Installer = forwardRef(() => (
-    <section ref={installerRef} className="overflow-hidden py-12 bg-blue-dark">
+    <section ref={installerRef} className="overflow-hidden bg-blue-dark py-12">
         <Container className="flex flex-col items-center 3xl:flex-row 3xl:justify-center">
             <div className="mb-4 text-center 2xl:mr-12 3xl:text-left">
-                <IconPackage className="p-2 mx-auto mb-4 bg-blue-light-contrast rounded-xl 3xl:mx-0" size={55} stroke={1.5} />
+                <IconPackage className="mx-auto mb-4 rounded-xl bg-blue-light-contrast p-2 3xl:mx-0" size={55} stroke={1.5} />
                 <h1 className="font-extrabold">
                     Custom-built Installer
                 </h1>
@@ -20,12 +20,12 @@ export const Installer = forwardRef(() => (
                     proper folder.
                 </p>
                 <a href="https://api.flybywiresim.com/installer">
-                    <Button className="mt-8 w-40 hover:text-teal-light-contrast bg-teal-light-contrast hover:bg-white border-2 border-teal-light-contrast">
+                    <Button className="mt-8 w-40 border-2 border-teal-light-contrast bg-teal-light-contrast hover:bg-white hover:text-teal-light-contrast">
                         Download
                     </Button>
                 </a>
             </div>
-            <div className="-mb-[125px] w-11/12 xl:w-5/6 3xl:-mb-3 3xl:w-320">
+            <div className="mb-[-125px] w-11/12 xl:w-5/6 3xl:-mb-3 3xl:w-320">
                 <Image
                     src="/img/InstallerScreenshot.png"
                     alt="Installer"
diff --git a/src/components/home/PartnerSection.tsx b/src/components/home/PartnerSection.tsx
index a6b38d35..200b74ad 100644
--- a/src/components/home/PartnerSection.tsx
+++ b/src/components/home/PartnerSection.tsx
@@ -18,7 +18,7 @@ export const PartnerImage = (props: ImageProps) => (
 );
 
 export const Partner = (props: PropsWithChildren<PartnerProps>) => (
-    <span id={props.name} className={`flex justify-center items-center ${props.className}`}>
+    <span id={props.name} className={`flex items-center justify-center ${props.className}`}>
         <a href={props.path} target="_blank" rel="noreferrer">
             {props.children}
         </a>
@@ -27,7 +27,7 @@ export const Partner = (props: PropsWithChildren<PartnerProps>) => (
 
 export const PartnerSection = () => (
     <section className="bg-blue-dark">
-        <Container className="grid grid-cols-1 gap-x-16 max-w-screen-2xl md:grid-cols-2 lg:grid-cols-4">
+        <Container className="grid max-w-screen-2xl grid-cols-1 gap-x-16 md:grid-cols-2 lg:grid-cols-4">
             <Partner name="Flightsim.to" path="https://flightsim.to/">
                 <PartnerImage src="/img/partners/flightsimto.png" />
             </Partner>
diff --git a/src/components/projects/A32NX/Download.tsx b/src/components/projects/A32NX/Download.tsx
index 2d78ed04..b45ddb14 100644
--- a/src/components/projects/A32NX/Download.tsx
+++ b/src/components/projects/A32NX/Download.tsx
@@ -11,12 +11,12 @@ export const Download = ({ expOnHold }: { expOnHold?: boolean }) => {
 
     return (
         <section id="download" className="relative bg-blue-dark-contrast">
-            <div className="py-14 px-10 m-auto w-full lg:w-11/12 2xl:w-4/6">
+            <div className="m-auto w-full px-10 py-14 lg:w-11/12 2xl:w-4/6">
                 <div className="flex flex-col lg:flex-row">
-                    <div className="w-full lg:pr-12 lg:w-3/5">
-                        <div className="w-1/2 text-left divide-y divide-gray-500 2xl:w-1/4">
-                            <h2 className="text-base font-medium tracking-widest text-blue-200 uppercase">READY TO FLY?</h2>
-                            <p className="pt-3 mt-3 text-5xl font-medium text-blue-light">
+                    <div className="w-full lg:w-3/5 lg:pr-12">
+                        <div className="w-1/2 divide-y divide-gray-500 text-left 2xl:w-1/4">
+                            <h2 className="text-base font-medium uppercase tracking-widest text-blue-200">READY TO FLY?</h2>
+                            <p className="mt-3 pt-3 text-5xl font-medium text-blue-light">
                                 Download
                             </p>
                         </div>
@@ -26,59 +26,59 @@ export const Download = ({ expOnHold }: { expOnHold?: boolean }) => {
                             or you can download using standalone installations.
                         </p>
 
-                        <ul className="pt-7 pl-5 -m-2 text-lg list-disc text-gray-200">
-                            <li className="pl-2 ml-2">Integrates seamlessly into Microsoft Flight Simulator - no external programs required.</li>
-                            <li className="pl-2 ml-2">Safe, trustworthy, and constantly updated to assure nothing is broken.</li>
-                            <li className="pl-2 ml-2">One click install, neatly organized into one compact folder.</li>
+                        <ul className="-m-2 list-disc pl-5 pt-7 text-lg text-gray-200">
+                            <li className="ml-2 pl-2">Integrates seamlessly into Microsoft Flight Simulator - no external programs required.</li>
+                            <li className="ml-2 pl-2">Safe, trustworthy, and constantly updated to assure nothing is broken.</li>
+                            <li className="ml-2 pl-2">One click install, neatly organized into one compact folder.</li>
                         </ul>
                     </div>
-                    <div className="flex flex-col w-full divide-y divide-gray-500 lg:w-2/5">
+                    <div className="flex w-full flex-col divide-y divide-gray-500 lg:w-2/5">
                         {/* Installer */}
-                        <div className="pt-16 pb-8 lg:pt-0">
+                        <div className="pb-8 pt-16 lg:pt-0">
                             <span className="text-4xl text-blue-100">Installer</span>
 
-                            <p className="mt-4 mb-6 max-w-prose">
+                            <p className="mb-6 mt-4 max-w-prose">
                                 Our easy-to-use installer is the easiest way to get started with our addons. Simply launch and install any addon you want, with only two clicks.
                             </p>
 
                             <a href="https://api.flybywiresim.com/installer">
-                                <Button className="float-right w-40 font-bold bg-green-500 hover:bg-green-700">Download</Button>
+                                <Button className="float-right w-40 bg-green-500 font-bold hover:bg-green-700">Download</Button>
                             </a>
                         </div>
 
                         {/* Direct Download */}
                         <div className="pt-7">
                             <span className="text-2xl text-blue-100">Direct Download</span>
-                            <p className="mt-4 mb-6 max-w-prose">
+                            <p className="mb-6 mt-4 max-w-prose">
                                 If you prefer a direct download, the following links are available.
                             </p>
 
                             <div className="divide-y divide-gray-700">
-                                <div className="flex flex-row justify-between items-center mb-5">
+                                <div className="mb-5 flex flex-row items-center justify-between">
                                     <span className="text-xl text-gray-300">Stable Release</span>
                                     <a href={getDownloadLink(urls.stable)}>
-                                        <Button className="float-right w-40 font-bold bg-green-500 hover:bg-green-700">Download</Button>
+                                        <Button className="float-right w-40 bg-green-500 font-bold hover:bg-green-700">Download</Button>
                                     </a>
                                 </div>
-                                <div className="flex flex-row justify-between items-center pt-5 mb-5">
+                                <div className="mb-5 flex flex-row items-center justify-between pt-5">
                                     <span className="text-xl text-gray-300">Development Build</span>
                                     <a href={getDownloadLink(urls.dev)}>
-                                        <Button className="float-right w-40 font-bold bg-blue-light-contrast hover:bg-blue-medium">Download</Button>
+                                        <Button className="float-right w-40 bg-blue-light-contrast font-bold hover:bg-blue-medium">Download</Button>
                                     </a>
                                 </div>
                                 <div>
-                                    <div className="flex flex-row justify-between items-center pt-5 mb-8">
+                                    <div className="mb-8 flex flex-row items-center justify-between pt-5">
                                         <span className="text-xl text-gray-300">Experimental Build</span>
                                         <a href={expOnHold ? undefined : getDownloadLink(urls.exp)}>
                                             <Button
-                                                className={`float-right w-40 font-bold bg-blue-light-contrast ${expOnHold ? 'opacity-30 cursor-not-allowed' : 'hover:bg-blue-medium'}`}
+                                                className={`float-right w-40 bg-blue-light-contrast font-bold ${expOnHold ? 'cursor-not-allowed opacity-30' : 'hover:bg-blue-medium'}`}
                                             >
                                                 Download
                                             </Button>
                                         </a>
                                     </div>
                                     {expOnHold && (
-                                        <span className="flex-wrap mb-8 text-gray-300">
+                                        <span className="mb-8 flex-wrap text-gray-300">
                                             Our Experimental Version is temporarily
                                             <a href="https://docs.flybywiresim.com/fbw-a32nx/support/exp/" className="text-blue-light">&#32;on hold&#32;</a>
                                             and all of its features have been moved to the Development Version.
diff --git a/src/components/projects/A32NX/ExtendedFeatures.tsx b/src/components/projects/A32NX/ExtendedFeatures.tsx
index f25ff406..5466b916 100644
--- a/src/components/projects/A32NX/ExtendedFeatures.tsx
+++ b/src/components/projects/A32NX/ExtendedFeatures.tsx
@@ -3,13 +3,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 
 export const ExtendedFeatures = () => (
-    <section className="py-4 pb-20 mx-auto max-w-screen-2xl rounded-lg sm:px-6 lg:px-8 px-page">
-        <div className="grid
+    <section className="px-page mx-auto max-w-screen-2xl rounded-lg py-4 pb-20 sm:px-6 lg:px-8">
+        <div className="mx-auto
+                        grid
+                        max-w-max
                         grid-cols-1
-                        md:grid-cols-2
-                        xl:grid-cols-3
-                        2xl:grid-cols-4
-                        max-w-max mx-auto gap-x-16 gap-y-20"
+                        gap-x-16
+                        gap-y-20 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
         >
             <Feature key="EFB">
                 <FeatureTitle>
@@ -88,8 +88,8 @@ export const ExtendedFeatures = () => (
 );
 
 const Feature: FC = ({ children }) => (
-    <div className="flex flex-row max-w-prose md:w-96">
-        <FontAwesomeIcon className="mt-1 mr-5 mb-auto text-2xl text-green-500" size="1x" icon={faCheck} />
+    <div className="flex max-w-prose flex-row md:w-96">
+        <FontAwesomeIcon className="mb-auto mr-5 mt-1 text-2xl text-green-500" size="1x" icon={faCheck} />
         <div className="space-y-3">
             {children}
         </div>
@@ -101,7 +101,7 @@ const FeatureTitle: FC = ({ children }) => (
 );
 
 const FeatureBody: FC<{ className?: string }> = ({ children, className }) => (
-    <p className={`text-lg text-left ${className}`}>
+    <p className={`text-left text-lg ${className}`}>
         {children}
     </p>
 );
diff --git a/src/components/projects/A32NX/Features.tsx b/src/components/projects/A32NX/Features.tsx
index 0d305562..baefc3ab 100644
--- a/src/components/projects/A32NX/Features.tsx
+++ b/src/components/projects/A32NX/Features.tsx
@@ -1,10 +1,10 @@
 export const Features = () => (
     <>
-        <div className="mx-auto mt-12 mb-20 max-w-2xl divide-y divide-gray-500 px-page">
-            <p className="pt-3 mt-3 mb-4 text-5xl font-medium text-center text-blue-light">
+        <div className="px-page mx-auto mb-20 mt-12 max-w-2xl divide-y divide-gray-500">
+            <p className="mb-4 mt-3 pt-3 text-center text-5xl font-medium text-blue-light">
                 Features
             </p>
-            <p className="pt-5 text-xl text-center">
+            <p className="pt-5 text-center text-xl">
                 The volunteers in our community work hard around the clock to consistently bring new features and create the best A320neo possible.
                 Let&apos;s take a look at some of the features the A32NX has to offer!
             </p>
diff --git a/src/components/projects/A32NX/Hero.tsx b/src/components/projects/A32NX/Hero.tsx
index c4890b6e..ebcba242 100644
--- a/src/components/projects/A32NX/Hero.tsx
+++ b/src/components/projects/A32NX/Hero.tsx
@@ -2,10 +2,10 @@ import { Button } from '../../utils/Button';
 
 export const Hero = () => (
     <>
-        <header className="absolute inset-y-1/3 inset-x-2 z-30 mx-auto max-w-7xl px-page">
-            <div className="flex flex-row justify-between items-end">
+        <header className="px-page absolute inset-x-2 inset-y-1/3 z-30 mx-auto max-w-7xl">
+            <div className="flex flex-row items-end justify-between">
                 <div>
-                    <h2 className="mb-2 ml-2 text-2xl font-medium tracking-widest uppercase">
+                    <h2 className="mb-2 ml-2 text-2xl font-medium uppercase tracking-widest">
                         DISCOVER THE
                     </h2>
                     <h1 className="text-7xl font-medium sm:text-8xl">
@@ -19,11 +19,11 @@ export const Hero = () => (
                     <p className="mt-4 text-xl text-gray-200">
                         - Dan, Real Airbus A320 Pilot
                     </p>
-                    <div className="flex py-5 max-w-md">
+                    <div className="flex max-w-md py-5">
 
                         <a href="https://api.flybywiresim.com/installer">
                             <Button
-                                className="mr-3 w-40 text-xl font-bold hover:text-blue-light bg-blue-light hover:bg-white border-2 border-blue-light"
+                                className="mr-3 w-40 border-2 border-blue-light bg-blue-light text-xl font-bold hover:bg-white hover:text-blue-light"
                             >
                                 Installer
                             </Button>
@@ -31,7 +31,7 @@ export const Hero = () => (
 
                         <a href="#download">
                             <Button
-                                className="w-40 text-xl font-bold text-blue-light hover:text-blue-light hover:bg-white border-2 border-blue-light"
+                                className="w-40 border-2 border-blue-light text-xl font-bold text-blue-light hover:bg-white hover:text-blue-light"
                             >
                                 Download
                             </Button>
@@ -40,6 +40,6 @@ export const Hero = () => (
                 </div>
             </div>
         </header>
-        <img draggable="false" className="object-cover relative z-0 w-screen h-screen opacity-30 select-none" src="/img/discord.jpg" alt="" />
+        <img draggable="false" className="relative z-0 h-screen w-screen select-none object-cover opacity-30" src="/img/discord.jpg" alt="" />
     </>
 );
diff --git a/src/components/utils/Button.tsx b/src/components/utils/Button.tsx
index 28a66ec1..48bb07d6 100644
--- a/src/components/utils/Button.tsx
+++ b/src/components/utils/Button.tsx
@@ -10,7 +10,7 @@ export const Button = (props: ButtonProps) => (
     <button
         onClick={props.onClick}
         type="button"
-        className={`focus:outline-none transition rounded-full py-3 text-xl shadow-md-dark-contrast font-bold ${props.className}`}
+        className={`rounded-full py-3 text-xl font-bold shadow-md-dark-contrast transition focus:outline-none ${props.className}`}
     >
         {props.children}
     </button>
diff --git a/src/components/utils/Card.tsx b/src/components/utils/Card.tsx
index 9eed21f2..ef05e068 100644
--- a/src/components/utils/Card.tsx
+++ b/src/components/utils/Card.tsx
@@ -6,7 +6,7 @@ type CardProps = {
     children: ReactNode
 }
 export const Card = (props: CardProps) => (
-    <div className={`bg-${props.bgColour} border-t-4 px-page py-6 max-w-2xl rounded-lg ${props.className}`}>
+    <div className={`bg-${props.bgColour} px-page max-w-2xl rounded-lg border-t-4 py-6 ${props.className}`}>
         {props.children}
     </div>
 );
diff --git a/src/components/utils/Container.tsx b/src/components/utils/Container.tsx
index 647ded6a..0e80d00a 100644
--- a/src/components/utils/Container.tsx
+++ b/src/components/utils/Container.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 const Container = (props: {className?: string, children: ReactNode}) => (
-    <div className={`container px-page ${props.className}`}>
+    <div className={`px-page container ${props.className}`}>
         {props.children}
     </div>
 );
diff --git a/src/components/utils/Dropdown.tsx b/src/components/utils/Dropdown.tsx
index b21e838e..e191bfbb 100644
--- a/src/components/utils/Dropdown.tsx
+++ b/src/components/utils/Dropdown.tsx
@@ -8,7 +8,7 @@ type DropdownProps = {
 }
 
 export const DropdownItem = (props: { children: ReactNode }) => (
-    <li className="py-1 px-4 text-gray-200 hover:text-teal md:text-gray-700 md:hover:text-gray-900 md:hover:bg-gray-100">
+    <li className="px-4 py-1 text-gray-200 hover:text-teal md:text-gray-700 md:hover:bg-gray-100 md:hover:text-gray-900">
         {props.children}
     </li>
 );
@@ -16,19 +16,19 @@ export const DropdownItem = (props: { children: ReactNode }) => (
 export const Dropdown = (props: DropdownProps) => {
     const [isShown, setIsShown] = useState(false);
     return (
-        <li className={`list-none cursor-pointer ${props.className}`} onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
+        <li className={`cursor-pointer list-none ${props.className}`} onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
             <span
                 draggable="false"
                 onClick={() => setIsShown(!isShown)}
                 className="py-5 font-semibold"
             >
-                <span className={`inline-flex group hover:text-teal ${isShown && 'text-teal'}`}>
+                <span className={`group inline-flex hover:text-teal ${isShown && 'text-teal'}`}>
                     {props.titleName}
-                    <IconChevronDown className={`${isShown && '-rotate-180'} transition duration-200 self-center`} size={20} />
+                    <IconChevronDown className={`${isShown && '-rotate-180'} self-center transition duration-200`} size={20} />
                 </span>
                 {isShown && (
                     <div className="relative">
-                        <ul className="flex right-0 flex-col gap-y-3 py-1 mt-4 w-56 rounded-md md:absolute md:bg-white md:ring-1 md:shadow-lg ring-black/10">
+                        <ul className="right-0 mt-4 flex w-56 flex-col gap-y-3 rounded-md py-1 ring-black/10 md:absolute md:bg-white md:shadow-lg md:ring-1">
                             {props.children}
                         </ul>
                     </div>
diff --git a/src/components/utils/Footer.tsx b/src/components/utils/Footer.tsx
index 7317f2ed..114a6dbd 100644
--- a/src/components/utils/Footer.tsx
+++ b/src/components/utils/Footer.tsx
@@ -11,16 +11,16 @@ type IconItemProp = {
 }
 
 export const FooterIconItem = (props: IconItemProp) => (
-    <a href={props.href} target="_blank" rel="noreferrer">
-        <FontAwesomeIcon className="hover:text-blue-light transition" icon={props.icon} size="lg" />
+    <a href={props.href} aria-label={props.href} target="_blank" rel="noreferrer">
+        <FontAwesomeIcon className="transition hover:text-blue-light" icon={props.icon} size="lg" />
     </a>
 );
 
 export const Footer = () => (
-    <footer className="py-8 bg-blue-dark">
+    <footer className="bg-blue-dark py-8">
         <Container className="flex flex-col space-y-2">
 
-            <div className="flex gap-x-4 justify-center">
+            <div className="flex justify-center gap-x-4">
                 <FooterIconItem icon={faGithub} href="https://github.com/flybywiresim" />
                 <FooterIconItem icon={faTwitter} href="https://twitter.com/FlyByWireSim" />
                 <FooterIconItem icon={faFacebook} href="https://www.facebook.com/FlyByWireSimulations" />
@@ -29,7 +29,7 @@ export const Footer = () => (
                 <FooterIconItem icon={faYoutube} href="https://www.youtube.com/c/FlyByWireSimulations" />
             </div>
 
-            <div className="flex gap-x-4 justify-center text-center">
+            <div className="flex justify-center gap-x-4 text-center">
                 <a
                     className="hover:underline"
                     href="https://github.com/flybywiresim/flybywiresim-website/"
@@ -38,12 +38,12 @@ export const Footer = () => (
                 >
                     Source Code
                 </a>
-                <span className="hover:underline cursor-pointer">
+                <span className="cursor-pointer hover:underline">
                     <Link href="/tos">
                         Terms of Service
                     </Link>
                 </span>
-                <span className="hover:underline cursor-pointer">
+                <span className="cursor-pointer hover:underline">
                     <Link href="/privacy">
                         Privacy Policy
                     </Link>
diff --git a/src/components/utils/NavBar.tsx b/src/components/utils/NavBar.tsx
index af7f82f4..ca154524 100644
--- a/src/components/utils/NavBar.tsx
+++ b/src/components/utils/NavBar.tsx
@@ -35,7 +35,7 @@ export const NavBar = () => {
     }
     return (
         <nav
-            className={`fixed w-full z-50 ${scroll || isOpen ? 'transition bg-blue-dark-contrast shadow-lg-dark' : 'transition bg-transparent'}`}
+            className={`fixed z-50 w-full ${scroll || isOpen ? 'bg-blue-dark-contrast shadow-lg-dark transition' : 'bg-transparent transition'}`}
             onClick={handleClick}
         >
             <Container className="p-4">
@@ -43,16 +43,16 @@ export const NavBar = () => {
                     <Link href="/">
                         <Image className="cursor-pointer" src="/svg/white/FBW-Logo-WHITE.svg" width={180} height={40} />
                     </Link>
-                    <span className="flex flex-col place-content-center w-7 h-10 transition cursor-pointer md:hidden" onClick={() => setOpen(!isOpen)}>
-                        <div className={`${isOpen && 'rotate-45 translate-y-[3px]'} duration-200 h-[3px] bg-white rounded-full`} />
-                        <div className={`${isOpen ? 'h-0' : 'h-[3px] my-[5px]'} bg-white rounded-full`} />
-                        <div className={`${isOpen && '-rotate-45'}  duration-200 h-[3px] bg-white rounded-full`} />
+                    <span className="flex h-10 w-7 cursor-pointer flex-col place-content-center transition md:hidden" onClick={() => setOpen(!isOpen)}>
+                        <div className={`${isOpen && 'translate-y-[3px] rotate-45'} h-[3px] rounded-full bg-white duration-200`} />
+                        <div className={`${isOpen ? 'h-0' : 'my-[5px] h-[3px]'} rounded-full bg-white`} />
+                        <div className={`${isOpen && '-rotate-45'}  h-[3px] rounded-full bg-white duration-200`} />
                     </span>
                     <NavLinks className="hidden md:flex md:flex-row" />
                 </div>
                 <NavLinks className={`${isOpen ? 'py-1 md:hidden' : 'hidden'}`} />
             </Container>
-            <div className={`absolute w-full h-screen ${!isOpen && 'hidden'}`} />
+            <div className={`absolute h-screen w-full ${!isOpen && 'hidden'}`} />
         </nav>
     );
 };
diff --git a/src/components/utils/NavLinks.tsx b/src/components/utils/NavLinks.tsx
index 15ac7c8c..63084a67 100644
--- a/src/components/utils/NavLinks.tsx
+++ b/src/components/utils/NavLinks.tsx
@@ -10,7 +10,7 @@ export type LinkProps = {
 };
 
 export const NavLink = ({ name, path, external, className }: LinkProps) => (
-    <li className={`list-none transition w-full cursor-pointer hover:text-teal ${className}`}>
+    <li className={`w-full cursor-pointer list-none transition hover:text-teal ${className}`}>
         {
             external ? (
                 <a href={path}>
diff --git a/src/components/utils/ScrollToTopButton.tsx b/src/components/utils/ScrollToTopButton.tsx
index 352600fe..032e924b 100644
--- a/src/components/utils/ScrollToTopButton.tsx
+++ b/src/components/utils/ScrollToTopButton.tsx
@@ -20,7 +20,12 @@ export const ScrollToTopButton = () => {
     return (
         <>
             {visible && (
-                <button type="button" onClick={handleClick} className="fixed right-0 bottom-0 z-50 py-3 px-4 m-8 bg-teal-light-contrast rounded-xl cursor-pointer focus:outline-none">
+                <button
+                    type="button"
+                    aria-label="Scroll to top"
+                    onClick={handleClick}
+                    className="fixed bottom-0 right-0 z-50 m-8 cursor-pointer rounded-xl bg-teal-light-contrast px-4 py-3 focus:outline-none"
+                >
                     <FontAwesomeIcon icon={faArrowUp} />
                 </button>
             )}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 03de5910..09e86a36 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,6 +1,6 @@
 const Custom404 = () => (
     <section>
-        <div className="flex flex-col justify-center mx-auto max-w-md min-h-screen text-center md:max-w-4xl">
+        <div className="mx-auto flex min-h-screen max-w-md flex-col justify-center text-center md:max-w-4xl">
             <h5 className="text-9xl font-bold text-blue-light">404</h5>
             <h2 className="mt-8 text-4xl font-bold">
                 We don&apos;t know where the baggage is! It seems like the URL that you requested from us doesn&apos;t exist.
@@ -12,7 +12,7 @@ const Custom404 = () => (
         </div>
 
         <video
-            className="object-cover absolute top-0 w-screen h-screen opacity-10"
+            className="absolute top-0 h-screen w-screen object-cover opacity-10"
             src="https://cdn.flybywiresim.com/assets/website/video/A32NX.mp4"
             playsInline
             autoPlay
diff --git a/src/pages/a32nx.tsx b/src/pages/a32nx.tsx
index 64742370..c8f537b1 100644
--- a/src/pages/a32nx.tsx
+++ b/src/pages/a32nx.tsx
@@ -8,7 +8,7 @@ const A32nx = () => (
         <Hero />
         <Features />
         <ExtendedFeatures />
-        <Download expOnHold/>
+        <Download expOnHold />
     </>
 );
 
diff --git a/src/pages/map.tsx b/src/pages/map.tsx
index 26902d4a..b901c7d7 100644
--- a/src/pages/map.tsx
+++ b/src/pages/map.tsx
@@ -21,7 +21,7 @@ const Map = () => {
     return (
         <>
             <main className=" h-screen bg-blue-dark-contrast">
-                <div className="relative z-20 pt-20 h-screen text-black">
+                <div className="relative z-20 h-screen pt-20 text-black">
                     <MapDisplay refreshInterval={mapRefreshInterval} />
                 </div>
             </main>
diff --git a/src/pages/notams/[id].tsx b/src/pages/notams/[id].tsx
index c7856035..f2fea164 100644
--- a/src/pages/notams/[id].tsx
+++ b/src/pages/notams/[id].tsx
@@ -36,7 +36,7 @@ const Post = ({ content: { authors, category, contentHtml, date, readingStats, t
 
         <section className="bg-white">
             <div className="relative bg-blue-dark">
-                <div className="absolute w-full h-full opacity-20 blur-sm">
+                <div className="absolute h-full w-full opacity-20 blur-sm">
                     <Image
                         layout="fill"
                         objectFit="cover"
@@ -46,14 +46,14 @@ const Post = ({ content: { authors, category, contentHtml, date, readingStats, t
                     />
                 </div>
 
-                <Container className="flex relative bottom-16 flex-col justify-end max-w-7xl h-160">
+                <Container className="relative bottom-16 flex h-160 max-w-7xl flex-col justify-end">
                     <div className="flex text-xl">
                         {category === 'ANNOUNCEMENTS'
                             ? (
                                 <p className="font-black text-teal-light">{category}</p>
                             )
                             : (
-                                <p className="font-black text-orangutanOrange">{category}</p>
+                                <p className="text-orangutanOrange font-black">{category}</p>
                             )}
                         <span className="pl-2 text-gray-300">
                             {readingStats.text}
@@ -74,7 +74,7 @@ const Post = ({ content: { authors, category, contentHtml, date, readingStats, t
             </div>
 
             <article
-                className="py-16 mx-auto prose prose-2xl px-page"
+                className="px-page prose prose-2xl mx-auto py-16"
                 /* eslint-disable-next-line react/no-danger */
                 dangerouslySetInnerHTML={{ __html: contentHtml }}
             />
diff --git a/src/pages/notams/index.tsx b/src/pages/notams/index.tsx
index b3f8252f..6d72be6d 100644
--- a/src/pages/notams/index.tsx
+++ b/src/pages/notams/index.tsx
@@ -9,7 +9,7 @@ export type BlogProps = { listings: PostListing[] }
 const Blog = ({ listings }: BlogProps) => (
     <section className="min-h-screen bg-midnight">
         <Container
-            className="grid gap-8 py-14 pt-24 max-w-7xl md:grid-cols-2"
+            className="grid max-w-7xl gap-8 py-14 pt-24 md:grid-cols-2"
         >
             {listings.map(({
                 id,
@@ -24,17 +24,17 @@ const Blog = ({ listings }: BlogProps) => (
                 <Link key={id} href={`/notams/${id}`}>
                     <div className={`
                                 ${index === 0 ? 'md:col-span-2' : 'brightness-90 hover:brightness-100'}
-                                bg-blue-dark-contrast
-                                flex flex-col
+                                flex
+                                cursor-pointer flex-col
+                                overflow-hidden
                                 rounded-lg
-                                transition
+                                bg-blue-dark-contrast
                                 ring-1
-                                overflow-hidden
-                                hover:ring-2
                                 ring-gray-700
+                                transition
                                 hover:shadow-lg
-                                hover:ring-teal
-                                cursor-pointer`}
+                                hover:ring-2
+                                hover:ring-teal`}
                     >
                         {metaImage
                             ? (
@@ -49,7 +49,7 @@ const Blog = ({ listings }: BlogProps) => (
                             )
                             : <></>}
                         <Container className="py-7">
-                            <div className="flex flex-wrap gap-x-4 md:text-lg text-md">
+                            <div className="text-md flex flex-wrap gap-x-4 md:text-lg">
                                 {category === 'ANNOUNCEMENTS'
                                     ? (
                                         <p
@@ -60,14 +60,14 @@ const Blog = ({ listings }: BlogProps) => (
                                     )
                                     : (
                                         <p
-                                            className="font-bold text-orangutanOrange"
+                                            className="text-orangutanOrange font-bold"
                                         >
                                             {category}
                                         </p>
                                     )}
                                 {index === 0
                                     ? (
-                                        <span className="self-center px-1 text-sm font-semibold bg-gray-700 rounded-md ring-2 ring-gray-500">LATEST</span>
+                                        <span className="self-center rounded-md bg-gray-700 px-1 text-sm font-semibold ring-2 ring-gray-500">LATEST</span>
                                     ) : <></>}
                                 <em className="self-end text-gray-300">
                                     {readingStats.text}
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index 9574e1c2..a5e7c86a 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -12,7 +12,7 @@ const Privacy = () => {
     return (
         <>
             <header>
-                <div className="object-cover relative z-0 w-screen h-screen shadow-2xl opacity-20">
+                <div className="relative z-0 h-screen w-screen object-cover opacity-20 shadow-2xl">
                     <Image
                         src="/img/a32nxwing.png"
                         alt="Privacy policy"
@@ -20,12 +20,12 @@ const Privacy = () => {
                         objectFit="cover"
                     />
                 </div>
-                <div className="flex absolute top-0 bottom-0 z-20 justify-center w-full">
-                    <div className="relative justify-center my-auto text-center sm:flex sm:space-x-10 sm:divide-x md:w-4/5 xl:justify-start xl:w-3/4 sm:item-center">
-                        <FontAwesomeIcon className="self-center mb-3 sm:mb-0" icon={faUserShield} size="7x" />
+                <div className="absolute inset-y-0 z-20 flex w-full justify-center">
+                    <div className="sm:item-center relative my-auto justify-center text-center sm:flex sm:space-x-10 sm:divide-x md:w-4/5 xl:w-3/4 xl:justify-start">
+                        <FontAwesomeIcon className="mb-3 self-center sm:mb-0" icon={faUserShield} size="7x" />
 
                         <div className="mx-auto w-1/2 text-center sm:space-x-10 md:text-left">
-                            <div className="space-y-2 w-full divide-y divide-gray-400 sm:ml-10">
+                            <div className="w-full space-y-2 divide-y divide-gray-400 sm:ml-10">
                                 <h1 className="text-4xl font-medium text-blue-light sm:text-8xl md:text-7xl">
                                     Privacy Policy
                                 </h1>
@@ -43,14 +43,14 @@ const Privacy = () => {
             {/* HandleScroll scrolls to this div */}
             <div ref={bodyRef} />
 
-            <article className="px-20 my-40 w-full max-w-6xl md:mx-auto xl:px-0">
+            <article className="my-40 w-full max-w-6xl px-20 md:mx-auto xl:px-0">
                 <h1 className="mt-40 text-6xl font-semibold text-blue-light">Privacy Policy</h1>
                 <div className="mt-2">
                     <p>Effective: 21/12/2020</p>
                     <p>Author: Nathan Innes</p>
                 </div>
                 <div className="w-0">
-                    <a className="hover:text-blue-light underline" href="https://github.com/flybywiresim/manuals/raw/master/pdf/Privacy%20Policy.pdf" target="_blank" rel="noreferrer">
+                    <a className="underline hover:text-blue-light" href="https://github.com/flybywiresim/manuals/raw/master/pdf/Privacy%20Policy.pdf" target="_blank" rel="noreferrer">
                         <p>Download</p>
                     </a>
                 </div>
diff --git a/src/pages/tos.tsx b/src/pages/tos.tsx
index 9d20e7ef..7545f500 100644
--- a/src/pages/tos.tsx
+++ b/src/pages/tos.tsx
@@ -12,7 +12,7 @@ const Tos = () => {
     return (
         <>
             <header>
-                <div className="object-cover relative z-0 w-screen h-screen shadow-2xl opacity-20">
+                <div className="relative z-0 h-screen w-screen object-cover opacity-20 shadow-2xl">
                     <Image
                         src="/img/a32nxwing.png"
                         alt="Terms of Service"
@@ -20,11 +20,11 @@ const Tos = () => {
                         objectFit="cover"
                     />
                 </div>
-                <div className="flex absolute top-0 bottom-0 z-20 justify-center w-full">
-                    <div className="relative justify-center my-auto text-center sm:flex sm:space-x-10 sm:divide-x xl:justify-start xl:w-2/3 sm:item-center">
-                        <FontAwesomeIcon className="self-center mb-3 sm:mb-0" icon={faCogs} size="7x" />
+                <div className="absolute inset-y-0 z-20 flex w-full justify-center">
+                    <div className="sm:item-center relative my-auto justify-center text-center sm:flex sm:space-x-10 sm:divide-x xl:w-2/3 xl:justify-start">
+                        <FontAwesomeIcon className="mb-3 self-center sm:mb-0" icon={faCogs} size="7x" />
                         <div className="mx-auto w-7/12 text-center sm:space-x-10 md:text-left">
-                            <div className="space-y-2 w-full divide-y divide-gray-400 sm:ml-10">
+                            <div className="w-full space-y-2 divide-y divide-gray-400 sm:ml-10">
                                 <h1 className="text-4xl font-medium text-blue-light sm:text-8xl md:text-7xl">
                                     Terms of Service
                                 </h1>
@@ -41,14 +41,14 @@ const Tos = () => {
             {/* HandleScroll scrolls to this div */}
             <div ref={bodyRef} />
 
-            <article className="px-20 my-40 w-full max-w-6xl md:mx-auto xl:px-0">
+            <article className="my-40 w-full max-w-6xl px-20 md:mx-auto xl:px-0">
                 <h1 className="mt-40 text-6xl font-semibold text-blue-light">Terms of Service</h1>
                 <div className="mt-2">
                     <p>Effective: 21/12/2020</p>
                     <p>Author: Nathan Innes</p>
                 </div>
                 <div className="w-0">
-                    <a className="hover:text-blue-light underline" href="https://github.com/flybywiresim/manuals/raw/master/pdf/Terms%20of%20Service.pdf" target="_blank" rel="noreferrer">
+                    <a className="underline hover:text-blue-light" href="https://github.com/flybywiresim/manuals/raw/master/pdf/Terms%20of%20Service.pdf" target="_blank" rel="noreferrer">
                         <p>Download</p>
                     </a>
                 </div>