feat(web): fix voting history and update ui-components-library

Author: alcercu

web/package.json

@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^1.9.2",
+    "@kleros/ui-components-library": "^2.5.2",
     "@sentry/react": "^7.55.2",
     "@sentry/tracing": "^7.55.2",
     "@types/react-modal": "^3.16.0",

web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

@@ -35,8 +35,18 @@ const StyledBox = styled(Box)`
 const StyledAccordion = styled(Accordion)`
   width: 100%;
   > * > button {
+    justify-content: unset;
+    padding: 11.5px 18px;
     background-color: ${({ theme }) => theme.whiteBackground} !important;
     border: 1px solid ${({ theme }) => theme.stroke} !important;
+    > p {
+      margin-left: 12px;
+      margin-right: auto;
+      color: ${({ theme }) => theme.primaryText};
+    }
+    > svg {
+      fill: ${({ theme }) => theme.primaryText} !important;
+    }
   }
   > * > div > div {
     padding: 8px 16px;
@@ -75,7 +85,7 @@ const JustificationContainer = styled.div`
   }
 `;
 
-const VotingHistory: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
+const VotingHistory: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
   const [currentTab, setCurrentTab] = useState(0);
@@ -108,7 +118,7 @@ const VotingHistory: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
             items={
               localRounds.at(currentTab)?.votes.map((vote) => ({
                 title: shortenAddress(vote.juror.id),
-                Icon: <Jazzicon diameter={24} seed={jsNumberForAddress(vote.juror.id)} />,
+                icon: <Jazzicon diameter={20} seed={jsNumberForAddress(vote.juror.id)} />,
                 body: (
                   <AccordionContent
                     choice={vote.choice === 0 ? "Refuse to arbitrate" : disputeTemplate.answers[vote.choice - 1].title}

web/src/styles/themes.ts

@@ -1,4 +1,7 @@
+import { lightTheme as componentsLightTheme, darkTheme as componentsDarkTheme } from "@kleros/ui-components-library";
+
 export const lightTheme = {
+  ...componentsLightTheme,
   primaryPurple: "#4D00B4",
   secondaryPurple: "#9013FE",
   mediumPurple: "#F8F1FF",
@@ -34,6 +37,7 @@ export const lightTheme = {
 };
 
 export const darkTheme = {
+  ...componentsDarkTheme,
   primaryPurple: "#7E1BD4",
   secondaryPurple: "#B45FFF",
   mediumPurple: "#390F6C",

yarn.lock

@@ -4042,7 +4042,7 @@ __metadata:
     "@kleros/kleros-v2-eslint-config": "workspace:^"
     "@kleros/kleros-v2-prettier-config": "workspace:^"
     "@kleros/kleros-v2-tsconfig": "workspace:^"
-    "@kleros/ui-components-library": ^1.9.2
+    "@kleros/ui-components-library": ^2.5.2
     "@netlify/functions": ^1.6.0
     "@parcel/transformer-svg-react": ~2.8.0
     "@parcel/watcher": ~2.1.0
@@ -4094,9 +4094,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^1.9.2":
-  version: 1.9.2
-  resolution: "@kleros/ui-components-library@npm:1.9.2"
+"@kleros/ui-components-library@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "@kleros/ui-components-library@npm:2.5.2"
   dependencies:
     "@datepicker-react/hooks": ^2.8.4
     "@swc/helpers": ^0.3.2
@@ -4107,12 +4107,13 @@ __metadata:
     simplebar: ^5.3.6
     simplebar-react: ^2.3.6
     smooth-scroll-into-view-if-needed: ^1.1.33
+    usehooks-ts: ^2.9.1
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: 42dfddf1bf2e09be7f9350c173b371b29fdf22b25fb56c6500685d33bc63369ef316c05f0a8b7e81217abbab82557f8300de45357c6ec0d388882ca9d9c3c849
+  checksum: 159a999c4e13fb288f1594a677f325002552a06cf3c01e5139a16e2749a795934c3876e7e62eb0401ebeec85dec3ae9c66d9a14ff83de8134c58b0eadbbe6883
   languageName: node
   linkType: hard
 
@@ -28259,6 +28260,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^2.9.1":
+  version: 2.9.1
+  resolution: "usehooks-ts@npm:2.9.1"
+  peerDependencies:
+    react: ^16.8.0  || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0
+  checksum: 36f1e4142ce23bc019b81d2e93aefd7f2c350abcf255598c21627114a69a2f2f116b35dc3a353375f09c6e4c9b704a04f104e3d10e98280545c097feca66c30a
+  languageName: node
+  linkType: hard
+
 "utf-8-validate@npm:^5.0.2":
   version: 5.0.10
   resolution: "utf-8-validate@npm:5.0.10"