layout: highlight kind 0 name and dummy profile pics

- added experimental dummy profile pics
- highlight kind 0 usernames
- improved dark mode colors

src/cards.css

@@ -1,12 +1,17 @@
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
 .mbox {
-  --profileimg-size: 5rem;
+  --profileimg-size: 4rem;
   align-items: center;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin-bottom: 1rem;
-  padding: 0 calc(.25 * var(--gap));
+  padding: 0 var(--gap);
+}
+@media (orientation: portrait) {
+  .mbox {
+    padding: 0 calc(.5 * var(--gap));
+  }
 }
 .mbox:last-child {
   margin-bottom: 0;
@@ -31,9 +36,6 @@
   position: relative;
   z-index: 2;
 }
-.mbox-img img {
-  max-width: 100%;
-}
 
 .mbox-updated-contact .mbox-img,
 .mbox-recommend-server .mbox-img {
@@ -62,6 +64,10 @@
   color: var(--color-accent);
 }
 
+.mbox-kind0-name {
+  color: var(--color);
+}
+
 .mbox-updated-contact .mbox-body,
 .mbox-recommend-server .mbox-body {
   display: block;

src/form.css

@@ -145,7 +145,7 @@ button:disabled {
 .form-status {
   flex-basis: 100%;
   flex-grow: 1;
-  padding: 1rem 1.8rem;
+  padding: var(--padding);
 }
 
 .form-inline {
@@ -154,9 +154,11 @@ button:disabled {
   flex-direction: row;
   flex-grow: 1;
   flex-wrap: wrap;
-  gap: 0 var(--gap);
   padding: 0;
 }
+.form-inline * + * {
+  margin-left: var(--gap);
+}
 .cards .form-inline button,
 .cards .form-inline input[type="text"],
 .cards .form-inline textarea {
@@ -189,6 +191,7 @@ button[name="back"] {
 }
 
 #sendstatus {
+  margin-left: 0;
   order: 1;
 }
 

src/index.html

@@ -23,7 +23,7 @@
         <div class="tab-content">
           <artcile>
             <svg id="bubble" xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 80.035 70.031">
-              <path fill="var(--bgcolor-textinput)" stroke="currentColor" stroke-width="4.927" d="M2.463 31.824q0-4.789 1.893-9.248 1.892-4.46 5.361-8.087 3.47-3.626 8.07-6.333 4.598-2.707 10.324-4.2 5.727-1.493 11.836-1.493 6.107 0 11.834 1.492 5.725 1.494 10.325 4.2 4.599 2.708 8.07 6.334 3.47 3.627 5.362 8.087 1.891 4.46 1.891 9.248 0 5.97-2.967 11.384-2.967 5.414-7.982 9.336-5.015 3.922-11.957 6.248-6.94 2.325-14.576 2.325-7.463 0-14.334-2.221l-8.537 6.038q-4.789 3.02-6.733 1.752-1.943-1.266-.867-7.13l1.77-8.886q-4.2-3.887-6.49-8.71-2.29-4.825-2.29-10.136Z"/>
+              <path fill="var(--bgcolor-textinput)" stroke="currentColor" stroke-width="2" d="M2.463 31.824q0-4.789 1.893-9.248 1.892-4.46 5.361-8.087 3.47-3.626 8.07-6.333 4.598-2.707 10.324-4.2 5.727-1.493 11.836-1.493 6.107 0 11.834 1.492 5.725 1.494 10.325 4.2 4.599 2.708 8.07 6.334 3.47 3.627 5.362 8.087 1.891 4.46 1.891 9.248 0 5.97-2.967 11.384-2.967 5.414-7.982 9.336-5.015 3.922-11.957 6.248-6.94 2.325-14.576 2.325-7.463 0-14.334-2.221l-8.537 6.038q-4.789 3.02-6.733 1.752-1.943-1.266-.867-7.13l1.77-8.886q-4.2-3.887-6.49-8.71-2.29-4.825-2.29-10.136Z"/>
             </svg>
             <div id="newMessage" hidden>
               <form action="#" id="writeForm" class="form-inline">

src/main.css

@@ -40,11 +40,11 @@
 @media (prefers-color-scheme: dark) {
   html {
     --bgcolor: #191919;
-    --bgcolor-accent: #1e437d;
+    --bgcolor-accent: rgb(16, 93, 176);
     --bgcolor-inactive: #434343;
     --bgcolor-textinput: #0e0e0e;
-    --color: #fff;
-    --color-accent: #bbb;;
+    --color: #e3e3e3;
+    --color-accent: #7b7b7b;
     --bgcolor-danger: rgb(169, 0, 0);
   }
 
@@ -83,6 +83,11 @@ time {
   font-size: var(--font-small);
 }
 
+canvas,
+img {
+  max-width: 100%;
+}
+
 .danger {
   background-color: var(--bgcolor-danger);
 }

src/main.js

@@ -153,8 +153,21 @@ setInterval(() => {
   });
 }, 10000);
 
+
+const elemCanvas = (text) => {
+  const canvas = elem('canvas', {height: 80, width: 80});
+  const context = canvas.getContext('2d');
+  context.fillStyle = `#${text.slice(0, 6)}`;
+  context.fillRect(0, 0, 80, 80);
+  context.fillStyle = '#111';
+  context.fillRect(0, 50, 80, 32);
+  context.font = 'bold 18px monospace';
+  context.fillText(text, 2, 46);
+  return canvas;
+}
+
 function createTextNote(evt, relay) {
-  const {host, img, isReply, replies, time, userName} = getMetadata(evt, relay);
+  const {host, img, isReply, name, replies, time, userName} = getMetadata(evt, relay);
   const isLongContent = evt.content.trimRight().length > 280;
   const content = isLongContent ? `${evt.content.slice(0, 280)}…` : evt.content;
   const hasReactions = reactionMap[evt.id]?.length > 0;
@@ -168,7 +181,7 @@ function createTextNote(evt, relay) {
       ${isReply ? `\nReply to ${evt.tags[0][1]}\n` : ''}`
     }, [
       elem('small', {}, [
-        elem('strong', {className: 'mbox-username'}, userName),
+        elem('strong', {className: name ? 'mbox-kind0-name' : 'mbox-username'}, name || userName),
         ' ',
         elem('time', {dateTime: time.toISOString()}, formatTime(time)),
       ]),
@@ -197,7 +210,7 @@ function createTextNote(evt, relay) {
     requestAnimationFrame(() => updateElemHeight(writeInput));
   }
   return rendernArticle([
-    elem('div', {className: 'mbox-img'}, [img]), body,
+    elem('div', {className: 'mbox-img'}, [(name && img) ? img : elemCanvas(userName)]), body,
     replies[0] ? elem('div', {className: 'mobx-replies'}, replyFeed.reverse()) : '',
   ]);
 }
@@ -376,7 +389,8 @@ function getMetadata(evt, relay) {
   const host = getHost(relay);
   const user = userList.find(user => user.pubkey === evt.pubkey);
   const userImg = user?.picture || 'assets/bubble.svg';
-  const userName = user?.metadata[relay]?.name || evt.pubkey.slice(0, 8);
+  const name = user?.metadata[relay]?.name;
+  const userName = name || evt.pubkey.slice(0, 8);
   const userAbout = user?.metadata[relay]?.about || '';
   const img = elem('img', {
     src: userImg,
@@ -386,7 +400,7 @@ function getMetadata(evt, relay) {
   const isReply = evt.tags.some(hasEventTag);
   const replies = replyList.filter((reply) => reply.tags[0][1] === evt.id);
   const time = new Date(evt.created_at * 1000);
-  return {host, img, isReply, replies, time, userName};
+  return {host, img, isReply, name, replies, time, userName};
 }
 
 // reply