Skip to content

fix settings/integrations responsiveness #1003

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

Open
ishaanxgupta wants to merge 1 commit into
base: main
Choose a base branch
from
+30 −15
Open

fix settings/integrations responsiveness #1003

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
45 changes: 30 additions & 15 deletions apps/web/components/settings/integrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function PillButton({
className={cn(
"relative flex items-center justify-center gap-2",
"bg-[#0D121A]",
"rounded-full h-11 px-4 flex-1",
"rounded-full h-11 min-w-0 px-3 flex-1 sm:px-4",
"cursor-pointer transition-opacity hover:opacity-80",
"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
"disabled:opacity-50 disabled:cursor-not-allowed",
Expand Down Expand Up @@ -244,6 +244,15 @@ export default function Integrations() {
analytics.extensionInstallClicked()
}

const addShortcutLabel =
createApiKeyMutation.isPending && selectedShortcutType === "add"
? "Creating..."
: "Add shortcut"
const searchShortcutLabel =
createApiKeyMutation.isPending && selectedShortcutType === "search"
? "Creating..."
: "Search shortcut"

const handleDialogClose = (open: boolean) => {
setShowApiKeyModal(open)
if (!open) {
Expand Down Expand Up @@ -331,7 +340,7 @@ export default function Integrations() {
</div>
</div>

<div id="apple-shortcuts-cta" className="flex gap-4">
<div id="apple-shortcuts-cta" className="flex gap-2 sm:gap-4">
<PillButton
onClick={() => handleShortcutClick("add")}
disabled={createApiKeyMutation.isPending}
Expand All @@ -342,11 +351,14 @@ export default function Integrations() {
) : (
<Plus className="size-4 text-[#FAFAFA]" />
)}
<span className="text-[14px] tracking-[-0.14px] text-[#FAFAFA] font-medium">
{createApiKeyMutation.isPending &&
selectedShortcutType === "add"
? "Creating..."
: "Add memory shortcut"}
<span className="whitespace-nowrap text-[12px] font-medium tracking-[-0.12px] text-[#FAFAFA] sm:text-[14px] sm:tracking-[-0.14px]">
<span className="sm:hidden">{addShortcutLabel}</span>
<span className="hidden sm:inline">
{createApiKeyMutation.isPending &&
selectedShortcutType === "add"
? "Creating..."
: "Add memory shortcut"}
</span>
</span>
</PillButton>
<PillButton
Expand All @@ -359,11 +371,14 @@ export default function Integrations() {
) : (
<Search className="size-4 text-[#FAFAFA]" />
)}
<span className="text-[14px] tracking-[-0.14px] text-[#FAFAFA] font-medium">
{createApiKeyMutation.isPending &&
selectedShortcutType === "search"
? "Creating..."
: "Search memory shortcut"}
<span className="whitespace-nowrap text-[12px] font-medium tracking-[-0.12px] text-[#FAFAFA] sm:text-[14px] sm:tracking-[-0.14px]">
<span className="sm:hidden">{searchShortcutLabel}</span>
<span className="hidden sm:inline">
{createApiKeyMutation.isPending &&
selectedShortcutType === "search"
? "Creating..."
: "Search memory shortcut"}
</span>
</span>
</PillButton>
</div>
Expand Down Expand Up @@ -397,7 +412,7 @@ export default function Integrations() {
</div>
</div>

<div id="raycast-extension-cta" className="flex gap-4">
<div id="raycast-extension-cta" className="flex gap-2 sm:gap-4">
<PillButton
onClick={handleRaycastClick}
disabled={createRaycastApiKeyMutation.isPending}
Expand All @@ -407,15 +422,15 @@ export default function Integrations() {
) : (
<Key className="size-4 text-[#FAFAFA]" />
)}
<span className="text-[14px] tracking-[-0.14px] text-[#FAFAFA] font-medium">
<span className="whitespace-nowrap text-[12px] font-medium tracking-[-0.12px] text-[#FAFAFA] sm:text-[14px] sm:tracking-[-0.14px]">
{createRaycastApiKeyMutation.isPending
? "Generating..."
: "Get API key"}
</span>
</PillButton>
<PillButton onClick={handleRaycastInstall}>
<Download className="size-4 text-[#FAFAFA]" />
<span className="text-[14px] tracking-[-0.14px] text-[#FAFAFA] font-medium">
<span className="whitespace-nowrap text-[12px] font-medium tracking-[-0.12px] text-[#FAFAFA] sm:text-[14px] sm:tracking-[-0.14px]">
Install extension
</span>
</PillButton>
Expand Down
Loading