Skip to content

improvement: make mode selection simpler, cleaner, and update button styles of desktop #965

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
ameer2468 merged 5 commits into from
Aug 28, 2025
Merged

improvement: make mode selection simpler, cleaner, and update button styles of desktop #965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b98bf58
make mode selection simpler, cleaner, and update button styles of des…
ameer2468 Aug 28, 2025
2d9d3bc
formatting
ameer2468 Aug 28, 2025
298353d
correct some variants
ameer2468 Aug 28, 2025
9b06605
Update Button.stories.tsx
ameer2468 Aug 28, 2025
a5595a5
tsc
ameer2468 Aug 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
2 changes: 1 addition & 1 deletion apps/desktop/src/components/CapErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function CapErrorBoundary(props: ParentProps) {
onClick={() => {
location.reload();
}}
variant="secondary"
variant="gray"
>
Reload
</Button>
Expand Down
6 changes: 3 additions & 3 deletions apps/desktop/src/components/Mode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Mode = () => {
}}
class={`flex justify-center items-center transition-all duration-200 rounded-full size-7 hover:cursor-pointer ${
rawOptions.mode === "instant"
? "ring-2 ring-offset-1 ring-offset-gray-1 bg-gray-7 hover:bg-gray-7 ring-blue-10"
? "ring-2 ring-offset-1 ring-offset-gray-1 bg-gray-7 hover:bg-gray-7 ring-blue-500"
: "bg-gray-3 hover:bg-gray-7"
}`}
>
Expand All @@ -54,7 +54,7 @@ const Mode = () => {
}}
class={`flex justify-center items-center transition-all duration-200 rounded-full size-7 hover:cursor-pointer ${
rawOptions.mode === "studio"
? "ring-2 ring-offset-1 ring-offset-gray-1 bg-gray-7 hover:bg-gray-7 ring-blue-10"
? "ring-2 ring-offset-1 ring-offset-gray-1 bg-gray-7 hover:bg-gray-7 ring-blue-500"
: "bg-gray-3 hover:bg-gray-7"
}`}
>
Expand All @@ -71,7 +71,7 @@ const Mode = () => {
}}
class={`flex justify-center items-center transition-all duration-200 rounded-full size-7 hover:cursor-pointer ${
rawOptions.mode === "instant"
? "ring-2 ring-offset-1 ring-offset-gray-1 bg-gray-5 hover:bg-gray-7 ring-blue-10"
? "ring-2 ring-offset-1 ring-offset-gray-1 bg-gray-5 hover:bg-gray-7 ring-blue-500"
: "bg-gray-3 hover:bg-gray-7"
}`}
>
Expand Down
44 changes: 21 additions & 23 deletions apps/desktop/src/components/ModeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,42 @@ import { cx } from "cva";
import type { JSX } from "solid-js";
import { createOptionsQuery } from "~/utils/queries";
import type { RecordingMode } from "~/utils/tauri";
import InstantModeDark from "../assets/illustrations/instant-mode-dark.png";
import InstantModeLight from "../assets/illustrations/instant-mode-light.png";
import StudioModeDark from "../assets/illustrations/studio-mode-dark.png";
import StudioModeLight from "../assets/illustrations/studio-mode-light.png";

interface ModeOptionProps {
mode: RecordingMode;
title: string;
description: string;
icon: (props: { class: string }) => JSX.Element;
icon: (props: { class: string; style: JSX.CSSProperties }) => JSX.Element;
isSelected: boolean;
onSelect: (mode: RecordingMode) => void;
darkimg: string;
lightimg: string;
}

const ModeOption = (props: ModeOptionProps) => {
return (
<div
onClick={() => props.onSelect(props.mode)}
class={cx(`p-4 rounded-lg bg-gray-2 transition-all duration-200`, {
"ring-2 ring-offset-2 hover:bg-gray-2 cursor-default ring-blue-9 ring-offset-gray-100":
props.isSelected,
"ring-2 ring-transparent ring-offset-transparent hover:bg-gray-3 cursor-pointer":
!props.isSelected,
})}
class={cx(
`p-4 space-y-3 rounded-lg bg-gray-2 transition-all duration-200`,
{
"ring-2 ring-offset-2 hover:bg-gray-2 cursor-default ring-blue-9 ring-offset-gray-100":
props.isSelected,
"ring-2 ring-transparent ring-offset-transparent hover:bg-gray-3 cursor-pointer":
!props.isSelected,
},
)}
Comment on lines +20 to +27
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Make the option a real button and fix ring offset token.

Improves accessibility (keyboard/focus semantics) and uses an existing gray token (1–12 scale) instead of likely-nonexistent gray-100.

Apply this diff:

-       <div
-           onClick={() => props.onSelect(props.mode)}
-           class={cx(
-               `p-4 space-y-3 rounded-lg bg-gray-2 transition-all duration-200`,
-               {
-                   "ring-2 ring-offset-2 hover:bg-gray-2 cursor-default ring-blue-9 ring-offset-gray-100":
-                       props.isSelected,
-                   "ring-2 ring-transparent ring-offset-transparent hover:bg-gray-3 cursor-pointer":
-                       !props.isSelected,
-               },
-           )}
-       >
+       <button
+           type="button"
+           onClick={() => props.onSelect(props.mode)}
+           aria-pressed={props.isSelected}
+           class={cx(
+               `p-4 space-y-3 rounded-lg bg-gray-2 transition-all duration-200`,
+               {
+                   "ring-2 ring-offset-2 ring-blue-9 ring-offset-gray-2 hover:bg-gray-2 cursor-default":
+                       props.isSelected,
+                   "ring-2 ring-transparent ring-offset-transparent hover:bg-gray-3 cursor-pointer":
+                       !props.isSelected,
+               },
+           )}
+       >

And close with:

-       </div>
+       </button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
`p-4 space-y-3 rounded-lg bg-gray-2 transition-all duration-200`,
{
"ring-2 ring-offset-2 hover:bg-gray-2 cursor-default ring-blue-9 ring-offset-gray-100":
props.isSelected,
"ring-2 ring-transparent ring-offset-transparent hover:bg-gray-3 cursor-pointer":
!props.isSelected,
},
)}
<button
type="button"
onClick={() => props.onSelect(props.mode)}
aria-pressed={props.isSelected}
class={cx(
`p-4 space-y-3 rounded-lg bg-gray-2 transition-all duration-200`,
{
"ring-2 ring-offset-2 ring-blue-9 ring-offset-gray-2 hover:bg-gray-2 cursor-default":
props.isSelected,
"ring-2 ring-transparent ring-offset-transparent hover:bg-gray-3 cursor-pointer":
!props.isSelected,
},
)}
>
{ /* ...option content here... */ }
</button>
🤖 Prompt for AI Agents 
In apps/desktop/src/components/ModeSelect.tsx around lines 20 to 27, change the
option container to be a real <button> element (use type="button", forward
onClick, onKeyDown if present, and set accessible state like
aria-pressed={props.isSelected}) so keyboard/focus semantics are correct, and
adjust classNames: replace the non-existent ring-offset-gray-100 token with the
existing token (e.g., ring-offset-gray-2) and keep the conditional cursor
classes (cursor-default when selected, cursor-pointer when not) while preserving
the ring/ring-offset/ring-blue-9 logic.

>
<div class="flex flex-col items-center mb-2 text-center">
<img
src={props.isSelected ? props.lightimg : props.darkimg}
class="mb-6 w-full max-w-32"
/>
{props.icon({
class: cx(
"size-12 mb-3",
props.isSelected ? "opacity-100" : "opacity-30",
),
style: {
filter: props.isSelected
? "drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.5))"
: "none",
},
})}
<h3 class="text-lg font-medium text-gray-12">{props.title}</h3>
</div>

Expand All @@ -58,17 +62,13 @@ const ModeSelect = () => {
description:
"Share your screen instantly with a magic link — no waiting for rendering, just capture and share in seconds.",
icon: IconCapInstant,
darkimg: InstantModeDark,
lightimg: InstantModeLight,
},
{
mode: "studio" as const,
title: "Studio Mode",
description:
"Records at the highest quality/framerate. Captures both your screen and camera separately for editing later.",
icon: IconCapFilmCut,
darkimg: StudioModeDark,
lightimg: StudioModeLight,
},
];

Expand All @@ -79,8 +79,6 @@ const ModeSelect = () => {
mode={option.mode}
title={option.title}
description={option.description}
darkimg={option.darkimg}
lightimg={option.lightimg}
icon={option.icon}
isSelected={rawOptions.mode === option.mode}
onSelect={handleModeChange}
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/components/SignInButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function SignInButton(
size="md"
class="flex flex-grow justify-center items-center"
{...props}
variant={signIn.isPending ? "secondary" : "primary"}
variant={signIn.isPending ? "gray" : "primary"}
onClick={() => {
if (signIn.isPending) {
signIn.variables.abort();
Expand Down
3 changes: 1 addition & 2 deletions apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
Suspense,
} from "solid-js";
import { reconcile } from "solid-js/store";
import { addEventListener } from "solid-js/web";
import Tooltip from "~/components/Tooltip";
import { generalSettingsStore } from "~/store";
import { createSignInMutation } from "~/utils/auth";
Expand Down Expand Up @@ -378,7 +377,7 @@ function Page() {
signIn.variables?.abort();
signIn.reset();
}}
variant="secondary"
variant="gray"
class="w-full"
>
Cancel Sign In
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/routes/(window-chrome)/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default function Settings(props: RouteSectionProps) {
{(v) => <p class="mb-2 text-xs text-gray-11">v{v()}</p>}
</Show>
{auth.data ? (
<Button onClick={handleAuth} variant="secondary" class="w-full">
<Button onClick={handleAuth} variant="dark" class="w-full">
Sign Out
</Button>
) : (
Expand Down
5 changes: 3 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 @@ -65,8 +65,9 @@ export default function FeedbackTab() {
<Button
type="submit"
size="md"
disabled={!feedback().trim() || feedback().trim().length < 0}
class="mt-2 bg-primary text-primary"
variant="dark"
disabled={feedback().trim().length < 4}
class="mt-2"
>
{submission.pending ? "Submitting..." : "Submit Feedback"}
</Button>
Expand Down
1 change: 1 addition & 0 deletions apps/desktop/src/routes/(window-chrome)/settings/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,6 +535,7 @@ function ServerURLSetting(props: {
<Button
size="sm"
class="mt-2"
variant="dark"
disabled={props.value === value()}
onClick={() => props.onChange(value())}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/routes/(window-chrome)/settings/integrations/s3-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ export default function S3ConfigPage() {
{deleteConfig.isPending ? "Removing..." : "Remove Config"}
</Button>
)}
<Button variant="secondary" onClick={() => events.emit("test")}>
<Button variant="gray" onClick={() => events.emit("test")}>
{testConfig.isPending ? "Testing..." : "Test Connection"}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/routes/(window-chrome)/settings/license.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ function CommercialLicensePurchase() {
<Button
onClick={() => openCommercialCheckout.mutate()}
disabled={openCommercialCheckout.isPending}
variant="lightdark"
variant="dark"
class="w-full !rounded-full mt-10 !h-[48px] text-lg font-medium"
size="lg"
>
Expand Down
2 changes: 1 addition & 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 @@ -492,7 +492,7 @@ function Startup(props: { onClose: () => void }) {
<Match when={ostype() !== "windows"}>
<Button
class="px-12 text-lg shadow-[0_0_30px_rgba(0,0,0,0.1)]"
variant="secondary"
variant="gray"
size="lg"
onClick={handleGetStarted}
>
Expand Down
17 changes: 2 additions & 15 deletions apps/desktop/src/routes/(window-chrome)/upgrade.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
import { createRive } from "@aerofoil/rive-solid-canvas";
import { Button } from "@cap/ui-solid";
import { action, useAction } from "@solidjs/router";
import { createMutation, useQueryClient } from "@tanstack/solid-query";
import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import { getCurrentWindow, Window } from "@tauri-apps/api/window";
import { onOpenUrl } from "@tauri-apps/plugin-deep-link";
import * as shell from "@tauri-apps/plugin-shell";
import {
type Accessor,
createSignal,
onCleanup,
onMount,
Show,
} from "solid-js";
import { type Accessor, createSignal, Show } from "solid-js";
import { generalSettingsStore } from "~/store";
import { identifyUser, trackEvent } from "~/utils/analytics";
import { clientEnv } from "~/utils/env";
import { getProPlanId } from "~/utils/plans";
import { createLicenseQuery } from "~/utils/queries";
import { commands } from "~/utils/tauri";
Expand Down Expand Up @@ -437,7 +424,7 @@ export default function Page() {
<Button
onClick={() => openCommercialCheckout.mutate()}
disabled={openCommercialCheckout.isPending}
variant="lightdark"
variant="dark"
class="w-full !rounded-full !h-[48px] text-lg font-medium"
size="lg"
>
Expand Down
3 changes: 1 addition & 2 deletions apps/desktop/src/routes/editor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
createSignal,
Match,
on,
onMount,
Show,
Switch,
} from "solid-js";
Expand Down Expand Up @@ -386,7 +385,7 @@ function Dialogs() {
<div class="flex flex-row items-center space-x-[0.5rem] text-gray-11">
<Tooltip content="Rule of Thirds">
<Button
variant="secondary"
variant="gray"
size="xs"
class={cx(
"flex items-center justify-center text-center rounded-full h-[2rem] w-[2rem] border text-[0.875rem] focus:border-blue-9",
Expand Down
54 changes: 26 additions & 28 deletions apps/desktop/src/routes/editor/ExportDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,27 +384,25 @@ export function ExportDialog() {
<DialogContent
title="Export Cap"
confirm={
<>
{settings.exportTo === "link" && !auth.data ? (
<SignInButton>
{exportButtonIcon[settings.exportTo]}
<span class="ml-1.5">Sign in to share</span>
</SignInButton>
) : (
<Button
class="flex gap-1.5 items-center"
variant="primary"
onClick={() => {
if (settings.exportTo === "file") save.mutate();
else if (settings.exportTo === "link") upload.mutate();
else copy.mutate();
}}
>
Export to
{exportButtonIcon[settings.exportTo]}
</Button>
)}
</>
settings.exportTo === "link" && !auth.data ? (
<SignInButton>
{exportButtonIcon[settings.exportTo]}
<span class="ml-1.5">Sign in to share</span>
</SignInButton>
) : (
<Button
class="flex gap-1.5 items-center"
variant="dark"
onClick={() => {
if (settings.exportTo === "file") save.mutate();
else if (settings.exportTo === "link") upload.mutate();
else copy.mutate();
}}
>
Export to
{exportButtonIcon[settings.exportTo]}
</Button>
)
}
leftFooterContent={
<div>
Expand Down Expand Up @@ -491,7 +489,7 @@ export function ExportDialog() {
onClick={() => setSettings("exportTo", option.value)}
data-selected={settings.exportTo === option.value}
class="flex flex-1 gap-2 items-center text-nowrap"
variant="secondary"
variant="gray"
>
{option.icon}
{option.label}
Expand All @@ -509,7 +507,7 @@ export function ExportDialog() {
<For each={FORMAT_OPTIONS}>
{(option) => (
<Button
variant="secondary"
variant="gray"
onClick={() => {
setSettings(
produce((newSettings) => {
Expand Down Expand Up @@ -631,7 +629,7 @@ export function ExportDialog() {
option.value as ExportCompression,
);
}}
variant="secondary"
variant="gray"
data-selected={settings.compression === option.value}
>
{option.label}
Expand Down Expand Up @@ -663,7 +661,7 @@ export function ExportDialog() {
settings.resolution.value === option.value
}
class="flex-1"
variant="secondary"
variant="gray"
onClick={() => setSettings("resolution", option)}
>
{option.label}
Expand Down Expand Up @@ -897,7 +895,7 @@ export function ExportDialog() {
}, 2000);
navigator.clipboard.writeText(meta().sharing!.link!);
}}
variant="lightdark"
variant="dark"
class="flex gap-2 justify-center items-center"
>
{!copyPressed() ? (
Expand All @@ -918,7 +916,7 @@ export function ExportDialog() {
>
<div class="flex gap-4 w-full">
<Button
variant="secondary"
variant="dark"
class="flex gap-2 items-center"
onClick={() => {
const path = outputPath();
Expand All @@ -931,7 +929,7 @@ export function ExportDialog() {
Open File
</Button>
<Button
variant="secondary"
variant="dark"
class="flex gap-2 items-center"
onClick={async () => {
const path = outputPath();
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/routes/editor/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export function Header() {
<ShareButton />
</Show>
<Button
variant="lightdark"
variant="dark"
class="flex gap-1.5 justify-center h-[40px] w-full max-w-[100px]"
onClick={() => {
trackEvent("export_button_clicked");
Expand Down
4 changes: 2 additions & 2 deletions apps/desktop/src/routes/editor/ShareButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ function ShareButton() {
<Button
disabled={upload.isPending}
onClick={() => upload.mutate()}
variant="primary"
variant="dark"
class="flex justify-center items-center size-[41px] !px-0 !py-0 space-x-1"
>
{upload.isPending ? (
Expand Down Expand Up @@ -311,7 +311,7 @@ function ShareButton() {
</div>

<p class="relative z-10 mt-3 text-xs text-white">
{uploadState.type == "idle" || uploadState.type === "starting"
{uploadState.type === "idle" || uploadState.type === "starting"
? "Preparing to render..."
: uploadState.type === "rendering"
? `Rendering video (${uploadState.renderedFrames}/${uploadState.totalFrames} frames)`
Expand Down
Loading
Loading