From 4260a94f91170c3b3f974eced644de447d27de4a Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Fri, 5 May 2023 09:25:48 +0200
Subject: [PATCH] minor fixes

---
 .../.vitepress/theme/components/base/ColorPicker.vue |  2 +-
 docs/.vitepress/theme/components/base/IconButton.vue |  3 +--
 .../theme/components/home/HomeHeroIconsCard.vue      | 12 ++++++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/base/ColorPicker.vue b/docs/.vitepress/theme/components/base/ColorPicker.vue
index 159c025c0..5f3ad3015 100644
--- a/docs/.vitepress/theme/components/base/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/base/ColorPicker.vue
@@ -26,12 +26,12 @@ const value = computed({
         v-model="value"
       />
     </div>
-    <!-- TODO: This should have an hidden label -->
     <input
       type="text"
       :id="`${id}-input`"
       :name="`${id}-input`"
       class="color-input-text"
+      aria-label="Color picker input"
       v-model="value"
     />
   </div>
diff --git a/docs/.vitepress/theme/components/base/IconButton.vue b/docs/.vitepress/theme/components/base/IconButton.vue
index d63751f6e..f3ac32b1f 100644
--- a/docs/.vitepress/theme/components/base/IconButton.vue
+++ b/docs/.vitepress/theme/components/base/IconButton.vue
@@ -7,7 +7,7 @@
 <style scoped>
 
 .icon-button {
-  display: inline-block;
+  display: inline-flex;
   border: 1px solid transparent;
   text-align: center;
   font-weight: 600;
@@ -17,7 +17,6 @@
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
   border-radius: 6px;
   background-color: var(--vp-c-bg-alt);
-  display: inline-flex;
   /* width: 56px;
   height: 56px; */
   font-size: 24px;
diff --git a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
index f4db15cf7..d3ef6f3fd 100644
--- a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
+++ b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
@@ -54,17 +54,15 @@ onBeforeUnmount(() => {
     <div class="icons-card">
       <div class="card-grid">
         <TransitionGroup  name="list" mode="out-in">
-          <IconButton
+          <div
             v-for="icon in items"
-            @click="() => go(`/icons/${icon.name}`)"
-            :aria-label="`See ${icon.name} icon`"
             :key="icon.name"
             class="random-icon"
           >
             <LucideIcon
               v-bind="icon"
             />
-          </IconButton>
+          </div>
         </TransitionGroup>
       </div>
       <FakeInput @click="go('/icons/?focus')" class="search-box">
@@ -138,6 +136,12 @@ onBeforeUnmount(() => {
   top: -64px;
 }
 
+.random-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (min-width: 960px) {
   .search-box {
     top: unset;