Merge pull request #36 from kleros/chore(web)/update-ui-library-versi…

…on-and-dapplist-refactor

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

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,13 +1,13 @@
 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 Product from "./Product";
@@ -50,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;
     `
   )}
@@ -59,13 +59,13 @@ 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));
 `;
 
@@ -118,7 +118,7 @@ const ITEMS = [
   {
     text: "Perma Curate",
     Icon: Curate,
-    url: "https://perma-curate.netlify.app/",
+    url: "https://perma-curate.eth.limo/",
   },
   {
     text: "POH V1",

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

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.a`
   cursor: pointer;
@@ -15,7 +16,7 @@ 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));
+  width: ${responsiveSize(100, 130)};
 
   background-color: ${({ theme }) => theme.lightBackground};
 `;

yarn.lock

@@ -4766,7 +4766,7 @@ __metadata:
     "@filebase/client": "npm:^0.0.5"
     "@graphql-codegen/cli": "npm:^4.0.1"
     "@graphql-codegen/client-preset": "npm:^4.1.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"
@@ -4834,9 +4834,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"
@@ -4853,7 +4853,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