improvement: template use button (#1954)

Author: emir-karabeg

apps/sim/app/templates/[id]/template.tsx

@@ -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>
           )}

apps/sim/components/emcn/components/button/button.tsx

@@ -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)]',
       },