Skip to content

Commit fdb747c

Browse files
emir-karabegemir-karabeg
committed
improvement(emcn): added button variants
1 parent eb5e2bc commit fdb747c

6 files changed

Lines changed: 37 additions & 17 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,37 @@ export function Panel() {
3434
{/* Header */}
3535
<div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
3636
<div className='flex gap-[4px]'>
37-
<Button className='h-[32px] w-[32px] bg-[#272727] dark:bg-[#272727]'>
37+
<Button className='h-[32px] w-[32px]'>
3838
<MoreHorizontal />
3939
</Button>
40-
<Button className='h-[32px] w-[32px] bg-[#272727] dark:bg-[#272727]'>
40+
<Button className='h-[32px] w-[32px]'>
4141
<BubbleChatPreview />
4242
</Button>
4343
</div>
4444
<div className='flex gap-[4px]'>
45-
<Button className='h-[32px] gap-[8px] bg-[#272727] px-[10px] text-[12px] dark:bg-[#272727]'>
45+
<Button className='h-[32px] gap-[8px] px-[10px]'>
4646
<Rocket className='h-[13px] w-[13px]' />
4747
Deploy
4848
</Button>
49-
<Button className='h-[32px] gap-[8px] px-[10px] text-[12px]' variant='primary'>
49+
<Button className='h-[32px] gap-[8px] px-[10px]' variant='primary'>
5050
<Play className='h-[11px] w-[11px]' />
5151
Run
5252
</Button>
5353
</div>
5454
</div>
55+
56+
{/* Tabs */}
57+
<div className='flex flex-shrink-0 items-center gap-[4px] px-[8px] pt-[14px]'>
58+
<Button className='h-[30px] gap-[8px] px-[10px]' variant='ghost'>
59+
Design
60+
</Button>
61+
<Button className='h-[30px] gap-[8px] px-[10px]' variant='active'>
62+
Copilot
63+
</Button>
64+
<Button className='h-[30px] gap-[8px] px-[10px]' variant='ghost'>
65+
Variables
66+
</Button>
67+
</div>
5568
</div>
5669
</aside>
5770

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/blocks/blocks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ export function Blocks({ disabled = false }: BlocksProps) {
105105
onMouseDown={handleMouseDown}
106106
/>
107107
<Button
108-
variant='ghost'
109-
className='hover:!text-[#787878] dark:hover:!text-[#787878] flex w-full flex-shrink-0 cursor-pointer items-center justify-between rounded-[0px] p-0 px-[10px] pt-[3px] pb-[5px]'
108+
variant='ghost-secondary'
109+
className='flex w-full flex-shrink-0 cursor-pointer items-center justify-between rounded-[0px] p-0 px-[10px] pt-[3px] pb-[5px] dark:hover:text-[#787878] hover:[#787878]'
110110
onClick={handleToggle}
111111
>
112112
<div className='font-medium text-[#AEAEAE] text-small dark:text-[#AEAEAE]'>Blocks</div>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/triggers/triggers.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ export function Triggers({ disabled = false }: TriggersProps) {
4848
onMouseDown={handleMouseDown}
4949
/>
5050
<Button
51-
variant='ghost'
52-
className='hover:!text-[#787878] dark:hover:!text-[#787878] flex w-full flex-shrink-0 cursor-pointer items-center justify-between rounded-[0px] p-0 px-[10px] pt-[3px] pb-[5px]'
51+
variant='ghost-secondary'
52+
className='flex w-full flex-shrink-0 cursor-pointer items-center justify-between rounded-[0px] p-0 px-[10px] pt-[3px] pb-[5px] hover:text-[#787878] dark:hover:text-[#787878]'
5353
onClick={handleToggle}
5454
>
5555
<div className='font-medium text-[#AEAEAE] text-small dark:text-[#AEAEAE]'>Triggers</div>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,20 @@ export function SidebarNew() {
127127
<div className='flex items-center gap-[14px]'>
128128
{/* TODO: Add sidebar collapse */}
129129
<Button
130-
variant='ghost'
130+
variant='ghost-secondary'
131131
type='button'
132132
aria-label='Collapse sidebar'
133133
className='group -m-1 p-0 p-1'
134134
>
135135
<ChevronDown className='h-[8px] w-[12px]' />
136136
</Button>
137137
{/* TODO: Add panel toggle */}
138-
<Button variant='ghost' type='button' aria-label='Toggle panel' className='group p-0'>
138+
<Button
139+
variant='ghost-secondary'
140+
type='button'
141+
aria-label='Toggle panel'
142+
className='group p-0'
143+
>
139144
<PanelLeft className='h-[17.5px] w-[17.5px]' />
140145
</Button>
141146
</div>
@@ -164,7 +169,7 @@ export function SidebarNew() {
164169
<Tooltip>
165170
<TooltipTrigger asChild>
166171
<Button
167-
variant='default'
172+
variant='ghost'
168173
className='translate-y-[-0.25px] p-[1px]'
169174
onClick={handleImportWorkflow}
170175
disabled={isImporting}
@@ -179,7 +184,7 @@ export function SidebarNew() {
179184
<Tooltip>
180185
<TooltipTrigger asChild>
181186
<Button
182-
variant='default'
187+
variant='ghost'
183188
className='mr-[1px] translate-y-[-0.25px] p-[1px]'
184189
onClick={handleCreateFolder}
185190
disabled={isCreatingFolder}

‎apps/sim/components/emcn/components/badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const badgeVariants = cva(
77
{
88
variants: {
99
variant: {
10-
default: 'dark:bg-[#272727] dark:text-[#B1B1B1]',
10+
default: 'bg-[#272727] text-[#B1B1B1] dark:bg-[#272727] dark:text-[#B1B1B1]',
1111
},
1212
},
1313
defaultVariants: {

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@ import { cva, type VariantProps } from 'class-variance-authority'
33
import { cn } from '@/lib/utils'
44

55
const buttonVariants = cva(
6-
'inline-flex items-center text-[#B1B1B1] hover:text-[#E6E6E6] dark:hover:text-[#E6E6E6] dark:text-[#B1B1B1] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 outline-none focus:outline-none focus-visible:outline-none rounded-[4px] px-[8px] py-[6px]',
6+
'inline-flex items-center text-[#B1B1B1] hover:text-[#E6E6E6] dark:hover:text-[#E6E6E6] dark:text-[#B1B1B1] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 outline-none focus:outline-none focus-visible:outline-none rounded-[4px] px-[8px] py-[6px] text-[12px]',
77
{
88
variants: {
99
variant: {
10-
default: '',
10+
default: 'bg-[#272727] dark:bg-[#272727]',
11+
active: 'bg-[#353535] dark:bg-[#353535] dark:text-[#E6E6E6] text-[#E6E6E6]',
1112
'3d': 'dark:text-[#AEAEAE] border-t border-l border-r dark:border-[#303030] shadow-[0_2px_0_0] dark:shadow-[#303030] hover:shadow-[0_4px_0_0] transition-all hover:-translate-y-0.5 hover:dark:text-[#E6E6E6]',
1213
outline:
1314
'border border-[#727272] bg-[#303030] hover:bg-[#3D3D3D] dark:border-[#727272] dark:bg-[#303030] dark:hover:bg-[#3D3D3D]',
1415
primary:
15-
'bg-[#8E4CFB] dark:bg-[#8E4CFB] dark:text-[#FFFFFF] text-[#FFFFFF] hover:bg-[#8E4CFB] hover:dark:bg-[#8E4CFB]',
16-
ghost: 'text-[#787878] dark:text-[#787878]',
16+
'bg-[#8E4CFB] dark:bg-[#8E4CFB] dark:text-[#E6E6E6] text-[#E6E6E6] hover:bg-[#8E4CFB] hover:dark:bg-[#8E4CFB] hover:text-[#E6E6E6] hover:dark:text-[#E6E6E6]',
17+
ghost: '',
18+
'ghost-secondary': 'text-[#787878] dark:text-[#787878]',
1719
},
1820
},
1921
defaultVariants: {

0 commit comments

Comments
 (0)