Update Recordly app branding assets

branding/source-assets/recordlygeneric.svg

@@ -0,0 +1,16 @@
+<svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="452" height="452" fill="url(#paint0_linear_89_8)"/>
+<g clip-path="url(#clip0_89_8)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M189.051 87.7287C197.092 75.8293 210.707 67.9996 226.137 67.9996C241.567 67.9996 255.182 75.8293 263.223 87.7287C276.137 81.4441 291.843 81.4712 305.206 89.1861C318.568 96.9009 326.444 110.489 327.459 124.815C341.785 125.83 355.373 133.706 363.088 147.068C370.803 160.431 370.83 176.137 364.545 189.051C376.445 197.092 384.274 210.707 384.274 226.137C384.274 241.566 376.445 255.182 364.545 263.223C370.83 276.137 370.803 291.843 363.088 305.206C355.373 318.568 341.785 326.444 327.459 327.459C326.444 341.785 318.568 355.373 305.206 363.088C291.843 370.803 276.137 370.83 263.223 364.545C255.182 376.445 241.567 384.274 226.137 384.274C210.707 384.274 197.092 376.445 189.051 364.545C176.137 370.83 160.431 370.803 147.068 363.088C133.706 355.373 125.83 341.785 124.815 327.459C110.489 326.444 96.9009 318.568 89.1861 305.206C81.4712 291.843 81.4441 276.137 87.7287 263.223C75.8293 255.182 67.9996 241.566 67.9996 226.137C67.9996 210.707 75.8293 197.092 87.7287 189.051C81.4441 176.137 81.4712 160.431 89.1861 147.068C96.9009 133.706 110.489 125.83 124.815 124.815C125.83 110.489 133.706 96.9009 147.068 89.1861C160.431 81.4712 176.137 81.4441 189.051 87.7287ZM183.329 119.899C178.901 112.229 169.079 109.598 161.41 114.026C153.74 118.454 151.108 128.276 155.536 135.946C158.782 141.567 157.847 148.667 153.257 153.257C148.667 157.847 141.567 158.782 135.946 155.536C128.276 151.108 118.454 153.74 114.026 161.41C109.598 169.079 112.229 178.901 119.899 183.329C125.521 186.575 128.261 193.191 126.581 199.461C124.901 205.731 119.219 210.091 112.729 210.091C103.872 210.091 96.6823 217.281 96.6823 226.137C96.6823 234.993 103.872 242.183 112.729 242.183C119.219 242.183 124.901 246.543 126.581 252.813C128.261 259.083 125.521 265.699 119.899 268.945C112.229 273.373 109.598 283.195 114.026 290.864C118.454 298.534 128.276 301.166 135.946 296.738C141.567 293.492 148.667 294.427 153.257 299.017C157.847 303.607 158.782 310.707 155.536 316.328C151.108 323.998 153.74 333.82 161.41 338.248C169.079 342.676 178.901 340.045 183.329 332.375C186.575 326.753 193.191 324.013 199.461 325.693C205.731 327.373 210.091 333.055 210.091 339.545C210.091 348.402 217.281 355.592 226.137 355.592C234.993 355.592 242.183 348.402 242.183 339.545C242.183 333.055 246.543 327.373 252.813 325.693C259.083 324.013 265.699 326.753 268.945 332.375C273.373 340.045 283.195 342.676 290.864 338.248C298.534 333.82 301.166 323.998 296.738 316.328C293.492 310.707 294.427 303.607 299.017 299.017C303.607 294.427 310.707 293.492 316.328 296.738C323.998 301.166 333.82 298.534 338.248 290.864C342.676 283.195 340.045 273.373 332.375 268.945C326.753 265.699 324.013 259.083 325.693 252.813C327.373 246.543 333.055 242.183 339.545 242.183C348.402 242.183 355.592 234.993 355.592 226.137C355.592 217.281 348.402 210.091 339.545 210.091C333.055 210.091 327.373 205.731 325.693 199.461C324.013 193.191 326.753 186.575 332.375 183.329C340.045 178.901 342.676 169.079 338.248 161.41C333.82 153.74 323.998 151.108 316.328 155.536C310.707 158.782 303.607 157.847 299.017 153.257C294.427 148.667 293.492 141.567 296.738 135.946C301.166 128.276 298.534 118.454 290.864 114.026C283.195 109.598 273.373 112.229 268.945 119.899C265.699 125.521 259.083 128.261 252.813 126.581C246.543 124.901 242.183 119.219 242.183 112.729C242.183 103.872 234.993 96.6823 226.137 96.6823C217.281 96.6823 210.091 103.872 210.091 112.729C210.091 119.219 205.731 124.901 199.461 126.581C193.191 128.261 186.575 125.521 183.329 119.899Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M199.619 162.117C201.863 150.458 212.979 141.269 226.137 141.269C239.296 141.269 250.412 150.458 252.655 162.117C262.486 155.46 276.844 156.822 286.149 166.126C295.453 175.431 296.815 189.789 290.157 199.619C301.816 201.863 311.006 212.979 311.006 226.137C311.006 239.296 301.816 250.412 290.157 252.655C296.815 262.486 295.453 276.844 286.149 286.148C276.844 295.453 262.486 296.815 252.655 290.157C250.412 301.816 239.296 311.006 226.137 311.006C212.979 311.006 201.863 301.816 199.619 290.157C189.789 296.815 175.431 295.453 166.126 286.148C156.822 276.844 155.46 262.486 162.117 252.655C150.458 250.412 141.269 239.296 141.269 226.137C141.269 212.979 150.458 201.863 162.117 199.619C155.46 189.789 156.822 175.431 166.126 166.126C175.431 156.822 189.789 155.46 199.619 162.117Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_89_8" x1="226" y1="6.73532e-06" x2="226" y2="452" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0050FF"/>
+<stop offset="1" stop-color="#5483E9"/>
+</linearGradient>
+<clipPath id="clip0_89_8">
+<rect width="316.4" height="316.4" fill="white" transform="translate(68 68)"/>
+</clipPath>
+</defs>
+</svg>

electron/main.ts

@@ -197,9 +197,14 @@ function getExistingEditorWindow(): BrowserWindow | null {
 let defaultTrayIcon: ReturnType<typeof getTrayIcon> | null = null;
 let recordingTrayIcon: ReturnType<typeof getTrayIcon> | null = null;
 
+function getPlatformAppIconFilename(size: 32 | 128 | 512) {
+	const baseName = process.platform === "darwin" ? "recordlymac" : "recordly";
+	return `app-icons/${baseName}-${size}.png`;
+}
+
 function getDefaultTrayIcon() {
 	if (!defaultTrayIcon) {
-		defaultTrayIcon = getTrayIcon("app-icons/recordly-32.png");
+		defaultTrayIcon = getTrayIcon(getPlatformAppIconFilename(32));
 	}
 	return defaultTrayIcon;
 }
@@ -529,7 +534,7 @@ function syncDockIcon() {
 		return;
 	}
 
-	const dockIcon = getAppImage("app-icons/recordly-512.png");
+	const dockIcon = getAppImage(getPlatformAppIconFilename(512));
 	if (!dockIcon.isEmpty()) {
 		app.dock.setIcon(dockIcon);
 	}
@@ -600,7 +605,7 @@ function sendUpdateToastToWindows(channel: "update-toast-state", payload: unknow
 		const notification = new Notification({
 			title: getUpdateNotificationTitle(updatePayload),
 			body: getUpdateNotificationBody(updatePayload),
-			icon: getAppImage("app-icons/recordly-128.png"),
+			icon: getAppImage(getPlatformAppIconFilename(128)),
 			silent: false,
 		});
 

electron/windows.ts

@@ -13,10 +13,11 @@ const nodeRequire = createRequire(import.meta.url);
 const APP_ROOT = path.join(electronWindowsDir, "..");
 const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
 const RENDERER_DIST = path.join(APP_ROOT, "dist");
+const WINDOW_ICON_FILENAME = process.platform === "darwin" ? "recordlymac-512.png" : "recordly-512.png";
 const WINDOW_ICON_PATH = path.join(
 	process.env.VITE_PUBLIC || RENDERER_DIST,
 	"app-icons",
-	"recordly-512.png",
+	WINDOW_ICON_FILENAME,
 );
 
 let hudOverlayWindow: BrowserWindow | null = null;

src/App.tsx

@@ -13,11 +13,12 @@ import { loadAllCustomFonts } from "./lib/customFonts";
 export default function App() {
 	const [windowType, setWindowType] = useState("");
 	const { t } = useI18n();
+	const isMacOS = /mac/i.test(navigator.platform);
+	const appIconSrc = isMacOS ? "/app-icons/recordlymac-128.png" : "/app-icons/recordly-128.png";
 
 	useEffect(() => {
 		const params = new URLSearchParams(window.location.search);
 		const type = params.get("windowType") || "";
-		const isMacOS = /mac/i.test(navigator.platform);
 		setWindowType(type);
 		document.documentElement.dataset.windowType = type;
 
@@ -81,7 +82,7 @@ export default function App() {
 				<div className="flex h-full w-full items-center justify-center bg-editor-bg text-foreground">
 					<div className="flex items-center gap-4 rounded-2xl border border-foreground/10 bg-foreground/5 px-6 py-5 shadow-2xl shadow-black/30 backdrop-blur-xl">
 						<img
-							src="/app-icons/recordly-128.png"
+							src={appIconSrc}
 							alt={t("app.name", "Recordly")}
 							className="h-12 w-12 rounded-xl"
 						/>