Skip to content

Commit d0ee70c

Browse files
IdrisGitIdrisGit
committed
feat:style: use ButtonBase for consistent styling
1 parent beee5a9 commit d0ee70c

3 files changed

Lines changed: 31 additions & 55 deletions

File tree

‎app/components/Package/SkillsModal.vue‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -131,18 +131,14 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
131131
<span class="text-fg">npx </span>
132132
<span class="text-fg-muted">skills add {{ baseUrl }}/{{ packageName }}</span>
133133
</code>
134-
<button
134+
<ButtonBase
135135
type="button"
136-
class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
136+
size="small"
137+
class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100"
137138
:aria-label="$t('package.get_started.copy_command')"
139+
:classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
138140
@click.stop="copyCommand"
139-
>
140-
<span
141-
:class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
142-
class="size-4 inline-block"
143-
aria-hidden="true"
144-
/>
145-
</button>
141+
/>
146142
</div>
147143
</div>
148144
</div>
@@ -209,7 +205,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
209205
<span v-if="skill.fileCounts?.references" class="text-fg-subtle">
210206
<span class="i-lucide:file-text size-3 align-[-2px] me-0.5" />{{
211207
$t(
212-
'package.skills.file_counts.refs',
208+
'package.skills.file_counts.references',
213209
{ count: skill.fileCounts.references },
214210
skill.fileCounts.references,
215211
)

‎app/components/Terminal/Execute.vue‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,14 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
6868
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
6969
></code
7070
>
71-
<button
71+
<ButtonBase
7272
type="button"
73-
class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
73+
size="small"
74+
class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
7475
:aria-label="$t('package.get_started.copy_command')"
76+
:classicon="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
7577
@click.stop="copyExecuteCommand"
76-
>
77-
<span
78-
:class="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
79-
class="size-4 inline-block"
80-
aria-hidden="true"
81-
/>
82-
</button>
78+
/>
8379
</div>
8480
</div>
8581
</div>

‎app/components/Terminal/Install.vue‎

Lines changed: 20 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -151,18 +151,14 @@ const copyDevInstallCommand = () =>
151151
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
152152
></code
153153
>
154-
<button
154+
<ButtonBase
155155
type="button"
156-
class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
156+
size="small"
157+
class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
157158
:aria-label="$t('package.get_started.copy_command')"
159+
:classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
158160
@click.stop="copyInstallCommand"
159-
>
160-
<span
161-
:class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
162-
class="size-4 inline-block"
163-
aria-hidden="true"
164-
/>
165-
</button>
161+
/>
166162
</div>
167163

168164
<!-- Suggested dev dependency install command -->
@@ -187,18 +183,14 @@ const copyDevInstallCommand = () =>
187183
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
188184
></code
189185
>
190-
<button
186+
<ButtonBase
191187
type="button"
192-
class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
188+
size="small"
189+
class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
193190
:aria-label="$t('package.get_started.copy_dev_command')"
191+
:classicon="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
194192
@click.stop="copyDevInstallCommand"
195-
>
196-
<span
197-
:class="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
198-
class="size-4 inline-block"
199-
aria-hidden="true"
200-
/>
201-
</button>
193+
/>
202194
</div>
203195
</template>
204196

@@ -254,18 +246,14 @@ const copyDevInstallCommand = () =>
254246
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
255247
></code
256248
>
257-
<button
249+
<ButtonBase
258250
type="button"
259-
class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
251+
size="small"
252+
class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
260253
:aria-label="$t('package.run.copy_command')"
254+
:classicon="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
261255
@click.stop="copyRunCommand(executableInfo?.primaryCommand)"
262-
>
263-
<span
264-
:class="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
265-
class="size-4 inline-block"
266-
aria-hidden="true"
267-
/>
268-
</button>
256+
/>
269257
</div>
270258
</template>
271259

@@ -304,18 +292,14 @@ const copyDevInstallCommand = () =>
304292
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
305293
></code
306294
>
307-
<button
295+
<ButtonBase
308296
type="button"
309-
class="p-1 ms-1 flex items-center font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70 media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100"
297+
size="small"
298+
class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
310299
:aria-label="$t('package.create.copy_command')"
300+
:classicon="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
311301
@click.stop="copyCreateCommand"
312-
>
313-
<span
314-
:class="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
315-
class="size-4 inline-block"
316-
aria-hidden="true"
317-
/>
318-
</button>
302+
/>
319303
</div>
320304
</template>
321305
</div>

0 commit comments

Comments
 (0)