From 7d28376cece1fa1f82cb1594ea6e975612e70ca0 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@noreply.localhost>
Date: Tue, 10 Feb 2026 23:04:49 -0700
Subject: [PATCH] Update the save changes button to be more inline with the
 rest of Foundry

---
 assets/icons/save.svg                        |  1 +
 styles/apps/StatusEffectIconConfig.css       | 25 ++++++++++++++++++++
 styles/components/icon.css                   | 23 ++++++++++++++++++
 styles/components/svg-loader.css             | 22 +++++++++++++++++
 templates/StatusEffectIconConfig/effects.hbs |  8 ++++---
 templates/StatusEffectIconConfig/footer.hbs  | 12 +++++++---
 6 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 assets/icons/save.svg
 create mode 100644 styles/components/icon.css
 create mode 100644 styles/components/svg-loader.css

diff --git a/assets/icons/save.svg b/assets/icons/save.svg
new file mode 100644
index 0000000..da68b4f
--- /dev/null
+++ b/assets/icons/save.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m56.133 34.207 8.082-.004a2.414 2.414 0 0 0 2.41-2.41l-.012-16.227A2.406 2.406 0 0 0 64.2 13.16l-8.078.004a2.41 2.41 0 0 0-2.41 2.41l.012 16.23a2.41 2.41 0 0 0 2.41 2.402z"/><path d="M92.758 22.266c-.004-1.555-.375-2.832-1.379-3.828-.644-.645-7.7-7.691-11.328-11.316C78.774 5.852 76.371 5 74.582 5s-60.258.039-60.258.039A7.13 7.13 0 0 0 7.2 12.173l.051 75.703A7.13 7.13 0 0 0 14.383 95l71.289-.047a7.126 7.126 0 0 0 7.125-7.133c.004 0-.04-64.594-.04-65.555zM71.02 9.414l.016 24.371c0 2.117-2.18 4.148-4.297 4.148l-30.977.02c-2.117 0-4.106-2.027-4.106-4.145l-.015-24.367zm9.781 78.281H19.2V53.652c0-2.562 1.992-4.644 4.45-4.644h52.7c2.461 0 4.45 2.078 4.45 4.644z"/></svg>
\ No newline at end of file
diff --git a/styles/apps/StatusEffectIconConfig.css b/styles/apps/StatusEffectIconConfig.css
index 4298e7c..0a247dc 100644
--- a/styles/apps/StatusEffectIconConfig.css
+++ b/styles/apps/StatusEffectIconConfig.css
@@ -1,4 +1,25 @@
 .oft.StatusEffectIconConfig {
+	> .window-content {
+		gap: 1rem;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: row;
+
+		> * {
+			flex-grow: 1;
+		}
+
+		button {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+			height: initial;
+			padding: 8px 16px;
+		}
+	}
+
 	.effect-list {
 		list-style-type: none;
 		padding: 0;
@@ -8,6 +29,10 @@
 		gap: 16px;
 	}
 
+	.placeholder {
+		font-style: italic;
+	}
+
 	.effect {
 		display: flex;
 		flex-direction: row;
diff --git a/styles/components/icon.css b/styles/components/icon.css
new file mode 100644
index 0000000..31ddda5
--- /dev/null
+++ b/styles/components/icon.css
@@ -0,0 +1,23 @@
+:host {
+	display: inline-block;
+}
+
+div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+svg {
+	width: var(--size, 1rem);
+	height: var(--size, 1rem);
+	fill: var(--fill);
+}
+
+path {
+	stroke: var(--stroke);
+	stroke-width: var(--stroke-width);
+	stroke-linejoin: var(--stroke-linejoin);
+}
diff --git a/styles/components/svg-loader.css b/styles/components/svg-loader.css
new file mode 100644
index 0000000..b843bc5
--- /dev/null
+++ b/styles/components/svg-loader.css
@@ -0,0 +1,22 @@
+:host {
+	display: inline-block;
+}
+
+div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+svg {
+	fill: var(--fill);
+	stroke: var(--stroke);
+}
+
+path {
+	stroke: var(--stroke);
+	stroke-width: var(--stroke-width);
+	stroke-linejoin: var(--stroke-linejoin);
+}
diff --git a/templates/StatusEffectIconConfig/effects.hbs b/templates/StatusEffectIconConfig/effects.hbs
index dffda0e..46946ef 100644
--- a/templates/StatusEffectIconConfig/effects.hbs
+++ b/templates/StatusEffectIconConfig/effects.hbs
@@ -1,4 +1,4 @@
-<div class="scrollable">
+<main class="scrollable">
 	{{#if effects}}
 		<ul class="effect-list">
 			{{#each effects as | effect |}}
@@ -37,6 +37,8 @@
 			{{/each}}
 		</ul>
 	{{else}}
-		{{ localize "OFT.apps.StatusEffectIconConfig.no-status-effects" }}
+		<div class="placeholder">
+			{{ localize "OFT.apps.StatusEffectIconConfig.no-status-effects" }}
+		</div>
 	{{/if}}
-</div>
+</main>
diff --git a/templates/StatusEffectIconConfig/footer.hbs b/templates/StatusEffectIconConfig/footer.hbs
index 895d733..54f5fff 100644
--- a/templates/StatusEffectIconConfig/footer.hbs
+++ b/templates/StatusEffectIconConfig/footer.hbs
@@ -1,5 +1,11 @@
-<div>
+<footer>
 	<button type="submit">
-		Save
+		<oft-icon
+			name="icons/save"
+			aria-hidden="true"
+			var:fill="currentColor"
+			var:size="1.25rem"
+		></oft-icon>
+		{{ localize "Save Changes" }}
 	</button>
-</div>
+</footer>