From e5bd1e833808930959d019d13863d94df93dc686 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Tue, 9 Jan 2024 22:24:22 -0700
Subject: [PATCH] Finish implementing the Add Spell button

---
 module/documents/Actor/Player.mjs                |  7 ++++++-
 styles/_vars.scss                                | 16 ++++++++++++++--
 styles/global/buttons.scss                       |  4 ++++
 styles/global/icons.scss                         |  3 +++
 .../actors/char-sheet-mvp/panels/spells.pc.hbs   |  7 +++++--
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/module/documents/Actor/Player.mjs b/module/documents/Actor/Player.mjs
index 331a0c0..f3e07c8 100644
--- a/module/documents/Actor/Player.mjs
+++ b/module/documents/Actor/Player.mjs
@@ -1,5 +1,10 @@
 export class PlayerActor {
-	static createCustomSpell() {};
+	static createCustomSpell() {
+		this.createEmbeddedDocuments(
+			"Item",
+			[{ type: `spell`, name: `New Spell` }]
+		);
+	};
 
 	static async updateEmbeddedDocument($event) {
 		let data = $event.target.dataset;
diff --git a/styles/_vars.scss b/styles/_vars.scss
index 3642a93..8dee8c3 100644
--- a/styles/_vars.scss
+++ b/styles/_vars.scss
@@ -4,10 +4,22 @@ $title-font: 'Pixelify Sans', sans-serif;
 $body-font: sans-serif;
 $input-font: $body-font;
 $background: #f2f2f2;
+/*
+Greens:
+	Dark Cyan: #32908F, #048A81
+	Verdigris: #48A9A6
+	Cambridge Blue: #72BDA3
+	Carribean Current: #28666E
 
+Reds:
+	Indian Red: #C1666B
+	Persian Red: #C3423F
+	Wine: #7C3238
+	Penn Red: #960200
+*/
 
-$colour-confirm: #00aa00;
-$text-on-confirm: black;
+$colour-confirm: #048A81;
+$text-on-confirm: white;
 
 $colour-neutral: #007ACC;
 $text-on-neutral: white;
diff --git a/styles/global/buttons.scss b/styles/global/buttons.scss
index c05f40d..fe4237d 100644
--- a/styles/global/buttons.scss
+++ b/styles/global/buttons.scss
@@ -10,6 +10,10 @@
 		border-radius: 4px;
 		transition: 400ms;
 		padding: 4px 8px;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 4px;
 
 		&.confirm {
 			background: $colour-confirm;
diff --git a/styles/global/icons.scss b/styles/global/icons.scss
index 169b034..500ebca 100644
--- a/styles/global/icons.scss
+++ b/styles/global/icons.scss
@@ -2,6 +2,9 @@ $iconSizes: 12, 14, 16, 18, 20, 22, 24;
 
 .dotdungeon.dotdungeon.dotdungeon.dotdungeon {
 	.icon {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
 
 		// The various icon sizes
 		@each $size in $iconSizes {
diff --git a/templates/actors/char-sheet-mvp/panels/spells.pc.hbs b/templates/actors/char-sheet-mvp/panels/spells.pc.hbs
index a9ff818..4382259 100644
--- a/templates/actors/char-sheet-mvp/panels/spells.pc.hbs
+++ b/templates/actors/char-sheet-mvp/panels/spells.pc.hbs
@@ -65,11 +65,14 @@
 
 	<div class="flex-row">
 		<button
-			class="confirm add-spell equal-padding"
+			class="confirm add-spell"
 		>
-			<div class="icon icon--20">
+			<div aria-hidden="true" class="icon icon--20">
 				{{{ icons.create }}}
 			</div>
+			<span>
+				Add Spell
+			</span>
 		</button>
 	</div>
 {{/ dotdungeon.panel}}
\ No newline at end of file