From 1f85bebb79c75b3b3f5e9ccf03fc76e10e4a9fdf Mon Sep 17 00:00:00 2001
From: Eugene Fox <eugene@xfox111.net>
Date: Sun, 17 May 2026 08:36:37 +0000
Subject: [PATCH] chore(ui): minor branding update

---
 entrypoints/options/hooks/useOptionsStyles.ts |  6 ++
 entrypoints/options/layouts/AboutSection.tsx  | 42 ++++-----
 public/fox.svg                                | 85 +++++++++++++++++++
 3 files changed, 113 insertions(+), 20 deletions(-)
 create mode 100644 public/fox.svg

diff --git a/entrypoints/options/hooks/useOptionsStyles.ts b/entrypoints/options/hooks/useOptionsStyles.ts
index 1304f5d..6f4772c 100644
--- a/entrypoints/options/hooks/useOptionsStyles.ts
+++ b/entrypoints/options/hooks/useOptionsStyles.ts
@@ -41,5 +41,11 @@ export const useOptionsStyles = makeStyles({
 		flexFlow: "column",
 		alignItems: "flex-start",
 		gap: tokens.spacingVerticalSNudge
+	},
+	img:
+	{
+		height: "100px",
+		flexGrow: 1,
+		alignSelf: "flex-end"
 	}
 });
diff --git a/entrypoints/options/layouts/AboutSection.tsx b/entrypoints/options/layouts/AboutSection.tsx
index 9491d5f..6864ce0 100644
--- a/entrypoints/options/layouts/AboutSection.tsx
+++ b/entrypoints/options/layouts/AboutSection.tsx
@@ -2,7 +2,7 @@ import { BuyMeACoffee20Regular } from "@/assets/BuyMeACoffee20";
 import { bskyLink, buyMeACoffeeLink, githubLinks, storeLink, websiteLink } from "@/data/links";
 import { useBmcStyles } from "@/hooks/useBmcStyles";
 import extLink from "@/utils/extLink";
-import { Body1, Button, Caption1, Link, Subtitle1, Text } from "@fluentui/react-components";
+import { Body1, Button, Caption1, Image, Link, Subtitle1, Text } from "@fluentui/react-components";
 import { PersonFeedback20Regular } from "@fluentui/react-icons";
 import { useOptionsStyles } from "../hooks/useOptionsStyles";
 import Package from "@/package.json";
@@ -19,25 +19,6 @@ export default function AboutSection(): React.ReactElement
 				<sup><Caption1> v{ Package.version }</Caption1></sup>
 			</Text>
 
-			<Body1 as="p">
-				{ i18n.t("options_page.about.developed_by") } (<Link { ...extLink(bskyLink) }>@xfox111.net</Link>)<br />
-				{ i18n.t("options_page.about.licensed_under") } <Link { ...extLink(githubLinks.license) }>{ i18n.t("options_page.about.mit_license") }</Link>
-			</Body1>
-
-			<Body1 as="p">
-				{ i18n.t("options_page.about.translation_cta.text") }<br />
-				<Link { ...extLink(githubLinks.translationGuide) }>
-					{ i18n.t("options_page.about.translation_cta.button") }
-				</Link>
-			</Body1>
-
-			<Body1 as="p">
-				<Link { ...extLink(websiteLink) }>{ i18n.t("options_page.about.links.website") }</Link><br />
-				<Link { ...extLink(githubLinks.repo) }>{ i18n.t("options_page.about.links.source") }</Link><br />
-				<Link { ...extLink(githubLinks.release) }>{ i18n.t("options_page.about.links.changelog") }</Link><br />
-				<Link { ...extLink(githubLinks.privacy) }>{ i18n.t("options_page.about.links.privacy") }</Link>
-			</Body1>
-
 			<div className={ cls.horizontalButtons }>
 				<Button
 					as="a" { ...extLink(storeLink) }
@@ -54,6 +35,27 @@ export default function AboutSection(): React.ReactElement
 					{ i18n.t("common.cta.sponsor") }
 				</Button>
 			</div>
+
+			<Body1 as="p">
+				{ i18n.t("options_page.about.translation_cta.text") }<br />
+				<Link { ...extLink(githubLinks.translationGuide) }>
+					{ i18n.t("options_page.about.translation_cta.button") }
+				</Link>
+			</Body1>
+
+			<Body1 as="p">
+				<Link { ...extLink(websiteLink) }>{ i18n.t("options_page.about.links.website") }</Link><br />
+				<Link { ...extLink(githubLinks.repo) }>{ i18n.t("options_page.about.links.source") }</Link><br />
+				<Link { ...extLink(githubLinks.release) }>{ i18n.t("options_page.about.links.changelog") }</Link><br />
+				<Link { ...extLink(githubLinks.privacy) }>{ i18n.t("options_page.about.links.privacy") }</Link>
+			</Body1>
+
+			<Body1 as="p">
+				{ i18n.t("options_page.about.developed_by") } (<Link { ...extLink(bskyLink) }>@xfox111.net</Link>)<br />
+				{ i18n.t("options_page.about.licensed_under") } <Link { ...extLink(githubLinks.license) }>{ i18n.t("options_page.about.mit_license") }</Link>
+			</Body1>
+
+			<Image className={ cls.img } src="/fox.svg" />
 		</>
 	);
 }
diff --git a/public/fox.svg b/public/fox.svg
new file mode 100644
index 0000000..2a05139
--- /dev/null
+++ b/public/fox.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_5" data-name="Layer 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
+	<defs>
+		<style>
+			.cls-1,
+			.cls-2,
+			.cls-3 {
+				stroke-width: 0px;
+			}
+
+			.cls-1,
+			.cls-4 {
+				fill: #ff7545;
+			}
+
+			.cls-2,
+			.cls-6 {
+				fill: #242424;
+			}
+
+			.cls-5 {
+				stroke-width: 12px;
+				stroke-linejoin: round;
+			}
+
+			.cls-6,
+			.cls-4 {
+				stroke: #242424;
+				stroke-linejoin: round;
+			}
+
+			.cls-6,
+			.cls-4 {
+				stroke-linecap: round;
+				stroke-width: 8px;
+			}
+
+			.cls-3 {
+				fill: #fff;
+			}
+
+			.laptop {
+				fill: #424242;
+				stroke: #424242;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				.laptop {
+					fill: #d6d6d6;
+					stroke: #d6d6d6;
+				}
+			}
+		</style>
+	</defs>
+	<g>
+		<path class="cls-1"
+			d="M1656,996.17c-62.9,0-124.32-15.87-177.6-45.9-48.31-27.23-88.43-65.09-116.63-109.96,42.24,16.15,87.02,24.34,133.29,24.34,191.24,0,346.83-142.61,346.83-317.91,0-49.29-17.77-79.71-40.27-118.22-.25-.44-.51-.87-.77-1.31,56.26,25.15,103.09,59.13,135.92,98.71,38.75,46.72,58.4,100.56,58.4,160,0,82.81-35.24,160.68-99.22,219.27-64.08,58.67-149.29,90.99-239.96,90.99Z" />
+		<path class="cls-2"
+			d="M1810.27,435.77c21.37,10.21,41.26,21.71,59.35,34.32,24.99,17.43,46.59,37.03,64.2,58.27,38.17,46.02,57.52,99.03,57.52,157.56,0,41.28-8.83,81.34-26.25,119.04-16.85,36.47-40.98,69.24-71.73,97.4-30.8,28.2-66.67,50.34-106.62,65.82-41.4,16.04-85.39,24.17-130.75,24.17-62.25,0-123.01-15.7-175.72-45.4-44.28-24.95-81.59-58.94-108.99-99.08,39.45,13.69,80.98,20.62,123.77,20.62,193.35,0,350.66-144.33,350.66-321.74,0-46.31-15.25-76.1-35.44-110.97M1791.69,419.07c25.27,43.77,46.37,74.72,46.37,127.67,0,173.46-153.57,314.08-343,314.08-50.83,0-99.07-10.14-142.46-28.3,57.52,99.6,171.79,167.48,303.4,167.48,189.44,0,343-140.62,343-314.08,0-126.92-88.98-217.31-207.31-266.85h0Z" />
+	</g>
+	<path class="cls-4"
+		d="M1850.7,210.11c40.63,49.7,33.28,122.93-16.42,163.56-49.7,40.63-174.15,75.16-214.78,25.46-40.63-49.7,17.94-164.81,67.64-205.44,49.7-40.63,122.93-33.28,163.56,16.42Z" />
+	<g>
+		<path class="cls-1"
+			d="M1141.23,996c-107.8,0-211.68-30.24-292.51-85.15-34.04-23.13-63.19-50-86.62-79.87-30.95-39.44-50.89-82.52-59.27-128.07,2.74-4.13,13.24-18.52,34.99-33.02,23.72-15.81,66.05-35,133.04-36.62,3.24-.07,6.3-.11,9.33-.11,43.77,0,86.56,14.88,130.79,45.49,38.84,26.88,73.68,62.33,104.42,93.61,24.59,25.02,47.83,48.66,69.78,64.67,62.27,45.4,122.66,67.87,162.35,78.74,26.53,7.27,47.34,10.45,59.7,11.84-35.66,20.71-74.9,37.05-116.83,48.62-47.77,13.19-97.96,19.88-149.17,19.88Z" />
+		<path class="cls-2"
+			d="M880.19,637.16c42.93,0,84.97,14.65,128.51,44.78,38.53,26.66,73.23,61.97,103.85,93.12,24.71,25.14,48.06,48.89,70.28,65.1,62.76,45.75,123.63,68.41,163.65,79.36,19.52,5.35,36,8.51,48.36,10.37-32.55,17.79-67.94,32.01-105.51,42.38-47.43,13.09-97.26,19.73-148.11,19.73-54.46,0-107.6-7.59-157.95-22.55-48.57-14.43-93.08-35.26-132.31-61.91-33.7-22.89-62.54-49.48-85.72-79.03-30.18-38.46-49.75-80.41-58.19-124.72,8.21-11.64,51.24-63.8,163.88-66.52,3.21-.07,6.24-.11,9.25-.11M880.19,629.16c-3.2,0-6.34.04-9.43.11-132.17,3.19-172.15,72.82-172.15,72.82,8.48,47.56,29.48,92.03,60.34,131.36,23.74,30.26,53.31,57.47,87.52,80.71,78.67,53.44,181.82,85.84,294.76,85.84,105.42,0,202.3-28.24,278.72-75.46,0,0-28.21-.92-71.36-12.74-43.16-11.81-101.26-34.52-161.05-78.11-76.68-55.9-167.65-204.53-307.35-204.53h0Z" />
+	</g>
+	<g>
+		<path class="cls-3"
+			d="M760.28,828.65c-29.91-38.81-49.23-81.08-57.46-125.74,2.74-4.13,13.24-18.52,34.99-33.02,23.38-15.59,64.87-34.46,130.24-36.54l51.71,133.53-159.48,61.77Z" />
+		<path class="cls-2"
+			d="M865.35,637.45l49.24,127.14-152.95,59.24c-28.13-37.18-46.48-77.52-54.58-120.04,8.07-11.44,49.8-62.07,158.29-66.35M870.76,629.27c-132.17,3.19-172.15,72.82-172.15,72.82,8.48,47.56,29.48,92.03,60.34,131.36l165.99-64.29-54.18-139.89h0Z" />
+	</g>
+	<rect class="cls-5 laptop" x="1219.11" y="766.83" width="270.32" height="9.95"
+		transform="translate(304.74 -380.67) rotate(18)" />
+	<rect class="cls-5 laptop" x="1059.2" y="596.18" width="270.32" height="9.95"
+		transform="translate(1479.19 -705.28) rotate(75.58)" />
+	<path class="cls-6"
+		d="M1666.04,416.09c1.06-29.87-22.29-54.95-52.17-56.01-2.32-.08-4.6,0-6.85.2.75,15,4.9,28.4,13.47,38.89,10.4,12.71,26.28,19.9,44.99,22.9.29-1.96.48-3.95.55-5.98Z" />
+	<path class="cls-4"
+		d="M1851.96,176.25c-29.01-25.87-78.84-33.24-78.84-33.24,0,0,37.28-38.45,83.99-62.26,46.65-23.78,102.73-32.92,102.73-32.92,0,0-26.34,46.29-43.76,93.12-19.06,51.23-22.35,98.62-22.35,98.62,0,0-13.99-38.55-41.77-63.33Z" />
+	<ellipse class="cls-2" cx="1700.37" cy="301.32" rx="10.19" ry="17.93"
+		transform="translate(271.38 1270.89) rotate(-44.21)" />
+</svg>