Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: dark theme #525

Open
wants to merge 3 commits into
base: staging
Choose a base branch
from
+89 −24
Open

feat: dark theme #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1669bbb
add light vercel logo
ExampleWasTaken Nov 2, 2024
4f88d2b
add optional dark theme for insights and footer
ExampleWasTaken Nov 2, 2024
c71dc67
fix dark text color
ExampleWasTaken Nov 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/svg/vercel-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 64 additions & 16 deletions src/components/Navigation/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,58 @@
import Image from 'next/legacy/image';
import { ReactNode } from 'react';
import { links } from '../../constants/links';
import Container from '../Utils/Container';
import Section from '../Utils/Section';
import { links } from '../../constants/links';

const NavWrapper = (props: { label: string, children: ReactNode }) => (
<div className="grid">
<p className="text-dark/75">{props.label}</p>
<p className="text-dark/75 dark:text-cyan transition-colors">{props.label}</p>
<ul>
{props.children}
</ul>
</div>
);

const NavItem = (props: {label: string, href: string}) => (
const NavItem = (props: { label: string, href: string }) => (
<li>
<a href={props.href}>
<p className="hover:font-medium hover:underline min-w-24">{props.label}</p>
<p className="hover:font-medium hover:underline min-w-24 transition-all ease-in-out">
{props.label}
</p>
</a>
</li>
);

const Footer = () => (
<footer>
<Section theme="light" className="pb-0">
<Section theme="light" className="pb-0 dark:bg-navy-dark dark:text-light transition-colors">
<Container>
<div className="text-md justify-center py-4">
<div className="flex flex-col justify-between lg:flex-row">
<div className="my-4">
<div className="lg:mb-4">
<Image src="/svg/tail/tail.svg" alt="FlyByWire Simulations Logo" width={50} height={50} />
<Image
src="/svg/tail/tail.svg"
alt="FlyByWire Simulations Logo"
width={50}
height={50}
/>
</div>
<h4>Contact Us</h4>
<a href="mailto:contact@flybywiresim.com">
<p className="font-semibold">contact@flybywiresim.com</p>
<p className="font-semibold">
contact@flybywiresim.com
</p>
</a>
</div>

<div className="grid grid-cols-3 items-start gap-x-32 gap-y-5">
<NavWrapper label="Projects">
<NavItem label="Installer" href="/" />
<NavItem label="A32NX" href="/projects/downloadLinks" />
<NavItem
label="A32NX"
href="/projects/downloadLinks"
/>
<NavItem label="A380X" href="/projects/a380x" />
<NavItem label="EFB" href="/" />
</NavWrapper>
Expand All @@ -56,7 +68,10 @@ const Footer = () => (
<NavWrapper label="Socials">
<NavItem label="Discord" href={links.discord} />
<NavItem label="Twitter" href={links.twitter} />
<NavItem label="Facebook" href={links.facebook} />
<NavItem
label="Facebook"
href={links.facebook}
/>
<NavItem label="YouTube" href={links.youtube} />
<NavItem label="Twitch" href={links.twitch} />
</NavWrapper>
Expand All @@ -65,17 +80,50 @@ const Footer = () => (

<div className="top-4 grid items-center justify-center gap-4 py-8 text-center lg:grid-cols-2 lg:text-left">
<span className="flex gap-8 underline underline-offset-4">
<a href="https://github.com/flybywiresim/manuals/blob/master/pdf/FBW%20Terms%20of%20Services.pdf" target="_blank" rel="noreferrer">Terms of Use</a>
<a href="https://github.com/flybywiresim/manuals/blob/master/pdf/FBW%20Privacy%20Policy.pdf" target="_blank" rel="noreferrer">Privacy Policy</a>
<a href="https://github.com/flybywiresim/" target="_blank" rel="noreferrer">Source Code</a>
<a
href="https://github.com/flybywiresim/manuals/blob/master/pdf/FBW%20Terms%20of%20Services.pdf"
target="_blank"
rel="noreferrer"
>
Terms of Use
</a>
<a
href="https://github.com/flybywiresim/manuals/blob/master/pdf/FBW%20Privacy%20Policy.pdf"
target="_blank"
rel="noreferrer"
>
Privacy Policy
</a>
<a
href="https://github.com/flybywiresim/"
target="_blank"
rel="noreferrer"
>
Source Code
</a>
</span>

<a href="https://vercel.com" className="flex items-center justify-center gap-1 text-dark/50 lg:justify-end">
<a
href="https://vercel.com"
className="flex items-center justify-center gap-1 text-dark/50 dark:text-light lg:justify-end"
>
<span className="mb-1 mr-1">Powered by</span>
<Image src="/svg/vercel.svg" alt="Vercel" width={50} height={50} />
<picture>
<source
srcSet="/svg/vercel-light.svg"
media="(prefers-color-scheme: dark)"
/>
<img
src="/svg/vercel.svg"
alt="Vercel"
width={50}
height={50}
/>
</picture>
</a>
<p className=" text-sm text-dark/50">
&copy; FlyByWire Simulations and its contributors 2020-
<p className="text-sm text-dark/50 dark:text-light transition-colors">
&copy; FlyByWire Simulations and its contributors
2020-
{new Date().getFullYear()}
</p>
</div>
Expand Down
30 changes: 22 additions & 8 deletions src/layouts/landing/Insights.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import 'leaflet/dist/leaflet.css';

const LeafletMap = dynamic(() => import('../../components/Map/Map'), { ssr: false });

const Statistic = (props: { value: string, label: string }) => (
const Statistic = (props: { value: string; label: string }) => (
<div>
<h2>{props.value}</h2>
<p className="text-sm">{props.label}</p>
Expand All @@ -28,34 +28,48 @@ const Insights = () => {
}, []);

return (
<Section theme="light" className="relative flex flex-col py-0 xl:flex-row-reverse">
<Section
theme="light"
className="dark:bg-navy-dark dark:text-light transition-colors relative flex flex-col py-0 xl:flex-row-reverse"
>
<div className="grow flex flex-col items-center justify-center py-20">
<div className="grid gap-y-4 px-4 text-center lg:text-left lg:px-16 2xl:px-28">
<div className="flex flex-col max-lg:items-center">
<div className="flex flex-col flex-wrap items-center gap-4 lg:flex-row">
<Image src="/svg/tail/tail.svg" width={40} height={40} />
<Image
src="/svg/tail/tail.svg"
width={40}
height={40}
/>

<h2>Community Insights</h2>
</div>

<p className="max-w-prose max-lg:text-center">
Discover the extensive community behind every FlyByWire Simulations aircraft - a vibrant and
active online group that prioritises collaborative work and openness.
Discover the extensive community behind every
FlyByWire Simulations aircraft - a vibrant and
active online group that prioritises collaborative
work and openness.
</p>
</div>

<div className="flex flex-col justify-center xl:max-w-3xl">
<ul className="grid grid-cols-2 gap-20 py-2 lg:grid-cols-4">
<Statistic value={liveFlights} label="Live Flights" />
<Statistic
value={liveFlights}
label="Live Flights"
/>
<Statistic value={commitCount} label="Commits" />
<Statistic value={contributorCount} label="Contributors" />
<Statistic
value={contributorCount}
label="Contributors"
/>
<Statistic value="2M+" label="Downloads" />
</ul>

<hr className="my-6" />
<Discord />
</div>

</div>
</div>

Expand Down
Loading