diff --git a/web/package.json b/web/package.json index 8ed6491..9dc9222 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx index 09b69b2..532700f 100644 --- a/web/src/layout/Header/navbar/DappList.tsx +++ b/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", diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx index 687f484..8d568ac 100644 --- a/web/src/layout/Header/navbar/Product.tsx +++ b/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}; `; diff --git a/yarn.lock b/yarn.lock index 5e72d4b..b6b734c 100644 --- a/yarn.lock +++ b/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