feat(web): add-open-in-new-tab-option

Author: tractorss

web/src/assets/svgs/icons/new-tab.svg

@@ -15,6 +15,7 @@ const Container = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 38px;
 `;
 
 const TitleContainer = styled.div`

web/src/pages/Cases/AttachmentDisplay/Header.tsx

@@ -3,6 +3,8 @@ import styled from "styled-components";
 
 import { useSearchParams } from "react-router-dom";
 
+import NewTabIcon from "svgs/icons/new-tab.svg";
+
 import Loader from "components/Loader";
 
 import Header from "./Header";
@@ -13,7 +15,7 @@ const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 47px;
+  gap: 8px;
 `;
 
 const DisplayContainer = styled.div`
@@ -30,6 +32,19 @@ const LoaderContainer = styled.div`
   justify-content: center;
 `;
 
+const NewTabInfo = styled.a`
+  align-self: flex-end;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const StyledNewTabIcon = styled(NewTabIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
 const EvidenceAttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
 
@@ -38,17 +53,22 @@ const EvidenceAttachmentDisplay: React.FC = () => {
     <Container>
       <Header />
       {url ? (
-        <Suspense
-          fallback={
-            <LoaderContainer>
-              <Loader width={"48px"} height={"48px"} />
-            </LoaderContainer>
-          }
-        >
-          <DisplayContainer>
-            <FileViewer url={url} />
-          </DisplayContainer>
-        </Suspense>
+        <>
+          <NewTabInfo href={url} rel="noreferrer" target="_blank">
+            Open in new tab <StyledNewTabIcon />
+          </NewTabInfo>
+          <Suspense
+            fallback={
+              <LoaderContainer>
+                <Loader width={"48px"} height={"48px"} />
+              </LoaderContainer>
+            }
+          >
+            <DisplayContainer>
+              <FileViewer url={url} />
+            </DisplayContainer>
+          </Suspense>
+        </>
       ) : null}
     </Container>
   );