Styling changes and styling for Modal

src/components/screens/Characters.vue

@@ -19,17 +19,21 @@
 </div>
 
 <Modal :isModalOpen="isModalOpen">
-  <form method="post" @submit.prevent="create">
-    <h1>Create your character</h1>
-    <div>
-      <label for="name">Name</label>
-      <input v-model="name" name="name" id="name">
-    </div>
-    <div>
-      <button @click="create">Create</button>
-    </div>
-  </form>
-  <button @click="isModalOpen = false">Cancel</button>
+  <template #modal-header>
+    <h2 class="modal-title">Create your character</h2>
+  </template>
+  <template #modal-body>
+    <form method="post" @submit.prevent="create" class="modal-form">
+      <div class="form-fields">
+        <label for="name">Name</label>
+        <input v-model="name" name="name" id="name">
+      </div>
+      <div class="submit">
+        <button @click="create">Create</button>
+      </div>
+    </form>
+    <button @click="isModalOpen = false">Cancel</button>
+  </template>
 </Modal>
 </template>
 
@@ -108,8 +112,7 @@ function create() {
           width: 100%;
           height: 40px;
           background-color: rgba($purple, 0.6);
-          border-top-left-radius: 20px;
-          border-top-right-radius: 20px;
+          border-radius: 20px 20px 0 0;
         }
 
         // hide the radio buttons
@@ -137,10 +140,17 @@ function create() {
       display: flex;
       gap: 30px;
       button {
-        padding: 5px 12px;
+        padding: 10px 16px;
+        &:hover {
+          cursor: pointer;
+        }
       }
     }
   }
+
+  .modal-title {
+    margin: 0;
+  }
 }