refactor: edit layout ui

src/components/ItemCard.vue

@@ -1,44 +1,51 @@
 <script setup lang="ts">
-import AppBox from './app/AppBox.vue';
+import { ref } from 'vue';
 import { Icon } from '@iconify/vue';
-defineProps<{
+import { onMounted } from 'vue';
+const props = defineProps<{
   icon: string;
   text: string;
-  color: string;
+  iconColor: string;
+  bgColor: string;
   changeColor?: boolean;
+  index?: number;
 }>();
+
+const _self = ref<InstanceType<typeof HTMLDivElement>>();
+
+onMounted(() => {
+  if (props.index === 0) {
+    _self.value?.focus();
+  }
+});
 </script>
 
 <template>
-  <AppBox
-    style="
-      padding: 0;
-      border-radius: var(--radius-2);
-      width: 320px;
-      height: 195px;
-    "
-    bordered
-    class="cursor-pointer"
+  <button
+    ref="_self"
+    class="wrapper surface-1 shadow-2"
+    type="submit"
     @click="$emit('trigger')"
+    style="padding: 0; border-radius: var(--radius-2); width: 320px"
   >
-    <div class="column" style="height: 100%">
-      <div class="col-9 flex justify-center items-center">
-        <Icon
-          :icon="icon"
-          width="64px"
-          :class="`${$q.dark.isActive ? '' : 'app-text-muted'}`"
-          :color="changeColor ? color : ''"
-        />
+    <div class="column justify-center" style="height: 100%">
+      <div class="col-6 flex justify-center items-center">
+        <div
+          class="q-pa-md row items-center"
+          :style="`border-radius: 50%; background-color: hsla(${bgColor} / 0.1)`"
+        >
+          <Icon :icon="icon" width="53px" :color="`var(${iconColor})`" />
+        </div>
       </div>
       <div
-        class="col-3 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
+        class="col-2 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
         :class="{ dark: $q.dark.isActive }"
-        :style="`background-color: ${color}`"
+        :style="`background-color: ${bgColor}`"
       >
-        <div style="color: white">{{ $t(text) }}</div>
+        <div style="font-size: 14px">{{ $t(text) }}</div>
       </div>
     </div>
-  </AppBox>
+  </button>
 </template>
 
 <style scoped>
@@ -59,4 +66,15 @@ defineProps<{
     --_var-filter: color;
   }
 }
+.wrapper {
+  appearance: none;
+  background: transparent;
+  outline: none;
+  border: none;
+}
+
+.wrapper:focus {
+  border: 2px solid var(--blue-6);
+  border-radius: 10px;
+}
 </style>