From 27411277a670b44f5b34b13bdc6c59bd27fe65cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= <rasul@MacBook-Air.local>
Date: Wed, 1 Nov 2023 02:40:32 +0300
Subject: [PATCH 1/3] feat: add external link for youtube episodes

---
 public/svg-icons/LinkIcon.svg                 |  5 ++++
 .../App/SideBar/Relevance/Episode/index.tsx   | 16 ++++++++++++-
 .../App/SideBar/Relevance/index.tsx           |  4 +++-
 src/components/App/SideBar/YouTube/index.tsx  |  4 +++-
 src/components/Icons/AddContentIcon.tsx       | 23 ++++++++++++++----
 src/components/Icons/AddLinkIcon.tsx          | 23 ++++++++++++++----
 src/components/Icons/AddSourceIcon.tsx        | 23 ++++++++++++++----
 src/components/Icons/AudioIcon.tsx            | 23 ++++++++++++++----
 src/components/Icons/BoostIcon.tsx            | 14 +++++++----
 src/components/Icons/BrowseGalleryIcon.tsx    | 23 ++++++++++++++----
 src/components/Icons/BubbleChartIcon.tsx      | 23 ++++++++++++++----
 src/components/Icons/BudgetIcon.tsx           | 14 +++++++----
 src/components/Icons/CancelIcon.tsx           | 23 ++++++++++++++----
 src/components/Icons/CheckIcon.tsx            | 14 +++++++----
 src/components/Icons/ChevronDownIcon.tsx      | 23 ++++++++++++++----
 src/components/Icons/ChevronLeftIcon.tsx      | 23 ++++++++++++++----
 src/components/Icons/ChevronRightIcon.tsx     | 23 ++++++++++++++----
 src/components/Icons/ChevronUpIcon.tsx        | 23 ++++++++++++++----
 src/components/Icons/ClearIcon.tsx            | 14 +++++++----
 src/components/Icons/CloseIcon.tsx            | 23 ++++++++++++++----
 src/components/Icons/CommunitiesIcon.tsx      | 23 ++++++++++++++----
 src/components/Icons/CopyIcon.tsx             | 23 ++++++++++++++----
 src/components/Icons/DownloadIcon.tsx         | 23 ++++++++++++++----
 src/components/Icons/EpisodeIcon.tsx          | 14 +++++++----
 src/components/Icons/FilterOffIcon.tsx        | 23 ++++++++++++++----
 src/components/Icons/GrainIcon.tsx            | 23 ++++++++++++++----
 src/components/Icons/InfoIcon.tsx             | 23 ++++++++++++++----
 src/components/Icons/LinkIcon.tsx             | 24 +++++++++++++++++++
 src/components/Icons/NodesIcon.tsx            | 23 ++++++++++++++----
 src/components/Icons/NotesIcon.tsx            | 23 ++++++++++++++----
 src/components/Icons/PublicIcon.tsx           | 23 ++++++++++++++----
 src/components/Icons/SearchIcon.tsx           | 14 +++++++----
 src/components/Icons/SensorsIcon.tsx          | 23 ++++++++++++++----
 src/components/Icons/SentimentDataIcon.tsx    | 23 ++++++++++++++----
 src/components/Icons/SettingsIcon.tsx         | 23 ++++++++++++++----
 src/components/Icons/ShieldPersonIcon.tsx     | 23 ++++++++++++++----
 src/components/Icons/SourcesTableIcon.tsx     | 23 ++++++++++++++----
 src/components/Icons/TwitterIcon.tsx          | 23 ++++++++++++++----
 src/components/Icons/VideoIcon.tsx            | 23 ++++++++++++++----
 39 files changed, 614 insertions(+), 167 deletions(-)
 create mode 100644 public/svg-icons/LinkIcon.svg
 create mode 100644 src/components/Icons/LinkIcon.tsx

diff --git a/public/svg-icons/LinkIcon.svg b/public/svg-icons/LinkIcon.svg
new file mode 100644
index 000000000..c6b07f8a9
--- /dev/null
+++ b/public/svg-icons/LinkIcon.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icons 20x20">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M17.5661 2.056C17.7371 2.12703 17.873 2.26296 17.9441 2.434C17.9799 2.51816 17.999 2.60853 18.0001 2.7V6.9C18.0001 7.08565 17.9263 7.2637 17.795 7.39497C17.6638 7.52625 17.4857 7.6 17.3001 7.6C17.1144 7.6 16.9364 7.52625 16.8051 7.39497C16.6738 7.2637 16.6001 7.08565 16.6001 6.9V4.387L10.0971 10.897C10.032 10.9626 9.95456 11.0147 9.86926 11.0502C9.78396 11.0858 9.69246 11.1041 9.60006 11.1041C9.50765 11.1041 9.41615 11.0858 9.33085 11.0502C9.24555 11.0147 9.16813 10.9626 9.10306 10.897C9.03745 10.8319 8.98537 10.7545 8.94983 10.6692C8.91429 10.5839 8.896 10.4924 8.896 10.4C8.896 10.3076 8.91429 10.2161 8.94983 10.1308C8.98537 10.0455 9.03745 9.96807 9.10306 9.903L15.6131 3.4H13.1001C12.9144 3.4 12.7364 3.32625 12.6051 3.19497C12.4738 3.0637 12.4001 2.88565 12.4001 2.7C12.4001 2.51435 12.4738 2.3363 12.6051 2.20503C12.7364 2.07375 12.9144 2 13.1001 2H17.3001C17.3915 2.00111 17.4819 2.02013 17.5661 2.056ZM14.705 9.20463C14.8363 9.07336 15.0143 8.99961 15.2 8.99961C15.3857 8.99961 15.5637 9.07336 15.695 9.20463C15.8263 9.33591 15.9 9.51396 15.9 9.69961V13.8996C15.9 14.4566 15.6788 14.9907 15.2849 15.3845C14.8911 15.7784 14.357 15.9996 13.8 15.9996H6.1C5.54305 15.9996 5.0089 15.7784 4.61508 15.3845C4.22125 14.9907 4 14.4566 4 13.8996V6.19961C4 5.64265 4.22125 5.10851 4.61508 4.71469C5.0089 4.32086 5.54305 4.09961 6.1 4.09961H10.3C10.4857 4.09961 10.6637 4.17336 10.795 4.30463C10.9263 4.43591 11 4.61396 11 4.79961C11 4.98526 10.9263 5.16331 10.795 5.29458C10.6637 5.42586 10.4857 5.49961 10.3 5.49961H6.1C5.91435 5.49961 5.7363 5.57336 5.60503 5.70463C5.47375 5.83591 5.4 6.01396 5.4 6.19961V13.8996C5.4 14.0853 5.47375 14.2633 5.60503 14.3946C5.7363 14.5259 5.91435 14.5996 6.1 14.5996H13.8C13.9857 14.5996 14.1637 14.5259 14.295 14.3946C14.4263 14.2633 14.5 14.0853 14.5 13.8996V9.69961C14.5 9.51396 14.5737 9.33591 14.705 9.20463Z" fill="#909BAA"/>
+</g>
+</svg>
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
index 5d7a9d19d..971570166 100644
--- a/src/components/App/SideBar/Relevance/Episode/index.tsx
+++ b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -1,6 +1,7 @@
 import moment from 'moment'
 import styled from 'styled-components'
 import { BoostAmt } from '~/components/App/Helper/BoostAmt'
+import LinkIcon from '~/components/Icons/LinkIcon'
 import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { FlexboxProps } from '~/components/common/Flex/flexbox'
@@ -48,6 +49,7 @@ type Props = {
   imageUrl: string
   showTitle?: string
   text?: string
+  link?: string
   type?: string
   name?: string
   verified?: boolean
@@ -69,6 +71,7 @@ export const Episode = ({
   text,
   name,
   profilePicture,
+  link,
   verified = false,
   twitterHandle,
   className = 'episode-wrapper',
@@ -83,7 +86,7 @@ export const Episode = ({
         <Flex direction="row">
           {!isSelectedView && (
             <Flex align="center" pr={16}>
-              <Avatar src={imageUrl} type={type || ''} />
+              <Avatar size={64} src={imageUrl} type={type || ''} />
             </Flex>
           )}
 
@@ -92,6 +95,11 @@ export const Episode = ({
               <Flex align="center" direction="row">
                 {type && <TypeBadge type={type} />}
               </Flex>
+              {type === 'youtube' && (
+                <StyledLink href={`${link}?open=system`} onClick={(e) => e.stopPropagation()}>
+                  <LinkIcon />
+                </StyledLink>
+              )}
             </Flex>
 
             <Description data-testid="episode-description">{episodeTitle}</Description>
@@ -174,3 +182,9 @@ export const Title = styled(Date)`
     background: ${colors.GRAY6};
   }
 `
+
+const StyledLink = styled.a`
+  color: ${colors.GRAY6};
+  font-size: 16px;
+  height: 16px;
+`
diff --git a/src/components/App/SideBar/Relevance/index.tsx b/src/components/App/SideBar/Relevance/index.tsx
index 53d3b4442..cff89c2f5 100644
--- a/src/components/App/SideBar/Relevance/index.tsx
+++ b/src/components/App/SideBar/Relevance/index.tsx
@@ -66,6 +66,7 @@ export const Relevance = ({ isSearchResult }: Props) => {
             show_title: showTitle,
             node_type: nodeType,
             text,
+            link,
             name,
             profile_picture: profilePicture,
             verified = false,
@@ -81,13 +82,14 @@ export const Relevance = ({ isSearchResult }: Props) => {
               episodeTitle={formatDescription(episodeTitle)}
               id={id}
               imageUrl={imageUrl || ''}
+              link={link}
               name={name || ''}
               onClick={() => handleNodeClick(n)}
               profilePicture={profilePicture}
               showTitle={formatDescription(showTitle)}
               text={text || ''}
               twitterHandle={twitterHandle}
-              type={type || nodeType}
+              type={nodeType || type}
               verified={verified}
             />
           )
diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
index 14df0cda8..67761e1e3 100644
--- a/src/components/App/SideBar/YouTube/index.tsx
+++ b/src/components/App/SideBar/YouTube/index.tsx
@@ -23,6 +23,7 @@ export const YouTube = () => {
     image_url: imageUrl,
     date,
     boost,
+    node_type: nodeType,
     type,
     id,
     show_title: showTitle,
@@ -61,9 +62,10 @@ export const YouTube = () => {
         id={id}
         imageUrl={imageUrl || 'video_default.svg'}
         isSelectedView
+        link={link}
         onClick={() => null}
         showTitle={showTitle}
-        type={type}
+        type={nodeType || type}
       />
       <StyledDivider />
       <div ref={scrollTargetRef} style={{ overflow: 'auto', flex: 1, width: '100%' }}>
diff --git a/src/components/Icons/AddContentIcon.tsx b/src/components/Icons/AddContentIcon.tsx
index cbfe4354d..c16344295 100644
--- a/src/components/Icons/AddContentIcon.tsx
+++ b/src/components/Icons/AddContentIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_25" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_25"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_25)">
@@ -13,6 +26,6 @@ const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddContentIcon
+export default AddContentIcon;
diff --git a/src/components/Icons/AddLinkIcon.tsx b/src/components/Icons/AddLinkIcon.tsx
index 258ac98b3..47cd32f61 100644
--- a/src/components/Icons/AddLinkIcon.tsx
+++ b/src/components/Icons/AddLinkIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="add_link">
-      <mask id="mask0_2659_52" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_2659_52"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2659_52)">
@@ -16,6 +29,6 @@ const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AddLinkIcon
+export default AddLinkIcon;
diff --git a/src/components/Icons/AddSourceIcon.tsx b/src/components/Icons/AddSourceIcon.tsx
index 917d106b2..dd5d09a04 100644
--- a/src/components/Icons/AddSourceIcon.tsx
+++ b/src/components/Icons/AddSourceIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_27" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_27"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_27)">
@@ -13,6 +26,6 @@ const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddSourceIcon
+export default AddSourceIcon;
diff --git a/src/components/Icons/AudioIcon.tsx b/src/components/Icons/AudioIcon.tsx
index 5ee276937..ff162e4eb 100644
--- a/src/components/Icons/AudioIcon.tsx
+++ b/src/components/Icons/AudioIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Audio">
-      <mask id="mask0_1506_147" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_147"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_147)">
@@ -16,6 +29,6 @@ const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AudioIcon
+export default AudioIcon;
diff --git a/src/components/Icons/BoostIcon.tsx b/src/components/Icons/BoostIcon.tsx
index d126786d0..d3f1e8632 100644
--- a/src/components/Icons/BoostIcon.tsx
+++ b/src/components/Icons/BoostIcon.tsx
@@ -1,8 +1,14 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 9 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 9 9"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       id="Icon"
       fill-rule="evenodd"
@@ -11,6 +17,6 @@ const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default BoostIcon
+export default BoostIcon;
diff --git a/src/components/Icons/BrowseGalleryIcon.tsx b/src/components/Icons/BrowseGalleryIcon.tsx
index 0b03dd043..f1ab0d784 100644
--- a/src/components/Icons/BrowseGalleryIcon.tsx
+++ b/src/components/Icons/BrowseGalleryIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BrowseGalleryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="browse_gallery">
-      <mask id="mask0_1360_27257" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <mask
+        id="mask0_1360_27257"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1360_27257)">
@@ -16,6 +29,6 @@ const BrowseGalleryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default BrowseGalleryIcon
+export default BrowseGalleryIcon;
diff --git a/src/components/Icons/BubbleChartIcon.tsx b/src/components/Icons/BubbleChartIcon.tsx
index 732bc3cbd..d64b1bc52 100644
--- a/src/components/Icons/BubbleChartIcon.tsx
+++ b/src/components/Icons/BubbleChartIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BubbleChartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="bubble_chart">
-      <mask id="mask0_1551_42" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_1551_42"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_42)">
@@ -16,6 +29,6 @@ const BubbleChartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default BubbleChartIcon
+export default BubbleChartIcon;
diff --git a/src/components/Icons/BudgetIcon.tsx b/src/components/Icons/BudgetIcon.tsx
index 9726aae49..971d0662d 100644
--- a/src/components/Icons/BudgetIcon.tsx
+++ b/src/components/Icons/BudgetIcon.tsx
@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BudgetIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 22 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 22 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M14 16C11.7667 16 9.875 15.225 8.325 13.675C6.775 12.125 6 10.2333 6 8C6 5.76667 6.775 3.875 8.325 2.325C9.875 0.775 11.7667 0 14 0C16.2333 0 18.125 0.775 19.675 2.325C21.225 3.875 22 5.76667 22 8C22 10.2333 21.225 12.125 19.675 13.675C18.125 15.225 16.2333 16 14 16ZM4.625 15.25C3.225 14.6 2.10433 13.625 1.263 12.325C0.421 11.025 0 9.58333 0 8C0 6.41667 0.421 4.975 1.263 3.675C2.10433 2.375 3.225 1.4 4.625 0.75C4.975 0.583333 5.29167 0.595667 5.575 0.787C5.85833 0.979 6 1.29167 6 1.725C6 1.89167 5.946 2.054 5.838 2.212C5.72933 2.37067 5.59167 2.49167 5.425 2.575C4.375 3.05833 3.54167 3.78733 2.925 4.762C2.30833 5.73733 2 6.81667 2 8C2 9.18333 2.30833 10.2623 2.925 11.237C3.54167 12.2123 4.375 12.9417 5.425 13.425C5.59167 13.5083 5.72933 13.625 5.838 13.775C5.946 13.925 6 14.0917 6 14.275C6 14.6917 5.85833 15 5.575 15.2C5.29167 15.4 4.975 15.4167 4.625 15.25ZM14 14C15.6667 14 17.0833 13.4167 18.25 12.25C19.4167 11.0833 20 9.66667 20 8C20 6.33333 19.4167 4.91667 18.25 3.75C17.0833 2.58333 15.6667 2 14 2C12.3333 2 10.9167 2.58333 9.75 3.75C8.58333 4.91667 8 6.33333 8 8C8 9.66667 8.58333 11.0833 9.75 12.25C10.9167 13.4167 12.3333 14 14 14Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default BudgetIcon
+export default BudgetIcon;
diff --git a/src/components/Icons/CancelIcon.tsx b/src/components/Icons/CancelIcon.tsx
index 2332e36b5..f454bbb94 100644
--- a/src/components/Icons/CancelIcon.tsx
+++ b/src/components/Icons/CancelIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const CancelIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="cancel">
-      <mask id="mask0_1264_3381" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+      <mask
+        id="mask0_1264_3381"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="32"
+        height="32"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1264_3381)">
@@ -16,6 +29,6 @@ const CancelIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default CancelIcon
+export default CancelIcon;
diff --git a/src/components/Icons/CheckIcon.tsx b/src/components/Icons/CheckIcon.tsx
index cc6a3f3be..35af77114 100644
--- a/src/components/Icons/CheckIcon.tsx
+++ b/src/components/Icons/CheckIcon.tsx
@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 10 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 10 7"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M3.08467 5.34482L8.02842 0.401074C8.14508 0.284408 8.28363 0.226074 8.44404 0.226074C8.60446 0.226074 8.743 0.284408 8.85967 0.401074C8.97633 0.517741 9.03467 0.656283 9.03467 0.816699C9.03467 0.977116 8.97633 1.11566 8.85967 1.23232L3.493 6.59899C3.37633 6.71566 3.24022 6.77399 3.08467 6.77399C2.92911 6.77399 2.793 6.71566 2.67633 6.59899L0.168 4.09066C0.0513333 3.97399 -0.00456944 3.83545 0.000291667 3.67503C0.00515278 3.51462 0.0659167 3.37607 0.182583 3.25941C0.29925 3.14274 0.437792 3.08441 0.598208 3.08441C0.758625 3.08441 0.897167 3.14274 1.01383 3.25941L3.08467 5.34482Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default CheckIcon
+export default CheckIcon;
diff --git a/src/components/Icons/ChevronDownIcon.tsx b/src/components/Icons/ChevronDownIcon.tsx
index c19ef585e..a2d44c4a1 100644
--- a/src/components/Icons/ChevronDownIcon.tsx
+++ b/src/components/Icons/ChevronDownIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ChevronDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_2337_2483" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_2337_2483"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="14"
+      height="14"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_2337_2483)">
@@ -13,6 +26,6 @@ const ChevronDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default ChevronDownIcon
+export default ChevronDownIcon;
diff --git a/src/components/Icons/ChevronLeftIcon.tsx b/src/components/Icons/ChevronLeftIcon.tsx
index c07077a06..a767683f6 100644
--- a/src/components/Icons/ChevronLeftIcon.tsx
+++ b/src/components/Icons/ChevronLeftIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ChevronLeftIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="keyboard_arrow_left">
-      <mask id="mask0_1428_267" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+      <mask
+        id="mask0_1428_267"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="18"
+        height="18"
+      >
         <path id="Bounding box" d="M0 0H18V18H0V0Z" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1428_267)">
@@ -16,6 +29,6 @@ const ChevronLeftIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default ChevronLeftIcon
+export default ChevronLeftIcon;
diff --git a/src/components/Icons/ChevronRightIcon.tsx b/src/components/Icons/ChevronRightIcon.tsx
index c91c47406..1d598e860 100644
--- a/src/components/Icons/ChevronRightIcon.tsx
+++ b/src/components/Icons/ChevronRightIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ChevronRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="chevron_right">
-      <mask id="mask0_1247_21809" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+      <mask
+        id="mask0_1247_21809"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="18"
+        height="18"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1247_21809)">
@@ -16,6 +29,6 @@ const ChevronRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default ChevronRightIcon
+export default ChevronRightIcon;
diff --git a/src/components/Icons/ChevronUpIcon.tsx b/src/components/Icons/ChevronUpIcon.tsx
index 6f90f17fd..45043c93e 100644
--- a/src/components/Icons/ChevronUpIcon.tsx
+++ b/src/components/Icons/ChevronUpIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ChevronUpIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_2337_2442" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_2337_2442"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="14"
+      height="14"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_2337_2442)">
@@ -13,6 +26,6 @@ const ChevronUpIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default ChevronUpIcon
+export default ChevronUpIcon;
diff --git a/src/components/Icons/ClearIcon.tsx b/src/components/Icons/ClearIcon.tsx
index 9f205b3cc..2dc514080 100644
--- a/src/components/Icons/ClearIcon.tsx
+++ b/src/components/Icons/ClearIcon.tsx
@@ -1,8 +1,14 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ClearIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Property 1=press">
       <path
         id="close"
@@ -11,6 +17,6 @@ const ClearIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default ClearIcon
+export default ClearIcon;
diff --git a/src/components/Icons/CloseIcon.tsx b/src/components/Icons/CloseIcon.tsx
index ee65e7953..811f68a2b 100644
--- a/src/components/Icons/CloseIcon.tsx
+++ b/src/components/Icons/CloseIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const CloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="cancel">
-      <mask id="mask0_1264_3381" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+      <mask
+        id="mask0_1264_3381"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="32"
+        height="32"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1264_3381)">
@@ -16,6 +29,6 @@ const CloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default CloseIcon
+export default CloseIcon;
diff --git a/src/components/Icons/CommunitiesIcon.tsx b/src/components/Icons/CommunitiesIcon.tsx
index c2d937d70..d377cc414 100644
--- a/src/components/Icons/CommunitiesIcon.tsx
+++ b/src/components/Icons/CommunitiesIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const CommunitiesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="communities">
-      <mask id="mask0_1551_39" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_1551_39"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_39)">
@@ -16,6 +29,6 @@ const CommunitiesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default CommunitiesIcon
+export default CommunitiesIcon;
diff --git a/src/components/Icons/CopyIcon.tsx b/src/components/Icons/CopyIcon.tsx
index 042a729ae..a1a27c48d 100644
--- a/src/components/Icons/CopyIcon.tsx
+++ b/src/components/Icons/CopyIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const CopyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="content_copy">
-      <mask id="mask0_1489_75628" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+      <mask
+        id="mask0_1489_75628"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="14"
+        height="14"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1489_75628)">
@@ -16,6 +29,6 @@ const CopyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default CopyIcon
+export default CopyIcon;
diff --git a/src/components/Icons/DownloadIcon.tsx b/src/components/Icons/DownloadIcon.tsx
index 7ab7bdf63..9b2aaa390 100644
--- a/src/components/Icons/DownloadIcon.tsx
+++ b/src/components/Icons/DownloadIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const DownloadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor">
-    <mask id="mask0_2638_2680" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <mask
+      id="mask0_2638_2680"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="20"
+      height="20"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_2638_2680)">
@@ -13,6 +26,6 @@ const DownloadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default DownloadIcon
+export default DownloadIcon;
diff --git a/src/components/Icons/EpisodeIcon.tsx b/src/components/Icons/EpisodeIcon.tsx
index 5767a17f8..f93aaa7c1 100644
--- a/src/components/Icons/EpisodeIcon.tsx
+++ b/src/components/Icons/EpisodeIcon.tsx
@@ -1,8 +1,14 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const EpisodeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 12"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Episode">
       <path
         id="Rectangle 4456 (Stroke)"
@@ -27,6 +33,6 @@ const EpisodeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default EpisodeIcon
+export default EpisodeIcon;
diff --git a/src/components/Icons/FilterOffIcon.tsx b/src/components/Icons/FilterOffIcon.tsx
index 1c3ffe9de..9da0aecfc 100644
--- a/src/components/Icons/FilterOffIcon.tsx
+++ b/src/components/Icons/FilterOffIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const FilterOffIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="filter_alt_off">
-      <mask id="mask0_1543_23288" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <mask
+        id="mask0_1543_23288"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1543_23288)">
@@ -16,6 +29,6 @@ const FilterOffIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default FilterOffIcon
+export default FilterOffIcon;
diff --git a/src/components/Icons/GrainIcon.tsx b/src/components/Icons/GrainIcon.tsx
index 181764eef..44aae0800 100644
--- a/src/components/Icons/GrainIcon.tsx
+++ b/src/components/Icons/GrainIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const GrainIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="grain">
-      <mask id="mask0_1551_45" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_1551_45"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_45)">
@@ -16,6 +29,6 @@ const GrainIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default GrainIcon
+export default GrainIcon;
diff --git a/src/components/Icons/InfoIcon.tsx b/src/components/Icons/InfoIcon.tsx
index cd4ae2775..5b3c04961 100644
--- a/src/components/Icons/InfoIcon.tsx
+++ b/src/components/Icons/InfoIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="info">
-      <mask id="mask0_2682_970" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_2682_970"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2682_970)">
@@ -16,6 +29,6 @@ const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default InfoIcon
+export default InfoIcon;
diff --git a/src/components/Icons/LinkIcon.tsx b/src/components/Icons/LinkIcon.tsx
new file mode 100644
index 000000000..dda82b644
--- /dev/null
+++ b/src/components/Icons/LinkIcon.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable */
+import React from 'react';
+
+const LinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Icons 20x20">
+      <path
+        id="Union"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.5661 2.056C17.7371 2.12703 17.873 2.26296 17.9441 2.434C17.9799 2.51816 17.999 2.60853 18.0001 2.7V6.9C18.0001 7.08565 17.9263 7.2637 17.795 7.39497C17.6638 7.52625 17.4857 7.6 17.3001 7.6C17.1144 7.6 16.9364 7.52625 16.8051 7.39497C16.6738 7.2637 16.6001 7.08565 16.6001 6.9V4.387L10.0971 10.897C10.032 10.9626 9.95456 11.0147 9.86926 11.0502C9.78396 11.0858 9.69246 11.1041 9.60006 11.1041C9.50765 11.1041 9.41615 11.0858 9.33085 11.0502C9.24555 11.0147 9.16813 10.9626 9.10306 10.897C9.03745 10.8319 8.98537 10.7545 8.94983 10.6692C8.91429 10.5839 8.896 10.4924 8.896 10.4C8.896 10.3076 8.91429 10.2161 8.94983 10.1308C8.98537 10.0455 9.03745 9.96807 9.10306 9.903L15.6131 3.4H13.1001C12.9144 3.4 12.7364 3.32625 12.6051 3.19497C12.4738 3.0637 12.4001 2.88565 12.4001 2.7C12.4001 2.51435 12.4738 2.3363 12.6051 2.20503C12.7364 2.07375 12.9144 2 13.1001 2H17.3001C17.3915 2.00111 17.4819 2.02013 17.5661 2.056ZM14.705 9.20463C14.8363 9.07336 15.0143 8.99961 15.2 8.99961C15.3857 8.99961 15.5637 9.07336 15.695 9.20463C15.8263 9.33591 15.9 9.51396 15.9 9.69961V13.8996C15.9 14.4566 15.6788 14.9907 15.2849 15.3845C14.8911 15.7784 14.357 15.9996 13.8 15.9996H6.1C5.54305 15.9996 5.0089 15.7784 4.61508 15.3845C4.22125 14.9907 4 14.4566 4 13.8996V6.19961C4 5.64265 4.22125 5.10851 4.61508 4.71469C5.0089 4.32086 5.54305 4.09961 6.1 4.09961H10.3C10.4857 4.09961 10.6637 4.17336 10.795 4.30463C10.9263 4.43591 11 4.61396 11 4.79961C11 4.98526 10.9263 5.16331 10.795 5.29458C10.6637 5.42586 10.4857 5.49961 10.3 5.49961H6.1C5.91435 5.49961 5.7363 5.57336 5.60503 5.70463C5.47375 5.83591 5.4 6.01396 5.4 6.19961V13.8996C5.4 14.0853 5.47375 14.2633 5.60503 14.3946C5.7363 14.5259 5.91435 14.5996 6.1 14.5996H13.8C13.9857 14.5996 14.1637 14.5259 14.295 14.3946C14.4263 14.2633 14.5 14.0853 14.5 13.8996V9.69961C14.5 9.51396 14.5737 9.33591 14.705 9.20463Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export default LinkIcon;
diff --git a/src/components/Icons/NodesIcon.tsx b/src/components/Icons/NodesIcon.tsx
index 4d121b9bb..84b3bcca7 100644
--- a/src/components/Icons/NodesIcon.tsx
+++ b/src/components/Icons/NodesIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const NodesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Nodes">
-      <mask id="mask0_1506_141" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_141"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_141)">
@@ -16,6 +29,6 @@ const NodesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default NodesIcon
+export default NodesIcon;
diff --git a/src/components/Icons/NotesIcon.tsx b/src/components/Icons/NotesIcon.tsx
index 904e2fe69..fdb39f764 100644
--- a/src/components/Icons/NotesIcon.tsx
+++ b/src/components/Icons/NotesIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const NotesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="notes">
-      <mask id="mask0_1473_73722" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1473_73722"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1473_73722)">
@@ -16,6 +29,6 @@ const NotesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default NotesIcon
+export default NotesIcon;
diff --git a/src/components/Icons/PublicIcon.tsx b/src/components/Icons/PublicIcon.tsx
index 366decdcd..62ddf6ee0 100644
--- a/src/components/Icons/PublicIcon.tsx
+++ b/src/components/Icons/PublicIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const PublicIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="public">
-      <mask id="mask0_1551_36" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_1551_36"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_36)">
@@ -16,6 +29,6 @@ const PublicIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default PublicIcon
+export default PublicIcon;
diff --git a/src/components/Icons/SearchIcon.tsx b/src/components/Icons/SearchIcon.tsx
index 2f02e5dfc..44cc69df9 100644
--- a/src/components/Icons/SearchIcon.tsx
+++ b/src/components/Icons/SearchIcon.tsx
@@ -1,8 +1,14 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Property 1=Normal">
       <path
         id="search"
@@ -11,6 +17,6 @@ const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default SearchIcon
+export default SearchIcon;
diff --git a/src/components/Icons/SensorsIcon.tsx b/src/components/Icons/SensorsIcon.tsx
index eb0c3c2f8..34b6dfb94 100644
--- a/src/components/Icons/SensorsIcon.tsx
+++ b/src/components/Icons/SensorsIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const SensorsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="sensors">
-      <mask id="mask0_1506_161" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_161"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_161)">
@@ -16,6 +29,6 @@ const SensorsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default SensorsIcon
+export default SensorsIcon;
diff --git a/src/components/Icons/SentimentDataIcon.tsx b/src/components/Icons/SentimentDataIcon.tsx
index 9e8539470..959e8d5eb 100644
--- a/src/components/Icons/SentimentDataIcon.tsx
+++ b/src/components/Icons/SentimentDataIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const SentimentDataIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_28" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_28"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_28)">
@@ -13,6 +26,6 @@ const SentimentDataIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default SentimentDataIcon
+export default SentimentDataIcon;
diff --git a/src/components/Icons/SettingsIcon.tsx b/src/components/Icons/SettingsIcon.tsx
index a42abb96e..863bc6a31 100644
--- a/src/components/Icons/SettingsIcon.tsx
+++ b/src/components/Icons/SettingsIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const SettingsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_29" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_29"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_29)">
@@ -13,6 +26,6 @@ const SettingsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default SettingsIcon
+export default SettingsIcon;
diff --git a/src/components/Icons/ShieldPersonIcon.tsx b/src/components/Icons/ShieldPersonIcon.tsx
index b870970c9..a19e5c5d5 100644
--- a/src/components/Icons/ShieldPersonIcon.tsx
+++ b/src/components/Icons/ShieldPersonIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ShieldPersonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="shield_person">
-      <mask id="mask0_1543_22988" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_1543_22988"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1543_22988)">
@@ -16,6 +29,6 @@ const ShieldPersonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default ShieldPersonIcon
+export default ShieldPersonIcon;
diff --git a/src/components/Icons/SourcesTableIcon.tsx b/src/components/Icons/SourcesTableIcon.tsx
index ed7468412..591831caa 100644
--- a/src/components/Icons/SourcesTableIcon.tsx
+++ b/src/components/Icons/SourcesTableIcon.tsx
@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const SourcesTableIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_26" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_26"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_26)">
@@ -13,6 +26,6 @@ const SourcesTableIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default SourcesTableIcon
+export default SourcesTableIcon;
diff --git a/src/components/Icons/TwitterIcon.tsx b/src/components/Icons/TwitterIcon.tsx
index ff0bcb241..fa5545953 100644
--- a/src/components/Icons/TwitterIcon.tsx
+++ b/src/components/Icons/TwitterIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Twitter">
-      <mask id="mask0_1506_167" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_167"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_167)">
@@ -18,6 +31,6 @@ const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default TwitterIcon
+export default TwitterIcon;
diff --git a/src/components/Icons/VideoIcon.tsx b/src/components/Icons/VideoIcon.tsx
index 933d22b58..35366d23b 100644
--- a/src/components/Icons/VideoIcon.tsx
+++ b/src/components/Icons/VideoIcon.tsx
@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const VideoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Video">
-      <mask id="mask0_1506_153" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_153"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_153)">
@@ -18,6 +31,6 @@ const VideoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default VideoIcon
+export default VideoIcon;

From 0b60aa80bda54ce190969eda295a0c8fd022671f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= <rasul@MacBook-Air.local>
Date: Wed, 1 Nov 2023 02:53:23 +0300
Subject: [PATCH 2/3] fix: prettier fix

---
 src/components/Icons/AddContentIcon.tsx    | 23 +++++-----------------
 src/components/Icons/AddLinkIcon.tsx       | 23 +++++-----------------
 src/components/Icons/AddSourceIcon.tsx     | 23 +++++-----------------
 src/components/Icons/AudioIcon.tsx         | 23 +++++-----------------
 src/components/Icons/BoostIcon.tsx         | 14 ++++---------
 src/components/Icons/BrowseGalleryIcon.tsx | 23 +++++-----------------
 src/components/Icons/BubbleChartIcon.tsx   | 23 +++++-----------------
 src/components/Icons/BudgetIcon.tsx        | 14 ++++---------
 src/components/Icons/CancelIcon.tsx        | 23 +++++-----------------
 src/components/Icons/CheckIcon.tsx         | 14 ++++---------
 src/components/Icons/ChevronDownIcon.tsx   | 23 +++++-----------------
 src/components/Icons/ChevronLeftIcon.tsx   | 23 +++++-----------------
 src/components/Icons/ChevronRightIcon.tsx  | 23 +++++-----------------
 src/components/Icons/ChevronUpIcon.tsx     | 23 +++++-----------------
 src/components/Icons/ClearIcon.tsx         | 14 ++++---------
 src/components/Icons/CloseIcon.tsx         | 23 +++++-----------------
 src/components/Icons/CommunitiesIcon.tsx   | 23 +++++-----------------
 src/components/Icons/CopyIcon.tsx          | 23 +++++-----------------
 src/components/Icons/DownloadIcon.tsx      | 23 +++++-----------------
 src/components/Icons/EpisodeIcon.tsx       | 14 ++++---------
 src/components/Icons/FilterOffIcon.tsx     | 23 +++++-----------------
 src/components/Icons/GrainIcon.tsx         | 23 +++++-----------------
 src/components/Icons/InfoIcon.tsx          | 23 +++++-----------------
 src/components/Icons/LinkIcon.tsx          | 14 ++++---------
 src/components/Icons/NodesIcon.tsx         | 23 +++++-----------------
 src/components/Icons/NotesIcon.tsx         | 23 +++++-----------------
 src/components/Icons/PublicIcon.tsx        | 23 +++++-----------------
 src/components/Icons/SearchIcon.tsx        | 14 ++++---------
 src/components/Icons/SensorsIcon.tsx       | 23 +++++-----------------
 src/components/Icons/SentimentDataIcon.tsx | 23 +++++-----------------
 src/components/Icons/SettingsIcon.tsx      | 23 +++++-----------------
 src/components/Icons/ShieldPersonIcon.tsx  | 23 +++++-----------------
 src/components/Icons/SourcesTableIcon.tsx  | 23 +++++-----------------
 src/components/Icons/TwitterIcon.tsx       | 23 +++++-----------------
 src/components/Icons/VideoIcon.tsx         | 23 +++++-----------------
 35 files changed, 168 insertions(+), 574 deletions(-)

diff --git a/src/components/Icons/AddContentIcon.tsx b/src/components/Icons/AddContentIcon.tsx
index c16344295..cbfe4354d 100644
--- a/src/components/Icons/AddContentIcon.tsx
+++ b/src/components/Icons/AddContentIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_25"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_25" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_25)">
@@ -26,6 +13,6 @@ const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default AddContentIcon;
+export default AddContentIcon
diff --git a/src/components/Icons/AddLinkIcon.tsx b/src/components/Icons/AddLinkIcon.tsx
index 47cd32f61..258ac98b3 100644
--- a/src/components/Icons/AddLinkIcon.tsx
+++ b/src/components/Icons/AddLinkIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="add_link">
-      <mask
-        id="mask0_2659_52"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
+      <mask id="mask0_2659_52" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2659_52)">
@@ -29,6 +16,6 @@ const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default AddLinkIcon;
+export default AddLinkIcon
diff --git a/src/components/Icons/AddSourceIcon.tsx b/src/components/Icons/AddSourceIcon.tsx
index dd5d09a04..917d106b2 100644
--- a/src/components/Icons/AddSourceIcon.tsx
+++ b/src/components/Icons/AddSourceIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_27"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_27" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_27)">
@@ -26,6 +13,6 @@ const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default AddSourceIcon;
+export default AddSourceIcon
diff --git a/src/components/Icons/AudioIcon.tsx b/src/components/Icons/AudioIcon.tsx
index ff162e4eb..5ee276937 100644
--- a/src/components/Icons/AudioIcon.tsx
+++ b/src/components/Icons/AudioIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Audio">
-      <mask
-        id="mask0_1506_147"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_1506_147" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_147)">
@@ -29,6 +16,6 @@ const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default AudioIcon;
+export default AudioIcon
diff --git a/src/components/Icons/BoostIcon.tsx b/src/components/Icons/BoostIcon.tsx
index d3f1e8632..d126786d0 100644
--- a/src/components/Icons/BoostIcon.tsx
+++ b/src/components/Icons/BoostIcon.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 9 9"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 9 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
       id="Icon"
       fill-rule="evenodd"
@@ -17,6 +11,6 @@ const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       fill="currentColor"
     />
   </svg>
-);
+)
 
-export default BoostIcon;
+export default BoostIcon
diff --git a/src/components/Icons/BrowseGalleryIcon.tsx b/src/components/Icons/BrowseGalleryIcon.tsx
index f1ab0d784..0b03dd043 100644
--- a/src/components/Icons/BrowseGalleryIcon.tsx
+++ b/src/components/Icons/BrowseGalleryIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const BrowseGalleryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="browse_gallery">
-      <mask
-        id="mask0_1360_27257"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-      >
+      <mask id="mask0_1360_27257" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1360_27257)">
@@ -29,6 +16,6 @@ const BrowseGalleryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default BrowseGalleryIcon;
+export default BrowseGalleryIcon
diff --git a/src/components/Icons/BubbleChartIcon.tsx b/src/components/Icons/BubbleChartIcon.tsx
index d64b1bc52..732bc3cbd 100644
--- a/src/components/Icons/BubbleChartIcon.tsx
+++ b/src/components/Icons/BubbleChartIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const BubbleChartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="bubble_chart">
-      <mask
-        id="mask0_1551_42"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
+      <mask id="mask0_1551_42" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_42)">
@@ -29,6 +16,6 @@ const BubbleChartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default BubbleChartIcon;
+export default BubbleChartIcon
diff --git a/src/components/Icons/BudgetIcon.tsx b/src/components/Icons/BudgetIcon.tsx
index 971d0662d..9726aae49 100644
--- a/src/components/Icons/BudgetIcon.tsx
+++ b/src/components/Icons/BudgetIcon.tsx
@@ -1,19 +1,13 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const BudgetIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 22 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 22 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M14 16C11.7667 16 9.875 15.225 8.325 13.675C6.775 12.125 6 10.2333 6 8C6 5.76667 6.775 3.875 8.325 2.325C9.875 0.775 11.7667 0 14 0C16.2333 0 18.125 0.775 19.675 2.325C21.225 3.875 22 5.76667 22 8C22 10.2333 21.225 12.125 19.675 13.675C18.125 15.225 16.2333 16 14 16ZM4.625 15.25C3.225 14.6 2.10433 13.625 1.263 12.325C0.421 11.025 0 9.58333 0 8C0 6.41667 0.421 4.975 1.263 3.675C2.10433 2.375 3.225 1.4 4.625 0.75C4.975 0.583333 5.29167 0.595667 5.575 0.787C5.85833 0.979 6 1.29167 6 1.725C6 1.89167 5.946 2.054 5.838 2.212C5.72933 2.37067 5.59167 2.49167 5.425 2.575C4.375 3.05833 3.54167 3.78733 2.925 4.762C2.30833 5.73733 2 6.81667 2 8C2 9.18333 2.30833 10.2623 2.925 11.237C3.54167 12.2123 4.375 12.9417 5.425 13.425C5.59167 13.5083 5.72933 13.625 5.838 13.775C5.946 13.925 6 14.0917 6 14.275C6 14.6917 5.85833 15 5.575 15.2C5.29167 15.4 4.975 15.4167 4.625 15.25ZM14 14C15.6667 14 17.0833 13.4167 18.25 12.25C19.4167 11.0833 20 9.66667 20 8C20 6.33333 19.4167 4.91667 18.25 3.75C17.0833 2.58333 15.6667 2 14 2C12.3333 2 10.9167 2.58333 9.75 3.75C8.58333 4.91667 8 6.33333 8 8C8 9.66667 8.58333 11.0833 9.75 12.25C10.9167 13.4167 12.3333 14 14 14Z"
       fill="currentColor"
     />
   </svg>
-);
+)
 
-export default BudgetIcon;
+export default BudgetIcon
diff --git a/src/components/Icons/CancelIcon.tsx b/src/components/Icons/CancelIcon.tsx
index f454bbb94..2332e36b5 100644
--- a/src/components/Icons/CancelIcon.tsx
+++ b/src/components/Icons/CancelIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const CancelIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 32 32"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="cancel">
-      <mask
-        id="mask0_1264_3381"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="32"
-        height="32"
-      >
+      <mask id="mask0_1264_3381" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1264_3381)">
@@ -29,6 +16,6 @@ const CancelIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default CancelIcon;
+export default CancelIcon
diff --git a/src/components/Icons/CheckIcon.tsx b/src/components/Icons/CheckIcon.tsx
index 35af77114..cc6a3f3be 100644
--- a/src/components/Icons/CheckIcon.tsx
+++ b/src/components/Icons/CheckIcon.tsx
@@ -1,19 +1,13 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 10 7"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 10 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.08467 5.34482L8.02842 0.401074C8.14508 0.284408 8.28363 0.226074 8.44404 0.226074C8.60446 0.226074 8.743 0.284408 8.85967 0.401074C8.97633 0.517741 9.03467 0.656283 9.03467 0.816699C9.03467 0.977116 8.97633 1.11566 8.85967 1.23232L3.493 6.59899C3.37633 6.71566 3.24022 6.77399 3.08467 6.77399C2.92911 6.77399 2.793 6.71566 2.67633 6.59899L0.168 4.09066C0.0513333 3.97399 -0.00456944 3.83545 0.000291667 3.67503C0.00515278 3.51462 0.0659167 3.37607 0.182583 3.25941C0.29925 3.14274 0.437792 3.08441 0.598208 3.08441C0.758625 3.08441 0.897167 3.14274 1.01383 3.25941L3.08467 5.34482Z"
       fill="currentColor"
     />
   </svg>
-);
+)
 
-export default CheckIcon;
+export default CheckIcon
diff --git a/src/components/Icons/ChevronDownIcon.tsx b/src/components/Icons/ChevronDownIcon.tsx
index a2d44c4a1..c19ef585e 100644
--- a/src/components/Icons/ChevronDownIcon.tsx
+++ b/src/components/Icons/ChevronDownIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const ChevronDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_2337_2483"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="14"
-      height="14"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_2337_2483" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_2337_2483)">
@@ -26,6 +13,6 @@ const ChevronDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default ChevronDownIcon;
+export default ChevronDownIcon
diff --git a/src/components/Icons/ChevronLeftIcon.tsx b/src/components/Icons/ChevronLeftIcon.tsx
index a767683f6..c07077a06 100644
--- a/src/components/Icons/ChevronLeftIcon.tsx
+++ b/src/components/Icons/ChevronLeftIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const ChevronLeftIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 18 18"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="keyboard_arrow_left">
-      <mask
-        id="mask0_1428_267"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="18"
-        height="18"
-      >
+      <mask id="mask0_1428_267" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
         <path id="Bounding box" d="M0 0H18V18H0V0Z" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1428_267)">
@@ -29,6 +16,6 @@ const ChevronLeftIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default ChevronLeftIcon;
+export default ChevronLeftIcon
diff --git a/src/components/Icons/ChevronRightIcon.tsx b/src/components/Icons/ChevronRightIcon.tsx
index 1d598e860..c91c47406 100644
--- a/src/components/Icons/ChevronRightIcon.tsx
+++ b/src/components/Icons/ChevronRightIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const ChevronRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 18 18"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="chevron_right">
-      <mask
-        id="mask0_1247_21809"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="18"
-        height="18"
-      >
+      <mask id="mask0_1247_21809" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1247_21809)">
@@ -29,6 +16,6 @@ const ChevronRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default ChevronRightIcon;
+export default ChevronRightIcon
diff --git a/src/components/Icons/ChevronUpIcon.tsx b/src/components/Icons/ChevronUpIcon.tsx
index 45043c93e..6f90f17fd 100644
--- a/src/components/Icons/ChevronUpIcon.tsx
+++ b/src/components/Icons/ChevronUpIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const ChevronUpIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_2337_2442"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="14"
-      height="14"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_2337_2442" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_2337_2442)">
@@ -26,6 +13,6 @@ const ChevronUpIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default ChevronUpIcon;
+export default ChevronUpIcon
diff --git a/src/components/Icons/ClearIcon.tsx b/src/components/Icons/ClearIcon.tsx
index 2dc514080..9f205b3cc 100644
--- a/src/components/Icons/ClearIcon.tsx
+++ b/src/components/Icons/ClearIcon.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const ClearIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 32 32"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Property 1=press">
       <path
         id="close"
@@ -17,6 +11,6 @@ const ClearIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default ClearIcon;
+export default ClearIcon
diff --git a/src/components/Icons/CloseIcon.tsx b/src/components/Icons/CloseIcon.tsx
index 811f68a2b..ee65e7953 100644
--- a/src/components/Icons/CloseIcon.tsx
+++ b/src/components/Icons/CloseIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const CloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 32 32"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="cancel">
-      <mask
-        id="mask0_1264_3381"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="32"
-        height="32"
-      >
+      <mask id="mask0_1264_3381" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1264_3381)">
@@ -29,6 +16,6 @@ const CloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default CloseIcon;
+export default CloseIcon
diff --git a/src/components/Icons/CommunitiesIcon.tsx b/src/components/Icons/CommunitiesIcon.tsx
index d377cc414..c2d937d70 100644
--- a/src/components/Icons/CommunitiesIcon.tsx
+++ b/src/components/Icons/CommunitiesIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const CommunitiesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="communities">
-      <mask
-        id="mask0_1551_39"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
+      <mask id="mask0_1551_39" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_39)">
@@ -29,6 +16,6 @@ const CommunitiesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default CommunitiesIcon;
+export default CommunitiesIcon
diff --git a/src/components/Icons/CopyIcon.tsx b/src/components/Icons/CopyIcon.tsx
index a1a27c48d..042a729ae 100644
--- a/src/components/Icons/CopyIcon.tsx
+++ b/src/components/Icons/CopyIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const CopyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="content_copy">
-      <mask
-        id="mask0_1489_75628"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="14"
-        height="14"
-      >
+      <mask id="mask0_1489_75628" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1489_75628)">
@@ -29,6 +16,6 @@ const CopyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default CopyIcon;
+export default CopyIcon
diff --git a/src/components/Icons/DownloadIcon.tsx b/src/components/Icons/DownloadIcon.tsx
index 9b2aaa390..7ab7bdf63 100644
--- a/src/components/Icons/DownloadIcon.tsx
+++ b/src/components/Icons/DownloadIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const DownloadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <mask
-      id="mask0_2638_2680"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="20"
-      height="20"
-    >
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor">
+    <mask id="mask0_2638_2680" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_2638_2680)">
@@ -26,6 +13,6 @@ const DownloadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default DownloadIcon;
+export default DownloadIcon
diff --git a/src/components/Icons/EpisodeIcon.tsx b/src/components/Icons/EpisodeIcon.tsx
index f93aaa7c1..5767a17f8 100644
--- a/src/components/Icons/EpisodeIcon.tsx
+++ b/src/components/Icons/EpisodeIcon.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const EpisodeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 12"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Episode">
       <path
         id="Rectangle 4456 (Stroke)"
@@ -33,6 +27,6 @@ const EpisodeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default EpisodeIcon;
+export default EpisodeIcon
diff --git a/src/components/Icons/FilterOffIcon.tsx b/src/components/Icons/FilterOffIcon.tsx
index 9da0aecfc..1c3ffe9de 100644
--- a/src/components/Icons/FilterOffIcon.tsx
+++ b/src/components/Icons/FilterOffIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const FilterOffIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="filter_alt_off">
-      <mask
-        id="mask0_1543_23288"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-      >
+      <mask id="mask0_1543_23288" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1543_23288)">
@@ -29,6 +16,6 @@ const FilterOffIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default FilterOffIcon;
+export default FilterOffIcon
diff --git a/src/components/Icons/GrainIcon.tsx b/src/components/Icons/GrainIcon.tsx
index 44aae0800..181764eef 100644
--- a/src/components/Icons/GrainIcon.tsx
+++ b/src/components/Icons/GrainIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const GrainIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="grain">
-      <mask
-        id="mask0_1551_45"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
+      <mask id="mask0_1551_45" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_45)">
@@ -29,6 +16,6 @@ const GrainIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default GrainIcon;
+export default GrainIcon
diff --git a/src/components/Icons/InfoIcon.tsx b/src/components/Icons/InfoIcon.tsx
index 5b3c04961..cd4ae2775 100644
--- a/src/components/Icons/InfoIcon.tsx
+++ b/src/components/Icons/InfoIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="info">
-      <mask
-        id="mask0_2682_970"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_2682_970" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2682_970)">
@@ -29,6 +16,6 @@ const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default InfoIcon;
+export default InfoIcon
diff --git a/src/components/Icons/LinkIcon.tsx b/src/components/Icons/LinkIcon.tsx
index dda82b644..b07bfb7d2 100644
--- a/src/components/Icons/LinkIcon.tsx
+++ b/src/components/Icons/LinkIcon.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const LinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Icons 20x20">
       <path
         id="Union"
@@ -19,6 +13,6 @@ const LinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default LinkIcon;
+export default LinkIcon
diff --git a/src/components/Icons/NodesIcon.tsx b/src/components/Icons/NodesIcon.tsx
index 84b3bcca7..4d121b9bb 100644
--- a/src/components/Icons/NodesIcon.tsx
+++ b/src/components/Icons/NodesIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const NodesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Nodes">
-      <mask
-        id="mask0_1506_141"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_1506_141" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_141)">
@@ -29,6 +16,6 @@ const NodesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default NodesIcon;
+export default NodesIcon
diff --git a/src/components/Icons/NotesIcon.tsx b/src/components/Icons/NotesIcon.tsx
index fdb39f764..904e2fe69 100644
--- a/src/components/Icons/NotesIcon.tsx
+++ b/src/components/Icons/NotesIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const NotesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="notes">
-      <mask
-        id="mask0_1473_73722"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_1473_73722" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1473_73722)">
@@ -29,6 +16,6 @@ const NotesIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default NotesIcon;
+export default NotesIcon
diff --git a/src/components/Icons/PublicIcon.tsx b/src/components/Icons/PublicIcon.tsx
index 62ddf6ee0..366decdcd 100644
--- a/src/components/Icons/PublicIcon.tsx
+++ b/src/components/Icons/PublicIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const PublicIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="public">
-      <mask
-        id="mask0_1551_36"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
+      <mask id="mask0_1551_36" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1551_36)">
@@ -29,6 +16,6 @@ const PublicIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default PublicIcon;
+export default PublicIcon
diff --git a/src/components/Icons/SearchIcon.tsx b/src/components/Icons/SearchIcon.tsx
index 44cc69df9..2f02e5dfc 100644
--- a/src/components/Icons/SearchIcon.tsx
+++ b/src/components/Icons/SearchIcon.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 32 32"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Property 1=Normal">
       <path
         id="search"
@@ -17,6 +11,6 @@ const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default SearchIcon;
+export default SearchIcon
diff --git a/src/components/Icons/SensorsIcon.tsx b/src/components/Icons/SensorsIcon.tsx
index 34b6dfb94..eb0c3c2f8 100644
--- a/src/components/Icons/SensorsIcon.tsx
+++ b/src/components/Icons/SensorsIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const SensorsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="sensors">
-      <mask
-        id="mask0_1506_161"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_1506_161" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_161)">
@@ -29,6 +16,6 @@ const SensorsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default SensorsIcon;
+export default SensorsIcon
diff --git a/src/components/Icons/SentimentDataIcon.tsx b/src/components/Icons/SentimentDataIcon.tsx
index 959e8d5eb..9e8539470 100644
--- a/src/components/Icons/SentimentDataIcon.tsx
+++ b/src/components/Icons/SentimentDataIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const SentimentDataIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_28"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_28" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_28)">
@@ -26,6 +13,6 @@ const SentimentDataIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default SentimentDataIcon;
+export default SentimentDataIcon
diff --git a/src/components/Icons/SettingsIcon.tsx b/src/components/Icons/SettingsIcon.tsx
index 863bc6a31..a42abb96e 100644
--- a/src/components/Icons/SettingsIcon.tsx
+++ b/src/components/Icons/SettingsIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const SettingsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_29"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_29" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_29)">
@@ -26,6 +13,6 @@ const SettingsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default SettingsIcon;
+export default SettingsIcon
diff --git a/src/components/Icons/ShieldPersonIcon.tsx b/src/components/Icons/ShieldPersonIcon.tsx
index a19e5c5d5..b870970c9 100644
--- a/src/components/Icons/ShieldPersonIcon.tsx
+++ b/src/components/Icons/ShieldPersonIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const ShieldPersonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="shield_person">
-      <mask
-        id="mask0_1543_22988"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
+      <mask id="mask0_1543_22988" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1543_22988)">
@@ -29,6 +16,6 @@ const ShieldPersonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default ShieldPersonIcon;
+export default ShieldPersonIcon
diff --git a/src/components/Icons/SourcesTableIcon.tsx b/src/components/Icons/SourcesTableIcon.tsx
index 591831caa..ed7468412 100644
--- a/src/components/Icons/SourcesTableIcon.tsx
+++ b/src/components/Icons/SourcesTableIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const SourcesTableIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_26"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_26" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_26)">
@@ -26,6 +13,6 @@ const SourcesTableIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default SourcesTableIcon;
+export default SourcesTableIcon
diff --git a/src/components/Icons/TwitterIcon.tsx b/src/components/Icons/TwitterIcon.tsx
index fa5545953..ff0bcb241 100644
--- a/src/components/Icons/TwitterIcon.tsx
+++ b/src/components/Icons/TwitterIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Twitter">
-      <mask
-        id="mask0_1506_167"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_1506_167" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_167)">
@@ -31,6 +18,6 @@ const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default TwitterIcon;
+export default TwitterIcon
diff --git a/src/components/Icons/VideoIcon.tsx b/src/components/Icons/VideoIcon.tsx
index 35366d23b..933d22b58 100644
--- a/src/components/Icons/VideoIcon.tsx
+++ b/src/components/Icons/VideoIcon.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const VideoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g id="Video">
-      <mask
-        id="mask0_1506_153"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
+      <mask id="mask0_1506_153" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_153)">
@@ -31,6 +18,6 @@ const VideoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-);
+)
 
-export default VideoIcon;
+export default VideoIcon

From 7a65397de4623378907de04c85a57a1066c2e888 Mon Sep 17 00:00:00 2001
From: kevkevinpal <oapallikunnel@gmail.com>
Date: Tue, 31 Oct 2023 19:53:08 -0500
Subject: [PATCH 3/3] fix: using null insted of && operator

---
 src/components/App/SideBar/Relevance/Episode/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
index 971570166..29afffdeb 100644
--- a/src/components/App/SideBar/Relevance/Episode/index.tsx
+++ b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -95,11 +95,11 @@ export const Episode = ({
               <Flex align="center" direction="row">
                 {type && <TypeBadge type={type} />}
               </Flex>
-              {type === 'youtube' && (
+              {type === 'youtube' ? (
                 <StyledLink href={`${link}?open=system`} onClick={(e) => e.stopPropagation()}>
                   <LinkIcon />
                 </StyledLink>
-              )}
+              ) : null}
             </Flex>
 
             <Description data-testid="episode-description">{episodeTitle}</Description>