From 7a503fc282a529beb715f07467ee57df98675fb0 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 25 Apr 2022 15:34:19 -0700
Subject: [PATCH] Add auth icon to chat menu. Closes #1879

---
 webroot/js/components/chat/chat-menu.js |  4 ++--
 webroot/js/components/icons/AuthIcon.js | 22 ++++++++++++++++++++++
 webroot/js/components/icons/index.js    |  1 +
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 webroot/js/components/icons/AuthIcon.js

diff --git a/webroot/js/components/chat/chat-menu.js b/webroot/js/components/chat/chat-menu.js
index 2823c3bed..30f4e9fa3 100644
--- a/webroot/js/components/chat/chat-menu.js
+++ b/webroot/js/components/chat/chat-menu.js
@@ -2,7 +2,7 @@ import { h, createContext } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js';
 import UsernameForm from './username.js';
-import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js';
+import { ChatIcon, UserIcon, CaretDownIcon, AuthIcon } from '../icons/index.js';
 
 const html = htm.bind(h);
 
@@ -40,7 +40,7 @@ export const ChatMenu = (props) => {
     html`<li>
       <button type="button" id="chat-auth" onClick=${showAuthModal}>
         Authenticate
-        <span><${ChatIcon} /></span>
+        <span><${AuthIcon} /></span>
       </button>
     </li>`;
 
diff --git a/webroot/js/components/icons/AuthIcon.js b/webroot/js/components/icons/AuthIcon.js
new file mode 100644
index 000000000..931b11439
--- /dev/null
+++ b/webroot/js/components/icons/AuthIcon.js
@@ -0,0 +1,22 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const AuthIcon = ({ className }) => {
+  return html`
+    <svg
+      class="w-6 h-6"
+      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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+      ></path>
+    </svg>
+  `;
+};
diff --git a/webroot/js/components/icons/index.js b/webroot/js/components/icons/index.js
index 6b2e19b30..6bb2e5802 100644
--- a/webroot/js/components/icons/index.js
+++ b/webroot/js/components/icons/index.js
@@ -4,3 +4,4 @@ export { EditIcon } from './EditIcon.js';
 export { CheckIcon } from './CheckIcon.js';
 export { CloseIcon } from './CloseIcon.js';
 export { CaretDownIcon } from './CaretDownIcon.js';
+export { AuthIcon } from './AuthIcon.js';