Skip to content

[REF-1404] fix: Refactor API Key and Output Modals for improved design consistency #2229

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
lefarcen merged 11 commits into from
Feb 5, 2026
Merged

[REF-1404] fix: Refactor API Key and Output Modals for improved design consistency #2229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
63a94ed
style: Refactor API Key and Output Modals for improved design consist…
Siri-Ray Feb 5, 2026
9fb787a
refactor: Remove unused SVG assets and replace icons in integration d…
Siri-Ray Feb 5, 2026
c4cb0a4
style: Refactor API Docs and Key Modals for improved layout and consi…
Siri-Ray Feb 5, 2026
4013fbe
style: Update Integration Docs and Modals for improved layout and ico…
Siri-Ray Feb 5, 2026
5e112c4
style: Update icon stroke width in IntegrationDocsModal for improved …
Siri-Ray Feb 5, 2026
cf12573
style: Update Integration Docs for improved visual consistency and la…
Siri-Ray Feb 5, 2026
c34dd19
style: Update Integration Docs Button and related styles for consistency
Siri-Ray Feb 5, 2026
cb3c21b
style: Enhance schedule modals and button styles for improved user ex…
Siri-Ray Feb 5, 2026
0f2041f
Merge branch 'main' of https://github.com/refly-ai/refly into fix/api…
Siri-Ray Feb 5, 2026
050da42
style: Update Integration Docs Modal and Webhook Docs Tab for visual …
Siri-Ray Feb 5, 2026
9d0b19d
style: Refactor top-toolbar styles for improved consistency and clarity
Siri-Ray Feb 5, 2026
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
3 changes: 0 additions & 3 deletions packages/ai-workspace-common/src/assets/integration.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/ai-workspace-common/src/assets/key-01.svg
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions packages/ai-workspace-common/src/assets/target-04.svg
View file
Open in desktop

This file was deleted.

77 changes: 37 additions & 40 deletions ...es/ai-workspace-common/src/components/canvas/integration-docs/components/api-docs-tab.tsx
View file
Open in desktop

Large diffs are not rendered by default.

72 changes: 59 additions & 13 deletions .../ai-workspace-common/src/components/canvas/integration-docs/components/api-key-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
// API Key Management Modal - Only keep Ant Design overrides and complex styles
.api-key-management-modal,
.api-key-create-modal,
.api-key-delete-modal,
.api-output-modal {
.api-key-delete-modal {
.ant-modal-content {
border-radius: 20px;
border: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
padding: 0;
}

.ant-modal-header {
height: 34px;
margin: 0;
padding: 18px 24px;
border-bottom: 1px solid var(--refly-line);
margin-bottom: 0;

.ant-modal-title {
margin-bottom: 0;
}
}

.ant-modal-body {
border-top: 1px solid var(--refly-line);
padding: 16px 0px;
padding: 0;
}

// Override primary button styles
Expand Down Expand Up @@ -75,7 +81,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
padding: 8px 16px;
position: relative;

&.has-border::after {
Expand Down Expand Up @@ -145,20 +151,30 @@
.api-key-delete-cancel-btn,
.api-key-delete-confirm-btn {
height: 32px;
border-radius: 8px;
border-radius: 100px;
font-size: 14px;
font-weight: 500;
padding: 0 20px;
}

.api-key-delete-cancel-btn {
background: var(--refly-bg-content-z1);
border: 1px solid var(--refly-line);
color: var(--refly-text-0);


.api-key-delete-confirm-btn {
background: var(--refly-func-danger-default) !important;
border-color: var(--refly-func-danger-default) !important;
color: #fff !important;

&:hover {
background: var(--refly-bg-content-z0);
border-color: var(--refly-text-0);
background: var(--refly-func-danger-hover) !important;
border-color: var(--refly-func-danger-hover) !important;
color: #fff !important;
opacity: 1;
}

&:active {
background: var(--refly-func-danger-active) !important;
border-color: var(--refly-func-danger-active) !important;
color: #fff !important;
}
}

Expand All @@ -171,3 +187,33 @@
border-color: var(--refly-func-error-hover);
}
}

.api-key-create-confirm-btn-black {
background: var(--refly-text-0) !important;
border-color: var(--refly-text-0) !important;
color: var(--refly-bg-content-z2) !important;
height: 32px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;

&:hover {
background: var(--refly-text-1) !important;
border-color: var(--refly-text-1) !important;
color: var(--refly-bg-content-z2) !important;
}

&:active {
background: var(--refly-text-0) !important;
border-color: var(--refly-text-0) !important;
color: var(--refly-bg-content-z2) !important;
}

&:disabled {
background: var(--refly-text-3) !important;
border-color: var(--refly-text-3) !important;
color: var(--refly-bg-content-z2) !important;
opacity: 0.5;
}
}

52 changes: 29 additions & 23 deletions ...s/ai-workspace-common/src/components/canvas/integration-docs/components/api-key-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,10 @@ export const ApiKeyModal = memo(({ open, onClose }: ApiKeyModalProps) => {
title={t('webhook.apiKey.title')}
width={550}
destroyOnClose
centered
className="api-key-management-modal"
>
<div className="px-6 pb-3">
<div className="p-6">
<p className="text-sm text-[var(--refly-text-2)] mb-4 leading-normal">
{t('webhook.apiKey.description')}
</p>
Expand Down Expand Up @@ -161,9 +162,10 @@ export const ApiKeyModal = memo(({ open, onClose }: ApiKeyModalProps) => {
title={createdKey ? t('webhook.apiKey.keyCreated') : t('webhook.apiKey.create')}
width={480}
destroyOnClose
centered
className="api-key-create-modal"
>
<div className="px-6 pb-3">
<div className="p-6">
{createdKey ? (
<>
<div className="text-xs text-[var(--refly-func-error-default,var(--ant-color-error,#ff4d4f))] -mt-2 mb-4 leading-normal">
Expand All @@ -181,7 +183,10 @@ export const ApiKeyModal = memo(({ open, onClose }: ApiKeyModalProps) => {
/>
</div>
<div className="flex items-center justify-end gap-3">
<Button type="primary" onClick={handleCloseCreateModal}>
<Button
className="api-key-create-confirm-btn-black"
onClick={handleCloseCreateModal}
>
{t('common.close')}
</Button>
</div>
Expand All @@ -207,10 +212,10 @@ export const ApiKeyModal = memo(({ open, onClose }: ApiKeyModalProps) => {
<div className="flex items-center justify-end gap-3">
<Button onClick={handleCloseCreateModal}>{t('common.cancel')}</Button>
<Button
type="primary"
onClick={handleCreate}
loading={loading}
disabled={isMutating}
className="api-key-create-confirm-btn-black"
>
{t('common.create')}
</Button>
Expand All @@ -228,28 +233,29 @@ export const ApiKeyModal = memo(({ open, onClose }: ApiKeyModalProps) => {
title={t('webhook.apiKey.deleteTitle')}
width={480}
destroyOnClose
centered
className="api-key-delete-modal"
>
<div className="mb-6">
<p className="text-sm text-[var(--refly-text-2)] leading-relaxed m-0">
{t('webhook.apiKey.deleteDescription')}
</p>
</div>
<div className="p-6">
<div className="mb-6">
<p className="text-sm text-refly-text-0 leading-relaxed m-0">
{t('webhook.apiKey.deleteDescription')}
</p>
</div>

<div className="flex items-center justify-end gap-3">
<Button onClick={handleDeleteCancel} className="api-key-delete-cancel-btn">
{t('common.cancel')}
</Button>
<Button
danger
type="primary"
onClick={handleDeleteConfirm}
loading={loading}
disabled={isMutating}
className="api-key-delete-confirm-btn"
>
{t('common.delete')}
</Button>
<div className="flex items-center justify-end gap-3">
<Button onClick={handleDeleteCancel} className="api-key-delete-cancel-btn">
{t('common.cancel')}
</Button>
<Button
onClick={handleDeleteConfirm}
loading={loading}
disabled={isMutating}
className="api-key-delete-confirm-btn"
>
{t('common.delete')}
</Button>
</div>
</div>
</Modal>
</>
Expand Down
32 changes: 32 additions & 0 deletions ...-workspace-common/src/components/canvas/integration-docs/components/api-output-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,45 @@
// Only keep Ant Design overrides that cannot be done with Tailwind
.api-output-modal {
.ant-modal-content {
border-radius: 20px;
border: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
Comment on lines +3 to +8
Copy link

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Align modal card radius and border with design tokens.

The modal content uses a 20px radius and removes the border; the design system calls for rounded-lg and a subtle border for card separation.

🎨 Suggested adjustment 
-  .ant-modal-content {
-    border-radius: 20px;
-    border: none;
+  .ant-modal-content {
+    border-radius: 12px;
+    border: 1px solid var(--refly-line);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
     overflow: hidden;
   }

As per coding guidelines: "Use consistent border radius (rounded-lg) for all cards" and "Use subtle borders for card separation".

🤖 Prompt for AI Agents 
In
`@packages/ai-workspace-common/src/components/canvas/integration-docs/components/api-output-modal.scss`
around lines 3 - 8, The .ant-modal-content rule uses a hardcoded 20px radius and
removes the border; replace those with the design tokens: use the standardized
rounded-lg token for border-radius (e.g., var(--radius-rounded-lg) or
$rounded-lg) and restore a subtle card border instead of border: none (e.g., 1px
solid var(--border-subtle) or $border-subtle) so the modal card matches the
design system; update the .ant-modal-content selector accordingly and remove the
hardcoded 20px and border: none entries.


.ant-modal-header {
margin: -20px -24px 20px -24px;
padding: 18px 24px;
border-bottom: 1px solid var(--refly-line);

.ant-modal-title {
margin-bottom: 0;
}
}

.ant-modal-body {
padding: 0;
}

.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--refly-text-0);
border-color: var(--refly-text-0);

&::after {
border-color: var(--text-icon-refly-text-flip);
}
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
border-color: var(--refly-text-0);
}

.ant-checkbox-checked:not(.ant-checkbox-disabled):hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner,
label:hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner {
background-color: var(--refly-text-0) !important;
border-color: var(--refly-text-0) !important;
}
}
16 changes: 5 additions & 11 deletions ...i-workspace-common/src/components/canvas/integration-docs/components/api-output-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,25 +120,22 @@ export const ApiOutputModal = memo(({ open, canvasId, onClose }: ApiOutputModalP
onCancel={onClose}
footer={null}
title={t('integration.outputModal.title')}
width={520}
width={550}
destroyOnClose
centered
className="api-output-modal"
>
<div className="px-6 pb-3">
<p className="text-sm text-[var(--refly-text-2)] mb-3 leading-normal">
{t('integration.outputModal.description')}
</p>

<div>
{hasAgents ? (
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 max-h-[376px] overflow-y-auto">
{agentNodes.map((node) => {
const title = node.data?.title || t('common.agent', { defaultValue: 'Agent' });
const checked = selectedNodeIds.includes(node.id);
return (
<label
key={node.id}
htmlFor={node.id}
className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-[var(--refly-line)] bg-[var(--refly-bg-control-z0)] cursor-pointer"
className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-[var(--refly-line)] bg-transparent cursor-pointer"
>
<Checkbox
id={node.id}
Expand All @@ -164,9 +161,6 @@ export const ApiOutputModal = memo(({ open, canvasId, onClose }: ApiOutputModalP
{t('integration.outputModal.empty')}
</div>
)}
<div className="text-xs text-[var(--refly-text-3)] mt-3">
{t('integration.outputModal.hint')}
</div>
</div>
</Modal>
);
Expand Down
22 changes: 9 additions & 13 deletions ...es/ai-workspace-common/src/components/canvas/integration-docs/components/code-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { memo } from 'react';
import { Button, message } from 'antd';
import { useTranslation } from 'react-i18next';
import { Copy } from 'refly-icons';
import { BiCopy } from 'react-icons/bi';

interface CodeExampleProps {
language: string;
Expand All @@ -18,23 +18,19 @@ export const CodeExample = memo(({ language, code, copyText }: CodeExampleProps)
};

return (
<div className="relative my-4 rounded-lg overflow-hidden bg-[var(--integration-docs-code-bg)]">
<div className="flex items-center justify-between px-3 py-2 bg-[var(--integration-docs-code-header-bg)] border-b border-[var(--integration-docs-code-border)]">
<span className="text-xs text-[var(--integration-docs-code-muted)] font-medium">
{language}
</span>
<div className="relative my-4 rounded-lg overflow-hidden bg-refly-fill-label border border-solid border-refly-text-4">
<div className="flex items-center justify-between px-4 pt-4 bg-refly-fill-label border-b border-[var(--integration-docs-code-border)]">
<span className="text-[12px] text-refly-text-2 font-inter">{language}</span>
<Button
type="text"
size="small"
className="!text-[var(--integration-docs-code-action)] hover:!text-[var(--integration-docs-code-text)]"
icon={<Copy size={14} />}
size="middle"
className="!text-refly-text-1 hover:!text-refly-text-0"
icon={<BiCopy size={20} />}
onClick={handleCopy}
/>
Comment on lines 24 to 30
Copy link

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add aria-label for accessibility.

The copy button contains only an icon without accessible text. Screen readers won't be able to identify its purpose. Based on learnings: "Provide alternative text for images and icons."

♿ Proposed fix to add aria-label 
         <Button
           type="text"
           size="middle"
           className="!text-refly-text-1 hover:!text-refly-text-0"
           icon={<BiCopy size={20} />}
           onClick={handleCopy}
+          aria-label={t('common.copy')}
         />
📝 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
<Button
type="text"
size="small"
className="!text-[var(--integration-docs-code-action)] hover:!text-[var(--integration-docs-code-text)]"
icon={<Copy size={14} />}
size="middle"
className="!text-refly-text-1 hover:!text-refly-text-0"
icon={<BiCopy size={20} />}
onClick={handleCopy}
/>
<Button
type="text"
size="middle"
className="!text-refly-text-1 hover:!text-refly-text-0"
icon={<BiCopy size={20} />}
onClick={handleCopy}
aria-label={t('common.copy')}
/>
🤖 Prompt for AI Agents 
In
`@packages/ai-workspace-common/src/components/canvas/integration-docs/components/code-example.tsx`
around lines 24 - 30, The Icon-only copy Button lacks accessible text for screen
readers; update the Button JSX (the Button element that currently has
icon={<BiCopy .../>} and onClick={handleCopy}) to include an appropriate
aria-label (e.g., aria-label="Copy code" or a localized equivalent) so assistive
technologies can announce its purpose, and ensure the label clearly describes
the action (copy) and target (code/example) when adding the aria-label prop.

</div>
<pre className="m-0 p-4 overflow-x-auto text-[13px] leading-relaxed bg-[var(--integration-docs-code-content-bg)]">
<code className="text-[var(--integration-docs-code-text)] font-mono bg-transparent">
{code}
</code>
<pre className="m-0 px-4 pb-4 overflow-x-auto text-[14px] leading-relaxed bg-refly-fill-label">
<code className="text-refly-text-0 font-mono bg-transparent">{code}</code>
</pre>
</div>
);
Expand Down
Loading