UX improvements on #instance

css/base.php

@@ -47,7 +47,29 @@ body {
 	box-shadow: 0px 0px .5em #0000004f;
 }
 .btn {
-	padding: .5em 1em;
+	padding: 1em 3em;
+	border: 1px solid #000000a1;
+	border-radius: .6em;
+	box-shadow: 0px 0px .2em #0009;
+}
+.btn:hover {
+	filter: brightness(95%);
+}
+.btn:active,
+.btn:focus {
+	filter: brightness(85%);
+}
+.btn.red {
+	background: #ffb5b5;
+	color: #9d0202;
+}
+.btn.green {
+	background: #c2ffb5;
+	color: #386f2c;
+}
+.btn.fit {
+	max-width: fit-content;
+	margin: auto;
 }
 button, .btn {
 	cursor: pointer;
@@ -137,7 +159,7 @@ a {
 	padding: 1em;
 	margin-bottom: 1em;
 	width: calc(100vw - 4em);
-	max-width: 40em;
+	max-width: 30em;
 }
 #window-instance #container #new-accounts .card > div {
 	margin-bottom: 1em;

js/templates/instance/new-account.html

@@ -1,7 +1,7 @@
 <div id="new-accounts"></div>
 <div id="new-accounts-item" data-id="user-{id}">
 	<div class="card">
-		<h4>{username}</h4>
+		<h4>@{username}</h4>
 		<div style="color:#686868">
 			<span>{email}</span>
 		</div>
@@ -16,9 +16,12 @@
 		<br>
 		<div class="flex">
 			<button onclick="window.view.instance.do.new_accounts.reject('{id}')"
-				class="btn w100">REJECT</button>
+				class="btn w100 fit red"><i
+					class="fa fa-close fa-fw"></i>&nbsp;REJECT</button>
+			<div style="width:1em"></div>
 			<button onclick="window.view.instance.do.new_accounts.approve('{id}')"
-				class="btn w100">ACCEPT</button>
+				class="btn w100 fit green"><i
+					class="fa fa-check fa-fw"></i>&nbsp;ACCEPT</button>
 		</div>
 	</div>
 </div>

views/instance.php

@@ -1,7 +1,7 @@
 <div class="hmax">
 	<div id="tabs"></div>
 	<div id="tabs-item" data-id="{id}">
-		<a href="javascript:window.view.instance.load_content('{id}')">
+		<a href="javascript:window.view.instance.load_content('{id}',true)">
 		<div class="tab-content">
 			<i class="fa fa-{icon} fa-fw"></i>
 			<span>{title}</span>
@@ -62,7 +62,8 @@ window.view.instance = {
 			});
 		},
 	},
-	load_content: function(content) {
+	load_content: function(content, hashload) {
+		hashload = hashload === undefined ? false : hashload;
 		switch (content) {
 			case 'home':
 				window.location.hash = '#home';
@@ -70,7 +71,8 @@ window.view.instance = {
 			case 'settings':
 				return window.view.instance.show_config();
 			default:
-				set_hash_argument('content', content);
+				if (hashload === true)
+					return set_hash_argument('content', content);
 				E.element('#window-instance #container').innerHTML = '';
 				return window.view.instance
 					.load[content.replaceAll('-','_')]();

views/instance_config.php

@@ -5,10 +5,11 @@
 		<br>
 		<div class="flex">
 			<button onclick="event.preventDefault();
-				window.history.back()"
-				class="btn w100">Cancel</button>
-			<input type="submit" class="btn w100"
-				value="Save configuration"/>
+				window.history.back()" class="btn"
+				><i class="fa fa-arrow-left fa-fw"></i>&nbsp;Cancel</button>
+			<div style="width:1em"></div>
+			<button class="btn"
+				><i class="fa fa-save fa-fw"></i>&nbsp;Save configuration</button>
 		</div>
 	</form>
 	<div id="config-item">