Add dark mode image for Liberty

philly-js-club · Jun 12, 2024 · 90e87e2 · 90e87e2
1 parent aba2899
commit 90e87e2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 25 deletions.
diff --git a/app/components/Icons.tsx b/app/components/Icons.tsx
@@ -1,6 +1,7 @@
 import { Arrow } from "~/components/Arrow";
 
 interface IconProp {
+	darkModeImageHref?: string;
 	description?: string;
 	href: string;
 	imageHref: string;
@@ -15,30 +16,42 @@ interface IconsProps {
 export function Icons({ icons, imageClassName }: IconsProps) {
 	return (
 		<ol className="icons">
-			{icons.map(({ description, href, imageHref, name }) => (
-				<li className="icon-list" key={name}>
-					<div className="icon">
-						<img
-							alt={`${name} logo`}
-							className={imageClassName}
-							src={imageHref}
-						/>
-						<div className="icon-info">
-							<a href={href} rel="noreferrer" target="_blank">
-								<h3 className="larger">
-									{name}{" "}
-									<Arrow
-										className="arrow-out medium"
-										label="External link indication arrow"
-										rotate={-45}
-									/>
-								</h3>
-							</a>
-							{description && <p className="smaller">{description}</p>}
+			{icons.map(
+				({ darkModeImageHref, description, href, imageHref, name }) => (
+					<li className="icon-list" key={name}>
+						<div className="icon">
+							<img
+								alt={`${name} logo`}
+								className={
+									(imageClassName ?? "") +
+									(darkModeImageHref ? " only-light" : "")
+								}
+								src={imageHref}
+							/>
+							{darkModeImageHref && (
+								<img
+									alt={`${name} logo`}
+									className={(imageClassName ?? "") + " only-dark"}
+									src={darkModeImageHref}
+								/>
+							)}
+							<div className="icon-info">
+								<a href={href} rel="noreferrer" target="_blank">
+									<h3 className="larger">
+										{name}{" "}
+										<Arrow
+											className="arrow-out medium"
+											label="External link indication arrow"
+											rotate={-45}
+										/>
+									</h3>
+								</a>
+								{description && <p className="smaller">{description}</p>}
+							</div>
 						</div>
-					</div>
-				</li>
-			))}
+					</li>
+				)
+			)}
 		</ol>
 	);
 }
diff --git a/app/data/sponsors.json b/app/data/sponsors.json
@@ -13,9 +13,10 @@
 			"name": "Indy Hall"
 		},
 		{
+			"darkModeImageHref": "/assets/logos/liberty.png",
 			"description": "The essential destination site for technical job seekers.",
 			"href": "https://libertyjobs.com",
-			"imageHref": "/assets/logos/liberty.png",
+			"imageHref": "/assets/logos/liberty-regular.png",
 			"name": "Liberty Jobs"
 		}
 	]

diff --git a/app/root.css b/app/root.css
@@ -69,9 +69,21 @@ p {
 	color: var(--color-background);
 }
 
+.only-dark {
+	display: none;
+}
+
 @media (prefers-color-scheme: dark) {
 	:root {
 		--color-background: #323330;
 		--color-foreground: #efdb4f;
 	}
+
+	.only-dark {
+		display: block;
+	}
+
+	.only-light {
+		display: none;
+	}
 }
diff --git a/app/routes/sponsors.tsx b/app/routes/sponsors.tsx
@@ -7,7 +7,7 @@ import { constructSiteTitle } from "~/utils/common";
 
 interface LoaderData {
 	currentSponsors: Record<
-		"description" | "href" | "imageHref" | "name",
+		"darkModeImageHref" | "description" | "href" | "imageHref" | "name",
 		string
 	>[];
 }

diff --git a/public/assets/logos/liberty-regular.png b/public/assets/logos/liberty-regular.png