From 6524da9a9a1836d59cb59832598b558c66e2d319 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 31 Jul 2023 16:03:40 +0100
Subject: [PATCH] Add feedback link

---
 src/components/TeamSidebar.tsx | 25 ++++++++++++++++++++++++-
 src/icons/chat.svg             |  1 +
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/icons/chat.svg

diff --git a/src/components/TeamSidebar.tsx b/src/components/TeamSidebar.tsx
index a678858ca..c01506c87 100644
--- a/src/components/TeamSidebar.tsx
+++ b/src/components/TeamSidebar.tsx
@@ -4,6 +4,7 @@ import ChevronDown from '../icons/dropdown.svg';
 import { useTeamId } from '../hooks/use-team-id';
 import TeamProgress from '../icons/team-progress.svg';
 import SettingsIcon from '../icons/cog.svg';
+import ChatIcon from '../icons/chat.svg';
 import MapIcon from '../icons/map.svg';
 import GroupIcon from '../icons/group.svg';
 import { useState } from 'preact/hooks';
@@ -19,6 +20,8 @@ export const TeamSidebar: FunctionalComponent<{
 
   const { teamId } = useTeamId();
 
+  const feedbackFormLink = 'https://forms.gle/g9h6yEqsG4y1hQUv5';
+
   const sidebarLinks = [
     {
       title: 'Progress',
@@ -100,6 +103,21 @@ export const TeamSidebar: FunctionalComponent<{
                 </li>
               );
             })}
+
+            <li>
+              <a
+                  href={feedbackFormLink}
+                  target={'_blank'}
+                  class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
+              >
+                <img
+                    alt={'menu icon'}
+                    src={ChatIcon}
+                    className="mr-2 h-4 w-4"
+                />
+                Send Feedback
+              </a>
+            </li>
           </ul>
         )}
       </div>
@@ -127,7 +145,7 @@ export const TeamSidebar: FunctionalComponent<{
                           <img
                             alt="menu icon"
                             src={sidebarLink.icon}
-                            className="mr-2 h-4 w-4"
+                            className="relative top-[2px] mr-2 h-4 w-4"
                           />
                           {sidebarLink.title}
                         </span>
@@ -143,6 +161,11 @@ export const TeamSidebar: FunctionalComponent<{
                 );
               })}
             </ul>
+
+            <a href={feedbackFormLink} target={'_blank'} className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-gray-500 text-sm hover:text-black transition-colors hover:border-gray-300 hover:bg-gray-50">
+              <img src={ChatIcon} className="mr-2 h-4 w-4" />
+              Send Feedback
+            </a>
           </nav>
         </aside>
         <div className="grow px-0 py-0 md:px-10 md:py-10">{children}</div>
diff --git a/src/icons/chat.svg b/src/icons/chat.svg
new file mode 100644
index 000000000..7ae401da7
--- /dev/null
+++ b/src/icons/chat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>
\ No newline at end of file