diff --git a/apps/ssb.json b/apps/ssb.json
index d163e2f7..5df0743d 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "🐌",
- "previous": "&GHOyZaFBo5iHa8XumUpbdtDi2F0YhZaiF8cVsutdxTU=.sha256"
+ "previous": "&vEaOZjrNb0u9rhNqrQ8eU9TlOFlo4HsgW6hbI7VdIT0=.sha256"
}
diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index 9415f8be..7c10b8d8 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -358,7 +358,10 @@ class TfElement extends LitElement {
`;
let contents = !this.loaded
? this.loading
- ? html`
Loading...
`
+ ? html`
+ Loading...
+
+ ${this.render_tab()}`
: html`Select or create an identity.
`
: 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}
- ${tabs}
${this.tags.map(
(x) => html``
)}
diff --git a/apps/ssb/tf-styles.js b/apps/ssb/tf-styles.js
index e29ba61c..73e041f8 100644
--- a/apps/ssb/tf-styles.js
+++ b/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];