🎨 Figma に合わせる

traPtitech · May 18, 2024 · 99c5796 · 99c5796
1 parent 14370b8
commit 99c5796
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 31 deletions.
diff --git a/src/components/newTransaction/NewTransactionTarget.vue b/src/components/newTransaction/NewTransactionTarget.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { PlusCircleIcon, MinusCircleIcon } from '@heroicons/vue/24/solid'
 import { useToast } from 'vue-toastification'
 
 import InputText from '/@/components/shared/InputText.vue'
+import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
 
 interface Props {
   targets: string[]
@@ -36,25 +36,29 @@ function handleRemoveTarget(index: number) {
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <label>取引相手</label>
-    <ul>
+  <div class="flex flex-col gap-3">
+    <label class="text-xl">取引相手</label>
+    <ul class="flex flex-col gap-2">
       <li
         v-for="(target, i) in targets"
         :key="target"
-        class="mb-2 flex w-2/3 items-center gap-4">
+        class="flex items-center gap-3">
         <InputText
+          class="flex-grow"
           :model-value="target"
           placeholder="取引相手"
           @update:model-value="handleEditTarget(i, $event)" />
         <button class="flex" @click="handleRemoveTarget(i)">
-          <MinusCircleIcon class="w-6" />
+          <TrashIcon class="w-6 text-red-400" />
         </button>
       </li>
     </ul>
-    <div class="w-2/3 text-center">
-      <button @click="handleAddTarget">
-        <PlusCircleIcon class="w-8" />
+    <div class="ml-3">
+      <button
+        class="flex items-center p-2 border rounded"
+        @click="handleAddTarget">
+        <PlusIcon class="w-5 mr-2" />
+        取引相手を追加
       </button>
     </div>
   </div>

diff --git a/src/components/shared/InputRadioButton.vue b/src/components/shared/InputRadioButton.vue
@@ -21,9 +21,9 @@ const value = computed({
 </script>
 
 <template>
-  <div class="space-x-4">
-    <label v-for="option in options" :key="option.key">
-      <input v-model="value" type="radio" :value="option.value" />
+  <div class="flex flex-col gap-1">
+    <label v-for="option in options" :key="option.key" class="text-base">
+      <input v-model="value" class="mr-1" type="radio" :value="option.value" />
       {{ option.key }}
     </label>
   </div>

diff --git a/src/components/shared/InputSelectTagWithCreation.vue b/src/components/shared/InputSelectTagWithCreation.vue
@@ -25,6 +25,7 @@ const value = computed({
 <template>
   <InputSelectMultiple
     v-model="value"
+    class="w-full"
     :create-option="
       (tag: string) => ({ name: tag, id: '', created_at: '', updated_at: '' })
     "

diff --git a/src/pages/NewTransactionPage.vue b/src/pages/NewTransactionPage.vue
@@ -41,50 +41,50 @@ if (!isTagFetched.value) {
 
 <template>
   <div v-if="!isAdmin">権限がありません。</div>
-  <div class="min-w-160 mx-auto flex w-2/3 flex-col px-12 pt-8">
-    <div class="pb-8">
-      <h1 class="text-center text-3xl">入出金記録の新規作成</h1>
+  <div class="min-w-160 mx-auto mb-5 flex w-2/3 flex-col px-12 pt-8">
+    <div class="pb-6">
+      <h1 class="text-2xl">入出金記録の新規作成</h1>
     </div>
-    <form class="flex flex-col gap-2">
-      <div class="flex flex-col">
-        <label>金額</label>
+    <form class="flex flex-col gap-6">
+      <div class="flex flex-col gap-3">
+        <label class="text-xl">金額</label>
         <div>
           <InputNumber
             v-model="transaction.amount"
             auto-focus
-            class="mr-1"
+            class="mr-2"
             :min="1" />円
         </div>
       </div>
-      <div class="flex flex-col">
-        <label>入出金</label>
+      <div class="flex flex-col gap-3">
+        <label class="text-xl">入出金の方向</label>
         <InputRadioButton
           v-model="moneyDirection"
           :options="directionOptions" />
       </div>
       <NewTransactionTarget
         :targets="transaction.targets"
         @input="transaction.targets = $event" />
-      <div class="flex flex-col">
-        <label>グループ</label>
+      <div class="flex flex-col gap-3">
+        <label class="text-xl">グループ</label>
         <InputSelectSingle
           v-model="transaction.group"
-          class="!w-2/3"
+          class="w-full"
           :options="groupOptions"
           placeholder="グループを選択" />
       </div>
-      <div class="flex flex-col">
-        <label>タグ</label>
-        <InputSelectTagWithCreation v-model="transaction.tags" class="!w-2/3" />
+      <div class="flex flex-col gap-3">
+        <label class="text-xl">タグ</label>
+        <InputSelectTagWithCreation v-model="transaction.tags" class="" />
       </div>
       <div class="text-right">
         <SimpleButton
-          class="mb-4 w-64"
+          class="!px-5"
           :disabled="isSending"
-          font-size="xl"
-          padding="sm"
+          font-size="md"
+          padding="md"
           @click.stop="postTransaction">
-          入出金記録を作成する
+          入出金記録を作成
         </SimpleButton>
       </div>
     </form>