From 874e1d194a54b0bcb972c671b8dafc185b75c4cc Mon Sep 17 00:00:00 2001 From: alcercu Date: Wed, 21 Sep 2022 10:18:47 +0200 Subject: [PATCH 01/63] feat(web): add dispute overview page and routing --- web/package.json | 2 +- web/src/app.tsx | 2 +- web/src/assets/svgs/icons/bullhorn.svg | 3 + web/src/assets/svgs/icons/doc.svg | 3 + web/src/assets/svgs/icons/eye.svg | 10 +++ web/src/pages/Cases/CaseDetails/index.tsx | 82 +++++++++++++++++++ .../pages/Cases/CaseDetails/voting/Binary.tsx | 70 ++++++++++++++++ .../pages/Cases/CaseDetails/voting/index.tsx | 1 + web/src/pages/Cases/index.tsx | 7 +- yarn.lock | 2 +- 10 files changed, 178 insertions(+), 4 deletions(-) create mode 100644 web/src/assets/svgs/icons/bullhorn.svg create mode 100644 web/src/assets/svgs/icons/doc.svg create mode 100644 web/src/assets/svgs/icons/eye.svg create mode 100644 web/src/pages/Cases/CaseDetails/index.tsx create mode 100644 web/src/pages/Cases/CaseDetails/voting/Binary.tsx create mode 100644 web/src/pages/Cases/CaseDetails/voting/index.tsx diff --git a/web/package.json b/web/package.json index 663d950b7..2d5ecb514 100644 --- a/web/package.json +++ b/web/package.json @@ -74,7 +74,7 @@ "react-dom": "^18.2.0", "react-error-boundary": "^3.1.4", "react-is": "^18.2.0", - "react-router-dom": "6", + "react-router-dom": "^6.4.0", "styled-components": "^5.3.5", "swr": "^1.3.0" } diff --git a/web/src/app.tsx b/web/src/app.tsx index e03e75d9e..41baad064 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -32,7 +32,7 @@ const App: React.FC = () => { }> } /> - } /> + } /> Courts} /> } /> + + diff --git a/web/src/assets/svgs/icons/doc.svg b/web/src/assets/svgs/icons/doc.svg new file mode 100644 index 000000000..bf2adf79d --- /dev/null +++ b/web/src/assets/svgs/icons/doc.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/eye.svg b/web/src/assets/svgs/icons/eye.svg new file mode 100644 index 000000000..c0ca4bf57 --- /dev/null +++ b/web/src/assets/svgs/icons/eye.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx new file mode 100644 index 000000000..fd089e6b8 --- /dev/null +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -0,0 +1,82 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import { Routes, Route, useParams, useNavigate } from "react-router-dom"; +import { Tabs as TabsComponent, Card } from "@kleros/ui-components-library"; +import EyeIcon from "assets/svgs/icons/eye.svg"; +import DocIcon from "assets/svgs/icons/doc.svg"; +import BalanceIcon from "assets/svgs/icons/law-balance.svg"; +import BullhornIcon from "assets/svgs/icons/bullhorn.svg"; +import { Binary } from "./voting"; + +const TABS = [ + { + text: "Overview", + value: 0, + Icon: EyeIcon, + path: "overview", + }, + { + text: "Evidence", + value: 1, + Icon: DocIcon, + path: "evidence", + }, + { + text: "Voting", + value: 2, + Icon: BalanceIcon, + path: "voting", + }, + { + text: "Appeal", + value: 3, + Icon: BullhornIcon, + path: "appeal", + }, +]; + +const CaseDetails: React.FC = () => { + const { id } = useParams(); + const navigate = useNavigate(); + const [currentTab, setCurrentTab] = useState(0); + return ( + +

Case #{id}

+ { + setCurrentTab(n); + navigate(TABS[n].path); + }} + /> + + + } /> + + + + ); +}; + +const Container = styled.div``; + +const StyledTabs = styled(TabsComponent)` + width: 100%; + > * { + display: flex; + flex-wrap: wrap; + > svg { + margin-right: 0px !important; + } + } +`; + +const StyledCard = styled(Card)` + margin-top: 16px; + width: 100%; + height: auto; + min-height: 100px; +`; + +export default CaseDetails; diff --git a/web/src/pages/Cases/CaseDetails/voting/Binary.tsx b/web/src/pages/Cases/CaseDetails/voting/Binary.tsx new file mode 100644 index 000000000..67af1f105 --- /dev/null +++ b/web/src/pages/Cases/CaseDetails/voting/Binary.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import styled from "styled-components"; +import { Button, Textarea } from "@kleros/ui-components-library"; + +const Binary = () => { + return ( + + +

How much such Alice receive?

+ + +