From 15535278612b6a4061adea624e09a4beac417403 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 22 Aug 2022 16:11:55 +0200
Subject: [PATCH] feat(ui) - support link

---
 .../shared/SupportCallout/SupportCallout.tsx  | 14 ++++-----
 frontend/app/svg/slack-help.svg               | 31 +++++++++++++++++++
 2 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 frontend/app/svg/slack-help.svg

diff --git a/frontend/app/components/shared/SupportCallout/SupportCallout.tsx b/frontend/app/components/shared/SupportCallout/SupportCallout.tsx
index 951c98274..b37b64616 100644
--- a/frontend/app/components/shared/SupportCallout/SupportCallout.tsx
+++ b/frontend/app/components/shared/SupportCallout/SupportCallout.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import SlackIcon from '../../../svg/integrations/slack.svg';
+import SlackIcon from '../../../svg/slack-help.svg';
 import { Popup } from 'UI';
 
 function SupportCallout() {
   return (
-    <Popup content="" delay={0}>
-      <a href="https://slack.openreplay.com" target="_blank">
-        <div className="w-12 h-12 rounded-full bg-white border absolute z-50 cursor-pointer p-2 shadow right-0 bottom-0 m-4 hover:shadow-lg">
+    <a href="https://slack.openreplay.com" target="_blank">
+      <div className="w-12 h-12 absolute z-50 cursor-pointer right-0 bottom-0 m-4">
+        <Popup content="OpenReplay community" delay={0}>
           <img src={SlackIcon} />
-        </div>
-      </a>
-    </Popup>
+        </Popup>
+      </div>
+    </a>
   );
 }
 
diff --git a/frontend/app/svg/slack-help.svg b/frontend/app/svg/slack-help.svg
new file mode 100644
index 000000000..d2e3c0382
--- /dev/null
+++ b/frontend/app/svg/slack-help.svg
@@ -0,0 +1,31 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="4.13794" width="82.7586" height="82.7586" rx="41.3793" fill="#394EFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3373 34.6699C25.1254 34.6699 24.144 33.6586 24.3317 32.4638C25.5052 25.2052 31.0356 19.9138 40.6326 19.9138C50.2339 19.9138 56.7073 25.7173 56.7073 33.633C56.7073 39.3682 53.8696 43.3964 49.0689 46.3195C44.375 49.1316 43.035 51.0903 43.035 54.8967V55.0247C43.035 55.5906 42.8102 56.1332 42.4101 56.5334C42.01 56.9335 41.4673 57.1583 40.9014 57.1583H37.6156C37.0534 57.1583 36.514 56.9365 36.1144 56.5409C35.7149 56.1454 35.4876 55.6082 35.482 55.046L35.4692 54.1926C35.2857 48.9823 37.5047 45.6538 42.4888 42.6198C46.8841 39.9229 48.4502 37.7765 48.4502 33.9658C48.4502 29.7882 45.2156 26.7201 40.2315 26.7201C35.9258 26.7201 32.9345 28.9774 31.9615 32.7027C31.6799 33.7866 30.7753 34.6699 29.6572 34.6699H26.3416H26.3373ZM39.2287 71.1207C41.8829 71.1207 43.9013 69.098 43.9013 66.4694C43.9013 63.8323 41.8829 61.8096 39.2287 61.8096C36.6427 61.8096 34.5902 63.8323 34.5902 66.4652C34.5902 69.098 36.6427 71.1207 39.2287 71.1207Z" fill="white"/>
+<rect x="52.3045" y="49.2005" width="37.116" height="37.116" rx="18.558" fill="white"/>
+<g clip-path="url(#clip0_1722_10246)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.2892 54.4204C65.8183 54.4204 64.626 55.6151 64.626 57.0889C64.626 58.5627 65.8183 59.7574 67.2892 59.7574H69.9524V57.0889C69.9524 55.6151 68.7601 54.4204 67.2892 54.4204Z" fill="#36C5F0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.2886 61.5366H60.1867C58.7158 61.5366 57.5234 62.7313 57.5234 64.2051C57.5234 65.6789 58.7158 66.8736 60.1867 66.8736H67.2886C68.7595 66.8736 69.9518 65.6789 69.9518 64.2051C69.9518 62.7313 68.7595 61.5366 67.2886 61.5366Z" fill="#36C5F0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.1554 64.2051C84.1554 62.7313 82.963 61.5366 81.4922 61.5366C80.0214 61.5366 78.8291 62.7313 78.8291 64.2051V66.8736H81.4922C82.963 66.8736 84.1554 65.6789 84.1554 64.2051Z" fill="#2EB67D"/>
+<mask id="mask0_1722_10246" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="71" y="54" width="7" height="28">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.7266 54.4207H77.0529V81.0978H71.7266V54.4207Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1722_10246)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.0529 64.2052V57.0892C77.0529 55.6154 75.8606 54.4207 74.3898 54.4207C72.9189 54.4207 71.7266 55.6154 71.7266 57.0892V64.2052C71.7266 65.679 72.9189 66.8737 74.3898 66.8737C75.8606 66.8737 77.0529 65.679 77.0529 64.2052Z" fill="#2EB67D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.3898 81.1057C75.8606 81.1057 77.0529 79.9111 77.0529 78.4373C77.0529 76.9634 75.8606 75.7688 74.3898 75.7688H71.7266V78.4373C71.7266 79.9111 72.9189 81.1057 74.3898 81.1057Z" fill="#ECB22E"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.3908 73.9894H81.4927C82.9635 73.9894 84.1558 72.7946 84.1558 71.3208C84.1558 69.847 82.9635 68.6523 81.4927 68.6523H74.3908C72.9199 68.6523 71.7275 69.847 71.7275 71.3208C71.7275 72.7946 72.9199 73.9894 74.3908 73.9894Z" fill="#ECB22E"/>
+<mask id="mask1_1722_10246" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="57" y="68" width="13" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.5234 68.6528H69.9518V81.098H57.5234V68.6528Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1722_10246)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.5234 71.3213C57.5234 72.7951 58.7158 73.9899 60.1867 73.9899C61.6576 73.9899 62.8499 72.7951 62.8499 71.3213V68.6528H60.1867C58.7158 68.6528 57.5234 69.8475 57.5234 71.3213Z" fill="#E01E5A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.625 71.3213V78.4374C64.625 79.9112 65.8173 81.1059 67.2882 81.1059C68.7591 81.1059 69.9514 79.9112 69.9514 78.4374V71.3213C69.9514 69.8474 68.7591 68.6528 67.2882 68.6528C65.8173 68.6528 64.625 69.8475 64.625 71.3213Z" fill="#E01E5A"/>
+</g>
+</g>
+<rect x="52.3045" y="49.2005" width="37.116" height="37.116" rx="18.558" stroke="#DDDDDD" stroke-width="1.15987"/>
+<defs>
+<clipPath id="clip0_1722_10246">
+<rect width="26.6771" height="26.6771" fill="white" transform="translate(57.5234 54.4199)"/>
+</clipPath>
+</defs>
+</svg>