レイアウトを少しだけ変更

diff --git a/src/components/selectPanel.vue b/src/components/selectPanel.vue
index 21516d7..d7f2728 100644 (file)
--- a/src/components/selectPanel.vue
+++ b/src/components/selectPanel.vue
@@ -5,9 +5,9 @@
         <!-- modal -->
         <div class="bg-white rounded shadow-lg w-6/12 modal-panel">
           <!-- modal header -->
-          <div class="border-b px-4 py-2 flex justify-between items-center">
-            <h2 class="font-semibold text-lg">{{title}}</h2>
-            <button class="text-black" @click="show">&cross;</button>
+          <div class="border-b px-4 py-2 flex justify-between items-center bg-gray-400">
+            <h2 class="font-semibold">{{title}}</h2>
+            <button class="text-black text-2xl cursor-pointer bg-gray-100 w-1/12 hover:bg-gray-300" @click="show">✖</button>
           </div>
           <!-- modal body -->
           <div class="p-1">
@@ -16,7 +16,7 @@
             </ul>
           </div>
           <div class="flex justify-end items-center w-100 border-t p-3">
-            <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
+            保存していたTodoタイトルを呼び出せるよ
           </div>
         </div>
       </div>
@@ -71,7 +71,6 @@ export default {
 
 .modal-full {
 }
-
 .modal-panel {
 }
 
@@ -99,4 +98,5 @@ export default {
 .selectPanel-leave-to > .modal-full > .modal-panel {
   transform: translateX(100%);
 }
+
 </style>