style: use checkmark and copy icons to be consistent

Author: IdrisGit

app/components/Package/SkillsModal.vue

@@ -137,7 +137,11 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
-            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
+            <span
+              :class="copied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              class="size-4 inline-block"
+              aria-hidden="true"
+            />
           </button>
         </div>
       </div>

app/components/Terminal/Execute.vue

@@ -70,11 +70,15 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            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"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
-            {{ executeCopied ? $t('common.copied') : $t('common.copy') }}
+            <span
+              :class="executeCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              class="size-4 inline-block"
+              aria-hidden="true"
+            />
           </button>
         </div>
       </div>

app/components/Terminal/Install.vue

@@ -123,11 +123,15 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono ms-auto 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"
+            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"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
-            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
+            <span
+              :class="copied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+              class="size-4 inline-block"
+              aria-hidden="true"
+            />
           </button>
         </div>
 
@@ -185,10 +189,14 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono ms-auto 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"
+              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"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
-              {{ runCopied ? $t('common.copied') : $t('common.copy') }}
+              <span
+                :class="runCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                class="size-4 inline-block"
+                aria-hidden="true"
+              />
             </button>
           </div>
         </template>
@@ -230,13 +238,15 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono ms-auto 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"
+              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"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >
-              <span aria-live="polite">{{
-                createCopied ? $t('common.copied') : $t('common.copy')
-              }}</span>
+              <span
+                :class="createCopied ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                class="size-4 inline-block"
+                aria-hidden="true"
+              />
             </button>
           </div>
         </template>