diff --git a/public/assets/icons/close-button-white.svg b/public/assets/icons/close-button-white.svg
index 619713c..5bf088a 100644
--- a/public/assets/icons/close-button-white.svg
+++ b/public/assets/icons/close-button-white.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index f6449d0..b66a71c 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -1,8 +1,6 @@
// Colors
$white: #fff;
$black: #000;
-$purple: #4741e6;
-$lilac: #7b76ff;
$light-blue: #00c2ff;
$red: #d50000;
$dark-red: #b30000;
@@ -12,4 +10,5 @@ $dark-gray: #313638;
$light-gray: #d3d3d3;
$blue-gray: #778899;
$cyan: #368f8b;
+$dark-cyan: #376362;
$green: #09ad19;
\ No newline at end of file
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index b902a1e..915e0ea 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,11 +1,6 @@
@import '@/assets/scss/_variables';
// Fonts
-@font-face {
- font-family: GentiumPlus;
- src: url('@/assets/fonts/Gentium_plus.ttf');
-}
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
@@ -20,8 +15,8 @@ body {
user-select: none; /* Standard syntax */
}
-h1, h2, h3, h4, h5, h6 {
- font-family: GentiumPlus, serif;
+h1, h2, h3, h4, h5, h6, button, a {
+ font-family: "Poppins";
color: $white;
}
@@ -30,8 +25,6 @@ p, span, li, label {
color: $white;
}
button, a {
- font-family: "Poppins";
- color: $white;
font-weight: 500;
text-shadow: 0 4px 6px rgba($black, 0.25);
}
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 39b4cb7..730d6bb 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -35,7 +35,7 @@
- Create your character
+ Create your character
@@ -45,10 +45,14 @@
-
+
-
+
+
+
+
+
@@ -258,13 +262,13 @@ function create() {
gap: 30px;
button {
- padding: 8px 10px 8px 20px;
+ padding: 8px 10px 8px 30px;
min-width: 100px;
position: relative;
border-radius: 5px;
- font-size: 1.125rem;
+ font-size: 1.25rem;
display: flex;
- gap: 10px;
+ gap: 15px;
align-items: center;
span {
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 5de143d..0266c27 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -30,7 +30,7 @@
color: '#FFF',
fontSize: '1rem',
strokeThickness: 4,
- stroke: 'red'
+ stroke: '#000'
}"
/>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 412e410..a2b3903 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -8,6 +8,9 @@
+
@@ -90,30 +93,34 @@ onUnmounted(() => {
position: fixed;
top: 0;
left: 0;
- max-width: 500px;
- min-width: 350px;
- min-height: 300px;
- border-radius: 20px;
- background-color: rgba($white, 0.8);
+ max-width: 1000px;
+ min-width: 500px;
+ min-height: 280px;
+ background-color: rgba($dark-gray, 0.8);
+ border: 2px solid $dark-cyan;
z-index: 999;
+ display: flex;
+ flex-direction: column;
+ border-radius: 10px;
.modal-header {
cursor: move;
- background-color: rgba($purple, 0.6);
padding: 0 20px;
- border-radius: 20px 20px 0 0;
- height: 60px;
+ min-height: 50px;
display: flex;
justify-content: space-between;
+ gap: 30px;
align-items: center;
+ border-bottom: 1px solid $dark-cyan;
.modal-title {
margin: 0;
+ font-weight: 400;
}
button {
- width: 40px;
- height: 40px;
+ width: 20px;
+ height: 20px;
margin: 0;
padding: 0;
position: relative;
@@ -123,16 +130,9 @@ onUnmounted(() => {
height: 100%;
}
- &:hover::after {
- content: '';
- position: absolute;
- width: 38px;
- height: 38px;
- left: 1px;
- top: 1px;
- border-radius: 50%;
- background-color: $lilac;
- z-index: -1;
+ &:hover {
+ transform: rotate(180deg);
+ transition: ease-in-out 0.3s;
}
}
}
@@ -141,6 +141,7 @@ onUnmounted(() => {
max-height: 80vh;
overflow: auto;
padding: 15px;
+ flex-grow: 1;
.submit {
display: inline-block;
@@ -150,13 +151,10 @@ onUnmounted(() => {
}
button {
- padding: 10px 16px;
+ padding: 6px 15px;
min-width: 100px;
border-radius: 5px;
- }
-
- p {
- color: $black;
+ border-width: 1px;
}
.modal-form {
@@ -169,18 +167,36 @@ onUnmounted(() => {
label {
margin-bottom: 10px;
- color: $black;
+ font-family: "Poppins";
}
input {
max-width: 250px;
- border: 1px solid $purple;
+ font-family: "Poppins";
+ border: 1px solid $cyan;
border-radius: 5px;
- background-color: rgba($white, 0.5);
- padding: 10px;
+ background-color: rgba($white, 0.8);
+ padding: 8px 10px;
}
}
}
}
+
+ .modal-footer {
+ padding: 0 20px;
+ min-height: 50px;
+ display: flex;
+ justify-content: end;
+ gap: 30px;
+ align-items: center;
+ border-top: 1px solid $dark-cyan;
+
+ button {
+ padding: 6px 15px;
+ min-width: 100px;
+ border-radius: 5px;
+ border-width: 1px;
+ }
+ }
}
\ No newline at end of file