Merge pull request #15 from kleros/chore(web)/update-ui-library-version-and-dapplist-refactor

chore(web): update-ui-library-version-and-dapplist-refactor

Author: kemuru

web/package.json

@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@filebase/client": "^0.0.5",
-    "@kleros/ui-components-library": "^2.7.1",
+    "@kleros/ui-components-library": "^2.8.1",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
     "@supabase/supabase-js": "^2.39.3",

web/src/layout/Header/navbar/DappList.tsx

@@ -1,16 +1,15 @@
 import React, { useRef } from "react";
 import styled, { css } from "styled-components";
-import { useClickAway } from "react-use";
 import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+import { useClickAway } from "react-use";
 import Curate from "svgs/icons/curate-image.png";
 import Resolver from "svgs/icons/dispute-resolver.svg";
 import Escrow from "svgs/icons/escrow.svg";
 import Governor from "svgs/icons/governor.svg";
 import Court from "svgs/icons/kleros.svg";
-import Linguo from "svgs/icons/linguo.svg";
 import POH from "svgs/icons/poh-image.png";
 import Vea from "svgs/icons/vea.svg";
-import Tokens from "svgs/icons/tokens.svg";
 import Product from "./Product";
 
 const Header = styled.h1`
@@ -51,7 +50,7 @@ const Container = styled.div`
       left: 0;
       right: auto;
       transform: none;
-      width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375));
+      width: ${responsiveSize(300, 480)};
       max-height: 80vh;
     `
   )}
@@ -60,56 +59,71 @@ const Container = styled.div`
 const ItemsDiv = styled.div`
   display: grid;
   overflow-y: auto;
-  padding: 16px calc(8px + (24 - 8) * ((100vw - 480px) / (1250 - 480)));
+  padding: 16px ${responsiveSize(8, 24, 480)};
   row-gap: 8px;
   column-gap: 2px;
   justify-items: center;
   max-width: 480px;
   min-width: 300px;
-  width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375));
+  width: ${responsiveSize(300, 480)};
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 `;
 
 const ITEMS = [
   {
-    text: "Court v1",
+    text: "Court V2",
     Icon: Court,
-    url: "https://court.kleros.io/",
+    url: "https://v2.kleros.builders/",
   },
   {
-    text: "Vea",
-    Icon: Vea,
-    url: "https://veascan.io",
+    text: "Curate V2",
+    Icon: Curate,
+    url: "https://curate-v2.netlify.app/",
+  },
+  {
+    text: "Resolver V2",
+    Icon: Resolver,
+    url: "https://v2.kleros.builders/#/resolver",
   },
   {
-    text: "Escrow",
+    text: "Escrow V2",
     Icon: Escrow,
-    url: "https://escrow.kleros.io",
+    url: "https://escrow-v2.kleros.builders/",
   },
   {
-    text: "POH",
-    Icon: POH,
-    url: "https://app.proofofhumanity.id",
+    text: "Court V1",
+    Icon: Court,
+    url: "https://court.kleros.io/",
   },
   {
-    text: "Curate",
+    text: "Curate V1",
     Icon: Curate,
     url: "https://curate.kleros.io",
   },
   {
-    text: "Tokens",
-    Icon: Tokens,
-    url: "https://tokens.kleros.io",
-  },
-  {
-    text: "Resolver",
+    text: "Resolver V1",
     Icon: Resolver,
     url: "https://resolve.kleros.io",
   },
   {
-    text: "Linguo",
-    Icon: Linguo,
-    url: "https://linguo.kleros.io",
+    text: "Escrow V1",
+    Icon: Escrow,
+    url: "https://escrow.kleros.io",
+  },
+  {
+    text: "Vea",
+    Icon: Vea,
+    url: "https://veascan.io",
+  },
+  {
+    text: "Perma Curate",
+    Icon: Curate,
+    url: "https://perma-curate.eth.limo/",
+  },
+  {
+    text: "POH V1",
+    Icon: POH,
+    url: "https://app.proofofhumanity.id",
   },
   {
     text: "Governor",

web/src/layout/Header/navbar/Product.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.a`
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 25px 35px 25px;
+  padding: 20px 8px 35px 8px;
   max-width: 100px;
   border-radius: 3px;
   :hover {
@@ -15,22 +16,26 @@ const Container = styled.a`
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
   gap: 8px;
-  width: calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375));
-  white-space: nowrap;
+  width: ${responsiveSize(100, 130)};
 
   background-color: ${({ theme }) => theme.lightBackground};
-  small {
-    font-weight: 400;
-    line-height: 19px;
-    font-size: 14px;
-  }
 `;
 
-const StyledIcon = styled.svg``;
+const StyledIcon = styled.svg`
+  width: 48px;
+  height: 48px;
+`;
 
 const StyledImg = styled.img`
-  max-width: 48px;
-  max-height: 48px;
+  width: 48px;
+  height: 48px;
+`;
+
+const StyledSmall = styled.small`
+  display: flex;
+  font-weight: 400;
+  line-height: 19px;
+  text-align: center;
 `;
 
 interface IProduct {
@@ -43,7 +48,7 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
   return (
     <Container href={url} target="_blank">
       {typeof Icon === "string" ? <StyledImg alt={Icon} src={Icon} /> : <StyledIcon as={Icon} />}
-      <small>{text}</small>
+      <StyledSmall>{text}</StyledSmall>
     </Container>
   );
 };

yarn.lock

@@ -4782,7 +4782,7 @@ __metadata:
     "@filebase/client": "npm:^0.0.5"
     "@graphql-codegen/cli": "npm:^4.0.1"
     "@graphql-codegen/client-preset": "npm:^4.2.0"
-    "@kleros/ui-components-library": "npm:^2.7.1"
+    "@kleros/ui-components-library": "npm:^2.8.1"
     "@netlify/functions": "npm:^1.6.0"
     "@parcel/transformer-svg-react": "npm:2.11.0"
     "@parcel/watcher": "npm:~2.2.0"
@@ -4850,9 +4850,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kleros/ui-components-library@npm:^2.7.1":
-  version: 2.7.1
-  resolution: "@kleros/ui-components-library@npm:2.7.1"
+"@kleros/ui-components-library@npm:^2.8.1":
+  version: 2.8.1
+  resolution: "@kleros/ui-components-library@npm:2.8.1"
   dependencies:
     "@datepicker-react/hooks": "npm:^2.8.4"
     "@swc/helpers": "npm:^0.3.2"
@@ -4869,7 +4869,7 @@ __metadata:
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: 63339c0487b1645eef312e2b0734c9a8aebaa1746706033f40b5d35409a71e7cebbef2884fdb2d901bd1415ebc737d152be35ec9ffde67f180455a96f7acd34a
+  checksum: 78c05b2217a4d04d554a81cee6fbcdb6c6d2a1ccb92a42118d75b477e076b0c21682916e65a8495c8d70e0763ab7a9062080d4c2f29fb49fc55536879b65f446
   languageName: node
   linkType: hard