From e85605d22da4b9a865fc5b5396d02de56f341647 Mon Sep 17 00:00:00 2001 From: Collins Ikechukwu Date: Fri, 12 Jun 2026 16:51:08 +0100 Subject: [PATCH 1/3] chore(ui): use design tokens for colors and fix social/docs links Replace hardcoded hex values with the corresponding token classes (success-500, neutral-400/700, white/8) across input, textarea, option-card and marketing surfaces, and correct the GitHub org, Discord, Telegram, LinkedIn and docs URLs to the live destinations. Co-Authored-By: Claude Opus 4.8 (1M context) --- public/icons/coin.svg | 28 +++++++++++++++++++ src/components/layout/app-nav.tsx | 2 +- src/components/ui/input.tsx | 10 +++---- src/components/ui/option-card.tsx | 2 +- src/components/ui/textarea.tsx | 2 +- src/config/marketing-nav.ts | 12 ++++---- .../discover/components/discover-header.tsx | 2 +- .../discover/components/opportunity-card.tsx | 4 +-- .../marketing/components/cta-pill.tsx | 2 +- .../onboarding/components/avatar-upload.tsx | 2 +- .../components/crop-photo-modal.tsx | 4 +-- .../onboarding/components/role-gate-modal.tsx | 6 ++-- src/lib/site.ts | 4 +-- 13 files changed, 54 insertions(+), 26 deletions(-) create mode 100644 public/icons/coin.svg diff --git a/public/icons/coin.svg b/public/icons/coin.svg new file mode 100644 index 0000000..70181ae --- /dev/null +++ b/public/icons/coin.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/layout/app-nav.tsx b/src/components/layout/app-nav.tsx index fe212c9..924b40e 100644 --- a/src/components/layout/app-nav.tsx +++ b/src/components/layout/app-nav.tsx @@ -111,7 +111,7 @@ function KbdChip({ children, pill }: { children: string; pill?: boolean }) { return ( diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index c24ebc6..7a5bd4f 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -39,7 +39,7 @@ const inputFrameVariants = cva( ); const STATUS_ICON: Record<'success' | 'error', React.ReactNode> = { - success: , + success: , error: , }; @@ -117,13 +117,13 @@ const Input = React.forwardRef(function Input( className={cn( inputFrameVariants({ inputSize, shape, state: resolvedState }), readOnly && - 'border-[#2c3a37]/50 bg-ink-soft focus-within:border-[#2c3a37]/50 hover:border-[#2c3a37]/50', + 'border-neutral-700/50 bg-ink-soft focus-within:border-neutral-700/50 hover:border-neutral-700/50', disabled && 'cursor-not-allowed opacity-50', className )} > {leftIcon ? ( - + {leftIcon} ) : null} @@ -136,7 +136,7 @@ const Input = React.forwardRef(function Input( disabled={disabled} aria-invalid={resolvedState === 'error' || undefined} className={cn( - 'min-w-0 flex-1 bg-transparent text-sm text-[#f1fff1] caret-primary-500 outline-none placeholder:text-[#7a8f8b]/70 read-only:cursor-default disabled:cursor-not-allowed', + 'min-w-0 flex-1 bg-transparent text-sm text-[#f1fff1] caret-primary-500 outline-none placeholder:text-neutral-400/70 read-only:cursor-default disabled:cursor-not-allowed', inputClassName )} {...props} @@ -149,7 +149,7 @@ const Input = React.forwardRef(function Input( {trailing ? ( ( data-slot='textarea' aria-describedby={describedBy || undefined} className={cn( - 'min-h-[120px] w-full resize-none rounded-md border border-neutral-600 bg-transparent px-3 py-2 text-sm text-[#f1fff1] caret-primary-500 shadow-[0_0_0_0_transparent] transition-[color,background-color,border-color,box-shadow] duration-200 ease-out outline-none placeholder:text-[#7a8f8b]/70 hover:border-neutral-500 focus:border-primary-500 focus:bg-ink-soft focus:shadow-[0_0_0_4px_rgba(46,237,170,0.12)] disabled:cursor-not-allowed disabled:opacity-50', + 'min-h-[120px] w-full resize-none rounded-md border border-neutral-600 bg-transparent px-3 py-2 text-sm text-[#f1fff1] caret-primary-500 shadow-[0_0_0_0_transparent] transition-[color,background-color,border-color,box-shadow] duration-200 ease-out outline-none placeholder:text-neutral-400/70 hover:border-neutral-500 focus:border-primary-500 focus:bg-ink-soft focus:shadow-[0_0_0_4px_rgba(46,237,170,0.12)] disabled:cursor-not-allowed disabled:opacity-50', className )} {...props} diff --git a/src/config/marketing-nav.ts b/src/config/marketing-nav.ts index 41d8f3a..bbf24e4 100644 --- a/src/config/marketing-nav.ts +++ b/src/config/marketing-nav.ts @@ -118,7 +118,7 @@ export const headerMenus: NavGroup[] = [ }, { label: 'GitHub', - href: 'https://github.com/boundless-fi', + href: 'https://github.com/boundlessfi', description: 'Explore our open source', icon: Terminal, }, @@ -149,11 +149,11 @@ export const footerColumns: NavGroup[] = [ { label: 'Resources', items: [ - { label: 'Documentation', href: '/docs' }, + { label: 'Documentation', href: 'https://docs.boundlessfi.xyz' }, { label: 'API Reference', href: '/docs/api' }, { label: 'FAQs', href: '/faq' }, { label: 'Whitepaper', href: '/whitepaper' }, - { label: 'GitHub', href: 'https://github.com/boundless-fi' }, + { label: 'GitHub', href: 'https://github.com/boundlessfi' }, ], }, { @@ -175,13 +175,13 @@ export interface SocialLink { } export const socialLinks: SocialLink[] = [ - { key: 'discord', label: 'Discord', href: 'https://discord.gg/boundless' }, + { key: 'discord', label: 'Discord', href: 'https://discord.gg/7zJKnpCTKE' }, { key: 'linkedin', label: 'LinkedIn', - href: 'https://www.linkedin.com/company/boundless', + href: 'https://www.linkedin.com/company/boundlesshq', }, - { key: 'telegram', label: 'Telegram', href: 'https://t.me/boundless' }, + { key: 'telegram', label: 'Telegram', href: 'https://t.me/boundlessfi' }, { key: 'x', label: '(formerly twitter)', href: 'https://x.com/boundless_fi' }, { key: 'support', label: 'Support', href: '/support' }, ]; diff --git a/src/features/discover/components/discover-header.tsx b/src/features/discover/components/discover-header.tsx index dcd86a0..27c2298 100644 --- a/src/features/discover/components/discover-header.tsx +++ b/src/features/discover/components/discover-header.tsx @@ -1,4 +1,4 @@ -import { Bookmark, type LucideIcon, Trophy, Users } from 'lucide-react'; +import { Bookmark, type LucideIcon, Users } from 'lucide-react'; import type { ReactNode } from 'react'; import { Button } from '@/components/ui/button'; diff --git a/src/features/discover/components/opportunity-card.tsx b/src/features/discover/components/opportunity-card.tsx index ff7d72e..519cd95 100644 --- a/src/features/discover/components/opportunity-card.tsx +++ b/src/features/discover/components/opportunity-card.tsx @@ -115,7 +115,7 @@ export function OpportunityCard({ strokeWidth={1.75} aria-hidden /> - + {category} @@ -133,7 +133,7 @@ export function OpportunityCard({
- + )} - + diff --git a/src/features/onboarding/components/crop-photo-modal.tsx b/src/features/onboarding/components/crop-photo-modal.tsx index 758f139..16cc730 100644 --- a/src/features/onboarding/components/crop-photo-modal.tsx +++ b/src/features/onboarding/components/crop-photo-modal.tsx @@ -178,7 +178,7 @@ export function CropPhotoModal({
- + - +
diff --git a/src/features/onboarding/components/role-gate-modal.tsx b/src/features/onboarding/components/role-gate-modal.tsx index de9bcd6..2b40192 100644 --- a/src/features/onboarding/components/role-gate-modal.tsx +++ b/src/features/onboarding/components/role-gate-modal.tsx @@ -96,7 +96,7 @@ export function RoleGateModal({
{/* Usage */}
-

+

How are you planning to use Boundless?

@@ -131,7 +131,7 @@ export function RoleGateModal({ {/* Source */}
-

+

How did you hear about boundless?