last minute change

NangoHQ · Nov 27, 2024 · c318f64 · c318f64
1 parent f9a6d73
commit c318f64
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/webapp/src/components/ui/button/Button.tsx b/packages/webapp/src/components/ui/button/Button.tsx
@@ -23,7 +23,8 @@ export const buttonStyles = cva(
                 hover: 'hover:bg-hover-gray text-white',
                 zinc: 'bg-active-gray hover:bg-neutral-800 text-gray-400 border border-neutral-700',
                 icon: 'bg-transparent text-text-light-gray hover:text-white focus:text-white',
-                emptyFaded: 'border border-text-light-gray text-text-light-gray hover:text-white focus:text-white',
+                emptyFaded:
+                    'border border-grayscale-700 text-grayscale-400 hover:text-white focus:text-white hover:border-grayscale-400 focus:border-grayscale-400',
                 popoverItem: 'w-full rounded hover:bg-black text-gray-400',
 
                 // Design system v2

diff --git a/packages/webapp/src/pages/Connection/Create.tsx b/packages/webapp/src/pages/Connection/Create.tsx
@@ -13,7 +13,7 @@ import Nango from '@nangohq/frontend';
 import { useUnmount, useSearchParam } from 'react-use';
 import { apiConnectSessions } from '../../hooks/useConnect';
 import { Tag } from '../../components/ui/label/Tag';
-import { IconBulb, IconCheck, IconChevronDown, IconChevronRight, IconCode, IconHelpCircle } from '@tabler/icons-react';
+import { IconBook, IconBulb, IconCheck, IconChevronDown, IconChevronRight, IconCode, IconHelpCircle } from '@tabler/icons-react';
 import IntegrationLogo from '../../components/ui/IntegrationLogo';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../components/ui/Collapsible';
 import { Input } from '../../components/ui/input/Input';
@@ -414,7 +414,10 @@ export const ConnectionCreate: React.FC = () => {
                                 <p className="text-sm text-grayscale-400">Authorize your users with a pre-built UI.</p>
                             </main>
                             <footer className="mt-4">
-                                <Button variant={'primary'}>Connect UI</Button>
+                                <Button variant={'emptyFaded'}>
+                                    <IconBook stroke={1} size={18} />
+                                    Connect UI Docs
+                                </Button>
                             </footer>
                         </a>
                         <a
@@ -435,7 +438,9 @@ export const ConnectionCreate: React.FC = () => {
                                 <p className="text-sm text-grayscale-400">Build your own authorize experience</p>
                             </main>
                             <footer className="mt-4">
-                                <Button variant={'primary'}>Connect Custom</Button>
+                                <Button variant={'emptyFaded'}>
+                                    <IconBook stroke={1} size={18} /> Connect UI Docs
+                                </Button>
                             </footer>
                         </a>
                     </div>