From f62e81efad28d3c099930a00528ffb184f185511 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 1 Jun 2024 22:57:47 +0200
Subject: [PATCH] More styling to character select and modal

---
 public/assets/icons/plus-icon.svg     |  4 +++
 src/components/screens/Characters.vue | 36 +++++++++++++++++++++++++--
 src/components/utilities/Modal.vue    | 26 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/icons/plus-icon.svg

diff --git a/public/assets/icons/plus-icon.svg b/public/assets/icons/plus-icon.svg
new file mode 100644
index 0000000..9574232
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 9e70133..edf67a2 100644
--- a/src/components/screens/Characters.vue
+++ b/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;
-        min-height: 250px;
+        width: 150px;
+        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;
         }
       }
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 1622013..284a237 100644
--- a/src/components/utilities/Modal.vue
+++ b/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;
         }
       }
     }