diff --git a/src/assets/icons/iconist/README.md b/src/assets/icons/iconist/README.md deleted file mode 100644 index de4e3e4..0000000 --- a/src/assets/icons/iconist/README.md +++ /dev/null @@ -1 +0,0 @@ -... License Stuff here ... \ No newline at end of file diff --git a/src/assets/icons/iconist/search_iconist.svg b/src/assets/icons/iconist/search_iconist.svg deleted file mode 100644 index 2d9a4e3..0000000 --- a/src/assets/icons/iconist/search_iconist.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/macStyle.png b/src/assets/icons/macStyle.png new file mode 100644 index 0000000..fc9e235 Binary files /dev/null and b/src/assets/icons/macStyle.png differ diff --git a/src/assets/icons/winStyle.png b/src/assets/icons/winStyle.png new file mode 100644 index 0000000..5aff486 Binary files /dev/null and b/src/assets/icons/winStyle.png differ diff --git a/src/main.tsx b/src/main.tsx index 75a094e..81ce506 100644 --- a/src/main.tsx +++ b/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() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/screens/Onboarding/OnboardingStep1.tsx b/src/screens/Onboarding/OnboardingStep1.tsx index 33a9dda..d848198 100644 --- a/src/screens/Onboarding/OnboardingStep1.tsx +++ b/src/screens/Onboarding/OnboardingStep1.tsx @@ -48,7 +48,7 @@ const OnboardingStep1: React.FC = () => { }); return; } - + if (username === "") { notification.showNotification("Invalid Username", "Please check again.", "error", { soundOn: true, @@ -56,7 +56,7 @@ const OnboardingStep1: React.FC = () => { }); return; } - + if (apiToken === "") { notification.showNotification("Invalid API Token", "Please check again.", "error", { soundOn: true, @@ -64,9 +64,9 @@ const OnboardingStep1: React.FC = () => { }); 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 }} > { >
{ transition={{ duration: 0.5, delay: 1.5 }} > { } }} > - Continue + Continue {/* Help Modal */} @@ -180,7 +180,7 @@ const OnboardingStep1: React.FC = () => { 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?

{showHelpModal && ( @@ -221,16 +221,16 @@ const OnboardingStep1: React.FC = () => {

You can create an API Token by goint to

- Profile + Profile {">"} {" "} - Configure + Configure {">"} {" "} - API Token + API Token {">"} {" "} - Add new Token + Add new Token

diff --git a/src/screens/Onboarding/OnboardingStep3.tsx b/src/screens/Onboarding/OnboardingStep3.tsx index 19450b9..8868d43 100644 --- a/src/screens/Onboarding/OnboardingStep3.tsx +++ b/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 (
Welcome icon +

Selected Titlebar Style

+
+
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", + }}> +
+
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", + }}> +
+
- { } }} > - Continue + Continue
); diff --git a/src/screens/Onboarding/OnboardingStep4.tsx b/src/screens/Onboarding/OnboardingStep4.tsx new file mode 100644 index 0000000..276d138 --- /dev/null +++ b/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 ( +
+ Welcome icon + + + + continueOnboarding()} + onKeyPress={(e) => { + if (e.key === "Enter") { + continueOnboarding(); + } + }} + > + Continue + +
+ ); +}; + +export default OnboardingStep4; diff --git a/tailwind.config.js b/tailwind.config.js index 365636b..3963ff6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -37,6 +37,9 @@ export default { class: { "big-sidebar": "bg-red-200", }, + backgroundImage: { + "windowStyleIcons": "url('/assets/images/windowStyleIcons.png')", + } }, }, plugins: [],