From b2c8458e5db131b4405ae2a18c32bd9642646bd5 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Thu, 15 Dec 2022 18:28:12 -0800
Subject: [PATCH] add action icons, set action icons depending on instance
 status

---
 images/actions/config-active.svg   | 16 ++++++++++++++++
 images/actions/config-inactive.svg | 16 ++++++++++++++++
 images/actions/start.svg           |  1 +
 images/actions/stop.svg            |  7 +++++++
 index.html                         |  4 ++--
 scripts/elements.js                |  5 ++++-
 6 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 images/actions/config-active.svg
 create mode 100644 images/actions/config-inactive.svg
 create mode 100644 images/actions/start.svg
 create mode 100644 images/actions/stop.svg

diff --git a/images/actions/config-active.svg b/images/actions/config-active.svg
new file mode 100644
index 0000000..6627ac4
--- /dev/null
+++ b/images/actions/config-active.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 229.034 229.034" style="enable-background:new 0 0 229.034 229.034;" xml:space="preserve">
+<path style="fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" d="M218.411,167.068l-70.305-70.301l9.398-35.073c0.693-2.588-0.046-5.35-1.94-7.245L103.311,2.197
+	c-1.895-1.895-4.656-2.635-7.245-1.941L56.812,10.774c-2.588,0.694-4.609,2.715-5.303,5.303c-0.693,2.588,0.046,5.35,1.941,7.245
+	l39.259,39.262L86.345,86.34l-23.751,6.363l-39.263-39.26c-1.895-1.894-4.655-2.635-7.245-1.94c-2.588,0.693-4.61,2.715-5.303,5.303
+	L0.266,96.059c-0.693,2.588,0.046,5.349,1.941,7.244l52.249,52.255c1.895,1.895,4.657,2.635,7.245,1.941l35.076-9.4l70.302,70.306
+	c6.854,6.854,15.968,10.628,25.662,10.629h0.001c9.695,0,18.81-3.776,25.665-10.631C232.56,204.252,232.563,181.225,218.411,167.068
+	z M207.8,207.795c-4.022,4.024-9.37,6.239-15.058,6.239c-0.001,0-0.001,0-0.002,0c-5.688,0-11.035-2.215-15.056-6.236
+	l-73.363-73.367c-1.425-1.425-3.34-2.197-5.304-2.197c-0.647,0-1.299,0.083-1.941,0.255l-35.076,9.4L15.875,95.758l6.035-22.523
+	l33.139,33.137c1.895,1.894,4.654,2.635,7.244,1.941l32.116-8.604c2.588-0.693,4.61-2.715,5.304-5.304l8.606-32.121
+	c0.693-2.588-0.046-5.35-1.941-7.244L73.242,21.901l22.524-6.036l46.128,46.129l-9.398,35.073c-0.694,2.588,0.046,5.35,1.941,7.245
+	l73.365,73.361C216.107,185.98,216.106,199.492,207.8,207.795z"/>
+</svg>
\ No newline at end of file
diff --git a/images/actions/config-inactive.svg b/images/actions/config-inactive.svg
new file mode 100644
index 0000000..5e595cf
--- /dev/null
+++ b/images/actions/config-inactive.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 229.034 229.034" style="enable-background:new 0 0 229.034 229.034;" xml:space="preserve">
+<path style="fill: rgb(128,128,128); fill-rule: nonzero; opacity: 1;" d="M218.411,167.068l-70.305-70.301l9.398-35.073c0.693-2.588-0.046-5.35-1.94-7.245L103.311,2.197
+	c-1.895-1.895-4.656-2.635-7.245-1.941L56.812,10.774c-2.588,0.694-4.609,2.715-5.303,5.303c-0.693,2.588,0.046,5.35,1.941,7.245
+	l39.259,39.262L86.345,86.34l-23.751,6.363l-39.263-39.26c-1.895-1.894-4.655-2.635-7.245-1.94c-2.588,0.693-4.61,2.715-5.303,5.303
+	L0.266,96.059c-0.693,2.588,0.046,5.349,1.941,7.244l52.249,52.255c1.895,1.895,4.657,2.635,7.245,1.941l35.076-9.4l70.302,70.306
+	c6.854,6.854,15.968,10.628,25.662,10.629h0.001c9.695,0,18.81-3.776,25.665-10.631C232.56,204.252,232.563,181.225,218.411,167.068
+	z M207.8,207.795c-4.022,4.024-9.37,6.239-15.058,6.239c-0.001,0-0.001,0-0.002,0c-5.688,0-11.035-2.215-15.056-6.236
+	l-73.363-73.367c-1.425-1.425-3.34-2.197-5.304-2.197c-0.647,0-1.299,0.083-1.941,0.255l-35.076,9.4L15.875,95.758l6.035-22.523
+	l33.139,33.137c1.895,1.894,4.654,2.635,7.244,1.941l32.116-8.604c2.588-0.693,4.61-2.715,5.304-5.304l8.606-32.121
+	c0.693-2.588-0.046-5.35-1.941-7.244L73.242,21.901l22.524-6.036l46.128,46.129l-9.398,35.073c-0.694,2.588,0.046,5.35,1.941,7.245
+	l73.365,73.361C216.107,185.98,216.106,199.492,207.8,207.795z"/>
+</svg>
\ No newline at end of file
diff --git a/images/actions/start.svg b/images/actions/start.svg
new file mode 100644
index 0000000..6f1003a
--- /dev/null
+++ b/images/actions/start.svg
@@ -0,0 +1 @@
+<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path style="fill: rgb(0,255,0); fill-rule: nonzero; opacity: 1;" d="M4.25 3l1.166-.624 8 5.333v1.248l-8 5.334-1.166-.624V3zm1.5 1.401v7.864l5.898-3.932L5.75 4.401z"/></svg>
\ No newline at end of file
diff --git a/images/actions/stop.svg b/images/actions/stop.svg
new file mode 100644
index 0000000..75ffb4d
--- /dev/null
+++ b/images/actions/stop.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
+<path style="fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;" id="XMLID_494_" d="M315,0H15C6.716,0,0,6.716,0,15v300c0,8.284,6.716,15,15,15h300c8.284,0,15-6.716,15-15V15
+	C330,6.716,323.284,0,315,0z M300,300H30V30h270V300z"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 2f58f07..5466384 100644
--- a/index.html
+++ b/index.html
@@ -46,8 +46,8 @@
 			</div>
 			<hr>
 			<div class="btn-group">
-				<button type="button" id="power-btn"></button>
-				<button type="button" id="configure-btn">Config</button>
+				<img id="power-btn">
+				<img id="configure-btn">
 			</div>
 		</article>
 	</template>
diff --git a/scripts/elements.js b/scripts/elements.js
index 71fce14..3ce233e 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -51,7 +51,10 @@ class Instance extends HTMLElement {
 		resourceDISK.innerText = (data.maxdisk / 1073741824).toFixed(3);
 
 		let powerButton = this.shadowElement.querySelector("#power-btn");
-		powerButton.innerText = data.status === "running" ? "Shutdown" : "Start"
+		powerButton.src = data.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
+	
+		let configButton = this.shadowElement.querySelector("#configure-btn");
+		configButton.src = data.status === "running" ? "images/actions/config-inactive.svg" : "images/actions/config-active.svg";
 	}
 }