Skip to content

Commit b0b994e

Browse files
kemurukemuru
committed
fix: all suggestions from PR
1 parent 2e8e80e commit b0b994e

File tree

8 files changed

+110
-89
lines changed

8 files changed

+110
-89
lines changed

‎web/src/layout/Header/navbar/Menu/Settings/General.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,11 @@ const General: React.FC = () => {
5656
<StyledChainContainer>
5757
<ChainDisplay />
5858
</StyledChainContainer>
59-
{account ? (
59+
{account && (
6060
<StyledIdenticon>
6161
<Identicon size="24" string={account} />
6262
</StyledIdenticon>
63-
) : null}
63+
)}
6464
<StyledAddressContainer>
6565
<AddressDisplay />
6666
</StyledAddressContainer>

‎web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,21 @@
11
import React, { Dispatch, SetStateAction, useEffect } from "react";
22
import styled from "styled-components";
3+
import { Field } from "@kleros/ui-components-library";
34

4-
const StyledInput = styled.input`
5+
const StyledField = styled(Field)`
56
display: flex;
67
width: 100%;
7-
height: 45px;
88
margin-top: 34px;
9-
background-color: transparent;
10-
color: ${({ theme }) => theme.primaryText};
11-
border: 1px solid ${({ theme }) => theme.stroke};
12-
border-radius: 3px;
13-
outline: none;
14-
box-shadow: none;
15-
font-size: 16px;
16-
padding-left: 16px;
17-
18-
:focus {
19-
border-color: ${({ theme }) => theme.stroke};
20-
box-shadow: none;
21-
}
22-
23-
::placeholder {
24-
color: ${({ theme }) => theme.secondaryText};
25-
}
269
`;
2710

2811
interface IFormEmail {
2912
emailInput: string;
13+
emailIsValid: boolean;
3014
setEmailInput: Dispatch<SetStateAction<string>>;
3115
setEmailIsValid: Dispatch<SetStateAction<boolean>>;
3216
}
3317

34-
const FormEmail: React.FC<IFormEmail> = ({ emailInput, setEmailInput, setEmailIsValid }) => {
18+
const FormEmail: React.FC<IFormEmail> = ({ emailInput, setEmailInput, setEmailIsValid, emailIsValid }) => {
3519
useEffect(() => {
3620
setEmailIsValid(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(emailInput));
3721
}, [emailInput]);
@@ -41,7 +25,14 @@ const FormEmail: React.FC<IFormEmail> = ({ emailInput, setEmailInput, setEmailIs
4125
setEmailInput(event.target.value);
4226
};
4327

44-
return <StyledInput type="text" value={emailInput} onChange={handleInputChange} placeholder="youremail@email.com" />;
28+
return (
29+
<StyledField
30+
variant={emailInput === "" ? undefined : emailIsValid ? "success" : "error"}
31+
value={emailInput}
32+
onChange={handleInputChange}
33+
placeholder="youremail@email.com"
34+
/>
35+
);
4536
};
4637

4738
export default FormEmail;

‎web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ const FormContainer = styled.div`
77
position: relative;
88
display: flex;
99
flex-direction: column;
10-
padding-left: 32px;
11-
padding-right: 32px;
10+
padding: 0 calc(12px + (32 - 12) * ((100vw - 300px) / (1250 - 300)));
1211
padding-bottom: 32px;
1312
`;
1413

@@ -34,23 +33,37 @@ const EmailErrorContainer = styled.div`
3433
padding-left: 16px;
3534
`;
3635

36+
const OPTIONS = [{ label: "When x." }, { label: "When y." }, { label: "When z." }, { label: "When w." }];
37+
3738
const FormNotifs: React.FC = () => {
38-
const [isWhenX, setIsWhenX] = useState<boolean>(false);
39-
const [isWhenY, setIsWhenY] = useState<boolean>(false);
40-
const [isWhenZ, setIsWhenZ] = useState<boolean>(false);
41-
const [isWhenW, setIsWhenW] = useState<boolean>(false);
39+
const [checkboxStates, setCheckboxStates] = useState<boolean[]>(new Array(OPTIONS.length));
4240
const [emailInput, setEmailInput] = useState<string>("");
4341
const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
4442

43+
const handleCheckboxChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
44+
const newCheckboxStates = [...checkboxStates];
45+
newCheckboxStates[index] = e.target.checked;
46+
setCheckboxStates(newCheckboxStates);
47+
};
48+
4549
return (
4650
<FormContainer>
47-
<StyledCheckbox onChange={(e) => setIsWhenX(e.target.checked)} checked={isWhenX} small={true} label="When x." />
48-
<StyledCheckbox onChange={(e) => setIsWhenY(e.target.checked)} checked={isWhenY} small={true} label="When y." />
49-
<StyledCheckbox onChange={(e) => setIsWhenZ(e.target.checked)} checked={isWhenZ} small={true} label="When z." />
50-
<StyledCheckbox onChange={(e) => setIsWhenW(e.target.checked)} checked={isWhenW} small={true} label="When w." />
51+
{OPTIONS.map(({ label }, index) => (
52+
<StyledCheckbox
53+
key={label}
54+
onChange={handleCheckboxChange(index)}
55+
checked={checkboxStates[index]}
56+
small={true}
57+
label={label}
58+
/>
59+
))}
5160
<FormEmailContainer>
52-
<FormEmail emailInput={emailInput} setEmailInput={setEmailInput} setEmailIsValid={setEmailIsValid} />
53-
{emailInput !== "" && !emailIsValid && <EmailErrorContainer>Email is invalid</EmailErrorContainer>}
61+
<FormEmail
62+
emailInput={emailInput}
63+
emailIsValid={emailIsValid}
64+
setEmailInput={setEmailInput}
65+
setEmailIsValid={setEmailIsValid}
66+
/>
5467
</FormEmailContainer>
5568

5669
<ButtonContainer>

‎web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
11
import React from "react";
22
import styled from "styled-components";
33
import FormNotifs from "./FormNotifs";
4-
import HeaderNotifs from "./HeaderNotifs";
54

65
const Container = styled.div`
76
display: flex;
87
flex-direction: column;
98
`;
109

10+
const HeaderContainer = styled.div`
11+
display: flex;
12+
justify-content: center;
13+
font-size: 16px;
14+
font-weight: 600;
15+
color: ${({ theme }) => theme.primaryText};
16+
margin-top: 32px;
17+
margin-bottom: 12px;
18+
`;
19+
20+
const HeaderNotifs: React.FC = () => {
21+
return <HeaderContainer>Send Me Notifications</HeaderContainer>;
22+
};
23+
1124
const SendMeNotifications: React.FC = () => {
1225
return (
1326
<Container>

‎web/src/layout/Header/navbar/Menu/Settings/index.tsx‎

Lines changed: 52 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,44 @@ import General from "./General";
55
import SendMeNotifications from "./SendMeNotifications";
66
import { useFocusOutside } from "hooks/useFocusOutside";
77

8-
const tabsItems = [
8+
const Container = styled.div`
9+
display: flex;
10+
position: absolute;
11+
z-index: 1;
12+
background-color: ${({ theme }) => theme.whiteBackground};
13+
flex-direction: column;
14+
border: 1px solid ${({ theme }) => theme.stroke};
15+
border-radius: 3px;
16+
overflow-y: auto;
17+
top: 5%;
18+
left: 50%;
19+
transform: translateX(-50%);
20+
`;
21+
22+
const StyledSettingsText = styled.div`
23+
display: flex;
24+
justify-content: center;
25+
font-size: 24px;
26+
color: ${({ theme }) => theme.primaryText};
27+
margin-top: 24px;
28+
`;
29+
30+
const StyledTabs = styled(Tabs)`
31+
padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
32+
width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300)));
33+
`;
34+
35+
const Overlay = styled.div`
36+
position: fixed;
37+
top: 0;
38+
left: 0;
39+
width: 100vw;
40+
height: 100vh;
41+
background-color: ${({ theme }) => theme.blackLowOpacity};
42+
z-index: 0;
43+
`;
44+
45+
const TABS = [
946
{
1047
text: "General",
1148
value: 0,
@@ -26,41 +63,21 @@ const Settings: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
2663
useFocusOutside(containerRef, () => setIsSettingsOpen(false));
2764

2865
return (
29-
<Container ref={containerRef}>
30-
<StyledSettingsText>Settings</StyledSettingsText>
31-
<StyledTabs
32-
currentValue={currentTab}
33-
items={tabsItems}
34-
callback={(n: number) => {
35-
setCurrentTab(n);
36-
}}
37-
/>
38-
{currentTab === 0 ? <General /> : <SendMeNotifications />}
39-
</Container>
66+
<>
67+
<Overlay />
68+
<Container ref={containerRef}>
69+
<StyledSettingsText>Settings</StyledSettingsText>
70+
<StyledTabs
71+
currentValue={currentTab}
72+
items={TABS}
73+
callback={(n: number) => {
74+
setCurrentTab(n);
75+
}}
76+
/>
77+
{currentTab === 0 ? <General /> : <SendMeNotifications />}
78+
</Container>
79+
</>
4080
);
4181
};
4282

43-
const Container = styled.div`
44-
display: flex;
45-
position: absolute;
46-
z-index: 1;
47-
background-color: ${({ theme }) => theme.whiteBackground};
48-
flex-direction: column;
49-
border: 1px solid ${({ theme }) => theme.stroke};
50-
border-radius: 3px;
51-
`;
52-
53-
const StyledSettingsText = styled.div`
54-
display: flex;
55-
justify-content: center;
56-
font-size: 24px;
57-
color: ${({ theme }) => theme.primaryText};
58-
margin-top: 24px;
59-
`;
60-
61-
const StyledTabs = styled(Tabs)`
62-
padding-left: 32px;
63-
padding-right: 32px;
64-
`;
65-
6683
export default Settings;

‎web/src/layout/Header/navbar/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { useLockBodyScroll } from "react-use";
34
import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
45
import LightButton from "components/LightButton";
56
import Explore from "./Explore";
@@ -33,6 +34,8 @@ const Container = styled.div<{ isOpen: boolean }>`
3334

3435
const NavBar: React.FC = () => {
3536
const { isOpen } = useOpenContext();
37+
useLockBodyScroll(isOpen);
38+
3639
return (
3740
<Container {...{ isOpen }}>
3841
<LightButton text="Kleros Solutions" Icon={KlerosSolutionsIcon} />

‎web/src/styles/themes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const lightTheme = {
1818
defaultShadow: "#00000002",
1919
hoveredShadow: "#00000002",
2020
whiteLowOpacity: "#FFFFFF0F",
21+
blackLowOpacity: "#00000080",
2122

2223
success: "#00C42B",
2324
successLight: "#F0FBF2",
@@ -52,6 +53,7 @@ export const darkTheme = {
5253
defaultShadow: "#00000000",
5354
hoveredShadow: "#42498f80",
5455
whiteLowOpacity: "#FFFFFF0F",
56+
blackLowOpacity: "#00000080",
5557

5658
success: "#65DC7F",
5759
successLight: "#32355B",

0 commit comments

Comments
 (0)