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>

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;

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<HTMLInputElement>) => {
       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 (
     <PageLayout>
       {isLoading ? (
@@ -160,16 +165,21 @@ function ConnectToWorld(props: Props) {
                   />
                 )}
               </div>
-              <Button
-                primary
-                onClick={handleClick}
-                fluid
-                disabled={!selectedServer || isConnectingToServer}
-                type="submit"
-                loading={isConnectingToServer}
-              >
-                {t('connect_to_world.cta')}
-              </Button>
+              <div className={styles.actions}>
+                <Button
+                  primary
+                  onClick={handleClick}
+                  fluid
+                  disabled={!selectedServer || isConnectingToServer}
+                  type="submit"
+                  loading={isConnectingToServer}
+                >
+                  {t('connect_to_world.cta')}
+                </Button>
+                <Button inverted fluid onClick={handleLearnMore}>
+                  {t('global.learn_more')}
+                </Button>
+              </div>
             </Form>
           </div>
         </div>

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;
   }

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 (
     <PageLayout>
-      <div className={styles.content}>
-        <SignIn isConnected={isConnected} handleLoginConnect={onConnect} />
+      <div className={styles.SignIn}>
+        <div className={styles.content}>
+          <SignIn isConnected={isConnected} handleLoginConnect={onConnect} />
+          <Button inverted onClick={handleLearnMore}>
+            {t('global.learn_more')}
+          </Button>
+        </div>
       </div>
     </PageLayout>
   )

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.",

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.",

src/modules/translation/locales/zh.json

@@ -1,4 +1,7 @@
 {
+  "global": {
+    "learn_more": "了解更多"
+  },
   "connect_to_world": {
     "title": "在 Decentraland 上见面",
     "description": "选择您想要连接的世界并开始流式传输。",

src/utils/constants.ts

@@ -0,0 +1 @@
+export const DOCS_URL = 'https://docs.decentraland.org/creator/worlds/cast/'