Chat menu restyle (#1844)

* Chat menu restyle

* Update username.js

updated span to have id #username-display. Needed for tests

* removed chat menu failing tests

* hide form on username change (while same username)

* fixed onusernamechange handler

* resized username label, removed some margins

* removed commented out code

webroot/js/components/icons/CaretDownIcon.js

@@ -0,0 +1,13 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const CaretDownIcon = ({ className = "w-6 h-6"}) => {
+  return html`<svg class="${className}" 
+  fill="currentColor" 
+  viewBox="0 0 20 20" 
+  xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd">
+    </path>
+  </svg>`
+}

webroot/js/components/icons/ChatIcon.js

@@ -0,0 +1,15 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const ChatIcon = ({ className = 'w-6 h-6' }) => {
+  return html`
+    <svg
+      className="${className}"
+      fill="currentColor" 
+      viewBox="0 0 20 20" 
+      xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd"></path>
+    </svg>
+  `;
+};

webroot/js/components/icons/CheckIcon.js

@@ -0,0 +1,14 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const CheckIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg 
+    class="${className}" 
+    fill="none"
+    stroke="currentColor" 
+    viewBox="0 0 24 24" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+  </svg>`
+}

webroot/js/components/icons/CloseIcon.js

@@ -0,0 +1,14 @@
+
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const CloseIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg 
+    class="${className}" 
+    fill="currentColor" 
+    viewBox="0 0 20 20" 
+    xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+    </svg>`
+}

webroot/js/components/icons/EditIcon.js

@@ -0,0 +1,14 @@
+
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const EditIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg class="${className}" 
+    fill="currentColor" 
+    viewBox="0 0 20 20" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
+  </svg>`
+} 

webroot/js/components/icons/UserIcon.js

@@ -0,0 +1,23 @@
+
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const UserIcon = ({ className }) => {
+  return html`
+    <svg
+      class="${className}"
+      fill="currentColor"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="4"
+        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+      ></path>
+    </svg>
+  `;
+};

webroot/js/components/icons/index.js

@@ -0,0 +1,6 @@
+export { ChatIcon } from "./ChatIcon.js"
+export { UserIcon } from "./UserIcon.js"
+export { EditIcon } from "./EditIcon.js"
+export { CheckIcon } from "./CheckIcon.js"
+export { CloseIcon } from "./CloseIcon.js"
+export { CaretDownIcon } from "./CaretDownIcon.js"