ssb: Choose an unread notification that is a bit mire color-agnostic.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&o2PXeddklapw00HJmK23zXGnBv5UVpv+njzUVC7Xn5E=.sha256"
+	"previous": "&2aHEnXfmAZgCJxML+RF6j63QIYnI4TR5QvqzCHSitNQ=.sha256"
 }

apps/ssb/tf-compose.js

@@ -563,6 +563,14 @@ class TfComposeElement extends LitElement {
 						🔐
 					</button>`;
 		let result = html`
+			<style>
+				.w3-input:empty::before {
+					content: attr(placeholder);
+				}
+				.w3-input:empty:focus::before {
+					content: '';
+				}
+			</style>
 			<div
 				class="w3-card-4 w3-theme-d4 w3-padding-small"
 				style="box-sizing: border-box"

apps/ssb/tf-tab-news.js

@@ -93,7 +93,7 @@ class TfTabNewsElement extends LitElement {
 			(this.channels_unread[channel] === undefined ||
 				this.channels_unread[channel] <= this.channels_latest[channel])
 		) {
-			return '🔵';
+			return '✉️ ';
 		}
 	}
 
@@ -158,19 +158,19 @@ class TfTabNewsElement extends LitElement {
 					href="#"
 					class="w3-bar-item w3-button"
 					style=${this.hash == '#' ? 'font-weight: bold' : undefined}
-					>general ${this.unread_status('')}</a
+					>${this.unread_status('')}general</a
 				>
 				<a
 					href="#@"
 					class="w3-bar-item w3-button"
 					style=${this.hash == '#@' ? 'font-weight: bold' : undefined}
-					>@mentions ${this.unread_status('@')}</a
+					>${this.unread_status('@')}@mentions</a
 				>
 				<a
 					href="#🔐"
 					class="w3-bar-item w3-button"
 					style=${this.hash == '#🔐' ? 'font-weight: bold' : undefined}
-					>🔐private ${this.unread_status('🔐')}</a
+					>${this.unread_status('🔐')}🔐private</a
 				>
 				${Object.keys(this.drafts)
 					.sort()
@@ -190,7 +190,7 @@ class TfTabNewsElement extends LitElement {
 							href=${'#' + encodeURIComponent('#' + x)}
 							class="w3-bar-item w3-button"
 							style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}
-							>#${x} ${this.unread_status(x)}</a
+							>${this.unread_status(x)}#${x}</a
 						>
 					`
 				)}
@@ -239,13 +239,6 @@ class TfTabNewsElement extends LitElement {
 				class="w3-main"
 			>
 				<div style="padding: 8px">
-					<div
-						id="show_sidebar"
-						class="w3-left w3-button w3-hide-large"
-						@click=${this.show_sidebar}
-					>
-						&#9776;
-					</div>
 					<p>
 						${this.hash.startsWith('##')
 							? html`
@@ -260,7 +253,14 @@ class TfTabNewsElement extends LitElement {
 								`
 							: undefined}
 					</p>
-					<div class="w3-bar">
+					<div>
+						<div
+							id="show_sidebar"
+							class="w3-button w3-hide-large"
+							@click=${this.show_sidebar}
+						>
+							&#9776;
+						</div>
 						Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
 						${edit_profile}
 					</div>