More styling to character select and modal

public/assets/icons/plus-icon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12H20M12 4V20" stroke="#7B76FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/screens/Characters.vue

@@ -9,6 +9,12 @@
           <img src="/assets/avatar/default/base_right_down.png" />
         </label>
       </div>
+      <div class="character new-character">
+        <button @click="isModalOpen = true">
+          <img src="/assets/icons/plus-icon.svg" />
+          Create new
+        </button>
+      </div>
     </div>
 
     <div class="buttons-wrapper">
@@ -106,13 +112,25 @@ function create() {
       width: 100%;
 
       .character {
-        min-width: 150px;
+        width: 150px;
-        min-height: 250px;
+        height: 250px;
         display: flex;
         flex-direction: column;
         background-color: rgba($white, 0.8);
         border-radius: 20px;
         position: relative;
+
+        &.new-character {
+          background-color: rgba($light-gray, 0.5);
+          button {
+            background-color: transparent;
+            border: none;
+          }
+          &::before {
+            display: none;
+          }
+        }
+
         &::before {
           content: '';
           position: absolute;
@@ -148,7 +166,21 @@ function create() {
       gap: 30px;
       button {
         padding: 10px 16px;
+        min-width: 6.25rem;
+        text-align: center;
+        position: relative;
+        background-color: rgba($purple, 0.75);
+        border: rgba($white, 0.35) 1px solid;
+        border-radius: 5px;
+        color: $white;
+
+        span {
+          color: $white;
+          margin: auto;
+        }
+
         &:hover {
+          background-color: rgba($lilac, 0.75);
           cursor: pointer;
         }
       }

src/components/utilities/Modal.vue

@@ -143,19 +143,43 @@ onUnmounted(() => {
 
   .modal-body {
     padding: 15px;
+    .submit {
+      display: inline-block;
+      button {
+        margin-right: 20px;
+      }
+    }
     button {
       padding: 10px 16px;
+      min-width: 6.25rem;
+      text-align: center;
+      position: relative;
       background-color: rgba($purple, 0.75);
-      border: 2px solid rgba($white, 0.5);
+      border: rgba($white, 0.35) 1px solid;
       border-radius: 5px;
       color: $white;
+
+      &:hover {
+        background-color: rgba($lilac, 0.75);
+        cursor: pointer;
+      }
     }
     .modal-form {
+      display: inline;
       .form-fields {
         display: flex;
         flex-direction: column;
+        margin-bottom: 20px;
+        label {
+          font-family: Arial, sans-serif;
+          margin-bottom: 10px;
+        }
         input {
           max-width: 250px;
+          border: 1px solid $purple;
+          border-radius: 5px;
+          background-color: rgba($white, 0.5);
+          padding: 10px;
         }
       }
     }