Skip to content

fix: Mode select during onboarding #1299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 28, 2025
Merged

fix: Mode select during onboarding #1299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79b5e05
Improve mode select UI and update descriptions
richiemcilroy Oct 28, 2025
099935e
format
richiemcilroy Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions apps/desktop/src/components/ModeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,16 @@ interface ModeOptionProps {
const ModeOption = (props: ModeOptionProps) => {
return (
<div
data-tauri-drag-region="none"
onClick={() => props.onSelect(props.mode)}
class={cx(
`p-5 space-y-3 rounded-lg border transition-all duration-200 border-gray-4 dark:border-gray-3 h-fit bg-gray-3 dark:bg-gray-2`,
"p-5 space-y-3 rounded-lg border transition-all duration-200 cursor-pointer h-fit",
props.isSelected
? "border-blue-7 bg-blue-3/60 dark:border-blue-6 dark:bg-blue-4/40"
: "border-gray-4 dark:border-gray-3 dark:bg-gray-2 hover:border-gray-6 dark:hover:border-gray-4 hover:bg-gray-2 dark:hover:bg-gray-3",
)}
role="button"
aria-pressed={props.isSelected}
>
<div class="flex flex-col items-center mb-2 text-center">
{props.icon({
Expand All @@ -28,7 +34,12 @@ const ModeOption = (props: ModeOptionProps) => {
<h3 class="text-lg font-medium text-gray-12">{props.title}</h3>
</div>

<p class={`mx-auto w-full text-sm text-gray-11 max-w-[300px]`}>
<p
class={cx(
"mx-auto w-full text-sm max-w-[300px]",
props.isSelected ? "text-gray-12" : "text-gray-11",
)}
>
{props.description}
</p>
</div>
Expand All @@ -47,20 +58,21 @@ const ModeSelect = (props: { onClose?: () => void; standalone?: boolean }) => {
mode: "instant" as const,
title: "Instant Mode",
description:
"Share your screen instantly with a magic link — no waiting for rendering, just capture and share in seconds.",
"Share your screen instantly with a shareable link. No waiting for rendering, just capture and share. Uploads in the background as you record.",
icon: IconCapInstant,
},
{
mode: "studio" as const,
title: "Studio Mode",
description:
"Records at the highest quality/framerate. Captures both your screen and camera separately for editing later.",
"Records at the highest quality and framerate, completely locally. Captures both your screen and camera separately for editing and exporting later.",
icon: IconCapFilmCut,
},
];

return (
<div
data-tauri-drag-region="none"
class={cx(
"grid grid-cols-2 gap-8 items-center text-center bg-gray-1",
props.standalone
Expand Down
7 changes: 5 additions & 2 deletions apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,12 @@ export default function FeedbackTab() {
</form>

<div class="pt-6 border-t border-gray-2">
<h3 class="text-sm font-medium text-gray-12 mb-2">Debug Information</h3>
<h3 class="text-sm font-medium text-gray-12 mb-2">
Debug Information
</h3>
<p class="text-sm text-gray-10 mb-3">
Upload your logs to help us diagnose issues with Cap. No personal information is included.
Upload your logs to help us diagnose issues with Cap. No personal
information is included.
</p>
<Button
onClick={handleUploadLogs}
Expand Down
4 changes: 3 additions & 1 deletion apps/desktop/src/routes/(window-chrome)/setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,9 @@ export default function () {
<h1 class="text-[1.2rem] font-[700] mb-1 text-[--text-primary]">
Select Recording Mode
</h1>
<p class="text-gray-11">Choose how you want to record with Cap.</p>
<p class="text-gray-11">
Choose how you want to record with Cap. You can change this later.
</p>
</div>

<div class="w-full py-4">
Expand Down
5 changes: 4 additions & 1 deletion apps/desktop/src/routes/mode-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ const ModeSelectWindow = () => {
data-tauri-drag-region
class="flex relative justify-center items-center p-4 min-h-screen bg-gray-1"
>
<div class="relative z-10 space-y-10 w-full max-w-3xl">
<div
data-tauri-drag-region="none"
class="relative z-10 space-y-10 w-full max-w-3xl"
>
<h2 class="text-[24px] font-medium text-center text-gray-12">
Recording Modes
</h2>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-solid/src/auto-imports.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ declare global {
const IconLucideUnplug: typeof import('~icons/lucide/unplug.jsx')['default']
const IconLucideVideo: typeof import('~icons/lucide/video.jsx')['default']
const IconLucideVolume2: typeof import('~icons/lucide/volume2.jsx')['default']
const IconLucideVolumeX: typeof import("~icons/lucide/volume-x.jsx")["default"]
const IconLucideVolumeX: typeof import('~icons/lucide/volume-x.jsx')['default']
const IconMaterialSymbolsScreenshotFrame2Rounded: typeof import('~icons/material-symbols/screenshot-frame2-rounded.jsx')['default']
const IconMdiLoading: typeof import("~icons/mdi/loading.jsx")["default"]
const IconMdiMonitor: typeof import('~icons/mdi/monitor.jsx')['default']
Expand Down