From b74bd926eda265232f2cbeba4ba0616894b0557b Mon Sep 17 00:00:00 2001 From: ManiBAJPAI22 Date: Sun, 17 Aug 2025 02:13:04 +0530 Subject: [PATCH 1/6] adding policies --- web/package.json | 3 +- web/src/layout/Header/navbar/Explore.tsx | 2 + web/src/layout/Header/navbar/Policies.tsx | 260 ++++++++++++++++++++++ 3 files changed, 264 insertions(+), 1 deletion(-) create mode 100644 web/src/layout/Header/navbar/Policies.tsx diff --git a/web/package.json b/web/package.json index 1d99e4e9..a3d6f991 100644 --- a/web/package.json +++ b/web/package.json @@ -23,7 +23,8 @@ "svgs": "./src/assets/svgs" }, "volta": { - "node": "20.18.3" + "node": "20.18.3", + "yarn": "4.9.2" }, "scripts": { "start": "yarn start-devnet", diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index e216591f..7c14cf37 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -5,6 +5,7 @@ import { landscapeStyle } from "styles/landscapeStyle"; import { Link, useLocation } from "react-router-dom"; import { useOpenContext } from "../MobileHeader"; +import Policies from "./Policies"; const Container = styled.div` display: flex; @@ -76,6 +77,7 @@ const Explore: React.FC = ({ isMobileNavbar }) => { {text} ))} + ); }; diff --git a/web/src/layout/Header/navbar/Policies.tsx b/web/src/layout/Header/navbar/Policies.tsx new file mode 100644 index 00000000..ee7ad1db --- /dev/null +++ b/web/src/layout/Header/navbar/Policies.tsx @@ -0,0 +1,260 @@ +import React, { useState, useRef, useEffect } from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + +import { useOpenContext } from "../MobileHeader"; + +const Container = styled.div` + position: relative; + display: flex; + flex-direction: column; + + ${landscapeStyle( + () => css` + flex-direction: row; + ` + )}; +`; + +const Title = styled.h1` + display: block; + margin-bottom: 8px; + + ${landscapeStyle( + () => css` + display: none; + ` + )}; +`; + +const PoliciesButton = styled.button<{ isActive: boolean; isMobileNavbar?: boolean }>` + display: flex; + align-items: center; + gap: 8px; + background: none; + border: none; + cursor: pointer; + font-size: 16px; + color: ${({ isActive, theme }) => (isActive ? theme.primaryText : `${theme.primaryText}BA`)}; + font-weight: ${({ isActive, isMobileNavbar }) => (isMobileNavbar && isActive ? "600" : "normal")}; + padding: 8px 8px 8px 0; + border-radius: 7px; + + &:hover { + color: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : theme.white)} !important; + } + + ${landscapeStyle( + () => css` + color: ${({ isActive, theme }) => (isActive ? theme.white : `${theme.white}BA`)}; + padding: 16px 8px; + ` + )}; +`; + +const ChevronIcon = styled.span<{ isOpen: boolean }>` + display: inline-block; + width: 12px; + height: 12px; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + transform: rotate(${({ isOpen }) => (isOpen ? "45deg" : "-45deg")}); + transition: transform 0.2s ease; +`; + +const DropdownContainer = styled.div<{ isOpen: boolean; isMobileNavbar?: boolean }>` + position: absolute; + top: 100%; + left: 0; + background: ${({ theme }) => theme.whiteBackground}; + border: 1px solid ${({ theme }) => theme.stroke}; + border-radius: 8px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); + min-width: 200px; + z-index: 1000; + opacity: ${({ isOpen }) => (isOpen ? 1 : 0)}; + visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")}; + transform: translateY(${({ isOpen }) => (isOpen ? "0" : "-10px")}); + transition: all 0.2s ease; + + ${landscapeStyle( + () => css` + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(${({ isOpen }: { isOpen: boolean }) => (isOpen ? "0" : "-10px")}); + ` + )}; +`; + +const DropdownItem = styled.a<{ isSelected?: boolean }>` + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + text-decoration: none; + color: ${({ theme }) => theme.primaryText}; + background: ${({ isSelected, theme }) => (isSelected ? theme.lightBlue : "transparent")}; + border-left: ${({ isSelected, theme }) => (isSelected ? `3px solid ${theme.primaryBlue}` : "none")}; + transition: background-color 0.2s ease; + + &:hover { + background: ${({ theme }) => theme.lightBlue}; + } + + &:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + + &:last-child { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } +`; + +const ItemIcon = styled.div<{ isSelected?: boolean }>` + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + color: ${({ isSelected, theme }) => (isSelected ? theme.primaryBlue : theme.secondaryText)}; +`; + +const CheckIcon = styled.div` + width: 16px; + height: 16px; + border: 2px solid currentColor; + border-radius: 50%; + position: relative; + + &::after { + content: ""; + position: absolute; + top: 2px; + left: 4px; + width: 4px; + height: 6px; + border: solid currentColor; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } +`; + +const DocumentIcon = styled.div` + width: 16px; + height: 20px; + border: 2px solid currentColor; + border-radius: 2px; + position: relative; + + &::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + right: 2px; + height: 2px; + background: currentColor; + border-radius: 1px; + } + + &::before { + content: ""; + position: absolute; + top: 6px; + left: 2px; + right: 2px; + height: 1px; + background: currentColor; + border-radius: 0.5px; + } +`; + +interface IPolicies { + isMobileNavbar?: boolean; +} + +const Policies: React.FC = ({ isMobileNavbar }) => { + const [isOpen, setIsOpen] = useState(false); + const [selectedItem, setSelectedItem] = useState("General Policy"); + const dropdownRef = useRef(null); + const { toggleIsOpen } = useOpenContext(); + + const policies = [ + { + id: "general-policy", + name: "General Policy", + url: "https://cdn.kleros.link/ipfs/QmU2GuwcSs8tFp8gWf5hcXVbcJKRqwoecNnERz9XjKr18d", + icon: CheckIcon, + }, + { + id: "good-practices", + name: "Good Practices", + url: "https://cdn.kleros.link/ipfs/QmcCyR68RmwWfdVKinY8Fmiy73a6xEzGqYDcvAh9EFUnLF", + icon: DocumentIcon, + }, + ]; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const handleItemClick = (policy: typeof policies[0]) => { + setSelectedItem(policy.name); + setIsOpen(false); + if (isMobileNavbar) { + toggleIsOpen(); + } + window.open(policy.url, "_blank"); + }; + + return ( + + Policies + setIsOpen(!isOpen)} + isActive={isOpen} + isMobileNavbar={isMobileNavbar} + > + Policies + + + + + {policies.map((policy) => { + const IconComponent = policy.icon; + return ( + { + e.preventDefault(); + handleItemClick(policy); + }} + > + + + + {policy.name} + + ); + })} + + + ); +}; + +export default Policies; From 275aa0913beffbaff601e30ec3476762702aba55 Mon Sep 17 00:00:00 2001 From: ManiBAJPAI22 Date: Sun, 17 Aug 2025 02:52:16 +0530 Subject: [PATCH 2/6] updated the dimensions --- web/src/layout/Header/navbar/Policies.tsx | 89 +++++++++++++++-------- 1 file changed, 58 insertions(+), 31 deletions(-) diff --git a/web/src/layout/Header/navbar/Policies.tsx b/web/src/layout/Header/navbar/Policies.tsx index ee7ad1db..182336cd 100644 --- a/web/src/layout/Header/navbar/Policies.tsx +++ b/web/src/layout/Header/navbar/Policies.tsx @@ -54,12 +54,29 @@ const PoliciesButton = styled.button<{ isActive: boolean; isMobileNavbar?: boole const ChevronIcon = styled.span<{ isOpen: boolean }>` display: inline-block; - width: 12px; - height: 12px; + width: 6px; + height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; - transform: rotate(${({ isOpen }) => (isOpen ? "45deg" : "-45deg")}); + transform: rotate(45deg); transition: transform 0.2s ease; + margin-top: -4px; + + @keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: rotate(45deg) scale(1); + } + 40% { + transform: rotate(45deg) scale(1.2); + } + 60% { + transform: rotate(45deg) scale(1.1); + } + } + + &.bounce { + animation: bounce 0.6s ease; + } `; const DropdownContainer = styled.div<{ isOpen: boolean; isMobileNavbar?: boolean }>` @@ -68,9 +85,9 @@ const DropdownContainer = styled.div<{ isOpen: boolean; isMobileNavbar?: boolean left: 0; background: ${({ theme }) => theme.whiteBackground}; border: 1px solid ${({ theme }) => theme.stroke}; - border-radius: 8px; + border-radius: 3px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); - min-width: 200px; + width: 247px; z-index: 1000; opacity: ${({ isOpen }) => (isOpen ? 1 : 0)}; visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")}; @@ -93,22 +110,24 @@ const DropdownItem = styled.a<{ isSelected?: boolean }>` padding: 12px 16px; text-decoration: none; color: ${({ theme }) => theme.primaryText}; - background: ${({ isSelected, theme }) => (isSelected ? theme.lightBlue : "transparent")}; - border-left: ${({ isSelected, theme }) => (isSelected ? `3px solid ${theme.primaryBlue}` : "none")}; - transition: background-color 0.2s ease; + background: transparent; + border-left: 3px solid transparent; + height: 45px; + transition: all 0.2s ease; &:hover { - background: ${({ theme }) => theme.lightBlue}; + background: ${({ theme }) => theme.mediumBlue}; + border-left-color: ${({ theme }) => theme.primaryBlue}; } &:first-child { - border-top-left-radius: 8px; - border-top-right-radius: 8px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } &:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; } `; @@ -118,12 +137,12 @@ const ItemIcon = styled.div<{ isSelected?: boolean }>` display: flex; align-items: center; justify-content: center; - color: ${({ isSelected, theme }) => (isSelected ? theme.primaryBlue : theme.secondaryText)}; + color: ${({ theme }) => theme.primaryBlue}; `; const CheckIcon = styled.div` - width: 16px; - height: 16px; + width: 18px; + height: 18px; border: 2px solid currentColor; border-radius: 50%; position: relative; @@ -132,9 +151,9 @@ const CheckIcon = styled.div` content: ""; position: absolute; top: 2px; - left: 4px; - width: 4px; - height: 6px; + left: 5px; + width: 5px; + height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); @@ -142,8 +161,8 @@ const CheckIcon = styled.div` `; const DocumentIcon = styled.div` - width: 16px; - height: 20px; + width: 18px; + height: 22px; border: 2px solid currentColor; border-radius: 2px; position: relative; @@ -151,9 +170,9 @@ const DocumentIcon = styled.div` &::after { content: ""; position: absolute; - top: 2px; - left: 2px; - right: 2px; + top: 3px; + left: 3px; + right: 3px; height: 2px; background: currentColor; border-radius: 1px; @@ -162,9 +181,9 @@ const DocumentIcon = styled.div` &::before { content: ""; position: absolute; - top: 6px; - left: 2px; - right: 2px; + top: 8px; + left: 3px; + right: 3px; height: 1px; background: currentColor; border-radius: 0.5px; @@ -177,7 +196,8 @@ interface IPolicies { const Policies: React.FC = ({ isMobileNavbar }) => { const [isOpen, setIsOpen] = useState(false); - const [selectedItem, setSelectedItem] = useState("General Policy"); + const [selectedItem, setSelectedItem] = useState(""); + const [isBouncing, setIsBouncing] = useState(false); const dropdownRef = useRef(null); const { toggleIsOpen } = useOpenContext(); @@ -218,16 +238,23 @@ const Policies: React.FC = ({ isMobileNavbar }) => { window.open(policy.url, "_blank"); }; + const handleToggleDropdown = () => { + setIsOpen(!isOpen); + // Trigger bounce effect + setIsBouncing(true); + setTimeout(() => setIsBouncing(false), 600); // Match animation duration + }; + return ( Policies setIsOpen(!isOpen)} + onClick={handleToggleDropdown} isActive={isOpen} isMobileNavbar={isMobileNavbar} > Policies - + @@ -239,7 +266,7 @@ const Policies: React.FC = ({ isMobileNavbar }) => { href={policy.url} target="_blank" rel="noopener noreferrer" - isSelected={selectedItem === policy.name} + isSelected={false} onClick={(e) => { e.preventDefault(); handleItemClick(policy); From 55943be20b674995ce35055219aca65604549196 Mon Sep 17 00:00:00 2001 From: ManiBAJPAI22 Date: Sun, 17 Aug 2025 02:57:28 +0530 Subject: [PATCH 3/6] optimised --- web/src/layout/Header/navbar/Policies.tsx | 38 ++++++----------------- 1 file changed, 9 insertions(+), 29 deletions(-) diff --git a/web/src/layout/Header/navbar/Policies.tsx b/web/src/layout/Header/navbar/Policies.tsx index 182336cd..743d8997 100644 --- a/web/src/layout/Header/navbar/Policies.tsx +++ b/web/src/layout/Header/navbar/Policies.tsx @@ -46,7 +46,7 @@ const PoliciesButton = styled.button<{ isActive: boolean; isMobileNavbar?: boole ${landscapeStyle( () => css` - color: ${({ isActive, theme }) => (isActive ? theme.white : `${theme.white}BA`)}; + color: ${({ theme }) => theme.white}; padding: 16px 8px; ` )}; @@ -61,22 +61,6 @@ const ChevronIcon = styled.span<{ isOpen: boolean }>` transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -4px; - - @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: rotate(45deg) scale(1); - } - 40% { - transform: rotate(45deg) scale(1.2); - } - 60% { - transform: rotate(45deg) scale(1.1); - } - } - - &.bounce { - animation: bounce 0.6s ease; - } `; const DropdownContainer = styled.div<{ isOpen: boolean; isMobileNavbar?: boolean }>` @@ -98,12 +82,12 @@ const DropdownContainer = styled.div<{ isOpen: boolean; isMobileNavbar?: boolean () => css` top: calc(100% + 8px); left: 50%; - transform: translateX(-50%) translateY(${({ isOpen }: { isOpen: boolean }) => (isOpen ? "0" : "-10px")}); + transform: translateX(-50%) translateY(0); ` )}; `; -const DropdownItem = styled.a<{ isSelected?: boolean }>` +const DropdownItem = styled.a` display: flex; align-items: center; gap: 12px; @@ -131,7 +115,7 @@ const DropdownItem = styled.a<{ isSelected?: boolean }>` } `; -const ItemIcon = styled.div<{ isSelected?: boolean }>` +const ItemIcon = styled.div` width: 20px; height: 20px; display: flex; @@ -191,16 +175,17 @@ const DocumentIcon = styled.div` `; interface IPolicies { + /** Whether the component is being used in the mobile navbar */ isMobileNavbar?: boolean; } const Policies: React.FC = ({ isMobileNavbar }) => { const [isOpen, setIsOpen] = useState(false); - const [selectedItem, setSelectedItem] = useState(""); - const [isBouncing, setIsBouncing] = useState(false); const dropdownRef = useRef(null); const { toggleIsOpen } = useOpenContext(); + // Policy documents configuration + const policies = [ { id: "general-policy", @@ -230,7 +215,6 @@ const Policies: React.FC = ({ isMobileNavbar }) => { }, []); const handleItemClick = (policy: typeof policies[0]) => { - setSelectedItem(policy.name); setIsOpen(false); if (isMobileNavbar) { toggleIsOpen(); @@ -240,9 +224,6 @@ const Policies: React.FC = ({ isMobileNavbar }) => { const handleToggleDropdown = () => { setIsOpen(!isOpen); - // Trigger bounce effect - setIsBouncing(true); - setTimeout(() => setIsBouncing(false), 600); // Match animation duration }; return ( @@ -254,7 +235,7 @@ const Policies: React.FC = ({ isMobileNavbar }) => { isMobileNavbar={isMobileNavbar} > Policies - + @@ -266,13 +247,12 @@ const Policies: React.FC = ({ isMobileNavbar }) => { href={policy.url} target="_blank" rel="noopener noreferrer" - isSelected={false} onClick={(e) => { e.preventDefault(); handleItemClick(policy); }} > - + {policy.name} From efc5ae54fd854ac9fe3411026270ef5a0ff82696 Mon Sep 17 00:00:00 2001 From: ManiBAJPAI22 Date: Sun, 17 Aug 2025 06:32:36 +0530 Subject: [PATCH 4/6] issue resolved --- web/src/layout/Header/navbar/Policies.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/web/src/layout/Header/navbar/Policies.tsx b/web/src/layout/Header/navbar/Policies.tsx index 743d8997..56210df6 100644 --- a/web/src/layout/Header/navbar/Policies.tsx +++ b/web/src/layout/Header/navbar/Policies.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from "react"; +import React, { useState, useRef, useEffect, useId } from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; @@ -63,7 +63,7 @@ const ChevronIcon = styled.span<{ isOpen: boolean }>` margin-top: -4px; `; -const DropdownContainer = styled.div<{ isOpen: boolean; isMobileNavbar?: boolean }>` +const DropdownContainer = styled.div<{ isOpen: boolean }>` position: absolute; top: 100%; left: 0; @@ -183,6 +183,7 @@ const Policies: React.FC = ({ isMobileNavbar }) => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); const { toggleIsOpen } = useOpenContext(); + const menuId = useId(); // Policy documents configuration @@ -214,12 +215,12 @@ const Policies: React.FC = ({ isMobileNavbar }) => { }; }, []); - const handleItemClick = (policy: typeof policies[0]) => { + const handleItemClick = () => { setIsOpen(false); if (isMobileNavbar) { toggleIsOpen(); } - window.open(policy.url, "_blank"); + // Let the anchor's default behavior open the link in a new tab (with rel attr). }; const handleToggleDropdown = () => { @@ -230,15 +231,19 @@ const Policies: React.FC = ({ isMobileNavbar }) => { Policies Policies - + {policies.map((policy) => { const IconComponent = policy.icon; return ( @@ -247,10 +252,8 @@ const Policies: React.FC = ({ isMobileNavbar }) => { href={policy.url} target="_blank" rel="noopener noreferrer" - onClick={(e) => { - e.preventDefault(); - handleItemClick(policy); - }} + onClick={handleItemClick} + role="menuitem" > From 8cac6c0c2bdcc51f5bc596f1e044ffda265345e7 Mon Sep 17 00:00:00 2001 From: Mani Bajpai <103181735+ManiBAJPAI22@users.noreply.github.com> Date: Mon, 18 Aug 2025 22:52:27 +0530 Subject: [PATCH 5/6] Delete web/package.json --- web/package.json | 108 ----------------------------------------------- 1 file changed, 108 deletions(-) delete mode 100644 web/package.json diff --git a/web/package.json b/web/package.json deleted file mode 100644 index a3d6f991..00000000 --- a/web/package.json +++ /dev/null @@ -1,108 +0,0 @@ -{ - "name": "@kleros/escrow-v2-web", - "version": "2.0.0", - "source": "src/index.html", - "browserslist": "> 0.5%, not dead", - "repository": "", - "author": "", - "license": "MIT", - "type": "module", - "alias": { - "src": "./src", - "utils": "./src/utils", - "assets": "./src/assets", - "components": "./src/components", - "connectors": "./src/connectors", - "context": "./src/context", - "layout": "./src/layout", - "consts": "./src/consts", - "hooks": "./src/hooks", - "queries": "./src/hooks/queries", - "pages": "./src/pages", - "styles": "./src/styles", - "svgs": "./src/assets/svgs" - }, - "volta": { - "node": "20.18.3", - "yarn": "4.9.2" - }, - "scripts": { - "start": "yarn start-devnet", - "start-local": "scripts/runEnv.sh local 'yarn generate && vite'", - "start-devnet": "scripts/runEnv.sh devnet 'yarn generate && vite'", - "start-testnet": "scripts/runEnv.sh testnet 'yarn generate && vite'", - "start-mainnet": "scripts/runEnv.sh mainnet 'yarn generate && vite'", - "build": "yarn build-devnet", - "build-local": "scripts/runEnv.sh local 'yarn generate && vite build'", - "build-devnet": "scripts/runEnv.sh devnet 'yarn generate && vite build'", - "build-testnet": "scripts/runEnv.sh testnet 'yarn generate && vite build'", - "build-mainnet": "scripts/runEnv.sh mainnet 'yarn generate && vite build'", - "build-netlify": "scripts/generateBuildInfo.sh && yarn generate && vite build", - "check-style": "eslint 'src/**/*.{js,jsx,ts,tsx}'", - "check-types": "tsc --noEmit", - "generate": "yarn generate:gql && yarn generate:hooks", - "generate:gql": "graphql-codegen --require tsconfig-paths/register", - "generate:hooks": "NODE_NO_WARNINGS=1 wagmi generate" - }, - "prettier": "@kleros/escrow-v2-prettier-config", - "devDependencies": { - "@graphql-codegen/cli": "^4.0.1", - "@graphql-codegen/client-preset": "^4.6.2", - "@kleros/kleros-v2-contracts": "^0.10.0", - "@types/react": "^18.2.59", - "@types/react-dom": "^18.2.18", - "@types/react-modal": "^3.16.3", - "@types/styled-components": "^5.1.34", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "@typescript-eslint/utils": "^5.62.0", - "@wagmi/cli": "^2.2.1", - "eslint": "^8.56.0", - "eslint-config-prettier": "^8.10.0", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.6.0", - "lru-cache": "^7.18.3", - "typescript": "^5.7.3", - "vite": "^5.4.2", - "vite-plugin-node-polyfills": "^0.21.0", - "vite-plugin-svgr": "^4.2.0", - "vite-tsconfig-paths": "^4.3.2" - }, - "dependencies": { - "@cyntler/react-doc-viewer": "^1.16.3", - "@kleros/kleros-app": "^2.1.0", - "@kleros/ui-components-library": "^2.19.0", - "@reown/appkit": "^1.6.6", - "@reown/appkit-adapter-wagmi": "^1.6.6", - "@sentry/react": "^7.93.0", - "@sentry/tracing": "^7.93.0", - "@tanstack/react-query": "^5.66.0", - "@yornaath/batshit": "^0.9.0", - "alchemy-sdk": "^3.3.1", - "chart.js": "^3.9.1", - "chartjs-adapter-moment": "^1.0.1", - "core-js": "^3.35.0", - "graphql": "^16.9.0", - "graphql-request": "^7.1.2", - "moment": "^2.30.1", - "overlayscrollbars": "^2.4.6", - "overlayscrollbars-react": "^0.5.3", - "react": "^18.3.1", - "react-chartjs-2": "^4.3.1", - "react-dom": "^18.3.1", - "react-error-boundary": "^3.1.4", - "react-identicons": "^1.2.5", - "react-is": "^18.2.0", - "react-loading-skeleton": "^3.3.1", - "react-markdown": "^8.0.7", - "react-modal": "^3.16.1", - "react-router-dom": "^6.21.2", - "react-scripts": "^5.0.1", - "react-toastify": "^9.1.3", - "react-use": "^17.4.3", - "styled-components": "^5.3.11", - "subgraph-status": "^1.2.4", - "viem": "^2.27.2", - "wagmi": "^2.14.16" - } -} From 9bb1a8f1e3262b7ed9f6af712a638f3553040039 Mon Sep 17 00:00:00 2001 From: Mani Bajpai <103181735+ManiBAJPAI22@users.noreply.github.com> Date: Mon, 18 Aug 2025 23:20:24 +0530 Subject: [PATCH 6/6] Update Policies.tsx --- web/src/layout/Header/navbar/Policies.tsx | 30 +++++++++-------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/web/src/layout/Header/navbar/Policies.tsx b/web/src/layout/Header/navbar/Policies.tsx index 56210df6..57f4cac4 100644 --- a/web/src/layout/Header/navbar/Policies.tsx +++ b/web/src/layout/Header/navbar/Policies.tsx @@ -1,6 +1,7 @@ -import React, { useState, useRef, useEffect, useId } from "react"; +import React, { useState, useRef, useEffect } from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import { useOpenContext } from "../MobileHeader"; @@ -28,6 +29,7 @@ const Title = styled.h1` `; const PoliciesButton = styled.button<{ isActive: boolean; isMobileNavbar?: boolean }>` + ${hoverShortTransitionTiming} display: flex; align-items: center; gap: 8px; @@ -46,10 +48,13 @@ const PoliciesButton = styled.button<{ isActive: boolean; isMobileNavbar?: boole ${landscapeStyle( () => css` - color: ${({ theme }) => theme.white}; padding: 16px 8px; ` - )}; + )} + + @media (min-width: 900px) { + color: ${({ isActive, theme }) => (isActive ? theme.white : `${theme.white}BA`)}; + } `; const ChevronIcon = styled.span<{ isOpen: boolean }>` @@ -175,7 +180,6 @@ const DocumentIcon = styled.div` `; interface IPolicies { - /** Whether the component is being used in the mobile navbar */ isMobileNavbar?: boolean; } @@ -183,9 +187,6 @@ const Policies: React.FC = ({ isMobileNavbar }) => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); const { toggleIsOpen } = useOpenContext(); - const menuId = useId(); - - // Policy documents configuration const policies = [ { @@ -210,9 +211,7 @@ const Policies: React.FC = ({ isMobileNavbar }) => { }; document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; + return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const handleItemClick = () => { @@ -220,11 +219,6 @@ const Policies: React.FC = ({ isMobileNavbar }) => { if (isMobileNavbar) { toggleIsOpen(); } - // Let the anchor's default behavior open the link in a new tab (with rel attr). - }; - - const handleToggleDropdown = () => { - setIsOpen(!isOpen); }; return ( @@ -232,18 +226,17 @@ const Policies: React.FC = ({ isMobileNavbar }) => { Policies setIsOpen(!isOpen)} isActive={isOpen} isMobileNavbar={isMobileNavbar} aria-haspopup="menu" aria-expanded={isOpen} - aria-controls={menuId} > Policies - + {policies.map((policy) => { const IconComponent = policy.icon; return ( @@ -253,7 +246,6 @@ const Policies: React.FC = ({ isMobileNavbar }) => { target="_blank" rel="noopener noreferrer" onClick={handleItemClick} - role="menuitem" >