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;
}
}
}