From e616b22e4dc8a4490a9ce4970784ebbde8873217 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Wed, 18 Oct 2023 17:25:08 +0100
Subject: [PATCH 01/14] feat: setup socket for new post

---
 .env                         |  1 +
 src/components/App/index.tsx | 27 +++++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 000000000..31660937f
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_APP_API_URL=http://localhost:8444
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index f1e888294..bb2ca9a91 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,16 +1,18 @@
 import { Leva } from 'leva'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import 'react-toastify/dist/ReactToastify.css'
+import { Socket } from 'socket.io-client'
 import * as sphinx from 'sphinx-bridge-kevkevinpal'
 import styled from 'styled-components'
 import { AddNodeModal } from '~/components/AddNodeModal'
 import { BudgetExplanationModal } from '~/components/BudgetExplanationModal'
+import { Flex } from '~/components/common/Flex'
 import { DataRetriever } from '~/components/DataRetriever'
 import { GlobalStyle } from '~/components/GlobalStyle'
 import { Universe } from '~/components/Universe'
-import { Flex } from '~/components/common/Flex'
 import { isDevelopment, isE2E } from '~/constants'
+import useSocket from '~/hooks/useSockets'
 import { getGraphDataPositions } from '~/network/fetchGraphData/const'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
@@ -77,6 +79,10 @@ export const App = () => {
     useDataStore((s) => s.setCategoryFilter),
   ]
 
+  const isSocketSet: { current: boolean } = useRef<boolean>(false)
+
+  const socket: Socket | null = useSocket()
+
   const form = useForm<{ search: string }>({ mode: 'onChange' })
 
   const handleSubmit = form.handleSubmit(({ search }) => {
@@ -133,6 +139,23 @@ export const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphStyle])
 
+  // setup socket
+  useEffect(() => {
+    if (isSocketSet.current) {
+      return
+    }
+
+    if (socket) {
+      socket.on('newpost', handleNewPost)
+
+      isSocketSet.current = true
+    }
+  }, [socket])
+
+  function handleNewPost() {
+    console.log('Handling post')
+  }
+
   return (
     <AppProviders>
       <GlobalStyle />

From edc73e428e4dedb703ddc1f4e24081206a1ff5e0 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Wed, 18 Oct 2023 18:43:56 +0100
Subject: [PATCH 02/14] chore: added newPostCount to userStore

---
 src/components/App/index.tsx     | 12 ++++++------
 src/stores/useUserStore/index.ts | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 117eeb707..21a624988 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -53,7 +53,7 @@ const Version = styled(Flex)`
 export const App = () => {
   const { open } = useModal('budgetExplanation')
 
-  const [setBudget] = useUserStore((s) => [s.setBudget])
+  const [setBudget, setPostCount] = useUserStore((s) => [s.setBudget, s.setPostCount])
 
   const [
     setSidebarOpen,
@@ -153,6 +153,10 @@ export const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphStyle])
 
+  const handleNewPost = useCallback(() => {
+    setPostCount('INCREMENT')
+  }, [setPostCount])
+
   // setup socket
   useEffect(() => {
     if (isSocketSet.current) {
@@ -164,11 +168,7 @@ export const App = () => {
 
       isSocketSet.current = true
     }
-  }, [socket])
-
-  function handleNewPost() {
-    console.log('Handling post')
-  }
+  }, [socket, handleNewPost])
 
   return (
     <AppProviders>
diff --git a/src/stores/useUserStore/index.ts b/src/stores/useUserStore/index.ts
index 50ea6acb6..c9990d447 100644
--- a/src/stores/useUserStore/index.ts
+++ b/src/stores/useUserStore/index.ts
@@ -1,5 +1,7 @@
 import create from 'zustand'
 
+type ActionType = 'CLEAR' | 'INCREMENT'
+
 export type UserStore = {
   isAdmin: boolean
   pubKey: string
@@ -7,12 +9,15 @@ export type UserStore = {
   setPubKey: (val: string) => void
   budget: number | null
   setBudget: (val: number | null) => void
+  postCount: number
+  setPostCount: (action: ActionType) => void
 }
 
-const defaultData: Omit<UserStore, 'setIsAdmin' | 'setPubKey' | 'setBudget'> = {
+const defaultData: Omit<UserStore, 'setIsAdmin' | 'setPubKey' | 'setBudget' | 'setPostCount'> = {
   isAdmin: false,
   pubKey: '',
   budget: 0,
+  postCount: 0,
 }
 
 export const useUserStore = create<UserStore>((set) => ({
@@ -20,4 +25,12 @@ export const useUserStore = create<UserStore>((set) => ({
   setIsAdmin: (isAdmin) => set({ isAdmin }),
   setPubKey: (pubKey) => set({ pubKey }),
   setBudget: (budget) => set({ budget }),
+  setPostCount: (action: ActionType) =>
+    set((state) => {
+      if (action === 'INCREMENT') {
+        return { postCount: state.postCount + 1 }
+      }
+
+      return { postCount: 0 }
+    }),
 }))

From 30b89c00e0061d382e54b331ce7ecfd587baa963 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Wed, 18 Oct 2023 21:51:55 +0100
Subject: [PATCH 03/14] chore: added new node count to latest tab

---
 src/components/App/SideBar/Latest/index.tsx | 77 ++++++++++++++++-----
 1 file changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 349b8efdc..6ad7d42ee 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -1,7 +1,9 @@
 import { memo } from 'react'
 import styled from 'styled-components'
-import BrowseGalleryIcon from '~/components/Icons/BrowseGalleryIcon'
 import { Flex } from '~/components/common/Flex'
+import BrowseGalleryIcon from '~/components/Icons/BrowseGalleryIcon'
+import { useDataStore } from '~/stores/useDataStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { Relevance } from '../Relevance'
 
@@ -10,26 +12,68 @@ type Props = {
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _View = ({ isSearchResult }: Props) => (
-  <Wrapper>
-    {!isSearchResult && (
-      <div className="heading">
-        <span className="heading__title">Latest</span>
-        <span className="heading__icon">
-          <BrowseGalleryIcon />
-        </span>
-      </div>
-    )}
-    <Relevance isSearchResult={isSearchResult} />
-  </Wrapper>
-)
+const _View = ({ isSearchResult }: Props) => {
+  const [postCount, setPostCount] = useUserStore((s) => [s.postCount, s.setPostCount])
+  const [fetchData] = [useDataStore((s) => s.fetchData)]
+
+  async function getLatest() {
+    if (postCount < 1) {
+      return
+    }
+
+    await fetchData()
+    setPostCount('CLEAR')
+  }
+
+  return (
+    <Wrapper>
+      {!isSearchResult && (
+        <div className="heading_container">
+          <div className="heading">
+            <span className="heading__title">Latest</span>
+            <span className="heading__icon">
+              <BrowseGalleryIcon />
+            </span>
+          </div>
+          <div className="button_container">
+            <button onClick={getLatest} type="button">{`New Node (${postCount})`}</button>
+          </div>
+        </div>
+      )}
+      <Relevance isSearchResult={isSearchResult} />
+    </Wrapper>
+  )
+}
 
 export const LatestView = memo(_View)
 
 const Wrapper = styled(Flex)`
+  .heading_container {
+    display: flex;
+    align-items center;
+    justify-content: space-between;
+    padding: 16px 24px 16px 24px;
+  }
+
+  .button_container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    button {
+      background-color: transparent;
+      outline: none;
+      border: none;
+      font-family: Barlow;
+      font-size: 1.1rem;
+      color: ${colors.GRAY6};
+      cursor: pointer;
+      font-weight: 500;
+    }
+  }
+
   .heading {
     color: ${colors.GRAY6};
-    padding: 0 24px 16px 24px;
     font-family: Barlow;
     font-size: 14px;
     font-style: normal;
@@ -38,7 +82,8 @@ const Wrapper = styled(Flex)`
     letter-spacing: 1.12px;
     text-transform: uppercase;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
+    justify-content: center;
 
     &__icon {
       margin-left: 14px;

From 7ca551ecdb58ec4af58c17d12310015607bbdd8d Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Wed, 18 Oct 2023 21:59:38 +0100
Subject: [PATCH 04/14] refactor: changed all post variable name to node

---
 src/components/App/SideBar/Latest/index.tsx |  8 ++++----
 src/components/App/index.tsx                | 12 ++++++------
 src/stores/useUserStore/index.ts            | 14 +++++++-------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 6ad7d42ee..5fb8568e6 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -13,16 +13,16 @@ type Props = {
 
 // eslint-disable-next-line no-underscore-dangle
 const _View = ({ isSearchResult }: Props) => {
-  const [postCount, setPostCount] = useUserStore((s) => [s.postCount, s.setPostCount])
+  const [nodeCount, setNodeCount] = useUserStore((s) => [s.nodeCount, s.setNodeCount])
   const [fetchData] = [useDataStore((s) => s.fetchData)]
 
   async function getLatest() {
-    if (postCount < 1) {
+    if (nodeCount < 1) {
       return
     }
 
     await fetchData()
-    setPostCount('CLEAR')
+    setNodeCount('CLEAR')
   }
 
   return (
@@ -36,7 +36,7 @@ const _View = ({ isSearchResult }: Props) => {
             </span>
           </div>
           <div className="button_container">
-            <button onClick={getLatest} type="button">{`New Node (${postCount})`}</button>
+            <button onClick={getLatest} type="button">{`New Node (${nodeCount})`}</button>
           </div>
         </div>
       )}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 21a624988..e4b58ed71 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -53,7 +53,7 @@ const Version = styled(Flex)`
 export const App = () => {
   const { open } = useModal('budgetExplanation')
 
-  const [setBudget, setPostCount] = useUserStore((s) => [s.setBudget, s.setPostCount])
+  const [setBudget, setNodeCount] = useUserStore((s) => [s.setBudget, s.setNodeCount])
 
   const [
     setSidebarOpen,
@@ -153,9 +153,9 @@ export const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphStyle])
 
-  const handleNewPost = useCallback(() => {
-    setPostCount('INCREMENT')
-  }, [setPostCount])
+  const handleNewNode = useCallback(() => {
+    setNodeCount('INCREMENT')
+  }, [setNodeCount])
 
   // setup socket
   useEffect(() => {
@@ -164,11 +164,11 @@ export const App = () => {
     }
 
     if (socket) {
-      socket.on('newpost', handleNewPost)
+      socket.on('newnode', handleNewNode)
 
       isSocketSet.current = true
     }
-  }, [socket, handleNewPost])
+  }, [socket, handleNewNode])
 
   return (
     <AppProviders>
diff --git a/src/stores/useUserStore/index.ts b/src/stores/useUserStore/index.ts
index c9990d447..30622e610 100644
--- a/src/stores/useUserStore/index.ts
+++ b/src/stores/useUserStore/index.ts
@@ -9,15 +9,15 @@ export type UserStore = {
   setPubKey: (val: string) => void
   budget: number | null
   setBudget: (val: number | null) => void
-  postCount: number
-  setPostCount: (action: ActionType) => void
+  nodeCount: number
+  setNodeCount: (action: ActionType) => void
 }
 
-const defaultData: Omit<UserStore, 'setIsAdmin' | 'setPubKey' | 'setBudget' | 'setPostCount'> = {
+const defaultData: Omit<UserStore, 'setIsAdmin' | 'setPubKey' | 'setBudget' | 'setNodeCount'> = {
   isAdmin: false,
   pubKey: '',
   budget: 0,
-  postCount: 0,
+  nodeCount: 0,
 }
 
 export const useUserStore = create<UserStore>((set) => ({
@@ -25,12 +25,12 @@ export const useUserStore = create<UserStore>((set) => ({
   setIsAdmin: (isAdmin) => set({ isAdmin }),
   setPubKey: (pubKey) => set({ pubKey }),
   setBudget: (budget) => set({ budget }),
-  setPostCount: (action: ActionType) =>
+  setNodeCount: (action: ActionType) =>
     set((state) => {
       if (action === 'INCREMENT') {
-        return { postCount: state.postCount + 1 }
+        return { nodeCount: state.nodeCount + 1 }
       }
 
-      return { postCount: 0 }
+      return { nodeCount: 0 }
     }),
 }))

From 81d24f48dd1ee99f5976624b0db27b94bd9cde2e Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Wed, 18 Oct 2023 22:44:41 +0100
Subject: [PATCH 05/14] refactor: stopped tracking .env file

---
 .env | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index 31660937f..000000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-VITE_APP_API_URL=http://localhost:8444

From ee0579d663d4430c9b9f56b03b0ae130bab0702e Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Wed, 18 Oct 2023 23:02:40 +0100
Subject: [PATCH 06/14] refactor: changed copy from new node to see latest

---
 src/components/App/SideBar/Latest/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 5fb8568e6..6dfe2c8ef 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -36,7 +36,7 @@ const _View = ({ isSearchResult }: Props) => {
             </span>
           </div>
           <div className="button_container">
-            <button onClick={getLatest} type="button">{`New Node (${nodeCount})`}</button>
+            <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button>
           </div>
         </div>
       )}

From acaa4f5574341c016bb654f9755052e1fd8d97a8 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Thu, 19 Oct 2023 12:57:32 +0100
Subject: [PATCH 07/14] refactor: show latest only when there is a new node

---
 src/components/App/SideBar/Latest/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 6dfe2c8ef..53c23b33e 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -36,7 +36,7 @@ const _View = ({ isSearchResult }: Props) => {
             </span>
           </div>
           <div className="button_container">
-            <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button>
+            {nodeCount ? <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button> : ''}
           </div>
         </div>
       )}

From c241356596855e402131be7d4135e877f4f3a527 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Thu, 19 Oct 2023 19:23:54 +0100
Subject: [PATCH 08/14] refactor: changed function declaration to a variable
 declaration

---
 .gitignore                                  | 1 +
 src/components/App/SideBar/Latest/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 79b91f594..41ec55927 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,6 +20,7 @@ build/
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 53c23b33e..c900962fe 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -16,7 +16,7 @@ const _View = ({ isSearchResult }: Props) => {
   const [nodeCount, setNodeCount] = useUserStore((s) => [s.nodeCount, s.setNodeCount])
   const [fetchData] = [useDataStore((s) => s.fetchData)]
 
-  async function getLatest() {
+  const getLatest = async () => {
     if (nodeCount < 1) {
       return
     }

From e74fe68bcf8dce1d5ac0ac43b12b3af8733dfbbf Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 23 Oct 2023 15:37:09 +0100
Subject: [PATCH 09/14] style: update latest node button style

---
 src/components/App/SideBar/Latest/index.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index c900962fe..fcc73ae66 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -36,7 +36,7 @@ const _View = ({ isSearchResult }: Props) => {
             </span>
           </div>
           <div className="button_container">
-            {nodeCount ? <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button> : ''}
+            <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button>
           </div>
         </div>
       )}
@@ -50,25 +50,29 @@ export const LatestView = memo(_View)
 const Wrapper = styled(Flex)`
   .heading_container {
     display: flex;
-    align-items center;
-    justify-content: space-between;
+    flex-direction: column;
     padding: 16px 24px 16px 24px;
   }
 
-  .button_container{
+  .button_container {
     display: flex;
     align-items: center;
     justify-content: center;
-
+    width: 100%;
+    background-color: #303342;
+    padding: 0.75rem 1rem;
+    border-radius: 12.5rem;
+    margin-top: 1.5rem;
     button {
       background-color: transparent;
       outline: none;
       border: none;
       font-family: Barlow;
       font-size: 1.1rem;
-      color: ${colors.GRAY6};
+      color: white;
       cursor: pointer;
       font-weight: 500;
+      width: 100%;
     }
   }
 
@@ -83,7 +87,6 @@ const Wrapper = styled(Flex)`
     text-transform: uppercase;
     display: flex;
     align-items: center;
-    justify-content: center;
 
     &__icon {
       margin-left: 14px;

From fbbe83cea9930eb650843a1d4870c7cebcccf74a Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 23 Oct 2023 16:03:28 +0100
Subject: [PATCH 10/14] chore: added download button and styled

---
 public/svg-icons/DownloadIcon.svg           |  8 ++++++
 src/components/App/SideBar/Latest/index.tsx | 24 ++++++++++++++--
 src/components/Icons/AddContentIcon.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       | 31 +++++++++++++++++++++
 src/components/Icons/EpisodeIcon.tsx        | 30 ++++++++++++++++----
 src/components/Icons/FilterOffIcon.tsx      | 23 +++++++++++----
 src/components/Icons/GrainIcon.tsx          | 23 +++++++++++----
 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 +++++++++++----
 34 files changed, 585 insertions(+), 153 deletions(-)
 create mode 100644 public/svg-icons/DownloadIcon.svg
 create mode 100644 src/components/Icons/DownloadIcon.tsx

diff --git a/public/svg-icons/DownloadIcon.svg b/public/svg-icons/DownloadIcon.svg
new file mode 100644
index 000000000..01541c7b5
--- /dev/null
+++ b/public/svg-icons/DownloadIcon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<mask id="mask0_2638_2680" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2638_2680)">
+<path d="M9.99732 16C9.90858 16 9.82421 15.985 9.74419 15.9551C9.66418 15.9252 9.5909 15.8765 9.52435 15.8091L6.18835 12.4277C6.06278 12.3004 6 12.1406 6 11.9483C6 11.7559 6.06278 11.5961 6.18835 11.4689C6.32145 11.3315 6.48099 11.2648 6.66697 11.2686C6.85295 11.2724 7.00873 11.3392 7.13429 11.4689L9.32114 13.674V4.68539C9.32114 4.49306 9.3864 4.33074 9.51692 4.19845C9.64744 4.06615 9.80758 4 9.99732 4C10.1871 4 10.3472 4.06615 10.4777 4.19845C10.6082 4.33074 10.6735 4.49306 10.6735 4.68539V13.674L12.849 11.4689C12.9845 11.3315 13.1447 11.2629 13.3294 11.2629C13.5143 11.2629 13.6744 11.3315 13.8099 11.4689C13.9378 11.6062 14.0012 11.7685 14 11.9558C13.9988 12.1431 13.9354 12.3004 13.8099 12.4277L10.4738 15.8091C10.4073 15.8765 10.3334 15.9252 10.2522 15.9551C10.171 15.985 10.0861 16 9.99732 16Z" fill="#909BAA"/>
+</g>
+</svg>
diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index fcc73ae66..91790ea58 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import BrowseGalleryIcon from '~/components/Icons/BrowseGalleryIcon'
+import DownloadIcon from '~/components/Icons/DownloadIcon'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
@@ -36,7 +37,13 @@ const _View = ({ isSearchResult }: Props) => {
             </span>
           </div>
           <div className="button_container">
-            <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button>
+            <button onClick={getLatest} type="button">
+              <span className="downloadButton">
+                {' '}
+                <DownloadIcon />
+              </span>
+              {`See latest (${nodeCount})`}
+            </button>
           </div>
         </div>
       )}
@@ -62,7 +69,7 @@ const Wrapper = styled(Flex)`
     background-color: #303342;
     padding: 0.75rem 1rem;
     border-radius: 12.5rem;
-    margin-top: 1.5rem;
+    margin-top: 1.2rem;
     button {
       background-color: transparent;
       outline: none;
@@ -73,6 +80,19 @@ const Wrapper = styled(Flex)`
       cursor: pointer;
       font-weight: 500;
       width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      column-gap: 0.5rem;
+
+      .downloadButton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #909baa;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
     }
   }
 
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/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
new file mode 100644
index 000000000..9b2aaa390
--- /dev/null
+++ b/src/components/Icons/DownloadIcon.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable */
+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"
+    >
+      <rect width="1em" height="1em" fill="currentColor" />
+    </mask>
+    <g mask="url(#mask0_2638_2680)">
+      <path
+        d="M9.99732 16C9.90858 16 9.82421 15.985 9.74419 15.9551C9.66418 15.9252 9.5909 15.8765 9.52435 15.8091L6.18835 12.4277C6.06278 12.3004 6 12.1406 6 11.9483C6 11.7559 6.06278 11.5961 6.18835 11.4689C6.32145 11.3315 6.48099 11.2648 6.66697 11.2686C6.85295 11.2724 7.00873 11.3392 7.13429 11.4689L9.32114 13.674V4.68539C9.32114 4.49306 9.3864 4.33074 9.51692 4.19845C9.64744 4.06615 9.80758 4 9.99732 4C10.1871 4 10.3472 4.06615 10.4777 4.19845C10.6082 4.33074 10.6735 4.49306 10.6735 4.68539V13.674L12.849 11.4689C12.9845 11.3315 13.1447 11.2629 13.3294 11.2629C13.5143 11.2629 13.6744 11.3315 13.8099 11.4689C13.9378 11.6062 14.0012 11.7685 14 11.9558C13.9988 12.1431 13.9354 12.3004 13.8099 12.4277L10.4738 15.8091C10.4073 15.8765 10.3334 15.9252 10.2522 15.9551C10.171 15.985 10.0861 16 9.99732 16Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export default DownloadIcon;
diff --git a/src/components/Icons/EpisodeIcon.tsx b/src/components/Icons/EpisodeIcon.tsx
index f44b98f4a..75893e5da 100644
--- a/src/components/Icons/EpisodeIcon.tsx
+++ b/src/components/Icons/EpisodeIcon.tsx
@@ -1,18 +1,36 @@
 /* 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">
-      <rect id="Rectangle 4456" x="0.5" y="5.625" width="1em" height="1em" rx="0.5" stroke="white" />
+      <rect
+        id="Rectangle 4456"
+        x="0.5"
+        y="5.625"
+        width="1em"
+        height="1em"
+        rx="0.5"
+        stroke="white"
+      />
       <path
         id="Rectangle 4457"
         d="M2.0625 3.0625H12.0625C12.6148 3.0625 13.0625 3.51022 13.0625 4.0625V9.9375"
         stroke="white"
       />
-      <path id="Rectangle 4458" d="M4.125 1H14.125C14.6773 1 15.125 1.44772 15.125 2V7.875" stroke="white" />
+      <path
+        id="Rectangle 4458"
+        d="M4.125 1H14.125C14.6773 1 15.125 1.44772 15.125 2V7.875"
+        stroke="white"
+      />
     </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/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 0f0190745fde51e3354658388eb3f1dfec303dc8 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 23 Oct 2023 16:18:38 +0100
Subject: [PATCH 11/14] chore: make latest view dynamic

---
 src/components/App/SideBar/Latest/index.tsx | 24 ++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 91790ea58..9757de4f3 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -36,15 +36,19 @@ const _View = ({ isSearchResult }: Props) => {
               <BrowseGalleryIcon />
             </span>
           </div>
-          <div className="button_container">
-            <button onClick={getLatest} type="button">
-              <span className="downloadButton">
-                {' '}
-                <DownloadIcon />
-              </span>
-              {`See latest (${nodeCount})`}
-            </button>
-          </div>
+          {nodeCount ? (
+            <div className="button_container">
+              <button onClick={getLatest} type="button">
+                <span className="downloadButton">
+                  {' '}
+                  <DownloadIcon />
+                </span>
+                {`See Latest (${nodeCount})`}
+              </button>
+            </div>
+          ) : (
+            ''
+          )}
         </div>
       )}
       <Relevance isSearchResult={isSearchResult} />
@@ -75,7 +79,7 @@ const Wrapper = styled(Flex)`
       outline: none;
       border: none;
       font-family: Barlow;
-      font-size: 1.1rem;
+      font-size: 0.875rem;
       color: white;
       cursor: pointer;
       font-weight: 500;

From c17b9cfddcf7273c191462abf609a0321e058e84 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 23 Oct 2023 16:19:33 +0100
Subject: [PATCH 12/14] chore: prettier format

---
 src/components/Icons/AddContentIcon.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       | 30 +++++-----------------
 src/components/Icons/FilterOffIcon.tsx     | 23 ++++-------------
 src/components/Icons/GrainIcon.tsx         | 23 ++++-------------
 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 ++++-------------
 32 files changed, 156 insertions(+), 542 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/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 75893e5da..f44b98f4a 100644
--- a/src/components/Icons/EpisodeIcon.tsx
+++ b/src/components/Icons/EpisodeIcon.tsx
@@ -1,36 +1,18 @@
 /* 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">
-      <rect
-        id="Rectangle 4456"
-        x="0.5"
-        y="5.625"
-        width="1em"
-        height="1em"
-        rx="0.5"
-        stroke="white"
-      />
+      <rect id="Rectangle 4456" x="0.5" y="5.625" width="1em" height="1em" rx="0.5" stroke="white" />
       <path
         id="Rectangle 4457"
         d="M2.0625 3.0625H12.0625C12.6148 3.0625 13.0625 3.51022 13.0625 4.0625V9.9375"
         stroke="white"
       />
-      <path
-        id="Rectangle 4458"
-        d="M4.125 1H14.125C14.6773 1 15.125 1.44772 15.125 2V7.875"
-        stroke="white"
-      />
+      <path id="Rectangle 4458" d="M4.125 1H14.125C14.6773 1 15.125 1.44772 15.125 2V7.875" stroke="white" />
     </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/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 81eee023517fe69856dcd0dea92c5f3d3bbd002a Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 23 Oct 2023 18:47:14 +0100
Subject: [PATCH 13/14] chore: fixed PR comments

---
 src/components/App/SideBar/Latest/index.tsx | 47 ++++++---------------
 1 file changed, 12 insertions(+), 35 deletions(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 9757de4f3..5f185753d 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@mui/material'
 import { memo } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
@@ -38,17 +39,11 @@ const _View = ({ isSearchResult }: Props) => {
           </div>
           {nodeCount ? (
             <div className="button_container">
-              <button onClick={getLatest} type="button">
-                <span className="downloadButton">
-                  {' '}
-                  <DownloadIcon />
-                </span>
-                {`See Latest (${nodeCount})`}
-              </button>
+              <ButtonStyled className="button" onClick={getLatest} startIcon={<DownloadIcon />}>
+                <span className="button__text">{`See Latest (${nodeCount})`}</span>
+              </ButtonStyled>
             </div>
-          ) : (
-            ''
-          )}
+          ) : null}
         </div>
       )}
       <Relevance isSearchResult={isSearchResult} />
@@ -56,6 +51,8 @@ const _View = ({ isSearchResult }: Props) => {
   )
 }
 
+const ButtonStyled = styled(Button)``
+
 export const LatestView = memo(_View)
 
 const Wrapper = styled(Flex)`
@@ -66,36 +63,16 @@ const Wrapper = styled(Flex)`
   }
 
   .button_container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    background-color: #303342;
-    padding: 0.75rem 1rem;
-    border-radius: 12.5rem;
     margin-top: 1.2rem;
-    button {
-      background-color: transparent;
-      outline: none;
-      border: none;
+    .button {
       font-family: Barlow;
       font-size: 0.875rem;
-      color: white;
-      cursor: pointer;
+      color: #909baa;
       font-weight: 500;
       width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      column-gap: 0.5rem;
-
-      .downloadButton {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #909baa;
-        width: 1.25rem;
-        height: 1.25rem;
+
+      .button__text {
+        color: white;
       }
     }
   }

From 52e87dcd28e729c62743cbf86e7dbf05a3b24aa3 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Tue, 24 Oct 2023 11:28:18 +0100
Subject: [PATCH 14/14] chore: changed latest button style

---
 src/components/App/SideBar/Latest/index.tsx | 28 ++++++++-------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
index 5f185753d..6d55f186c 100644
--- a/src/components/App/SideBar/Latest/index.tsx
+++ b/src/components/App/SideBar/Latest/index.tsx
@@ -40,7 +40,7 @@ const _View = ({ isSearchResult }: Props) => {
           {nodeCount ? (
             <div className="button_container">
               <ButtonStyled className="button" onClick={getLatest} startIcon={<DownloadIcon />}>
-                <span className="button__text">{`See Latest (${nodeCount})`}</span>
+                {`See Latest (${nodeCount})`}
               </ButtonStyled>
             </div>
           ) : null}
@@ -51,7 +51,16 @@ const _View = ({ isSearchResult }: Props) => {
   )
 }
 
-const ButtonStyled = styled(Button)``
+const ButtonStyled = styled(Button)`
+  && {
+    width: 100%;
+    margin-top: 1.2rem;
+    font-weight: 500;
+    .MuiButton-startIcon {
+      color: ${colors.GRAY6};
+    }
+  }
+`
 
 export const LatestView = memo(_View)
 
@@ -62,21 +71,6 @@ const Wrapper = styled(Flex)`
     padding: 16px 24px 16px 24px;
   }
 
-  .button_container {
-    margin-top: 1.2rem;
-    .button {
-      font-family: Barlow;
-      font-size: 0.875rem;
-      color: #909baa;
-      font-weight: 500;
-      width: 100%;
-
-      .button__text {
-        color: white;
-      }
-    }
-  }
-
   .heading {
     color: ${colors.GRAY6};
     font-family: Barlow;