From fe00608d482ad3acc976383ded381126a0e191d5 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 25 Jun 2024 15:23:42 +0530 Subject: [PATCH 1/3] feat(web): file-attachment-display --- web/package.json | 1 + web/src/app.tsx | 2 + web/src/assets/svgs/icons/arrow-left.svg | 10 + web/src/assets/svgs/icons/new-tab.svg | 3 + web/src/assets/svgs/icons/paperclip.svg | 17 + .../FileViewer/Viewers/MarkdownViewer.tsx | 38 ++ web/src/components/FileViewer/index.tsx | 53 +++ web/src/components/Loader.tsx | 49 +++ .../PreviewCard/Terms/AttachedFile.tsx | 25 +- web/src/layout/Header/index.tsx | 4 +- web/src/pages/AttachmentDisplay/Header.tsx | 74 ++++ web/src/pages/AttachmentDisplay/index.tsx | 79 ++++ web/src/pages/MyTransactions/index.tsx | 1 + web/src/styles/customScrollbar.ts | 26 ++ web/src/styles/global-style.ts | 7 +- yarn.lock | 415 +++++++++++++++++- 16 files changed, 785 insertions(+), 19 deletions(-) create mode 100644 web/src/assets/svgs/icons/arrow-left.svg create mode 100644 web/src/assets/svgs/icons/new-tab.svg create mode 100644 web/src/assets/svgs/icons/paperclip.svg create mode 100644 web/src/components/FileViewer/Viewers/MarkdownViewer.tsx create mode 100644 web/src/components/FileViewer/index.tsx create mode 100644 web/src/components/Loader.tsx create mode 100644 web/src/pages/AttachmentDisplay/Header.tsx create mode 100644 web/src/pages/AttachmentDisplay/index.tsx create mode 100644 web/src/styles/customScrollbar.ts diff --git a/web/package.json b/web/package.json index dd19f6a..328586c 100644 --- a/web/package.json +++ b/web/package.json @@ -70,6 +70,7 @@ "typescript": "^5.3.3" }, "dependencies": { + "@cyntler/react-doc-viewer": "^1.16.3", "@filebase/client": "^0.0.5", "@kleros/ui-components-library": "^2.12.0", "@middy/core": "^5.3.5", diff --git a/web/src/app.tsx b/web/src/app.tsx index 8da04ca..bfb49b5 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -13,6 +13,7 @@ import Layout from "layout/index"; import NewTransaction from "./pages/NewTransaction"; import MyTransactions from "./pages/MyTransactions"; import { NewTransactionProvider } from "./context/NewTransactionContext"; +import AttachmentDisplay from "./pages/AttachmentDisplay"; const App: React.FC = () => { return ( @@ -28,6 +29,7 @@ const App: React.FC = () => { } /> } /> } /> + } /> 404 not found} /> diff --git a/web/src/assets/svgs/icons/arrow-left.svg b/web/src/assets/svgs/icons/arrow-left.svg new file mode 100644 index 0000000..235cf7d --- /dev/null +++ b/web/src/assets/svgs/icons/arrow-left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/new-tab.svg b/web/src/assets/svgs/icons/new-tab.svg new file mode 100644 index 0000000..5bc0dec --- /dev/null +++ b/web/src/assets/svgs/icons/new-tab.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/paperclip.svg b/web/src/assets/svgs/icons/paperclip.svg new file mode 100644 index 0000000..733c872 --- /dev/null +++ b/web/src/assets/svgs/icons/paperclip.svg @@ -0,0 +1,17 @@ + + + + + \ No newline at end of file diff --git a/web/src/components/FileViewer/Viewers/MarkdownViewer.tsx b/web/src/components/FileViewer/Viewers/MarkdownViewer.tsx new file mode 100644 index 0000000..0ee77ac --- /dev/null +++ b/web/src/components/FileViewer/Viewers/MarkdownViewer.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import styled from "styled-components"; + +import { type DocRenderer } from "@cyntler/react-doc-viewer"; +import ReactMarkdown from "react-markdown"; + +const Container = styled.div` + padding: 16px; +`; + +const StyledMarkdown = styled(ReactMarkdown)` + background-color: ${({ theme }) => theme.whiteBackground}; + a { + font-size: 16px; + } + code { + color: ${({ theme }) => theme.secondaryText}; + } +`; + +const MarkdownRenderer: DocRenderer = ({ mainState: { currentDocument } }) => { + if (!currentDocument) return null; + const base64String = (currentDocument.fileData as string).split(",")[1]; + + // Decode the base64 string + const decodedData = atob(base64String); + + return ( + + {decodedData} + + ); +}; + +MarkdownRenderer.fileTypes = ["md", "text/plain"]; +MarkdownRenderer.weight = 1; + +export default MarkdownRenderer; diff --git a/web/src/components/FileViewer/index.tsx b/web/src/components/FileViewer/index.tsx new file mode 100644 index 0000000..93395ce --- /dev/null +++ b/web/src/components/FileViewer/index.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import styled from "styled-components"; + +import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer"; + +import "@cyntler/react-doc-viewer/dist/index.css"; + +import MarkdownRenderer from "./Viewers/MarkdownViewer"; +import { customScrollbar } from "styles/customScrollbar"; + +const Wrapper = styled.div` + background-color: ${({ theme }) => theme.whiteBackground}; + border-radius: 3px; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06); + max-height: 1050px; + overflow: scroll; + + ${customScrollbar} +`; + +const StyledDocViewer = styled(DocViewer)` + background-color: ${({ theme }) => theme.whiteBackground} !important; +`; + +/** + * @description this viewer supports loading multiple files, it can load urls, local files, etc + * @param url The url of the file to be displayed + * @returns renders the file + */ +const FileViewer: React.FC<{ url: string }> = ({ url }) => { + const docs = [{ uri: url }]; + return ( + + + + ); +}; + +export default FileViewer; diff --git a/web/src/components/Loader.tsx b/web/src/components/Loader.tsx new file mode 100644 index 0000000..c1d2dad --- /dev/null +++ b/web/src/components/Loader.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import styled, { type CSSProperties, keyframes } from "styled-components"; + +import KlerosIcon from "svgs/icons/kleros.svg"; + +type Width = CSSProperties["width"]; +type Height = CSSProperties["height"]; + +const breathing = keyframes` + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.3); + } + + 100% { + transform: scale(1); + } +`; + +const StyledKlerosIcon = styled(KlerosIcon)` + path { + fill: ${({ theme }) => theme.klerosUIComponentsStroke}; + } + animation: ${breathing} 2s ease-out infinite normal; +`; + +const Container = styled.div<{ width?: Width; height?: Height }>` + width: ${({ width }) => width ?? "100%"}; + height: ${({ height }) => height ?? "100%"}; +`; + +interface ILoader { + width?: Width; + height?: Height; + className?: string; +} + +const Loader: React.FC = ({ width, height, className }) => { + return ( + + + + ); +}; + +export default Loader; diff --git a/web/src/components/PreviewCard/Terms/AttachedFile.tsx b/web/src/components/PreviewCard/Terms/AttachedFile.tsx index 4464061..4d3366c 100644 --- a/web/src/components/PreviewCard/Terms/AttachedFile.tsx +++ b/web/src/components/PreviewCard/Terms/AttachedFile.tsx @@ -1,16 +1,23 @@ import React from "react"; -import styled from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; +import { Link } from "react-router-dom"; +import styled, { css } from "styled-components"; import AttachmentIcon from "svgs/icons/attachment.svg"; +import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import { getIpfsUrl } from "utils/getIpfsUrl"; -const StyledA = styled.a` +const StyledA = styled(Link)` + height: fit-content; display: flex; gap: ${responsiveSize(5, 6)}; - > svg { - width: 16px; - fill: ${({ theme }) => theme.primaryBlue}; - } + ${landscapeStyle( + () => css` + > svg { + width: 16px; + fill: ${({ theme }) => theme.primaryBlue}; + } + ` + )} `; interface IAttachedFile { @@ -18,10 +25,10 @@ interface IAttachedFile { } const AttachedFile: React.FC = ({ extraDescriptionUri }) => { - const href = extraDescriptionUri && getIpfsUrl(extraDescriptionUri); + const uri = extraDescriptionUri && getIpfsUrl(extraDescriptionUri); return extraDescriptionUri ? ( - + View Attached File diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx index b69c3d5..db911b9 100644 --- a/web/src/layout/Header/index.tsx +++ b/web/src/layout/Header/index.tsx @@ -5,7 +5,7 @@ import DesktopHeader from "./DesktopHeader"; const Container = styled.div` position: sticky; - z-index: 1; + z-index: 10; top: 0; width: 100%; height: 64px; @@ -33,4 +33,4 @@ const Header: React.FC = () => { ); }; -export default Header; \ No newline at end of file +export default Header; diff --git a/web/src/pages/AttachmentDisplay/Header.tsx b/web/src/pages/AttachmentDisplay/Header.tsx new file mode 100644 index 0000000..6ea1070 --- /dev/null +++ b/web/src/pages/AttachmentDisplay/Header.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import styled from "styled-components"; + +import { useNavigate, useParams } from "react-router-dom"; + +import { Button } from "@kleros/ui-components-library"; + +import Arrow from "svgs/icons/arrow-left.svg"; +import PaperClip from "svgs/icons/paperclip.svg"; + +import { responsiveSize } from "styles/responsiveSize"; + +const Container = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 38px; +`; + +const TitleContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; +`; + +const Title = styled.h1` + margin: 0px; + font-size: ${responsiveSize(16, 24)}; +`; + +const StyledPaperClip = styled(PaperClip)` + width: ${responsiveSize(16, 24)}; + height: ${responsiveSize(16, 24)}; + path { + fill: ${({ theme }) => theme.primaryPurple}; + } +`; + +const StyledButton = styled(Button)` + background-color: transparent; + padding: 0; + .button-text { + color: ${({ theme }) => theme.primaryBlue}; + font-weight: 400; + } + .button-svg { + path { + fill: ${({ theme }) => theme.primaryBlue}; + } + } + :focus, + :hover { + background-color: transparent; + } +`; + +const Header: React.FC = () => { + const { id } = useParams(); + const navigate = useNavigate(); + + return ( + + + + Attachment File{" "} + + navigate(-1)} /> + + ); +}; + +export default Header; diff --git a/web/src/pages/AttachmentDisplay/index.tsx b/web/src/pages/AttachmentDisplay/index.tsx new file mode 100644 index 0000000..647e4aa --- /dev/null +++ b/web/src/pages/AttachmentDisplay/index.tsx @@ -0,0 +1,79 @@ +import React, { lazy, Suspense } from "react"; +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"; + +const FileViewer = lazy(() => import("components/FileViewer")); + +const Container = styled.div` + width: 100%; + background-color: ${({ theme }) => theme.lightBackground}; + padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + max-width: 1780px; + margin: 0 auto; +`; + +const AttachmentContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; +`; + +const LoaderContainer = styled.div` + width: 100%; + display: flex; + 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 AttachmentDisplay: React.FC = () => { + const [searchParams] = useSearchParams(); + + const url = searchParams.get("url"); + return ( + + +
+ {url ? ( + <> + + Open in new tab + + + + + } + > + + + + ) : null} + + + ); +}; + +export default AttachmentDisplay; diff --git a/web/src/pages/MyTransactions/index.tsx b/web/src/pages/MyTransactions/index.tsx index 835dff2..c44d647 100644 --- a/web/src/pages/MyTransactions/index.tsx +++ b/web/src/pages/MyTransactions/index.tsx @@ -36,6 +36,7 @@ const Dashboard: React.FC = () => { {isConnected && isOnSupportedChain ? ( } /> + theme.violetPurple}; + border-radius: 10px; + transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s; + } + ::-webkit-scrollbar-thumb:hover { + background-color: ${({ theme }) => theme.secondaryPurple}; + } + ::-webkit-scrollbar-thumb:active { + background-color: ${({ theme }) => theme.lavenderPurple}; + } + + // firefox + scrollbar-width: thin; + scrollbar-color: ${({ theme }) => theme.violetPurple} transparent; +`; diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index 9452954..4191267 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -115,4 +115,9 @@ export const GlobalStyle = createGlobalStyle` --os-handle-bg-hover: ${({ theme }) => theme.secondaryPurple}; --os-handle-bg-active: ${({ theme }) => theme.lavenderPurple}; } -`; \ No newline at end of file + + // @cyntler/react-doc-viewer injects a canvas to load pdf, this is alters the height of body tag, so set to hidden + .hiddenCanvasElement{ + display: none; + } +`; diff --git a/yarn.lock b/yarn.lock index 588421e..d200c62 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2841,6 +2841,25 @@ __metadata: languageName: node linkType: hard +"@cyntler/react-doc-viewer@npm:^1.16.3": + version: 1.16.3 + resolution: "@cyntler/react-doc-viewer@npm:1.16.3" + dependencies: + "@types/mustache": "npm:^4.2.5" + "@types/papaparse": "npm:^5.3.14" + ajv: "npm:^7.2.4" + core-js: "npm:^3.37.1" + mustache: "npm:^4.2.0" + papaparse: "npm:^5.4.1" + react-pdf: "npm:^9.0.0" + styled-components: "npm:^6.1.11" + peerDependencies: + react: ">=17.0.0" + react-dom: ">=17.0.0" + checksum: 10/2976939e0f7d474657ca56fe3dd0c24d7a07532212a82993692db819b6a34bea7354ba745f5b44bd6456e33a14acdc0930ad1016729ef1b887886c6072c850d7 + languageName: node + linkType: hard + "@datastream/core@npm:0.0.35": version: 0.0.35 resolution: "@datastream/core@npm:0.0.35" @@ -2861,6 +2880,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:1.2.2": + version: 1.2.2 + resolution: "@emotion/is-prop-valid@npm:1.2.2" + dependencies: + "@emotion/memoize": "npm:^0.8.1" + checksum: 10/0fa3960abfbe845d40cc230ab8c9408e1f33d3c03b321980359911c7212133cdcb0344d249e9dab23342b304567eece7a10ec44b986f7230e0640ba00049dceb + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.1.0": version: 1.2.1 resolution: "@emotion/is-prop-valid@npm:1.2.1" @@ -2884,6 +2912,13 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:0.8.1": + version: 0.8.1 + resolution: "@emotion/unitless@npm:0.8.1" + checksum: 10/918f73c46ac0b7161e3c341cc07d651ce87e31ab1695e74b12adb7da6bb98dfbff8c69cf68a4e40d9eb3d820ca055dc1267aeb3007927ce88f98b885bf729b63 + languageName: node + linkType: hard + "@emotion/unitless@npm:^0.7.4": version: 0.7.5 resolution: "@emotion/unitless@npm:0.7.5" @@ -4772,6 +4807,7 @@ __metadata: version: 0.0.0-use.local resolution: "@kleros/escrow-v2-web@workspace:web" dependencies: + "@cyntler/react-doc-viewer": "npm:^1.16.3" "@filebase/client": "npm:^0.0.5" "@graphql-codegen/cli": "npm:^4.0.1" "@graphql-codegen/client-preset": "npm:^4.1.0" @@ -5019,6 +5055,25 @@ __metadata: languageName: node linkType: hard +"@mapbox/node-pre-gyp@npm:^1.0.0": + version: 1.0.11 + resolution: "@mapbox/node-pre-gyp@npm:1.0.11" + dependencies: + detect-libc: "npm:^2.0.0" + https-proxy-agent: "npm:^5.0.0" + make-dir: "npm:^3.1.0" + node-fetch: "npm:^2.6.7" + nopt: "npm:^5.0.0" + npmlog: "npm:^5.0.1" + rimraf: "npm:^3.0.2" + semver: "npm:^7.3.5" + tar: "npm:^6.1.11" + bin: + node-pre-gyp: bin/node-pre-gyp + checksum: 10/59529a2444e44fddb63057152452b00705aa58059079191126c79ac1388ae4565625afa84ed4dd1bf017d1111ab6e47907f7c5192e06d83c9496f2f3e708680a + languageName: node + linkType: hard + "@metamask/eth-json-rpc-provider@npm:^1.0.0": version: 1.0.1 resolution: "@metamask/eth-json-rpc-provider@npm:1.0.1" @@ -9192,6 +9247,13 @@ __metadata: languageName: node linkType: hard +"@types/mustache@npm:^4.2.5": + version: 4.2.5 + resolution: "@types/mustache@npm:4.2.5" + checksum: 10/29581027fe420120ae0591e28d44209d0e01adf5175910d03401327777ee9c649a1508e2aa63147c782c7e53fcea4b69b5f9a2fbedcadc5500561d1161ae5ded + languageName: node + linkType: hard + "@types/node-forge@npm:^1.3.0": version: 1.3.11 resolution: "@types/node-forge@npm:1.3.11" @@ -9259,6 +9321,15 @@ __metadata: languageName: node linkType: hard +"@types/papaparse@npm:^5.3.14": + version: 5.3.14 + resolution: "@types/papaparse@npm:5.3.14" + dependencies: + "@types/node": "npm:*" + checksum: 10/9bd5cc0e6a2c02def6c8903dc4604e499907cb465186ed3532390468082a06f023adbac0216428d0d8e8fe017206780a03d20007041e9fed47c8d391cd69a536 + languageName: node + linkType: hard + "@types/parse-json@npm:^4.0.0": version: 4.0.2 resolution: "@types/parse-json@npm:4.0.2" @@ -9470,6 +9541,13 @@ __metadata: languageName: node linkType: hard +"@types/stylis@npm:4.2.5": + version: 4.2.5 + resolution: "@types/stylis@npm:4.2.5" + checksum: 10/f8dde326432a7047b6684b96442f0e2ade2cfe8c29bf56217fb8cbbe4763997051fa9dc0f8dba4aeed2fddb794b4bc91feba913b780666b3adc28198ac7c63d4 + languageName: node + linkType: hard + "@types/trusted-types@npm:^2.0.2": version: 2.0.7 resolution: "@types/trusted-types@npm:2.0.7" @@ -10889,6 +10967,18 @@ __metadata: languageName: node linkType: hard +"ajv@npm:^7.2.4": + version: 7.2.4 + resolution: "ajv@npm:7.2.4" + dependencies: + fast-deep-equal: "npm:^3.1.1" + json-schema-traverse: "npm:^1.0.0" + require-from-string: "npm:^2.0.2" + uri-js: "npm:^4.2.2" + checksum: 10/ed241a8986f80777713a7ffde37cdea8d112631623bbc7f0d867689bcb7af41f24a7ea2750c4dd8be681bf7fea314e05c8b4521a86bfb5882acd2432fc5335df + languageName: node + linkType: hard + "ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.11.0, ajv@npm:^8.6.0, ajv@npm:^8.9.0": version: 8.12.0 resolution: "ajv@npm:8.12.0" @@ -11123,6 +11213,23 @@ __metadata: languageName: node linkType: hard +"aproba@npm:^1.0.3 || ^2.0.0": + version: 2.0.0 + resolution: "aproba@npm:2.0.0" + checksum: 10/c2b9a631298e8d6f3797547e866db642f68493808f5b37cd61da778d5f6ada890d16f668285f7d60bd4fc3b03889bd590ffe62cf81b700e9bb353431238a0a7b + languageName: node + linkType: hard + +"are-we-there-yet@npm:^2.0.0": + version: 2.0.0 + resolution: "are-we-there-yet@npm:2.0.0" + dependencies: + delegates: "npm:^1.0.0" + readable-stream: "npm:^3.6.0" + checksum: 10/ea6f47d14fc33ae9cbea3e686eeca021d9d7b9db83a306010dd04ad5f2c8b7675291b127d3fcbfcbd8fec26e47b3324ad5b469a6cc3733a582f2fe4e12fc6756 + languageName: node + linkType: hard + "arg@npm:^4.1.0": version: 4.1.3 resolution: "arg@npm:4.1.3" @@ -12420,6 +12527,18 @@ __metadata: languageName: node linkType: hard +"canvas@npm:^2.11.2": + version: 2.11.2 + resolution: "canvas@npm:2.11.2" + dependencies: + "@mapbox/node-pre-gyp": "npm:^1.0.0" + nan: "npm:^2.17.0" + node-gyp: "npm:latest" + simple-get: "npm:^3.0.3" + checksum: 10/500040e93310b33f5733746b909712fdeced56aa74a1370c563f0c7ffc5b4a31006b2d881644b59eea8ab6c465406705a59b280f1d4e3ec4e1e2c88d4a725ca6 + languageName: node + linkType: hard + "capital-case@npm:^1.0.4": version: 1.0.4 resolution: "capital-case@npm:1.0.4" @@ -12960,6 +13079,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^2.0.0": + version: 2.1.1 + resolution: "clsx@npm:2.1.1" + checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919 + languageName: node + linkType: hard + "cluster-key-slot@npm:^1.1.0": version: 1.1.2 resolution: "cluster-key-slot@npm:1.1.2" @@ -13031,6 +13157,15 @@ __metadata: languageName: node linkType: hard +"color-support@npm:^1.1.2": + version: 1.1.3 + resolution: "color-support@npm:1.1.3" + bin: + color-support: bin.js + checksum: 10/4bcfe30eea1498fe1cabc852bbda6c9770f230ea0e4faf4611c5858b1b9e4dde3730ac485e65f54ca182f4c50b626c1bea7c8441ceda47367a54a818c248aa7a + languageName: node + linkType: hard + "colord@npm:^2.9.1": version: 2.9.3 resolution: "colord@npm:2.9.3" @@ -13259,6 +13394,13 @@ __metadata: languageName: node linkType: hard +"console-control-strings@npm:^1.0.0, console-control-strings@npm:^1.1.0": + version: 1.1.0 + resolution: "console-control-strings@npm:1.1.0" + checksum: 10/27b5fa302bc8e9ae9e98c03c66d76ca289ad0c61ce2fe20ab288d288bee875d217512d2edb2363fc83165e88f1c405180cf3f5413a46e51b4fe1a004840c6cdb + languageName: node + linkType: hard + "consolidate@npm:^0.15.1": version: 0.15.1 resolution: "consolidate@npm:0.15.1" @@ -13594,6 +13736,13 @@ __metadata: languageName: node linkType: hard +"core-js@npm:^3.37.1": + version: 3.37.1 + resolution: "core-js@npm:3.37.1" + checksum: 10/25d6bd15fcc6ffd2a0ec0be57a78ff3358b3e1fdffdb6800fc93dcfdb3854037aee41f3d101aed8c37905d107daf98218b3e7ee95cec383710d2a66a5d9e541b + languageName: node + linkType: hard + "core-util-is@npm:1.0.2": version: 1.0.2 resolution: "core-util-is@npm:1.0.2" @@ -13899,7 +14048,7 @@ __metadata: languageName: node linkType: hard -"css-to-react-native@npm:^3.0.0": +"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0": version: 3.2.0 resolution: "css-to-react-native@npm:3.2.0" dependencies: @@ -14053,7 +14202,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.1.0, csstype@npm:^3.1.2": +"csstype@npm:3.1.3, csstype@npm:^3.0.2, csstype@npm:^3.1.0, csstype@npm:^3.1.2": version: 3.1.3 resolution: "csstype@npm:3.1.3" checksum: 10/f593cce41ff5ade23f44e77521e3a1bcc2c64107041e1bf6c3c32adc5187d0d60983292fda326154d20b01079e24931aa5b08e4467cc488b60bb1e7f6d478ade @@ -14239,6 +14388,15 @@ __metadata: languageName: node linkType: hard +"decompress-response@npm:^4.2.0": + version: 4.2.1 + resolution: "decompress-response@npm:4.2.1" + dependencies: + mimic-response: "npm:^2.0.0" + checksum: 10/4e783ca4dfe9417354d61349750fe05236f565a4415a6ca20983a311be2371debaedd9104c0b0e7b36e5f167aeaae04f84f1a0b3f8be4162f1d7d15598b8fdba + languageName: node + linkType: hard + "dedent@npm:^0.7.0": version: 0.7.0 resolution: "dedent@npm:0.7.0" @@ -14344,6 +14502,13 @@ __metadata: languageName: node linkType: hard +"delegates@npm:^1.0.0": + version: 1.0.0 + resolution: "delegates@npm:1.0.0" + checksum: 10/a51744d9b53c164ba9c0492471a1a2ffa0b6727451bdc89e31627fdf4adda9d51277cfcbfb20f0a6f08ccb3c436f341df3e92631a3440226d93a8971724771fd + languageName: node + linkType: hard + "denque@npm:^2.1.0": version: 2.1.0 resolution: "denque@npm:2.1.0" @@ -14416,6 +14581,13 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^2.0.0": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39 + languageName: node + linkType: hard + "detect-libc@npm:^2.0.1": version: 2.0.2 resolution: "detect-libc@npm:2.0.2" @@ -17052,6 +17224,23 @@ __metadata: languageName: node linkType: hard +"gauge@npm:^3.0.0": + version: 3.0.2 + resolution: "gauge@npm:3.0.2" + dependencies: + aproba: "npm:^1.0.3 || ^2.0.0" + color-support: "npm:^1.1.2" + console-control-strings: "npm:^1.0.0" + has-unicode: "npm:^2.0.1" + object-assign: "npm:^4.1.1" + signal-exit: "npm:^3.0.0" + string-width: "npm:^4.2.3" + strip-ansi: "npm:^6.0.1" + wide-align: "npm:^1.1.2" + checksum: 10/46df086451672a5fecd58f7ec86da74542c795f8e00153fbef2884286ce0e86653c3eb23be2d0abb0c4a82b9b2a9dec3b09b6a1cf31c28085fa0376599a26589 + languageName: node + linkType: hard + "gensync@npm:^1.0.0-beta.2": version: 1.0.0-beta.2 resolution: "gensync@npm:1.0.0-beta.2" @@ -17933,6 +18122,13 @@ __metadata: languageName: node linkType: hard +"has-unicode@npm:^2.0.1": + version: 2.0.1 + resolution: "has-unicode@npm:2.0.1" + checksum: 10/041b4293ad6bf391e21c5d85ed03f412506d6623786b801c4ab39e4e6ca54993f13201bceb544d92963f9e0024e6e7fbf0cb1d84c9d6b31cb9c79c8c990d13d8 + languageName: node + linkType: hard + "hash-base@npm:^3.0.0": version: 3.1.0 resolution: "hash-base@npm:3.1.0" @@ -21685,6 +21881,13 @@ __metadata: languageName: node linkType: hard +"make-cancellable-promise@npm:^1.3.1": + version: 1.3.2 + resolution: "make-cancellable-promise@npm:1.3.2" + checksum: 10/d4dcad8211272a4d6ef979747a3d7085cdefb92cf50e096ab6a3ea8295e7578b82edaac261c7c4e3d656eadfac285f05b98856b3cf1fd14390ec2708328a9b35 + languageName: node + linkType: hard + "make-dir@npm:^3.0.2, make-dir@npm:^3.1.0": version: 3.1.0 resolution: "make-dir@npm:3.1.0" @@ -21710,6 +21913,13 @@ __metadata: languageName: node linkType: hard +"make-event-props@npm:^1.6.0": + version: 1.6.2 + resolution: "make-event-props@npm:1.6.2" + checksum: 10/9728126c93465d14d624bd00e2542ab9e180d19ac1669f58c121910645bd1d6d0d10a77b832e3e6254b912780a01408da3dd00dba4a823653b503f14ff9b4760 + languageName: node + linkType: hard + "make-fetch-happen@npm:^13.0.0": version: 13.0.0 resolution: "make-fetch-happen@npm:13.0.0" @@ -21959,6 +22169,18 @@ __metadata: languageName: node linkType: hard +"merge-refs@npm:^1.3.0": + version: 1.3.0 + resolution: "merge-refs@npm:1.3.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/8400f716a77857dac6b5d49cd5ef69cec7bff6c5555785c5e91a5142fbb5f3e6fe81282bc5be1f01c0c0843ed29f5b4169bfa9838ec69c459b4538f3fef3e79c + languageName: node + linkType: hard + "merge-source-map@npm:^1.1.0": version: 1.1.0 resolution: "merge-source-map@npm:1.1.0" @@ -22302,6 +22524,13 @@ __metadata: languageName: node linkType: hard +"mimic-response@npm:^2.0.0": + version: 2.1.0 + resolution: "mimic-response@npm:2.1.0" + checksum: 10/014fad6ab936657e5f2f48bd87af62a8e928ebe84472aaf9e14fec4fcb31257a5edff77324d8ac13ddc6685ba5135cf16e381efac324e5f174fb4ddbf902bf07 + languageName: node + linkType: hard + "min-indent@npm:^1.0.0": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -22745,6 +22974,15 @@ __metadata: languageName: node linkType: hard +"mustache@npm:^4.2.0": + version: 4.2.0 + resolution: "mustache@npm:4.2.0" + bin: + mustache: bin/mustache + checksum: 10/6e668bd5803255ab0779c3983b9412b5c4f4f90e822230e0e8f414f5449ed7a137eed29430e835aa689886f663385cfe05f808eb34b16e1f3a95525889b05cd3 + languageName: node + linkType: hard + "mute-stream@npm:0.0.8": version: 0.0.8 resolution: "mute-stream@npm:0.0.8" @@ -22763,6 +23001,15 @@ __metadata: languageName: node linkType: hard +"nan@npm:^2.17.0": + version: 2.20.0 + resolution: "nan@npm:2.20.0" + dependencies: + node-gyp: "npm:latest" + checksum: 10/5f16e4c9953075d9920229c703c1d781c0b74118ce3d9e926b448a4eef92b7d8be5ac6adc748a13a5fafb594436cbfe63250e3471aefdd78e3a0cd14603b9ba7 + languageName: node + linkType: hard + "nano-css@npm:^5.6.1": version: 5.6.1 resolution: "nano-css@npm:5.6.1" @@ -23035,6 +23282,17 @@ __metadata: languageName: node linkType: hard +"nopt@npm:^5.0.0": + version: 5.0.0 + resolution: "nopt@npm:5.0.0" + dependencies: + abbrev: "npm:1" + bin: + nopt: bin/nopt.js + checksum: 10/00f9bb2d16449469ba8ffcf9b8f0eae6bae285ec74b135fec533e5883563d2400c0cd70902d0a7759e47ac031ccf206ace4e86556da08ed3f1c66dda206e9ccd + languageName: node + linkType: hard + "nopt@npm:^7.0.0": version: 7.2.0 resolution: "nopt@npm:7.2.0" @@ -23125,6 +23383,18 @@ __metadata: languageName: node linkType: hard +"npmlog@npm:^5.0.1": + version: 5.0.1 + resolution: "npmlog@npm:5.0.1" + dependencies: + are-we-there-yet: "npm:^2.0.0" + console-control-strings: "npm:^1.1.0" + gauge: "npm:^3.0.0" + set-blocking: "npm:^2.0.0" + checksum: 10/f42c7b9584cdd26a13c41a21930b6f5912896b6419ab15be88cc5721fc792f1c3dd30eb602b26ae08575694628ba70afdcf3675d86e4f450fc544757e52726ec + languageName: node + linkType: hard + "nth-check@npm:^1.0.2": version: 1.0.2 resolution: "nth-check@npm:1.0.2" @@ -23628,6 +23898,13 @@ __metadata: languageName: node linkType: hard +"papaparse@npm:^5.4.1": + version: 5.4.1 + resolution: "papaparse@npm:5.4.1" + checksum: 10/5e6dc978187182ad2efa1d264ffe73d2042cd23b8fb1dcb0b0f5c8c7c772c11e3eb4e166fb0893880ed24529a96abe9065d704cc5b4cb96abf037413cfe43788 + languageName: node + linkType: hard + "param-case@npm:^3.0.4": version: 3.0.4 resolution: "param-case@npm:3.0.4" @@ -23860,6 +24137,13 @@ __metadata: languageName: node linkType: hard +"path2d@npm:^0.2.0": + version: 0.2.0 + resolution: "path2d@npm:0.2.0" + checksum: 10/576e4fba080d9177ad5d9d7c17926eed13ca5d606f9a213ea248ce4db953c3eafb6fcc03152eba806ce62d18961f56cce67e863804bd10d8b57b20f74467ddac + languageName: node + linkType: hard + "pathe@npm:^1.0.0, pathe@npm:^1.1.0, pathe@npm:^1.1.1, pathe@npm:^1.1.2": version: 1.1.2 resolution: "pathe@npm:1.1.2" @@ -23887,6 +24171,21 @@ __metadata: languageName: node linkType: hard +"pdfjs-dist@npm:4.3.136": + version: 4.3.136 + resolution: "pdfjs-dist@npm:4.3.136" + dependencies: + canvas: "npm:^2.11.2" + path2d: "npm:^0.2.0" + dependenciesMeta: + canvas: + optional: true + path2d: + optional: true + checksum: 10/5511a54a0811c93c6d0517d3bd7ee1df5ffc00577d8b27054956d3775bb9a8a75427ad878c4b13fdda830aabf17e2807667b957e499848bb5968caaba4254d46 + languageName: node + linkType: hard + "performance-now@npm:^2.1.0": version: 2.1.0 resolution: "performance-now@npm:2.1.0" @@ -24929,6 +25228,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:8.4.38": + version: 8.4.38 + resolution: "postcss@npm:8.4.38" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.0.0" + source-map-js: "npm:^1.2.0" + checksum: 10/6e44a7ed835ffa9a2b096e8d3e5dfc6bcf331a25c48aeb862dd54e3aaecadf814fa22be224fd308f87d08adf2299164f88c5fd5ab1c4ef6cbd693ceb295377f4 + languageName: node + linkType: hard + "postcss@npm:^7.0.35, postcss@npm:^7.0.36": version: 7.0.39 resolution: "postcss@npm:7.0.39" @@ -25740,6 +26050,29 @@ __metadata: languageName: node linkType: hard +"react-pdf@npm:^9.0.0": + version: 9.0.0 + resolution: "react-pdf@npm:9.0.0" + dependencies: + clsx: "npm:^2.0.0" + dequal: "npm:^2.0.3" + make-cancellable-promise: "npm:^1.3.1" + make-event-props: "npm:^1.6.0" + merge-refs: "npm:^1.3.0" + pdfjs-dist: "npm:4.3.136" + tiny-invariant: "npm:^1.0.0" + warning: "npm:^4.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b0eb3277286c4a8d98fff5ab53dad6838fb8aae89895fc2877e9e897770bcbfe5a30680c3cacbfc2c5e40c0a87e7c9739f4e2c7cff982300a718e9addc2d4d98 + languageName: node + linkType: hard + "react-refresh@npm:^0.11.0": version: 0.11.0 resolution: "react-refresh@npm:0.11.0" @@ -27206,7 +27539,7 @@ __metadata: languageName: node linkType: hard -"shallowequal@npm:^1.1.0": +"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0": version: 1.1.0 resolution: "shallowequal@npm:1.1.0" checksum: 10/f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00 @@ -27260,7 +27593,7 @@ __metadata: languageName: node linkType: hard -"signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7": +"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7": version: 3.0.7 resolution: "signal-exit@npm:3.0.7" checksum: 10/a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318 @@ -27281,6 +27614,24 @@ __metadata: languageName: node linkType: hard +"simple-concat@npm:^1.0.0": + version: 1.0.1 + resolution: "simple-concat@npm:1.0.1" + checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a + languageName: node + linkType: hard + +"simple-get@npm:^3.0.3": + version: 3.1.1 + resolution: "simple-get@npm:3.1.1" + dependencies: + decompress-response: "npm:^4.2.0" + once: "npm:^1.3.1" + simple-concat: "npm:^1.0.0" + checksum: 10/94fa04e74077c2607142f7597af8409c6c8d1e9487b597ce1da6f824e732b3e51ef492e495a4d8a2a12a94780214d77a8d3bb81c2139b3ec4ce21b93224442c0 + languageName: node + linkType: hard + "simplebar-react@npm:^2.3.6": version: 2.4.3 resolution: "simplebar-react@npm:2.4.3" @@ -27554,6 +27905,13 @@ __metadata: languageName: node linkType: hard +"source-map-js@npm:^1.2.0": + version: 1.2.0 + resolution: "source-map-js@npm:1.2.0" + checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5 + languageName: node + linkType: hard + "source-map-loader@npm:^3.0.0": version: 3.0.2 resolution: "source-map-loader@npm:3.0.2" @@ -28000,7 +28358,7 @@ __metadata: languageName: node linkType: hard -"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3": +"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3": version: 4.2.3 resolution: "string-width@npm:4.2.3" dependencies: @@ -28268,6 +28626,26 @@ __metadata: languageName: node linkType: hard +"styled-components@npm:^6.1.11": + version: 6.1.11 + resolution: "styled-components@npm:6.1.11" + dependencies: + "@emotion/is-prop-valid": "npm:1.2.2" + "@emotion/unitless": "npm:0.8.1" + "@types/stylis": "npm:4.2.5" + css-to-react-native: "npm:3.2.0" + csstype: "npm:3.1.3" + postcss: "npm:8.4.38" + shallowequal: "npm:1.1.0" + stylis: "npm:4.3.2" + tslib: "npm:2.6.2" + peerDependencies: + react: ">= 16.8.0" + react-dom: ">= 16.8.0" + checksum: 10/6813bba73ad706998a903793da2c903a6a64e487b2167d26cc3d55a850637a31becab1ce43fa072f9aba4f6074ec5a914dd4696e9ba2548e6c4873436f4ca632 + languageName: node + linkType: hard + "stylehacks@npm:^5.1.1": version: 5.1.1 resolution: "stylehacks@npm:5.1.1" @@ -28280,6 +28658,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.3.2": + version: 4.3.2 + resolution: "stylis@npm:4.3.2" + checksum: 10/4d3e3cb5cbfc7abdf14e424c8631a15fd15cbf0357ffc641c319587e00c2d1036b1a71cb88b42411bc3ce10d7730ad3fb9789b034d11365e8a19d23f56486c77 + languageName: node + linkType: hard + "stylis@npm:^4.3.0": version: 4.3.1 resolution: "stylis@npm:4.3.1" @@ -28826,6 +29211,13 @@ __metadata: languageName: node linkType: hard +"tiny-invariant@npm:^1.0.0": + version: 1.3.3 + resolution: "tiny-invariant@npm:1.3.3" + checksum: 10/5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe + languageName: node + linkType: hard + "title-case@npm:^3.0.3": version: 3.0.3 resolution: "title-case@npm:3.0.3" @@ -29109,7 +29501,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2, tslib@npm:~2.6.0": +"tslib@npm:2.6.2, tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2, tslib@npm:~2.6.0": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca @@ -30226,7 +30618,7 @@ __metadata: languageName: node linkType: hard -"warning@npm:^4.0.3": +"warning@npm:^4.0.0, warning@npm:^4.0.3": version: 4.0.3 resolution: "warning@npm:4.0.3" dependencies: @@ -30695,6 +31087,15 @@ __metadata: languageName: node linkType: hard +"wide-align@npm:^1.1.2": + version: 1.1.5 + resolution: "wide-align@npm:1.1.5" + dependencies: + string-width: "npm:^1.0.2 || 2 || 3 || 4" + checksum: 10/d5f8027b9a8255a493a94e4ec1b74a27bff6679d5ffe29316a3215e4712945c84ef73ca4045c7e20ae7d0c72f5f57f296e04a4928e773d4276a2f1222e4c2e99 + languageName: node + linkType: hard + "widest-line@npm:^3.1.0": version: 3.1.0 resolution: "widest-line@npm:3.1.0" From 867a34da07195104aea693ce6a718b890bf613c4 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 25 Jun 2024 15:24:42 +0530 Subject: [PATCH 2/3] refactor(web): remove-unused-id --- web/src/pages/AttachmentDisplay/Header.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/pages/AttachmentDisplay/Header.tsx b/web/src/pages/AttachmentDisplay/Header.tsx index 6ea1070..70bed9b 100644 --- a/web/src/pages/AttachmentDisplay/Header.tsx +++ b/web/src/pages/AttachmentDisplay/Header.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { useNavigate, useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { Button } from "@kleros/ui-components-library"; @@ -57,7 +57,6 @@ const StyledButton = styled(Button)` `; const Header: React.FC = () => { - const { id } = useParams(); const navigate = useNavigate(); return ( From 5473436b08921a319431a5491e9578eecd98a388 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 25 Jun 2024 16:56:13 +0530 Subject: [PATCH 3/3] fix(web): fix-svg-width-on-mobile --- .../PreviewCard/Terms/AttachedFile.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/web/src/components/PreviewCard/Terms/AttachedFile.tsx b/web/src/components/PreviewCard/Terms/AttachedFile.tsx index 4d3366c..4062b49 100644 --- a/web/src/components/PreviewCard/Terms/AttachedFile.tsx +++ b/web/src/components/PreviewCard/Terms/AttachedFile.tsx @@ -1,23 +1,18 @@ import React from "react"; import { Link } from "react-router-dom"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; import AttachmentIcon from "svgs/icons/attachment.svg"; import { responsiveSize } from "styles/responsiveSize"; -import { landscapeStyle } from "styles/landscapeStyle"; import { getIpfsUrl } from "utils/getIpfsUrl"; const StyledA = styled(Link)` - height: fit-content; display: flex; gap: ${responsiveSize(5, 6)}; - ${landscapeStyle( - () => css` - > svg { - width: 16px; - fill: ${({ theme }) => theme.primaryBlue}; - } - ` - )} + + > svg { + width: 16px; + fill: ${({ theme }) => theme.primaryBlue}; + } `; interface IAttachedFile {