improvement: template use button (#1954)

This commit is contained in:
Emir Karabeg
2025-11-12 16:17:27 -08:00
committed by GitHub
parent ead0db9d2a
commit f414ae1936
2 changed files with 15 additions and 9 deletions

View File

@@ -522,7 +522,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
<div className={cn('flex min-h-screen flex-col', isWorkspaceContext && 'pl-64')}>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'>
{/* Top bar with back button and action buttons */}
{/* Top bar with back button */}
<div className='flex items-center justify-between'>
{/* Back button */}
<button
@@ -532,6 +532,11 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
<ArrowLeft className='h-[14px] w-[14px]' />
<span>Back</span>
</button>
</div>
{/* Template name and action buttons */}
<div className='mt-[24px] flex items-center justify-between'>
<h1 className='font-medium text-[18px]'>{template.name}</h1>
{/* Action buttons */}
<div className='flex items-center gap-[8px]'>
@@ -636,9 +641,9 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
variant='primary'
onClick={handleUseTemplate}
disabled={isUsing}
className='h-[32px] rounded-[6px]'
className='!text-[#FFFFFF] h-[32px] rounded-[6px] px-[12px] text-[14px]'
>
{isUsing ? 'Creating...' : 'Use'}
{isUsing ? 'Creating...' : 'Use template'}
</Button>
) : (
<DropdownMenu
@@ -650,7 +655,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
variant='primary'
onClick={() => setShowWorkspaceSelectorForUse(true)}
disabled={isUsing || isLoadingWorkspaces}
className='h-[32px] rounded-[6px]'
className='h-[32px] rounded-[6px] px-[16px] text-[#FFFFFF] text-[14px]'
>
{isUsing ? 'Creating...' : isLoadingWorkspaces ? 'Loading...' : 'Use'}
<ChevronDown className='ml-2 h-4 w-4' />
@@ -685,12 +690,9 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
</div>
</div>
{/* Template name */}
<h1 className='mt-[24px] font-medium text-[18px]'>{template.name}</h1>
{/* Template tagline */}
{template.details?.tagline && (
<p className='mt-[8px] font-medium text-[#888888] text-[14px]'>
<p className='mt-[4px] font-medium text-[#888888] text-[14px]'>
{template.details.tagline}
</p>
)}

View File

@@ -15,7 +15,11 @@ const buttonVariants = cva(
outline:
'border border-[#727272] bg-[var(--border-strong)] hover:bg-[var(--surface-11)] dark:border-[#727272] dark:bg-[var(--border-strong)] dark:hover:bg-[var(--surface-11)]',
primary:
'bg-[var(--brand-400)] dark:bg-[var(--brand-400)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:bg-[var(--brand-400)] hover:dark:bg-[var(--brand-400)] hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
'bg-[var(--brand-400)] dark:bg-[var(--brand-400)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:brightness-110 hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
secondary:
'bg-[var(--brand-secondary)] dark:bg-[var(--brand-secondary)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:bg-[var(--brand-secondary)] hover:dark:bg-[var(--brand-secondary)] hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
tertiary:
'bg-[var(--brand-tertiary)] dark:bg-[var(--brand-tertiary)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:bg-[var(--brand-tertiary)] hover:dark:bg-[var(--brand-tertiary)] hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
ghost: '',
'ghost-secondary': 'text-[var(--text-muted)] dark:text-[var(--text-muted)]',
},