From f3e108ceca3b77027f07d9a4931643a1d4a359ff Mon Sep 17 00:00:00 2001
From: Dale Davies <dale@daledavies.co.uk>
Date: Mon, 13 Mar 2023 16:34:49 +0000
Subject: [PATCH] Issue #67: Remove animated SVG background image from icons

---
 jumpapp/assets/css/src/_sites.scss       | 156 +++++++++++------------
 jumpapp/assets/images/loading-static.svg |  11 ++
 2 files changed, 88 insertions(+), 79 deletions(-)
 create mode 100644 jumpapp/assets/images/loading-static.svg

diff --git a/jumpapp/assets/css/src/_sites.scss b/jumpapp/assets/css/src/_sites.scss
index 982b9bd..c87aef0 100644
--- a/jumpapp/assets/css/src/_sites.scss
+++ b/jumpapp/assets/css/src/_sites.scss
@@ -6,89 +6,89 @@ $unknown-color: #ccc;
 
 
 @mixin sites-alternate {
-		width: 100%;
-		margin-top: 20px;
+	width: 100%;
+	margin-top: 20px;
 
-		li {
-			float: left;
-			width: 50%;
-			text-align: left;
-			padding: 0 15px;
-			margin-bottom: 10px;
+	li {
+		float: left;
+		width: 50%;
+		text-align: left;
+		padding: 0 15px;
+		margin-bottom: 10px;
 
-			a {
-				background-color: rgba(255,255,255,0.8);
-				box-shadow: 0 1px 5px rgba(0,0,0,.3);
-				padding: 8px;
-				width: 100%;
-				transition: background-color .1s, box-shadow .1s;
-				position: relative;
-				overflow: hidden;
-
-				&:hover {
-					background-color: #fff;
-					box-shadow: 0 1px 5px rgba(0,0,0,.6);
-				}
-			}
-		}
-
-		.icon {
-			width: 35px;
-			height: 35px !important;
-			display: inline-block;
-			padding: 0;
-			border: none;
-			border-radius: 6px;
-			overflow: hidden;
-			box-shadow: none;
-			vertical-align: middle;
-			margin: 0 8px 0 0;
-		}
-
-		.name {
-			width: auto;
-			display: inline-block;
-			vertical-align: middle;
-			text-shadow: none;
-			color: #202124;
-			position: absolute;
-			top: 50%;
-			height: 14px;
-			line-height: 14px;
-			margin-top: -7px;
-		}
-	}
-
-	@mixin status-sites-alternate {
-		li {
-			a {
-			padding-left: 11px;
+		a {
+			background-color: rgba(255,255,255,0.8);
+			box-shadow: 0 1px 5px rgba(0,0,0,.3);
+			padding: 8px;
+			width: 100%;
+			transition: background-color .1s, box-shadow .1s;
 			position: relative;
+			overflow: hidden;
 
-				&::before {
-					content: '';
-					display: inline-block;
-					height: 100%;
-					width: 4px;
-					position: absolute;
-					left: 0;
-					top: 0;
-					background-color: $unknown-color;
-				}
-			}
-
-			&.online a::before {
-				background-color: $online-color;
-			}
-			&.offline a::before {
-				background-color: $offline-color;
-			}
-			&.error a::before {
-				background-color: $error-color;
+			&:hover {
+				background-color: #fff;
+				box-shadow: 0 1px 5px rgba(0,0,0,.6);
 			}
 		}
 	}
 
+	.icon {
+		width: 35px;
+		height: 35px !important;
+		display: inline-block;
+		padding: 0;
+		border: none;
+		border-radius: 6px;
+		overflow: hidden;
+		box-shadow: none;
+		vertical-align: middle;
+		margin: 0 8px 0 0;
+	}
+
+	.name {
+		width: auto;
+		display: inline-block;
+		vertical-align: middle;
+		text-shadow: none;
+		color: #202124;
+		position: absolute;
+		top: 50%;
+		height: 14px;
+		line-height: 14px;
+		margin-top: -7px;
+	}
+}
+
+@mixin status-sites-alternate {
+	li {
+		a {
+		padding-left: 11px;
+		position: relative;
+
+			&::before {
+				content: '';
+				display: inline-block;
+				height: 100%;
+				width: 4px;
+				position: absolute;
+				left: 0;
+				top: 0;
+				background-color: $unknown-color;
+			}
+		}
+
+		&.online a::before {
+			background-color: $online-color;
+		}
+		&.offline a::before {
+			background-color: $offline-color;
+		}
+		&.error a::before {
+			background-color: $error-color;
+		}
+	}
+}
+
 .sites {
 	padding: 0;
 	margin: 0;
@@ -129,10 +129,10 @@ $unknown-color: #ccc;
 		box-shadow: 0 1px 5px rgba(0,0,0,.3);
 		padding: 15px;
 		margin-bottom: 8px;
-		background-image: url(../images/loading.svg);
+		background-image: url(../images/loading-static.svg);
 		background-repeat: no-repeat;
 		background-position: 50%;
-		background-size: 20px;
+		background-size: 25px;
 
 		img {
 			width: 100%;
@@ -192,7 +192,6 @@ $unknown-color: #ccc;
 }
 
 @media (max-width: 500px) {
-
 	.sites {
 		@include sites-alternate();
 
@@ -221,5 +220,4 @@ $unknown-color: #ccc;
 			}
 		}
 	}
-
 }
diff --git a/jumpapp/assets/images/loading-static.svg b/jumpapp/assets/images/loading-static.svg
new file mode 100644
index 0000000..4c2c5dc
--- /dev/null
+++ b/jumpapp/assets/images/loading-static.svg
@@ -0,0 +1,11 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <circle cx="4" cy="12" r="1" stroke="#aaa" stroke-width="2"/> <circle cx="12" cy="12" r="1" stroke="#aaa" stroke-width="2"/> <circle cx="20" cy="12" r="1" stroke="#aaa" stroke-width="2"/> </g>
+
+</svg>
\ No newline at end of file