From b8961be3b6dc8cb5349340c5fc36b939857d1c5d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 21:38:56 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=A1=E3=82=87=E3=81=A3?=
 =?UTF-8?q?=E3=81=A8=E7=9B=B4=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Common/ModalHeader.vue     | 17 +++++++++++++----
 .../Modal/StampCreateModal/StampCreateModal.vue |  1 +
 .../Modal/StampEditModal/StampEditModal.vue     |  3 ++-
 src/components/Settings/StampTab/StampItem.vue  | 17 +++++++++--------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Modal/Common/ModalHeader.vue b/src/components/Modal/Common/ModalHeader.vue
index e039645279..b847b761f3 100644
--- a/src/components/Modal/Common/ModalHeader.vue
+++ b/src/components/Modal/Common/ModalHeader.vue
@@ -3,11 +3,16 @@
     <modal-return-button v-if="returnButton" :class="$style.returnButton" />
     <div :class="$style.content">
       <h1 :class="$style.title">
-        <a-icon v-if="iconName" :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
-          title
-        }}
+        <a-icon
+          v-if="iconName"
+          :class="$style.icon"
+          :name="iconName"
+          :mdi="iconMdi"
+        />{{ title }}
       </h1>
-      <h2 :class="$style.subtitle"><slot name="subtitle" /></h2>
+      <h2 :class="$style.subtitle" :data-has-icon="$boolAttr(!iconName)">
+        <slot name="subtitle" />
+      </h2>
     </div>
   </div>
 </template>
@@ -69,6 +74,10 @@ withDefaults(
     weight: 500;
     size: 0.875rem;
   }
+
+  &[data-has-icon] {
+    padding-left: 0;
+  }
 }
 .icon {
   margin-right: 16px;
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index 9075daf7e6..beedf15c34 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -133,6 +133,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   gap: 16px;
 }
 .leftContainer {
+  min-width: 136px;
   width: 136px;
   height: 136px;
   margin: 8px 0;
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index c014f58ad9..c4f0f4188e 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -186,6 +186,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   gap: 16px;
 }
 .leftContainer {
+  min-width: 136px;
   width: 136px;
   height: 136px;
   margin: 8px 0;
@@ -204,8 +205,8 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
 
 .note {
   @include color-ui-secondary;
-  margin-left: 12px;
   margin-bottom: 12px;
+  font-size: 12px;
 }
 .buttonContainer {
   display: flex;
diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index 64c62f2a64..0b53058bfb 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -12,12 +12,9 @@
           @{{ stamp.creatorId }}
         </p>
       </div>
-      <icon-button
-        icon-name="dots-horizontal"
-        icon-mdi
-        :class="$style.dotsButon"
-        @click="onDotsClick"
-      />
+      <button :class="$style.dotsButton" @click="onDotsClick">
+        <a-icon name="dots-horizontal" mdi />
+      </button>
     </div>
     <stamp-context-menu
       v-if="contextMenuPosition"
@@ -31,10 +28,10 @@
 <script lang="ts" setup>
 import type { Stamp } from '@traptitech/traq'
 import { computed } from 'vue'
-import IconButton from '/@/components/UI/IconButton.vue'
 import { buildFilePath } from '/@/lib/apis'
 import useContextMenu from '/@/composables/useContextMenu'
 import StampContextMenu from './StampContextMenu.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -88,9 +85,13 @@ const onDotsClick = (e: MouseEvent) => {
   text-overflow: ellipsis;
 }
 
-.dotsButon {
+.dotsButton {
   @include color-ui-tertiary;
   padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+
   &:hover {
     @include color-ui-secondary;
     @include background-secondary;