diff --git a/app/javascript/pages/WakatimeSetup/Index.svelte b/app/javascript/pages/WakatimeSetup/Index.svelte index 7a19c681..130b05d4 100644 --- a/app/javascript/pages/WakatimeSetup/Index.svelte +++ b/app/javascript/pages/WakatimeSetup/Index.svelte @@ -16,6 +16,15 @@ let activeSection = $state(setup_os === "windows" ? "windows" : "mac-linux"); let isWindows = setup_os === "windows"; + + const tabBase = + "flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]"; + const tabActive = "bg-darkless text-surface-content shadow-sm"; + const tabInactive = "text-secondary hover:text-surface-content"; + function tabClass(section: string) { + return `${tabBase} ${activeSection === section ? tabActive : tabInactive}`; + } + let hasHeartbeat = $state(false); let heartbeatTimeAgo = $state(""); let checkCount = $state(0); @@ -33,8 +42,11 @@ ]; const sharedTitle = "Configure Hackatime"; - const sharedSubtitle = + const macLinuxSubtitle = "This creates your config file and validates your API key. And if you're using VS Code, a JetBrains IDE, Zed, or Xcode, we'll even set up the plugins for you!"; + const windowsSubtitle = + "This creates your config file and validates your API key. And if you're using VS Code, a JetBrains IDE, or Zed, we'll even set up the plugins for you!"; + const advancedSubtitle = macLinuxSubtitle; function showSuccess(timeAgo: string) { hasHeartbeat = true; @@ -123,28 +135,19 @@