fix: remove white backgrounds from areas that are white

README.md

@@ -1,4 +1,5 @@
-![FlyByWire Simulations](https://raw.githubusercontent.com/flybywiresim/branding/1391fc003d8b5d439d01ad86e2778ae0bfc8b682/tails-with-text/FBW-Color-Light.svg)
+![FlyByWire Simulations](https://raw.githubusercontent.com/flybywiresim/branding/master/tails-with-text/FBW-Color-Dark.svg#gh-light-mode-only)
+![FlyByWire Simulations](https://raw.githubusercontent.com/flybywiresim/branding/master/tails-with-text/FBW-Color-Light.svg#gh-dark-mode-only)
 
 This is the website repository for the [FlyByWire Simulations website](https://flybywiresim.com/).
 

package.json

@@ -8,17 +8,17 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@tabler/icons": "^1.63.0",
+    "@fortawesome/react-fontawesome": "^0.1.19",
+    "@tabler/icons": "^1.119.0",
     "gray-matter": "^4.0.3",
-    "next": "^12.1.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "next": "^12.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reading-time": "^1.5.0",
-    "remark": "^14.0.1",
-    "remark-html": "^15.0.1",
-    "swiper": "^6.7.5",
-    "typescript": "^4.6.3"
+    "remark": "^14.0.3",
+    "remark-html": "^15.0.2",
+    "swiper": "^6.8.4",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "next start",
@@ -41,24 +41,24 @@
     ]
   },
   "devDependencies": {
-    "@flybywiresim/eslint-config": "~0.2.3",
+    "@flybywiresim/eslint-config": "^0.2.3",
     "@flybywiresim/tailwind-config": "^0.5.2",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^17.0.45",
+    "@types/react": "^17.0.73",
+    "@types/react-dom": "^17.0.25",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.4.16",
     "eslint": "^7.32.0",
-    "eslint-config-next": "^12.1.4",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-tailwindcss": "^3.5.0",
-    "node-html-to-image": "^3.2.4",
-    "postcss": "^8.2.10",
-    "sass": "^1.49.10",
-    "tailwindcss": "^3.0.23",
+    "eslint-config-next": "^12.3.4",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "node-html-to-image": "^3.4.0",
+    "postcss": "^8.4.32",
+    "sass": "^1.69.5",
+    "tailwindcss": "^3.4.0",
     "uuid": "^8.3.2"
   }
 }

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>

src/components/home/Community.tsx

@@ -17,7 +17,7 @@ const CONTRIBUTOR_COUNT_ENDPOINT = 'https://api.github.com/repos/flybywiresim/a3
 
 const Statistic = (props: {statCount: string, statName: string}) => (
     <div id={props.statName}>
-        <h1 className="text-5xl font-bold text-blue-dark-contrast">{props.statCount}</h1>
+        <h1 className="text-5xl font-bold text-slate-50">{props.statCount}</h1>
         <p>{props.statName}</p>
     </div>
 );
@@ -49,25 +49,25 @@ 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" />
-                <h1>Community Insights</h1>
-                <p className="max-w-prose text-gray-800">
+        <section id="community" className="flex flex-col items-center justify-between bg-gray-800 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 className="text-slate-50">Community Insights</h1>
+                <p className="max-w-prose text-slate-300">
                     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 text-slate-300">
                     <Statistic statCount={liveFlights} statName="Live Flights" />
                     <Statistic statCount={commitCount} statName="Commits" />
                     <Statistic statCount={contributorCount} statName="Contributors" />
                     <Statistic statCount="1M+" statName="Downloads" />
                 </div>
 
                 <div className="my-8">
-                    <Card bgColour="gray-100" className="border-discord shadow-lg">
+                    <Card bgColour="blue-dark-contrast" className="border-discord shadow-lg text-white">
                         <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,19 +78,19 @@ 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">
-                <MapDisplay refreshInterval={mapRefreshInterval} disableMenu disableWeather={false} disableScroll forceTileset="carto-light" />
+            <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-dark" />
             </div>
         </section>
     );

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>

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"

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>