style: Fix button style

spider-hand · Mar 17, 2024 · 5dfc737 · 5dfc737
1 parent 810a8df
commit 5dfc737
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 35 deletions.
diff --git a/src/components/shared/IconButtonComponent.vue b/src/components/shared/IconButtonComponent.vue
@@ -1,51 +1,32 @@
 <template>
-  <div :class="[$style['icon-button'], $style[`icon-button--${size}`]]">
+  <button :class="$style['icon-button']">
     <img
       :src="getIconUrl(icon)"
-      :width="iconSize"
-      :height="iconSize"
+      :width="24"
+      :height="24"
       :alt="`${icon} icon`"
       :class="$style['icon-button__icon']"
     >
-  </div>
+  </button>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from "vue";
 import { getIconUrl } from "@/utils";
 
-type IconSizeTypes = "sm" | "md";
-
-const props = defineProps({
-  size: {
-    type: String as PropType<IconSizeTypes>,
-    required: false,
-    default: "md",
-  },
+defineProps({
   icon: {
     type: String,
     required: true,
   },
 });
-
-const iconSize = computed(() => {
-  switch (props.size) {
-    case "sm":
-      return "16";
-    case "md":
-      return "24";
-    default: {
-      return "24";
-    }
-  }
-});
 </script>
 
 <style module lang="scss">
 .icon-button {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 12px;
   background: var(--color-brand-gradient);
   border: none;
   border-radius: 100px;
@@ -54,13 +35,5 @@ const iconSize = computed(() => {
   &:active {
     transform: scale(0.95);
   }
-
-  &--sm {
-    padding: 4px;
-  }
-
-  &--md {
-    padding: 12px;
-  }
 }
 </style>
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
@@ -77,12 +77,12 @@
       v-if="deviceState <= DEVICE_TYPES.MOBLE_PORTRAIT"
       v-show="inGameState.isMapVisible && !inGameState.isShowingResult"
       :icon="'close'"
-      :size="'sm'"
       :style="{
         zIndex: '3',
         position: 'absolute',
-        bottom: '280px',
+        bottom: '272px',
         left: '20px',
+        padding: '4px',
       }"
       @click="inGameState.isMapVisible = false"
     />