Added Titlebar Style Selector in Onboarding

src/main.tsx

@@ -20,6 +20,7 @@ import CauseError from "./screens/ErrorBoundary/CauseError";
 import UpdateAvailable from "./screens/App/updateChecker/UpdateAvailable";
 import JenkinsConnectionFailedView from "./screens/App/JenkinsConnectionChecker/JenkinsConnectionFailedView";
 import FullConsoleLog from "./screens/Jarvis/Views/ConsoleView/FullConsoleLogView";
+import OnboardingStep4 from "./screens/Onboarding/OnboardingStep4";
 
 function AppContainer() {
 	return (
@@ -33,6 +34,7 @@ function AppContainer() {
 						<Route path="/onboarding/step_1" element={<OnboardingStep1 />} />
 						<Route path="/onboarding/step_2" element={<OnboardingStep2 />} />
 						<Route path="/onboarding/step_3" element={<OnboardingStep3 />} />
+						<Route path="/onboarding/step_4" element={<OnboardingStep4 />} />
 						<Route path="/onboarding/complete" element={<OnboardingComplete />} />
 						<Route path="/updateAvailable" element={<UpdateAvailable />} />
 						<Route path="/jenkinsUnavailable" element={<JenkinsConnectionFailedView />} />

src/screens/Onboarding/OnboardingStep1.tsx

@@ -48,25 +48,25 @@ const OnboardingStep1: React.FC = () => {
 				});
 				return;
 			}
-	
+
 			if (username === "") {
 				notification.showNotification("Invalid Username", "Please check again.", "error", {
 					soundOn: true,
 					soundType: "error",
 				});
 				return;
 			}
-	
+
 			if (apiToken === "") {
 				notification.showNotification("Invalid API Token", "Please check again.", "error", {
 					soundOn: true,
 					soundType: "error",
 				});
 				return;
 			}
-	
+
 			const response = await checkAuthentication(baseUrl, username, apiToken);
-	
+
 			if (response === false) {
 				notification.showNotification("Authentication failed", "Please check your Credentials.", "error", {
 					soundOn: true,
@@ -106,7 +106,7 @@ const OnboardingStep1: React.FC = () => {
 					transition={{ duration: 0.5, delay: 0.5 }}
 				>
 					<label htmlFor="baseUrl" className="block text-sm font-medium text-comment-color">
-    Base URL
+						Base URL
 					</label>
 					<input
 						type="url"
@@ -126,7 +126,7 @@ const OnboardingStep1: React.FC = () => {
 				>
 					<div className="flex flex-row">
 						<label htmlFor="userName" className="block text-sm font-medium text-comment-color">
-    User Name
+							User Name
 						</label>
 					</div>
 					<input
@@ -146,7 +146,7 @@ const OnboardingStep1: React.FC = () => {
 					transition={{ duration: 0.5, delay: 1.5 }}
 				>
 					<label htmlFor="apitoken" className="block text-sm font-medium text-comment-color">
-    API Token
+						API Token
 					</label>
 					<input
 						type="password"
@@ -172,15 +172,15 @@ const OnboardingStep1: React.FC = () => {
 					}
 				}}
 			>
-    Continue
+				Continue
 			</motion.button>
 
 			{/* Help Modal */}
 			<p
 				onClick={() => setShowHelpModal(true)}
 				className="absolute bottom-4 right-8 text-sm text-comment-color transition hover:brightness-75 active:brightness-90"
 			>
-    Need help?
+				Need help?
 			</p>
 
 			{showHelpModal && (
@@ -221,16 +221,16 @@ const OnboardingStep1: React.FC = () => {
 							<div className="ml-4 text-comment-color">
 								<p>You can create an API Token by goint to</p>
 								<p>
-    Profile
+									Profile
 									{">"}
 									{" "}
-    Configure
+									Configure
 									{">"}
 									{" "}
-    API Token
+									API Token
 									{">"}
 									{" "}
-    Add new Token
+									Add new Token
 								</p>
 							</div>
 						</details>

src/screens/Onboarding/OnboardingStep3.tsx

@@ -6,33 +6,59 @@ import "./Onboarding.css";
 import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 
+import macStyle from "@assets/icons/macStyle.png"
+import windowsStyle from "@assets/icons/winStyle.png"
+import StorageManager from "@/helpers/StorageManager";
+
 const OnboardingStep3: React.FC = () => {
 	const navigate = useNavigate();
+	const [titlebarStyle, setTitlebarStyle] = React.useState("");
 
 	useEffect(() => {
-		// Set screen size to 300px width and 400px height
-		const size = new LogicalSize(700, 550);
-		appWindow.setSize(size).then(() => appWindow.center());
+		const init = async () => {
+			// Set screen size to 300px width and 400px height
+			const size = new LogicalSize(700, 550);
+			appWindow.setSize(size).then(() => appWindow.center());
+
+			const titlebarStyle = await StorageManager.get("titlebarStyle")
+			setTitlebarStyle(titlebarStyle || "macStyle")
+		}
+
+		init()
 	}, []);
 
+	const setTitlebarStyleAndSave = async (style: string) => {
+		await StorageManager.save("titlebarStyle", style)
+		setTitlebarStyle(style)
+	}
+
 	const continueOnboarding = async () => {
-		navigate("/onboarding/complete");
+		navigate("/onboarding/step_4");
 	};
 
 	return (
 		<div className="flex flex-col bg-background-view items-center justify-center h-screen select-none">
 			<img src={icon} alt="Welcome icon" className="absolute top-8 w-8 h-8" />
+			<p className="absolute top-24 font-medium text-xl">Selected Titlebar Style</p>
+			<div className="flex flex-row w-[85%] space-x-4">
+				<div
+					onClick={() => setTitlebarStyleAndSave("macStyle")}
+					className={`w-2/3 rounded-xl space-y-2 onboarding-custom-scroll border-border border-2 min-h-[200px] transition hover:bg-background-card-selected ${titlebarStyle === "macStyle" ? "bg-background-card-selected" : ""}`}
+					style={{
+						backgroundImage: `url(${macStyle})`,
+						backgroundSize: "cover",
+					}}>
+				</div>
+				<div
+					onClick={() => setTitlebarStyleAndSave("winStyle")}
+					className={`w-2/3 rounded-xl space-y-2 onboarding-custom-scroll border-border border-2 min-h-[200px] transition hover:bg-background-card-selected ${titlebarStyle === "winStyle" ? "bg-background-card-selected" : ""}`}
+					style={{
+						backgroundImage: `url(${windowsStyle})`,
+						backgroundSize: "cover",
+					}}>
+				</div>
+			</div>
 
-			<motion.iframe
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1 }}
-				transition={{ duration: 0.5, delay: 0.5 }}
-				width="560"
-				height="315"
-				src="https://www.youtube.com/embed/mi6j6CIPRcw?si=3VmTzPpG1XajLKPp"
-				title="YouTube video player"
-				allow="autoplay"
-			/>
 
 			<motion.button
 				initial={{ opacity: 0 }}
@@ -46,7 +72,7 @@ const OnboardingStep3: React.FC = () => {
 					}
 				}}
 			>
-    Continue
+				Continue
 			</motion.button>
 		</div>
 	);

src/screens/Onboarding/OnboardingStep4.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import { appWindow, LogicalSize } from "@tauri-apps/api/window";
+import icon from "../../assets/brand/ico_bow.svg";
+
+import "./Onboarding.css";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+
+const OnboardingStep4: React.FC = () => {
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		// Set screen size to 300px width and 400px height
+		const size = new LogicalSize(700, 550);
+		appWindow.setSize(size).then(() => appWindow.center());
+	}, []);
+
+	const continueOnboarding = async () => {
+		navigate("/onboarding/complete");
+	};
+
+	return (
+		<div className="flex flex-col bg-background-view items-center justify-center h-screen select-none">
+			<img src={icon} alt="Welcome icon" className="absolute top-8 w-8 h-8" />
+
+			<motion.iframe
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.5 }}
+				width="560"
+				height="315"
+				src="https://www.youtube.com/embed/mi6j6CIPRcw?si=3VmTzPpG1XajLKPp"
+				title="YouTube video player"
+				allow="autoplay"
+			/>
+
+			<motion.button
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1 }}
+				transition={{ duration: 0.5, delay: 1 }}
+				className="button absolute bottom-[35px]"
+				onClick={() => continueOnboarding()}
+				onKeyPress={(e) => {
+					if (e.key === "Enter") {
+						continueOnboarding();
+					}
+				}}
+			>
+				Continue
+			</motion.button>
+		</div>
+	);
+};
+
+export default OnboardingStep4;

tailwind.config.js

@@ -37,6 +37,9 @@ export default {
 			class: {
 				"big-sidebar": "bg-red-200",
 			},
+			backgroundImage: {
+				"windowStyleIcons": "url('/assets/images/windowStyleIcons.png')",
+			}
 		},
 	},
 	plugins: [],