Skip to content

Commit f818bb0

Browse files
jaybuidljaybuidl
authored
Merge pull request #1664 from kleros/feat(devtools)/mobile-navbar-and-mobile-optimisation
feat(devtools): mobile navbar and mobile optimisation
2 parents 5dcab4b + cab7f77 commit f818bb0

File tree

11 files changed

+316
-18
lines changed

11 files changed

+316
-18
lines changed

‎web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ const StyledA = styled.a`
4646
const presets = [
4747
{
4848
title: "Escrow",
49-
txnHash: "0xfa24d589a0c26c71d06f6e0a151460783f70b51c174a08c04768f458c7817cd1",
49+
txnHash: "0x85e60cb407c9a38e625263cc762ff4283d01f38201825e1d20109d8664cfa7d4",
5050
chainId: 421614,
5151
},
5252
{
5353
title: "Curated Lists",
54-
txnHash: "0xd9ab4908fc5447d532bc287f49e2f2beb754fc62024b806f05a9abf706be7c06",
54+
txnHash: "0x6e5ad6f7436ef8570b50b0fbec76a11ccedbed85030c670e59d8f6617a499108",
5555
chainId: 421614,
5656
},
5757
{

‎web-devtools/src/app/(main)/dispute-template/page.tsx

+23-8
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,13 @@ const StyledForm = styled.form`
115115

116116
const StyledRow = styled.div`
117117
display: flex;
118-
flex-direction: row;
119-
gap: 24px;
118+
flex-direction: column;
119+
${landscapeStyle(
120+
() => css`
121+
flex-direction: row;
122+
gap: 24px;
123+
`
124+
)}
120125
`;
121126

122127
const StyledP = styled.p`
@@ -127,6 +132,13 @@ const StyledHeader = styled.h2`
127132
margin-top: 24px;
128133
`;
129134

135+
const StyledTitle = styled.div`
136+
margin-top: 16px;
137+
display: flex;
138+
justify-content: center;
139+
align-items: center;
140+
`;
141+
130142
const LongText = styled.div`
131143
display: flex;
132144
flex-direction: column;
@@ -202,11 +214,14 @@ const DisputeTemplateView = () => {
202214

203215
return (
204216
<>
217+
<StyledTitle>
218+
<h1>Dispute Preview</h1>
219+
</StyledTitle>
205220
<UpperContainer>
206221
<StyledForm>
207222
<StyledHeader>Dispute Request event parameters</StyledHeader>
208223
<StyledRow>
209-
<StyledP>{"{{ arbitrator }}"}</StyledP>
224+
<StyledP>{"arbitrator :"}</StyledP>
210225
<Field
211226
type="text"
212227
name="_arbitrator"
@@ -216,7 +231,7 @@ const DisputeTemplateView = () => {
216231
/>
217232
</StyledRow>
218233
<StyledRow>
219-
<StyledP>{"{{ arbitrable }}"}</StyledP>
234+
<StyledP>{"arbitrable :"}</StyledP>
220235
<Field
221236
type="text"
222237
name="_arbitrable"
@@ -226,7 +241,7 @@ const DisputeTemplateView = () => {
226241
/>
227242
</StyledRow>
228243
<StyledRow>
229-
<StyledP>{"{{ arbitrableDisputeID }}"}</StyledP>
244+
<StyledP>{"arbitrableDisputeID :"}</StyledP>
230245
<Field
231246
type="text"
232247
name="_arbitrableDisputeID"
@@ -236,7 +251,7 @@ const DisputeTemplateView = () => {
236251
/>
237252
</StyledRow>
238253
<StyledRow>
239-
<StyledP>{"{{ externalDisputeID }}"}</StyledP>
254+
<StyledP>{"externalDisputeID :"}</StyledP>
240255
<Field
241256
type="text"
242257
name="_externalDisputeID"
@@ -246,7 +261,7 @@ const DisputeTemplateView = () => {
246261
/>
247262
</StyledRow>
248263
<StyledRow>
249-
<StyledP>{"{{ templateID }}"}</StyledP>
264+
<StyledP>{"templateID :"}</StyledP>
250265
<Field
251266
type="text"
252267
name="_templateId"
@@ -256,7 +271,7 @@ const DisputeTemplateView = () => {
256271
/>
257272
</StyledRow>
258273
<StyledRow>
259-
<StyledP>{"{{ templateUri }}"}</StyledP>
274+
<StyledP>{"templateUri :"}</StyledP>
260275
<Field
261276
type="text"
262277
name="_templateUri"

‎web-devtools/src/app/(main)/layout.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
"use client";
2-
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
32
import React from "react";
43
import styled from "styled-components";
4+
5+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
6+
57
import GraphqlBatcherProvider from "context/GraphqlBatcher";
68

79
const Main = styled.main`

‎web-devtools/src/assets/svgs/header/hamburger.svg

+3
Loading

‎web-devtools/src/components/HeroImage.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
import React from "react";
1+
"use client";
2+
import React, { useEffect, useState } from "react";
23

34
import HeroDarkDesktop from "svgs/hero/hero-darkmode-desktop.svg";
45
import HeroDarkMobile from "svgs/hero/hero-darkmode-mobile.svg";
56

67
import useIsDesktop from "hooks/useIsDesktop";
78

89
const HeroImage = () => {
10+
const [isMounted, setIsMounted] = useState(false);
911
const isDesktop = useIsDesktop();
12+
useEffect(() => {
13+
setIsMounted(true);
14+
}, []);
15+
16+
if (!isMounted) {
17+
return <HeroDesktop />;
18+
}
19+
1020
return <div>{isDesktop ? <HeroDesktop /> : <HeroMobile />}</div>;
1121
};
1222

‎web-devtools/src/layout/Header/DesktopHeader.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
"use-client";
2+
import React from "react";
3+
import styled, { css } from "styled-components";
4+
5+
import KlerosDevtoolsLogo from "svgs/header/devtools-logo.svg";
6+
7+
import { landscapeStyle } from "styles/landscapeStyle";
8+
9+
import Explore from "./navbar/Explore";
10+
11+
const Container = styled.div`
12+
display: none;
13+
position: absolute;
14+
15+
${landscapeStyle(
16+
() => css`
17+
display: flex;
18+
align-items: center;
19+
justify-content: space-between;
20+
width: 100%;
21+
position: relative;
22+
`
23+
)};
24+
`;
25+
26+
const LeftSide = styled.div`
27+
display: flex;
28+
`;
29+
30+
const MiddleSide = styled.div`
31+
display: flex;
32+
position: absolute;
33+
left: 50%;
34+
top: 50%;
35+
transform: translate(-50%, -50%);
36+
color: ${({ theme }) => theme.klerosUIComponentsWhite} !important;
37+
`;
38+
39+
const DesktopHeader: React.FC = () => {
40+
return (
41+
<>
42+
<Container>
43+
<LeftSide>
44+
<KlerosDevtoolsLogo />
45+
</LeftSide>
46+
<MiddleSide>
47+
<Explore />
48+
</MiddleSide>
49+
</Container>
50+
</>
51+
);
52+
};
53+
export default DesktopHeader;

‎web-devtools/src/layout/Header/MobileHeader.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use client";
2+
import React, { useContext, useMemo, useRef, createContext } from "react";
3+
import styled, { css } from "styled-components";
4+
5+
import Link from "next/link";
6+
import { useClickAway, useToggle } from "react-use";
7+
8+
import KlerosDevtoolsLogo from "svgs/header/devtools-logo.svg";
9+
import HamburgerIcon from "svgs/header/hamburger.svg";
10+
11+
import { landscapeStyle } from "styles/landscapeStyle";
12+
13+
import LightButton from "components/LightButton";
14+
15+
import NavBar from "./navbar";
16+
17+
const Container = styled.div`
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
width: 100%;
22+
23+
${landscapeStyle(
24+
() => css`
25+
display: none;
26+
`
27+
)}
28+
`;
29+
const StyledLightButton = styled(LightButton)`
30+
padding: 0;
31+
background-color: transparent;
32+
:hover {
33+
background-color: transparent;
34+
}
35+
36+
.button-svg {
37+
margin-right: 0px;
38+
fill: white;
39+
}
40+
.button-text {
41+
display: none;
42+
}
43+
`;
44+
45+
const OpenContext = createContext({
46+
isOpen: false,
47+
toggleIsOpen: () => {
48+
// Placeholder
49+
},
50+
});
51+
52+
export function useOpenContext() {
53+
return useContext(OpenContext);
54+
}
55+
56+
const MobileHeader: React.FC = () => {
57+
const [isOpen, toggleIsOpen] = useToggle(false);
58+
const containerRef = useRef(null);
59+
useClickAway(containerRef, () => toggleIsOpen(false));
60+
const memoizedContext = useMemo(() => ({ isOpen, toggleIsOpen }), [isOpen, toggleIsOpen]);
61+
return (
62+
<Container ref={containerRef}>
63+
<OpenContext.Provider value={memoizedContext}>
64+
<Link href="/">
65+
<KlerosDevtoolsLogo />
66+
</Link>
67+
<NavBar />
68+
<StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
69+
</OpenContext.Provider>
70+
</Container>
71+
);
72+
};
73+
74+
export default MobileHeader;

‎web-devtools/src/layout/Header/index.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
import React from "react";
33
import styled from "styled-components";
44

5-
import Link from "next/link";
6-
7-
import KlerosCourtLogo from "svgs/header/devtools-logo.svg";
5+
import DesktopHeader from "./DesktopHeader";
6+
import MobileHeader from "./MobileHeader";
87

98
const Container = styled.div`
109
position: sticky;
@@ -25,9 +24,8 @@ const Header: React.FC = () => {
2524
return (
2625
<Container>
2726
<HeaderContainer>
28-
<Link href="/">
29-
<KlerosCourtLogo />
30-
</Link>
27+
<DesktopHeader />
28+
<MobileHeader />
3129
</HeaderContainer>
3230
</Container>
3331
);

‎web-devtools/src/layout/Header/navbar/Explore.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from "react";
2+
import styled, { css } from "styled-components";
3+
4+
import Link from "next/link";
5+
import { usePathname } from "next/navigation";
6+
7+
import { landscapeStyle } from "styles/landscapeStyle";
8+
import { responsiveSize } from "styles/responsiveSize";
9+
10+
import { useOpenContext } from "../MobileHeader";
11+
12+
const Container = styled.div`
13+
display: flex;
14+
gap: 0px;
15+
flex-direction: column;
16+
17+
${landscapeStyle(
18+
() => css`
19+
flex-direction: row;
20+
gap: ${responsiveSize(4, 16)};
21+
`
22+
)};
23+
`;
24+
25+
const LinkContainer = styled.div`
26+
display: flex;
27+
min-height: 32px;
28+
align-items: center;
29+
`;
30+
31+
const Title = styled.h1`
32+
display: block;
33+
34+
${landscapeStyle(
35+
() => css`
36+
display: none;
37+
`
38+
)};
39+
`;
40+
41+
const StyledLink = styled(Link)<{ isActive: boolean }>`
42+
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
43+
text-decoration: none;
44+
font-size: 16px;
45+
46+
font-weight: ${({ isActive }) => (isActive ? "600" : "normal")};
47+
48+
${landscapeStyle(
49+
() => css`
50+
color: ${({ theme }) => theme.klerosUIComponentsWhite};
51+
`
52+
)};
53+
`;
54+
55+
const links = [
56+
{ to: "/", text: "Home" },
57+
{ to: "/dispute-template", text: "Dispute Preview" },
58+
{ to: "/ruler", text: "Configure Ruler" },
59+
];
60+
61+
const Explore: React.FC = () => {
62+
const pathname = usePathname();
63+
const { toggleIsOpen } = useOpenContext();
64+
65+
return (
66+
<Container>
67+
<Title>Explore</Title>
68+
{links.map(({ to, text }) => (
69+
<LinkContainer key={text}>
70+
<StyledLink
71+
href={to}
72+
onClick={toggleIsOpen}
73+
isActive={to === "/" ? pathname === "/" : pathname.startsWith(to)}
74+
>
75+
{text}
76+
</StyledLink>
77+
</LinkContainer>
78+
))}
79+
</Container>
80+
);
81+
};
82+
83+
export default Explore;

0 commit comments

Comments
 (0)