From 22ac06a59e730ab1b406ae2bfcdaa147c2805e92 Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Sun, 14 May 2023 16:52:00 +0100
Subject: [PATCH 01/11] feat: add navbar settings and notifications pop-ups
---
web/package.json | 1 +
web/src/components/ConnectButton.tsx | 25 ++++---
.../Header/navbar/Menu/Settings/General.tsx | 75 +++++++++++++++++++
.../Notifications/FormNotifs/FormEmail.tsx | 47 ++++++++++++
.../Notifications/FormNotifs/index.tsx | 64 ++++++++++++++++
.../Settings/Notifications/HeaderNotifs.tsx | 18 +++++
.../Menu/Settings/Notifications/index.tsx | 20 +++++
.../Header/navbar/Menu/Settings/index.tsx | 67 +++++++++++++++++
.../navbar/{Menu.tsx => Menu/index.tsx} | 31 +++++++-
9 files changed, 335 insertions(+), 13 deletions(-)
create mode 100644 web/src/layout/Header/navbar/Menu/Settings/General.tsx
create mode 100644 web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/FormEmail.tsx
create mode 100644 web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
create mode 100644 web/src/layout/Header/navbar/Menu/Settings/Notifications/HeaderNotifs.tsx
create mode 100644 web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
create mode 100644 web/src/layout/Header/navbar/Menu/Settings/index.tsx
rename web/src/layout/Header/navbar/{Menu.tsx => Menu/index.tsx} (56%)
diff --git a/web/package.json b/web/package.json
index 3f62f8d40..401252a84 100644
--- a/web/package.json
+++ b/web/package.json
@@ -72,6 +72,7 @@
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
+ "react-identicons": "^1.2.5",
"react-is": "^18.2.0",
"react-jazzicon": "^1.0.4",
"react-loading-skeleton": "^3.2.0",
diff --git a/web/src/components/ConnectButton.tsx b/web/src/components/ConnectButton.tsx
index 86c9a765b..7ef37da99 100644
--- a/web/src/components/ConnectButton.tsx
+++ b/web/src/components/ConnectButton.tsx
@@ -7,17 +7,26 @@ import { useConnect } from "hooks/useConnect";
import { SUPPORTED_CHAINS } from "consts/chains";
const AccountDisplay: React.FC = () => {
- const { account, chainId } = useWeb3();
- const chainName = chainId ? SUPPORTED_CHAINS[chainId].chainName : undefined;
- const shortAddress = account ? shortenAddress(account) : undefined;
return (
- {chainName}
-
+
+
);
};
+export const ChainDisplay: React.FC = () => {
+ const { chainId } = useWeb3();
+ const chainName = chainId ? SUPPORTED_CHAINS[chainId].chainName : undefined;
+ return {chainName};
+};
+
+export const AddressDisplay: React.FC = () => {
+ const { account } = useWeb3();
+ const shortAddress = account ? shortenAddress(account) : undefined;
+ return ;
+};
+
const StyledContainer = styled.div`
width: fit-content;
height: 34px;
@@ -42,11 +51,7 @@ const StyledContainer = styled.div`
const ConnectButton: React.FC = () => {
const { active } = useWeb3();
const { activate, connecting } = useConnect();
- return active ? (
-
- ) : (
-
- );
+ return active ? : ;
};
export default ConnectButton;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
new file mode 100644
index 000000000..7eb75edfb
--- /dev/null
+++ b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import ConnectButton, { AddressDisplay, ChainDisplay } from "components/ConnectButton";
+import styled from "styled-components";
+import { useWeb3 } from "hooks/useWeb3";
+import Identicon from "react-identicons";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-top: 32px;
+`;
+
+const StyledChainContainer = styled.div`
+ display: flex;
+ height: 34px;
+ gap: 0.5rem;
+ justify-content: center;
+ align-items: center;
+ :before {
+ content: "";
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: ${({ theme }) => theme.success};
+ }
+ > small {
+ color: ${({ theme }) => theme.success};
+ }
+`;
+
+const StyledAddressContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ margin-top: 12px;
+ padding-bottom: 32px;
+`;
+
+const StyledIdenticon = styled.div`
+ display: flex;
+ justify-content: center;
+ margin-top: 32px;
+`;
+
+const StyledConnectButtonContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ padding: 16px;
+`;
+
+const General: React.FC = () => {
+ const { account } = useWeb3();
+
+ return account ? (
+
+
+
+
+ {account ? (
+
+
+
+ ) : null}
+
+
+
+
+ ) : (
+
+
+
+ );
+};
+
+export default General;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/FormEmail.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/FormEmail.tsx
new file mode 100644
index 000000000..d049e3fa2
--- /dev/null
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/FormEmail.tsx
@@ -0,0 +1,47 @@
+import React, { Dispatch, SetStateAction, useEffect } from "react";
+import styled from "styled-components";
+
+const StyledInput = styled.input`
+ display: flex;
+ width: 100%;
+ height: 45px;
+ margin-top: 34px;
+ background-color: transparent;
+ color: ${({ theme }) => theme.primaryText};
+ border: 1px solid ${({ theme }) => theme.stroke};
+ border-radius: 3px;
+ outline: none;
+ box-shadow: none;
+ font-size: 16px;
+ padding-left: 16px;
+
+ :focus {
+ border-color: ${({ theme }) => theme.stroke};
+ box-shadow: none;
+ }
+
+ ::placeholder {
+ color: ${({ theme }) => theme.secondaryText};
+ }
+`;
+
+interface IFormEmail {
+ emailInput: string;
+ setEmailInput: Dispatch>;
+ setEmailIsValid: Dispatch>;
+}
+
+const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIsValid }) => {
+ useEffect(() => {
+ setEmailIsValid(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(emailInput));
+ }, [emailInput]);
+
+ const handleInputChange = (event: React.ChangeEvent) => {
+ event.preventDefault();
+ setEmailInput(event.target.value);
+ };
+
+ return ;
+};
+
+export default FormEmail;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
new file mode 100644
index 000000000..27a1853ff
--- /dev/null
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
@@ -0,0 +1,64 @@
+import { Checkbox } from "@kleros/ui-components-library";
+import React, { useState } from "react";
+import styled from "styled-components";
+import FormEmail from "./FormEmail";
+import { Button } from "@kleros/ui-components-library";
+
+const FormContainer = styled.div`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ padding-left: 32px;
+ padding-right: 32px;
+ padding-bottom: 32px;
+`;
+
+const StyledCheckbox = styled(Checkbox)`
+ margin-top: 20px;
+`;
+
+const ButtonContainer = styled.div`
+ display: flex;
+ justify-content: end;
+ margin-top: 16px;
+`;
+
+const FormEmailContainer = styled.div`
+ position: relative;
+`;
+
+const EmailErrorContainer = styled.div`
+ position: absolute;
+ color: ${({ theme }) => theme.error};
+ font-size: 12px;
+ padding-top: 4px;
+ padding-left: 16px;
+`;
+
+const FormNotifs: React.FC = () => {
+ const [isWhenX, setIsWhenX] = useState(false);
+ const [isWhenY, setIsWhenY] = useState(false);
+ const [isWhenZ, setIsWhenZ] = useState(false);
+ const [isWhenW, setIsWhenW] = useState(false);
+ const [emailInput, setEmailInput] = useState("");
+ const [emailIsValid, setEmailIsValid] = useState(false);
+
+ return (
+
+ setIsWhenX(e.target.checked)} checked={isWhenX} small={true} label="When x." />
+ setIsWhenY(e.target.checked)} checked={isWhenY} small={true} label="When y." />
+ setIsWhenZ(e.target.checked)} checked={isWhenZ} small={true} label="When z." />
+ setIsWhenW(e.target.checked)} checked={isWhenW} small={true} label="When w." />
+
+
+ {emailInput !== "" && !emailIsValid && Email is invalid}
+
+
+
+
+
+
+ );
+};
+
+export default FormNotifs;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/HeaderNotifs.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/HeaderNotifs.tsx
new file mode 100644
index 000000000..fd61d99fc
--- /dev/null
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/HeaderNotifs.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+
+const HeaderContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: 600;
+ color: ${({ theme }) => theme.primaryText};
+ margin-top: 32px;
+ margin-bottom: 12px;
+`;
+
+const HeaderNotifs: React.FC = () => {
+ return Send Me Notifications;
+};
+
+export default HeaderNotifs;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
new file mode 100644
index 000000000..34b2d3f91
--- /dev/null
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "styled-components";
+import FormNotifs from "./FormNotifs";
+import HeaderNotifs from "./HeaderNotifs";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const Notifications: React.FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default Notifications;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
new file mode 100644
index 000000000..7c8dd2b7d
--- /dev/null
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -0,0 +1,67 @@
+import React, { Dispatch, SetStateAction, useRef } from "react";
+import { Tabs } from "@kleros/ui-components-library";
+import styled from "styled-components";
+import { useFocusOutside } from "hooks/useFocusOutside";
+import General from "./General";
+import Notifications from "./Notifications";
+
+const tabsItems = [
+ {
+ text: "General",
+ value: 0,
+ },
+ {
+ text: "Notifications",
+ value: 1,
+ },
+];
+
+const TabsContainer = styled(Tabs)`
+ padding-left: 32px;
+ padding-right: 32px;
+`;
+
+interface ISettings {
+ setIsSettingsOpen: Dispatch>;
+ currentSettingsTab: number;
+ setCurrentSettingsTab: Dispatch>;
+}
+
+const Settings: React.FC = ({ setIsSettingsOpen, currentSettingsTab, setCurrentSettingsTab }) => {
+ const containerRef = useRef(null);
+ useFocusOutside(containerRef, () => setIsSettingsOpen(false));
+
+ return (
+
+ Settings
+ {
+ setCurrentSettingsTab(n);
+ }}
+ />
+ {currentSettingsTab === 0 ? : }
+
+ );
+};
+
+const Container = styled.div`
+ display: flex;
+ position: absolute;
+ z-index: 1;
+ background-color: ${({ theme }) => theme.whiteBackground};
+ flex-direction: column;
+ border: 1px solid ${({ theme }) => theme.stroke};
+ border-radius: 3px;
+`;
+
+const StyledSettingsText = styled.div`
+ display: flex;
+ justify-content: center;
+ font-size: 24px;
+ color: ${({ theme }) => theme.primaryText};
+ margin-top: 24px;
+`;
+
+export default Settings;
diff --git a/web/src/layout/Header/navbar/Menu.tsx b/web/src/layout/Header/navbar/Menu/index.tsx
similarity index 56%
rename from web/src/layout/Header/navbar/Menu.tsx
rename to web/src/layout/Header/navbar/Menu/index.tsx
index 1ce5b1426..39d0ccdb8 100644
--- a/web/src/layout/Header/navbar/Menu.tsx
+++ b/web/src/layout/Header/navbar/Menu/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import styled from "styled-components";
import { useToggleTheme } from "hooks/useToggleThemeContext";
import LightButton from "components/LightButton";
@@ -7,6 +7,7 @@ import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
import LightModeIcon from "svgs/menu-icons/light-mode.svg";
import HelpIcon from "svgs/menu-icons/help.svg";
import SettingsIcon from "svgs/menu-icons/settings.svg";
+import Settings from "./Settings";
const Container = styled.div``;
@@ -19,10 +20,27 @@ const ButtonContainer = styled.div`
const Menu: React.FC = () => {
const [theme, toggleTheme] = useToggleTheme();
+ const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+ const [currentSettingsTab, setCurrentSettingsTab] = useState(0);
+
const isLightTheme = theme === "light";
const buttons = [
- { text: "Notifications", Icon: NotificationsIcon },
- { text: "Settings", Icon: SettingsIcon },
+ {
+ text: "Notifications",
+ Icon: NotificationsIcon,
+ onClick: () => {
+ setIsSettingsOpen(true);
+ setCurrentSettingsTab(1); // 1 is the index for the Notifications tab
+ },
+ },
+ {
+ text: "Settings",
+ Icon: SettingsIcon,
+ onClick: () => {
+ setIsSettingsOpen(true);
+ setCurrentSettingsTab(0); // 0 is the index for the General tab
+ },
+ },
{ text: "Help", Icon: HelpIcon },
{
text: `${isLightTheme ? "Dark" : "Light"} Mode`,
@@ -36,6 +54,13 @@ const Menu: React.FC = () => {
{buttons.map(({ text, Icon, onClick }) => (
+ {text === ("Settings" || "Notifications") && isSettingsOpen && (
+
+ )}
))}
From 1658af7e061ff1dfe7ef61faec20a7770394076b Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Sun, 14 May 2023 17:04:59 +0100
Subject: [PATCH 02/11] chore: remove redundant import library
---
.../navbar/Menu/Settings/Notifications/FormNotifs/index.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
index 27a1853ff..c79705d3c 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
@@ -1,8 +1,7 @@
-import { Checkbox } from "@kleros/ui-components-library";
+import { Checkbox, Button } from "@kleros/ui-components-library";
import React, { useState } from "react";
import styled from "styled-components";
import FormEmail from "./FormEmail";
-import { Button } from "@kleros/ui-components-library";
const FormContainer = styled.div`
position: relative;
From e695a64e035a5ddc155df6a00224ceabb2c9775d Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Sun, 14 May 2023 17:13:01 +0100
Subject: [PATCH 03/11] feat: add updated yarn.lock
---
yarn.lock | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/yarn.lock b/yarn.lock
index 17b37c55b..42bee9657 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3844,6 +3844,7 @@ __metadata:
react-chartjs-2: ^4.3.1
react-dom: ^18.2.0
react-error-boundary: ^3.1.4
+ react-identicons: ^1.2.5
react-is: ^18.2.0
react-jazzicon: ^1.0.4
react-loading-skeleton: ^3.2.0
@@ -22104,6 +22105,16 @@ __metadata:
languageName: node
linkType: hard
+"react-identicons@npm:^1.2.5":
+ version: 1.2.5
+ resolution: "react-identicons@npm:1.2.5"
+ peerDependencies:
+ react: ^17.0.1
+ react-dom: ^17.0.1
+ checksum: e2d5f088a334200d5be3b46bb9deb25ee3bc0f915d96a472007bd5c8b847683c50c809ba3ae4f000fcb018fc0094731298f9f337a3c02f658732b6df520ec4c7
+ languageName: node
+ linkType: hard
+
"react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0":
version: 16.13.1
resolution: "react-is@npm:16.13.1"
From b2385bcab01fffe4c0a4c6e4dd8ea996b3f58ab1 Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Sun, 14 May 2023 18:03:06 +0100
Subject: [PATCH 04/11] fix: notifications triggered notifications settings
---
.../Header/navbar/Menu/Settings/index.tsx | 25 +++++++++----------
web/src/layout/Header/navbar/Menu/index.tsx | 23 +++--------------
2 files changed, 15 insertions(+), 33 deletions(-)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index 7c8dd2b7d..cd95ad507 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useRef } from "react";
+import React, { Dispatch, SetStateAction, useRef, useState } from "react";
import { Tabs } from "@kleros/ui-components-library";
import styled from "styled-components";
import { useFocusOutside } from "hooks/useFocusOutside";
@@ -16,32 +16,26 @@ const tabsItems = [
},
];
-const TabsContainer = styled(Tabs)`
- padding-left: 32px;
- padding-right: 32px;
-`;
-
interface ISettings {
setIsSettingsOpen: Dispatch>;
- currentSettingsTab: number;
- setCurrentSettingsTab: Dispatch>;
}
-const Settings: React.FC = ({ setIsSettingsOpen, currentSettingsTab, setCurrentSettingsTab }) => {
+const Settings: React.FC = ({ setIsSettingsOpen }) => {
+ const [currentTab, setCurrentTab] = useState(0);
const containerRef = useRef(null);
useFocusOutside(containerRef, () => setIsSettingsOpen(false));
return (
Settings
- {
- setCurrentSettingsTab(n);
+ setCurrentTab(n);
}}
/>
- {currentSettingsTab === 0 ? : }
+ {currentTab === 0 ? : }
);
};
@@ -64,4 +58,9 @@ const StyledSettingsText = styled.div`
margin-top: 24px;
`;
+const StyledTabs = styled(Tabs)`
+ padding-left: 32px;
+ padding-right: 32px;
+`;
+
export default Settings;
diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx
index 39d0ccdb8..0e6648012 100644
--- a/web/src/layout/Header/navbar/Menu/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/index.tsx
@@ -21,25 +21,14 @@ const ButtonContainer = styled.div`
const Menu: React.FC = () => {
const [theme, toggleTheme] = useToggleTheme();
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
- const [currentSettingsTab, setCurrentSettingsTab] = useState(0);
const isLightTheme = theme === "light";
const buttons = [
- {
- text: "Notifications",
- Icon: NotificationsIcon,
- onClick: () => {
- setIsSettingsOpen(true);
- setCurrentSettingsTab(1); // 1 is the index for the Notifications tab
- },
- },
+ { text: "Notifications", Icon: NotificationsIcon },
{
text: "Settings",
Icon: SettingsIcon,
- onClick: () => {
- setIsSettingsOpen(true);
- setCurrentSettingsTab(0); // 0 is the index for the General tab
- },
+ onClick: () => setIsSettingsOpen(true),
},
{ text: "Help", Icon: HelpIcon },
{
@@ -54,13 +43,7 @@ const Menu: React.FC = () => {
{buttons.map(({ text, Icon, onClick }) => (
- {text === ("Settings" || "Notifications") && isSettingsOpen && (
-
- )}
+ {text === "Settings" && isSettingsOpen && }
))}
From e9ef68e7cb67f2f4e26f64e0dfe404508f55b9d3 Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Mon, 15 May 2023 11:10:00 +0100
Subject: [PATCH 05/11] fix: correct import orders
---
web/src/layout/Header/index.tsx | 8 ++------
web/src/layout/Header/navbar/Menu/Settings/General.tsx | 4 ++--
.../Menu/Settings/Notifications/FormNotifs/index.tsx | 2 +-
web/src/layout/Header/navbar/Menu/Settings/index.tsx | 4 ++--
web/src/layout/Header/navbar/Menu/index.tsx | 2 +-
5 files changed, 8 insertions(+), 12 deletions(-)
diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx
index b82f299a4..7a680ed6d 100644
--- a/web/src/layout/Header/index.tsx
+++ b/web/src/layout/Header/index.tsx
@@ -3,9 +3,9 @@ import styled from "styled-components";
import { Link } from "react-router-dom";
import HamburgerIcon from "svgs/header/hamburger.svg";
import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-import { useFocusOutside } from "hooks/useFocusOutside";
import LightButton from "components/LightButton";
import NavBar from "./navbar";
+import { useFocusOutside } from "hooks/useFocusOutside";
const Container = styled.div`
position: sticky;
@@ -61,11 +61,7 @@ const Header: React.FC = () => {
-
+
diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
index 7eb75edfb..ef76db999 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
@@ -1,8 +1,8 @@
import React from "react";
-import ConnectButton, { AddressDisplay, ChainDisplay } from "components/ConnectButton";
import styled from "styled-components";
-import { useWeb3 } from "hooks/useWeb3";
import Identicon from "react-identicons";
+import ConnectButton, { AddressDisplay, ChainDisplay } from "components/ConnectButton";
+import { useWeb3 } from "hooks/useWeb3";
const Container = styled.div`
display: flex;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
index c79705d3c..b3f438c82 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
@@ -1,6 +1,6 @@
import { Checkbox, Button } from "@kleros/ui-components-library";
-import React, { useState } from "react";
import styled from "styled-components";
+import React, { useState } from "react";
import FormEmail from "./FormEmail";
const FormContainer = styled.div`
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index cd95ad507..a3be8063a 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -1,9 +1,9 @@
import React, { Dispatch, SetStateAction, useRef, useState } from "react";
-import { Tabs } from "@kleros/ui-components-library";
import styled from "styled-components";
-import { useFocusOutside } from "hooks/useFocusOutside";
+import { Tabs } from "@kleros/ui-components-library";
import General from "./General";
import Notifications from "./Notifications";
+import { useFocusOutside } from "hooks/useFocusOutside";
const tabsItems = [
{
diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx
index 0e6648012..e0f28c800 100644
--- a/web/src/layout/Header/navbar/Menu/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/index.tsx
@@ -1,6 +1,5 @@
import React, { useState } from "react";
import styled from "styled-components";
-import { useToggleTheme } from "hooks/useToggleThemeContext";
import LightButton from "components/LightButton";
import NotificationsIcon from "svgs/menu-icons/notifications.svg";
import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
@@ -8,6 +7,7 @@ import LightModeIcon from "svgs/menu-icons/light-mode.svg";
import HelpIcon from "svgs/menu-icons/help.svg";
import SettingsIcon from "svgs/menu-icons/settings.svg";
import Settings from "./Settings";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
const Container = styled.div``;
From 20e1a972961c9cca9a9cb6677a061f289928478a Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Mon, 15 May 2023 12:49:35 +0100
Subject: [PATCH 06/11] fix: correct another import statement
---
.../navbar/Menu/Settings/Notifications/FormNotifs/index.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
index b3f438c82..b5575ac36 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
@@ -1,6 +1,6 @@
-import { Checkbox, Button } from "@kleros/ui-components-library";
-import styled from "styled-components";
import React, { useState } from "react";
+import styled from "styled-components";
+import { Checkbox, Button } from "@kleros/ui-components-library";
import FormEmail from "./FormEmail";
const FormContainer = styled.div`
From 2e8e80ea55e12509eb146c3c8d548db9e824ceb5 Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Mon, 15 May 2023 16:59:03 +0100
Subject: [PATCH 07/11] refactor: refactor Notifications to SendMeNotifications
to avoid component name collision
---
.../FormNotifs/FormEmail.tsx | 0
.../FormNotifs/index.tsx | 0
.../{Notifications => SendMeNotifications}/HeaderNotifs.tsx | 0
.../Settings/{Notifications => SendMeNotifications}/index.tsx | 4 ++--
web/src/layout/Header/navbar/Menu/Settings/index.tsx | 4 ++--
5 files changed, 4 insertions(+), 4 deletions(-)
rename web/src/layout/Header/navbar/Menu/Settings/{Notifications => SendMeNotifications}/FormNotifs/FormEmail.tsx (100%)
rename web/src/layout/Header/navbar/Menu/Settings/{Notifications => SendMeNotifications}/FormNotifs/index.tsx (100%)
rename web/src/layout/Header/navbar/Menu/Settings/{Notifications => SendMeNotifications}/HeaderNotifs.tsx (100%)
rename web/src/layout/Header/navbar/Menu/Settings/{Notifications => SendMeNotifications}/index.tsx (79%)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/FormEmail.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
similarity index 100%
rename from web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/FormEmail.tsx
rename to web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx
similarity index 100%
rename from web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx
rename to web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/HeaderNotifs.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx
similarity index 100%
rename from web/src/layout/Header/navbar/Menu/Settings/Notifications/HeaderNotifs.tsx
rename to web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx
similarity index 79%
rename from web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
rename to web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx
index 34b2d3f91..73d1816cd 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx
@@ -8,7 +8,7 @@ const Container = styled.div`
flex-direction: column;
`;
-const Notifications: React.FC = () => {
+const SendMeNotifications: React.FC = () => {
return (
@@ -17,4 +17,4 @@ const Notifications: React.FC = () => {
);
};
-export default Notifications;
+export default SendMeNotifications;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index a3be8063a..c47062c04 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction, useRef, useState } from "react";
import styled from "styled-components";
import { Tabs } from "@kleros/ui-components-library";
import General from "./General";
-import Notifications from "./Notifications";
+import SendMeNotifications from "./SendMeNotifications";
import { useFocusOutside } from "hooks/useFocusOutside";
const tabsItems = [
@@ -35,7 +35,7 @@ const Settings: React.FC = ({ setIsSettingsOpen }) => {
setCurrentTab(n);
}}
/>
- {currentTab === 0 ? : }
+ {currentTab === 0 ? : }
);
};
From b0b994e8305094b7c41556b8c4e08913907b0b2c Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Wed, 7 Jun 2023 02:02:52 +0100
Subject: [PATCH 08/11] fix: all suggestions from PR
---
.../Header/navbar/Menu/Settings/General.tsx | 4 +-
.../FormNotifs/FormEmail.tsx | 33 +++----
.../SendMeNotifications/FormNotifs/index.tsx | 37 +++++---
.../SendMeNotifications/HeaderNotifs.tsx | 18 ----
.../Settings/SendMeNotifications/index.tsx | 15 +++-
.../Header/navbar/Menu/Settings/index.tsx | 87 +++++++++++--------
web/src/layout/Header/navbar/index.tsx | 3 +
web/src/styles/themes.ts | 2 +
8 files changed, 110 insertions(+), 89 deletions(-)
delete mode 100644 web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx
diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
index ef76db999..76d6cf2ac 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
@@ -56,11 +56,11 @@ const General: React.FC = () => {
- {account ? (
+ {account && (
- ) : null}
+ )}
diff --git a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
index d049e3fa2..ebd3b1806 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
@@ -1,37 +1,21 @@
import React, { Dispatch, SetStateAction, useEffect } from "react";
import styled from "styled-components";
+import { Field } from "@kleros/ui-components-library";
-const StyledInput = styled.input`
+const StyledField = styled(Field)`
display: flex;
width: 100%;
- height: 45px;
margin-top: 34px;
- background-color: transparent;
- color: ${({ theme }) => theme.primaryText};
- border: 1px solid ${({ theme }) => theme.stroke};
- border-radius: 3px;
- outline: none;
- box-shadow: none;
- font-size: 16px;
- padding-left: 16px;
-
- :focus {
- border-color: ${({ theme }) => theme.stroke};
- box-shadow: none;
- }
-
- ::placeholder {
- color: ${({ theme }) => theme.secondaryText};
- }
`;
interface IFormEmail {
emailInput: string;
+ emailIsValid: boolean;
setEmailInput: Dispatch>;
setEmailIsValid: Dispatch>;
}
-const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIsValid }) => {
+const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIsValid, emailIsValid }) => {
useEffect(() => {
setEmailIsValid(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(emailInput));
}, [emailInput]);
@@ -41,7 +25,14 @@ const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIs
setEmailInput(event.target.value);
};
- return ;
+ return (
+
+ );
};
export default FormEmail;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx
index b5575ac36..f0da559bb 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx
@@ -7,8 +7,7 @@ const FormContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
- padding-left: 32px;
- padding-right: 32px;
+ padding: 0 calc(12px + (32 - 12) * ((100vw - 300px) / (1250 - 300)));
padding-bottom: 32px;
`;
@@ -34,23 +33,37 @@ const EmailErrorContainer = styled.div`
padding-left: 16px;
`;
+const OPTIONS = [{ label: "When x." }, { label: "When y." }, { label: "When z." }, { label: "When w." }];
+
const FormNotifs: React.FC = () => {
- const [isWhenX, setIsWhenX] = useState(false);
- const [isWhenY, setIsWhenY] = useState(false);
- const [isWhenZ, setIsWhenZ] = useState(false);
- const [isWhenW, setIsWhenW] = useState(false);
+ const [checkboxStates, setCheckboxStates] = useState(new Array(OPTIONS.length));
const [emailInput, setEmailInput] = useState("");
const [emailIsValid, setEmailIsValid] = useState(false);
+ const handleCheckboxChange = (index: number) => (e: React.ChangeEvent) => {
+ const newCheckboxStates = [...checkboxStates];
+ newCheckboxStates[index] = e.target.checked;
+ setCheckboxStates(newCheckboxStates);
+ };
+
return (
- setIsWhenX(e.target.checked)} checked={isWhenX} small={true} label="When x." />
- setIsWhenY(e.target.checked)} checked={isWhenY} small={true} label="When y." />
- setIsWhenZ(e.target.checked)} checked={isWhenZ} small={true} label="When z." />
- setIsWhenW(e.target.checked)} checked={isWhenW} small={true} label="When w." />
+ {OPTIONS.map(({ label }, index) => (
+
+ ))}
-
- {emailInput !== "" && !emailIsValid && Email is invalid}
+
diff --git a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx
deleted file mode 100644
index fd61d99fc..000000000
--- a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/HeaderNotifs.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const HeaderContainer = styled.div`
- display: flex;
- justify-content: center;
- font-size: 16px;
- font-weight: 600;
- color: ${({ theme }) => theme.primaryText};
- margin-top: 32px;
- margin-bottom: 12px;
-`;
-
-const HeaderNotifs: React.FC = () => {
- return Send Me Notifications;
-};
-
-export default HeaderNotifs;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx
index 73d1816cd..63cf235a8 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/index.tsx
@@ -1,13 +1,26 @@
import React from "react";
import styled from "styled-components";
import FormNotifs from "./FormNotifs";
-import HeaderNotifs from "./HeaderNotifs";
const Container = styled.div`
display: flex;
flex-direction: column;
`;
+const HeaderContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: 600;
+ color: ${({ theme }) => theme.primaryText};
+ margin-top: 32px;
+ margin-bottom: 12px;
+`;
+
+const HeaderNotifs: React.FC = () => {
+ return Send Me Notifications;
+};
+
const SendMeNotifications: React.FC = () => {
return (
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index c47062c04..2de84d606 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -5,7 +5,44 @@ import General from "./General";
import SendMeNotifications from "./SendMeNotifications";
import { useFocusOutside } from "hooks/useFocusOutside";
-const tabsItems = [
+const Container = styled.div`
+ display: flex;
+ position: absolute;
+ z-index: 1;
+ background-color: ${({ theme }) => theme.whiteBackground};
+ flex-direction: column;
+ border: 1px solid ${({ theme }) => theme.stroke};
+ border-radius: 3px;
+ overflow-y: auto;
+ top: 5%;
+ left: 50%;
+ transform: translateX(-50%);
+`;
+
+const StyledSettingsText = styled.div`
+ display: flex;
+ justify-content: center;
+ font-size: 24px;
+ color: ${({ theme }) => theme.primaryText};
+ margin-top: 24px;
+`;
+
+const StyledTabs = styled(Tabs)`
+ padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+ width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300)));
+`;
+
+const Overlay = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: ${({ theme }) => theme.blackLowOpacity};
+ z-index: 0;
+`;
+
+const TABS = [
{
text: "General",
value: 0,
@@ -26,41 +63,21 @@ const Settings: React.FC = ({ setIsSettingsOpen }) => {
useFocusOutside(containerRef, () => setIsSettingsOpen(false));
return (
-
- Settings
- {
- setCurrentTab(n);
- }}
- />
- {currentTab === 0 ? : }
-
+ <>
+
+
+ Settings
+ {
+ setCurrentTab(n);
+ }}
+ />
+ {currentTab === 0 ? : }
+
+
);
};
-const Container = styled.div`
- display: flex;
- position: absolute;
- z-index: 1;
- background-color: ${({ theme }) => theme.whiteBackground};
- flex-direction: column;
- border: 1px solid ${({ theme }) => theme.stroke};
- border-radius: 3px;
-`;
-
-const StyledSettingsText = styled.div`
- display: flex;
- justify-content: center;
- font-size: 24px;
- color: ${({ theme }) => theme.primaryText};
- margin-top: 24px;
-`;
-
-const StyledTabs = styled(Tabs)`
- padding-left: 32px;
- padding-right: 32px;
-`;
-
export default Settings;
diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx
index 942ef3e21..25975a9e8 100644
--- a/web/src/layout/Header/navbar/index.tsx
+++ b/web/src/layout/Header/navbar/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import styled from "styled-components";
+import { useLockBodyScroll } from "react-use";
import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
import LightButton from "components/LightButton";
import Explore from "./Explore";
@@ -33,6 +34,8 @@ const Container = styled.div<{ isOpen: boolean }>`
const NavBar: React.FC = () => {
const { isOpen } = useOpenContext();
+ useLockBodyScroll(isOpen);
+
return (
diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts
index 602b8a1e7..c463aea09 100644
--- a/web/src/styles/themes.ts
+++ b/web/src/styles/themes.ts
@@ -18,6 +18,7 @@ export const lightTheme = {
defaultShadow: "#00000002",
hoveredShadow: "#00000002",
whiteLowOpacity: "#FFFFFF0F",
+ blackLowOpacity: "#00000080",
success: "#00C42B",
successLight: "#F0FBF2",
@@ -52,6 +53,7 @@ export const darkTheme = {
defaultShadow: "#00000000",
hoveredShadow: "#42498f80",
whiteLowOpacity: "#FFFFFF0F",
+ blackLowOpacity: "#00000080",
success: "#65DC7F",
successLight: "#32355B",
From 6654213dc6d66a3612ca2926d72f8754f2fd508f Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Wed, 7 Jun 2023 09:48:37 +0100
Subject: [PATCH 09/11] fix: overlay z-index to 1
---
web/src/layout/Header/navbar/Menu/Settings/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index 2de84d606..60ce1d8fb 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -39,7 +39,7 @@ const Overlay = styled.div`
width: 100vw;
height: 100vh;
background-color: ${({ theme }) => theme.blackLowOpacity};
- z-index: 0;
+ z-index: 1;
`;
const TABS = [
From 654df53514e8c8a1fe8e3bf46b32490d170adb2f Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Wed, 7 Jun 2023 10:02:56 +0100
Subject: [PATCH 10/11] fix: add getfieldvariant usememo
---
.../SendMeNotifications/FormNotifs/FormEmail.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
index ebd3b1806..e3c1e288a 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useMemo } from "react";
import styled from "styled-components";
import { Field } from "@kleros/ui-components-library";
@@ -25,9 +25,16 @@ const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIs
setEmailInput(event.target.value);
};
+ const getFieldVariant = useMemo(() => {
+ if (emailInput === "") {
+ return undefined;
+ }
+ return emailIsValid ? "success" : "error";
+ }, [emailInput, emailIsValid]);
+
return (
Date: Wed, 7 Jun 2023 10:09:06 +0100
Subject: [PATCH 11/11] refactor: better naming of variable
---
.../Settings/SendMeNotifications/FormNotifs/FormEmail.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
index e3c1e288a..645d41332 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx
@@ -25,7 +25,7 @@ const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIs
setEmailInput(event.target.value);
};
- const getFieldVariant = useMemo(() => {
+ const fieldVariant = useMemo(() => {
if (emailInput === "") {
return undefined;
}
@@ -34,7 +34,7 @@ const FormEmail: React.FC = ({ emailInput, setEmailInput, setEmailIs
return (