fix placehodler style, fix chat panel cookieing

webroot/js/app2.js

@@ -1,4 +1,4 @@
-import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
@@ -11,6 +11,8 @@ import { OwncastPlayer } from './player.js';
 
 import {
   getLocalStorage,
+  setLocalStorage,
+  clearLocalStorage,
   generateAvatar,
   generateUsername,
   URL_OWNCAST,
@@ -25,7 +27,7 @@ import {
   MESSAGE_OFFLINE,
   MESSAGE_ONLINE,
 } from './utils.js';
-import { KEY_USERNAME, KEY_AVATAR,  } from './utils/chat.js';
+import { KEY_USERNAME, KEY_AVATAR, KEY_CHAT_DISPLAYED } from './utils/chat.js';
 
 export default class App extends Component {
   constructor(props, context) {
@@ -33,7 +35,7 @@ export default class App extends Component {
 
     this.state = {
       websocket: new Websocket(),
-      displayChat: false, // chat panel state
+      displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state
       chatEnabled: false, // chat input box state
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
       userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
@@ -274,8 +276,15 @@ export default class App extends Component {
 
   handleChatPanelToggle() {
     const { displayChat: curDisplayed } = this.state;
+
+    const displayChat = !curDisplayed;
+    if (displayChat) {
+      setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
+		} else {
+			clearLocalStorage(KEY_CHAT_DISPLAYED);
+		}
     this.setState({
-      displayChat: !curDisplayed,
+      displayChat,
     });
   }
 

webroot/js/chat/chat-input.js

@@ -239,6 +239,7 @@ export default class ChatInput extends Component {
         <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
 
           <${ContentEditable}
+            id="message-input"
             class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
 
             placeholderText=${placeholderText}

webroot/js/chat/message.js

@@ -27,10 +27,10 @@ export default class Message extends Component {
             >
               <img src=${avatar} />
             </div>
-            <div class="message-content">
+            <div class="message-content text-sm">
               <p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
               <div
-                class="message-text text-gray-400 font-thin"
+                class="message-text text-gray-300 font-normal"
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }
@@ -43,9 +43,11 @@ export default class Message extends Component {
       return (
         html`
           <div class="message flex">
-            <img class="mr-2" src=${image} />
-            <div class="text-white text-center">
-              <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+            <div class="message-content text-sm">
+              <img class="mr-2" src=${image} />
+              <div class="text-white text-center">
+                <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+              </div>
             </div>
           </div>
         `);

webroot/js/utils.js

@@ -15,8 +15,6 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE
 export const MESSAGE_OFFLINE = 'Stream is offline.';
 export const MESSAGE_ONLINE = 'Stream is online';
 
-
-
 export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
 
 export function getLocalStorage(key) {