From 89ebf35e6b71d5b5d577f01b9a4eb6882d19eca7 Mon Sep 17 00:00:00 2001 From: Kevin Szuchet <31735779+kevinszuchet@users.noreply.github.com> Date: Fri, 18 Aug 2023 15:55:42 +0200 Subject: [PATCH] feat: Add Learn More button (#6) * feat: Add Learn More button * chore: Add link to docs * Update src/components/Pages/SignInPage/SignInPage.tsx Signed-off-by: Kevin Szuchet <31735779+kevinszuchet@users.noreply.github.com> --------- Signed-off-by: Kevin Szuchet <31735779+kevinszuchet@users.noreply.github.com> --- .../ConnectToWorld/ConnectToWorld.module.css | 8 +++ .../Pages/ConnectToWorld/ConnectToWorld.tsx | 56 +++++++++++-------- .../Pages/SignInPage/SignInPage.module.css | 33 ++++++++--- .../Pages/SignInPage/SignInPage.tsx | 18 +++++- src/modules/translation/locales/en.json | 3 + src/modules/translation/locales/es.json | 3 + src/modules/translation/locales/zh.json | 3 + src/utils/constants.ts | 1 + 8 files changed, 92 insertions(+), 33 deletions(-) create mode 100644 src/utils/constants.ts diff --git a/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css b/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css index 55cd286..6f6f7ba 100644 --- a/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css +++ b/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css @@ -62,6 +62,14 @@ margin-bottom: 15px; } +.ConnectToWorld .content .actions { + display: flex; + flex-direction: column; + row-gap: 16px; + align-items: center; + justify-content: center; +} + @media (min-width: 769px) { .content :global(.SignIn.center) { min-width: 700px; diff --git a/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx b/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx index bc392a9..463f944 100644 --- a/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx +++ b/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx @@ -6,6 +6,7 @@ import { Button, Loader, SelectField, Field, DropdownProps, Form } from 'decentr import meetOnDecentralandImg from '../../../assets/images/meet-on-decentraland.png' import { locations } from '../../../modules/routing/locations' import { signedFetch } from '../../../utils/auth' +import { DOCS_URL } from '../../../utils/constants' import { isErrorMessage } from '../../../utils/errors' import { flatFetch } from '../../../utils/flat-fetch' import { addServerToPreviouslyLoaded } from '../../../utils/worldServers' @@ -23,19 +24,6 @@ function ConnectToWorld(props: Props) { const navigate = useNavigate() - useEffect(() => { - if (!loggedInAddress && !isLoading) { - navigate(locations.signIn(locations.root(worldsContentServerUrl))) - } - }, [isLoading, loggedInAddress]) - - useEffect(() => { - if (previouslyLoadedServers) { - setAvailableServers(previouslyLoadedServers) - setSelectedServer(previouslyLoadedServers[0]) - } - }, [previouslyLoadedServers, setAvailableServers]) - const handleChange = useCallback( (e: ChangeEvent) => { setError('') @@ -115,6 +103,23 @@ function ConnectToWorld(props: Props) { [identity, selectedServer, onSubmitConnectForm] ) + const handleLearnMore = useCallback(() => { + window.open(DOCS_URL, '_blank', 'noopener noreferrer') + }, []) + + useEffect(() => { + if (!loggedInAddress && !isLoading) { + navigate(locations.signIn(locations.root(worldsContentServerUrl))) + } + }, [isLoading, loggedInAddress]) + + useEffect(() => { + if (previouslyLoadedServers) { + setAvailableServers(previouslyLoadedServers) + setSelectedServer(previouslyLoadedServers[0]) + } + }, [previouslyLoadedServers, setAvailableServers]) + return ( {isLoading ? ( @@ -160,16 +165,21 @@ function ConnectToWorld(props: Props) { /> )} - +
+ + +
diff --git a/src/components/Pages/SignInPage/SignInPage.module.css b/src/components/Pages/SignInPage/SignInPage.module.css index a269a75..9ac5ad5 100644 --- a/src/components/Pages/SignInPage/SignInPage.module.css +++ b/src/components/Pages/SignInPage/SignInPage.module.css @@ -1,4 +1,4 @@ -.content { +.SignIn { display: flex; flex-direction: column; align-items: center; @@ -6,21 +6,40 @@ height: 100%; } -.content :global(.SignIn.center) { - background: var(--background); - padding: 24px 11px 14px 11px; - border-radius: 10px; +.SignIn .content :global(.SignIn.center) { position: unset; } +.SignIn .content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: var(--background); + padding: 24px 11px 48px 11px; + border-radius: 10px; +} + +.SignIn .content :global(.SignIn .error) { + margin-top: 0px; +} + +.SignIn .content :global(.SignIn .error.visible) { + margin-top: 20px; +} + +.SignIn .content :global(.SignIn .ui.button) { + min-width: 151px; +} + @media (min-width: 769px) { - .content :global(.SignIn.center) { + .SignIn .content { min-width: 700px; } } @media (max-width: 768px) { - .content :global(.SignIn.center) { + .SignIn .content { height: 100%; border-radius: unset; } diff --git a/src/components/Pages/SignInPage/SignInPage.tsx b/src/components/Pages/SignInPage/SignInPage.tsx index 95573b0..0c70da3 100644 --- a/src/components/Pages/SignInPage/SignInPage.tsx +++ b/src/components/Pages/SignInPage/SignInPage.tsx @@ -1,6 +1,9 @@ -import React, { useEffect } from 'react' +import React, { useCallback, useEffect } from 'react' import { useSearchParams, useNavigate } from 'react-router-dom' import { default as SignIn } from 'decentraland-dapps/dist/containers/SignInPage' +import { t } from 'decentraland-dapps/dist/modules/translation/utils' +import { Button } from 'decentraland-ui' +import { DOCS_URL } from '../../../utils/constants' import { PageLayout } from '../../PageLayout' import { Props } from './SignInPage.types' import styles from './SignInPage.module.css' @@ -12,6 +15,10 @@ const SignInPage = (props: Props) => { const redirectTo = searchParams.get('redirectTo') const navigate = useNavigate() + const handleLearnMore = useCallback(() => { + window.open(DOCS_URL, '_blank', 'noopener noreferrer') + }, []) + useEffect(() => { if (redirectTo && isConnected) { navigate(decodeURIComponent(redirectTo)) @@ -20,8 +27,13 @@ const SignInPage = (props: Props) => { return ( -
- +
+
+ + +
) diff --git a/src/modules/translation/locales/en.json b/src/modules/translation/locales/en.json index 8966b75..1da35ab 100644 --- a/src/modules/translation/locales/en.json +++ b/src/modules/translation/locales/en.json @@ -1,4 +1,7 @@ { + "global": { + "learn_more": "Learn more" + }, "connect_to_world": { "title": "Meet on Decentraland", "description": "Choose the world you want to connect to and start streaming.", diff --git a/src/modules/translation/locales/es.json b/src/modules/translation/locales/es.json index 592d967..ef942a0 100644 --- a/src/modules/translation/locales/es.json +++ b/src/modules/translation/locales/es.json @@ -1,4 +1,7 @@ { + "global": { + "learn_more": "Aprende más" + }, "connect_to_world": { "title": "Reunirse en Decentraland", "description": "Elija el mundo al que desea conectarse y comience a transmitir.", diff --git a/src/modules/translation/locales/zh.json b/src/modules/translation/locales/zh.json index 4ce9a88..61217ff 100644 --- a/src/modules/translation/locales/zh.json +++ b/src/modules/translation/locales/zh.json @@ -1,4 +1,7 @@ { + "global": { + "learn_more": "了解更多" + }, "connect_to_world": { "title": "在 Decentraland 上见面", "description": "选择您想要连接的世界并开始流式传输。", diff --git a/src/utils/constants.ts b/src/utils/constants.ts new file mode 100644 index 0000000..25e1fa4 --- /dev/null +++ b/src/utils/constants.ts @@ -0,0 +1 @@ +export const DOCS_URL = 'https://docs.decentraland.org/creator/worlds/cast/'