From 4543d9933b5361aa0d0f17249d07939ba760670a Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 2 Nov 2023 04:30:30 +0100 Subject: [PATCH] feat(web): add onboarding mini guides, link it to help component, abstract better, style better --- .../mini-guides/onboarding/how-it-works.svg | 29 +++++ .../mini-guides/onboarding/what-do-i-need.svg | 81 +++++++++++++ web/src/assets/svgs/styled/pnk.svg | 6 +- web/src/components/Popup/MiniGuides/Level.tsx | 20 ++-- .../MiniGuides/Onboarding/HowItWorks.tsx | 8 ++ .../MiniGuides/Onboarding/PnkLogoAndTitle.tsx | 38 ++++++ .../MiniGuides/Onboarding/WhatDoINeed.tsx | 8 ++ .../Popup/MiniGuides/Onboarding/index.tsx | 108 ++++++++++++++++++ .../components/Popup/MiniGuides/Template.tsx | 88 ++++++++++---- web/src/layout/Header/navbar/Menu/Help.tsx | 33 ++++-- 10 files changed, 372 insertions(+), 47 deletions(-) create mode 100644 web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg create mode 100644 web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/index.tsx diff --git a/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg b/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg new file mode 100644 index 000000000..35c532780 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg new file mode 100644 index 000000000..c7c9ab45c --- /dev/null +++ b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/styled/pnk.svg b/web/src/assets/svgs/styled/pnk.svg index 56a546d4c..ec2cf0ae6 100644 --- a/web/src/assets/svgs/styled/pnk.svg +++ b/web/src/assets/svgs/styled/pnk.svg @@ -1,7 +1,7 @@ - - + + - + diff --git a/web/src/components/Popup/MiniGuides/Level.tsx b/web/src/components/Popup/MiniGuides/Level.tsx index 5e9c94ad4..6b51d37cf 100644 --- a/web/src/components/Popup/MiniGuides/Level.tsx +++ b/web/src/components/Popup/MiniGuides/Level.tsx @@ -72,30 +72,33 @@ const userLevelData = [ totalCoherent: 3, totalResolvedDisputes: 10, firstParagraph: - "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated with less than 50% of coherent votes.", + "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" + + " with less than 50% of coherent votes.", }, ]; const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const userData = userLevelData[currentPage - 1]; return ( - Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title} + Juror Level {userData.level}: {userData.title} - - + + {userData.secondParagraph ? : null} ); }; const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const userData = userLevelData[currentPage - 1]; return ( - + @@ -117,6 +120,7 @@ const Level: React.FC = ({ toggleIsLevelMiniGuidesOpen }) => { currentPage={currentPage} setCurrentPage={setCurrentPage} numPages={userLevelData.length} + isOnboarding={false} /> ); }; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx new file mode 100644 index 000000000..d2ff803f1 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import HowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg"; + +const HowItWorks: React.FC = () => { + return ; +}; + +export default HowItWorks; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx new file mode 100644 index 000000000..6c9f40c71 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import styled from "styled-components"; +import PnkIcon from "tsx:assets/svgs/styled/pnk.svg"; + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 32px; + align-items: center; +`; + +const StyledPnkIcon = styled(PnkIcon)` + width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); +`; + +const StyledCourtLabel = styled.label` + font-size: 24px; + background: linear-gradient( + 90deg, + ${({ theme }) => theme.secondaryPurple} 0%, + ${({ theme }) => theme.primaryBlue} 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +`; + +const PnkLogoAndTitle: React.FC = () => { + return ( + + + Court v.2 + + ); +}; +export default PnkLogoAndTitle; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx new file mode 100644 index 000000000..0c53cfccb --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import WhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg"; + +const WhatDoINeed: React.FC = () => { + return ; +}; + +export default WhatDoINeed; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx new file mode 100644 index 000000000..d262b6f68 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx @@ -0,0 +1,108 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import Template from "../Template"; +import HowItWorks from "./HowItWorks"; +import PnkLogoAndTitle from "./PnkLogoAndTitle"; +import WhatDoINeed from "./WhatDoINeed"; + +const Title = styled.h1` + margin-bottom: 18px; +`; + +const StyledLabel = styled.label` + color: ${({ theme }) => theme.primaryBlue}; + margin: 0; + cursor: pointer; +`; + +const ParagraphsContainer = styled.div` + display: flex; + gap: 18px; + flex-direction: column; +`; + +const LinksContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const LeftContentContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const leftPageContents = [ + { + title: "Welcome to Kleros Court", + paragraphs: ["The decentralized arbitration service for the disputes of the new economy.", "Learn what’s new"], + links: [], + }, + { + title: "What do I need to start?", + paragraphs: [ + "Do you want to be a juror? If yes, you will need PNK tokens for staking on courts, and ETH for gas fees.", + "I don't want to be a juror. Can I still participate in the Court? Yes, sure. Users can also participate as" + + " contributors by helping fund appeal fees in exchange for rewards, or by submitting evidence." + + " In this case, you will need ETH.", + "I have a case that needs resolution? What do I do? It's simple. Send your case to Kleros and receive" + + " the resolution. You will need a few minutes to fill up the details of your case, and ETH to pay for" + + " Arbitration fees (It's used to pay jurors for their work).", + ], + links: [], + }, + { + title: "Access the Mini Guides", + paragraphs: [], + links: ["1. Staking", "2. Binary Voting", "3. Ranked Voting", "4. Appeal", "5. Juror Levels"], + }, +]; + +const rightPageComponents = [() => , () => , () => ]; + +const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const { title, paragraphs, links } = leftPageContents[currentPage - 1]; + + return ( + + {title} + + {paragraphs.map((paragraph, index) => ( + + ))} + + + {links.map((link, index) => ( + {link} + ))} + + + ); +}; + +const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const RightPageComponent = rightPageComponents[currentPage - 1]; + + return ; +}; + +interface IOnboarding { + toggleIsOnboardingMiniGuidesOpen: () => void; +} + +const Onboarding: React.FC = ({ toggleIsOnboardingMiniGuidesOpen }) => { + const [currentPage, setCurrentPage] = useState(1); + + return ( + } + RightContent={} + onClose={toggleIsOnboardingMiniGuidesOpen} + currentPage={currentPage} + setCurrentPage={setCurrentPage} + numPages={leftPageContents.length} + isOnboarding={true} + /> + ); +}; + +export default Onboarding; diff --git a/web/src/components/Popup/MiniGuides/Template.tsx b/web/src/components/Popup/MiniGuides/Template.tsx index c9a454175..9531c7d43 100644 --- a/web/src/components/Popup/MiniGuides/Template.tsx +++ b/web/src/components/Popup/MiniGuides/Template.tsx @@ -15,7 +15,7 @@ const Container = styled.div` width: 82vw; flex-direction: column; - top: 50%; + top: 45%; left: 50%; transform: translate(-50%, -50%); max-height: 80vh; @@ -24,6 +24,7 @@ const Container = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; + top: 50%; width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875); flex-direction: row; height: 500px; @@ -35,8 +36,8 @@ const LeftContainer = styled.div` display: grid; grid-template-rows: auto 1fr auto; width: 82vw; - min-height: 356px; padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding-bottom: 44px; background-color: ${({ theme }) => theme.whiteBackground}; border-top-left-radius: 3px; border-bottom-left-radius: 3px; @@ -46,11 +47,17 @@ const LeftContainer = styled.div` overflow-y: hidden; width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875); height: 500px; - min-height: auto; + padding-bottom: 32px; ` )} `; +const LeftContainerHeader = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; + const HowItWorks = styled.div` display: flex; align-items: center; @@ -62,29 +69,49 @@ const HowItWorks = styled.div` } `; -const StyledCompactPagination = styled(CompactPagination)` +const MobileCompactPagination = styled(CompactPagination)` + display: flex; + align-items: flex-start; + + ${landscapeStyle( + () => css` + display: none; + ` + )} +`; + +const DesktopCompactPagination = styled(CompactPagination)` + display: none; align-self: end; justify-self: end; + + ${landscapeStyle( + () => css` + display: flex; + ` + )} `; const Close = styled.label` - position: absolute; - top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - right: 17px; - display: flex; - align-items: flex-end; - justify-content: flex-end; - cursor: pointer; - - &:hover { - text-decoration: underline; - } - - color: ${({ theme }) => theme.primaryBlue}; + display: none; ${landscapeStyle( () => css` + display: flex; + position: absolute; + top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + right: 17px; + display: flex; + align-items: flex-end; + justify-content: flex-end; + cursor: pointer; z-index: 11; + + &:hover { + text-decoration: underline; + } + + color: ${({ theme }) => theme.primaryBlue}; ` )} `; @@ -100,7 +127,6 @@ const RightContainer = styled.div` background-color: ${({ theme }) => theme.mediumBlue}; border-top-right-radius: 3px; border-bottom-right-radius: 3px; - height: 800px; ${landscapeStyle( () => css` @@ -118,6 +144,7 @@ interface ITemplate { currentPage: number; setCurrentPage: Dispatch>; numPages: number; + isOnboarding: boolean; } const Template: React.FC = ({ @@ -127,6 +154,7 @@ const Template: React.FC = ({ currentPage, setCurrentPage, numPages, + isOnboarding, }) => { const containerRef = useRef(null); useFocusOutside(containerRef, () => { @@ -137,20 +165,30 @@ const Template: React.FC = ({ - - - - - Close + + + + + + + {LeftContent} - - {RightContent} + + Close + {RightContent} + ); diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index cbc9891cc..acddff22b 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -1,6 +1,7 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { useToggle } from "react-use"; import { useFocusOutside } from "hooks/useFocusOutside"; import Book from "svgs/icons/book-open.svg"; import Guide from "svgs/icons/book.svg"; @@ -10,6 +11,7 @@ import Faq from "svgs/menu-icons/help.svg"; import Telegram from "svgs/socialmedia/telegram.svg"; import { IHelp } from ".."; import Debug from "../Debug"; +import Onboarding from "components/Popup/MiniGuides/Onboarding"; const Container = styled.div` display: flex; @@ -70,7 +72,6 @@ const ITEMS = [ { text: "Onboarding", Icon: Book, - url: "", }, { text: "Get Help", @@ -100,21 +101,31 @@ const ITEMS = [ ]; const Help: React.FC = ({ toggleIsHelpOpen }) => { + const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); + const containerRef = useRef(null); useFocusOutside(containerRef, () => { - toggleIsHelpOpen(); + if (!isOnboardingMiniGuidesOpen) toggleIsHelpOpen(); }); return ( - - {ITEMS.map((item) => ( - - - {item.text} - - ))} - - + <> + + {ITEMS.map((item, index) => ( + toggleIsOnboardingMiniGuidesOpen() : undefined} + > + + {item.text} + + ))} + + + {isOnboardingMiniGuidesOpen && } + ); }; export default Help;