Merge branch 'main' of https://dev.tildefriends.net/cory/tildefriends

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&GHOyZaFBo5iHa8XumUpbdtDi2F0YhZaiF8cVsutdxTU=.sha256"
+	"previous": "&vEaOZjrNb0u9rhNqrQ8eU9TlOFlo4HsgW6hbI7VdIT0=.sha256"
 }

apps/ssb/tf-app.js

@@ -358,7 +358,10 @@ class TfElement extends LitElement {
 		`;
 		let contents = !this.loaded
 			? this.loading
-				? html`<div>Loading...</div>`
+				? html`<div class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge">
+					Loading...
+				</div>
+				${this.render_tab()}`
 				: html`<div>Select or create an identity.</div>`
 			: this.render_tab();
 		return html`
@@ -366,8 +369,8 @@ class TfElement extends LitElement {
 				style="width: 100vw; min-height: 100vh; height: 100%"
 				class="w3-theme-dark"
 			>
+				${tabs}
 				<div style="padding: 8px">
-					${tabs}
 					${this.tags.map(
 						(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
 					)}

apps/ssb/tf-styles.js

@@ -286,29 +286,29 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 `;
 
 // prettier-ignore
-const w3_2016_snorkel_blue = css`
-.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important}
-.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important}
-.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important}
-.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important}
-.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important}
-.w3-theme-d1 {color:#fff !important; background-color:#024575 !important}
-.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important}
-.w3-theme-d3 {color:#fff !important; background-color:#02365b !important}
-.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important}
-.w3-theme-d5 {color:#fff !important; background-color:#012641 !important}
+const w3_2016_riverside = css`
+.w3-theme-l5 {color:#000 !important; background-color:#f4f6f9 !important}
+.w3-theme-l4 {color:#000 !important; background-color:#d9e1ec !important}
+.w3-theme-l3 {color:#000 !important; background-color:#b4c3d8 !important}
+.w3-theme-l2 {color:#fff !important; background-color:#8ea6c5 !important}
+.w3-theme-l1 {color:#fff !important; background-color:#6888b1 !important}
+.w3-theme-d1 {color:#fff !important; background-color:#456185 !important}
+.w3-theme-d2 {color:#fff !important; background-color:#3d5676 !important}
+.w3-theme-d3 {color:#fff !important; background-color:#354b68 !important}
+.w3-theme-d4 {color:#fff !important; background-color:#2e4059 !important}
+.w3-theme-d5 {color:#fff !important; background-color:#26364a !important}
 
-.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important}
-.w3-theme-dark {color:#fff !important; background-color:#012641 !important}
-.w3-theme-action {color:#fff !important; background-color:#012641 !important}
+.w3-theme-light {color:#000 !important; background-color:#f4f6f9 !important}
+.w3-theme-dark {color:#fff !important; background-color:#26364a !important}
+.w3-theme-action {color:#fff !important; background-color:#26364a !important}
 
-.w3-theme {color:#fff !important; background-color:#034f84 !important}
-.w3-text-theme {color:#034f84 !important}
-.w3-border-theme {border-color:#034f84 !important}
+.w3-theme {color:#fff !important; background-color:#4c6a92 !important}
+.w3-text-theme {color:#4c6a92 !important}
+.w3-border-theme {border-color:#4c6a92 !important}
 
-.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important}
-.w3-hover-text-theme:hover {color:#034f84 !important}
-.w3-hover-border-theme:hover {border-color:#034f84 !important}
+.w3-hover-theme:hover {color:#fff !important; background-color:#4c6a92 !important}
+.w3-hover-text-theme:hover {color:#4c6a92 !important}
+.w3-hover-border-theme:hover {border-color:#4c6a92 !important}
 `;
 
-export let styles = [tf, w3, w3_2016_snorkel_blue];
+export let styles = [tf, w3, w3_2016_riverside];