From 30c23dc32e2afecd69cb6d0e20685ebc4f4c09cd Mon Sep 17 00:00:00 2001
From: Kevin Szuchet <kevin.szuchet@decentraland.org>
Date: Wed, 9 Aug 2023 10:18:54 +0200
Subject: [PATCH] fix: Mobile styles

---
 .../ConnectToWorld/ConnectToWorld.module.css  |  27 ++++-
 .../Pages/ConnectToWorld/ConnectToWorld.tsx   | 106 +++++++++---------
 src/utils/worldServers.ts                     |   2 +-
 3 files changed, 83 insertions(+), 52 deletions(-)

diff --git a/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css b/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css
index 3e80c44..55cd286 100644
--- a/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css
+++ b/src/components/Pages/ConnectToWorld/ConnectToWorld.module.css
@@ -1,6 +1,5 @@
 :global(#root) {
   height: 100%;
-  width: 100%;
 }
 
 .ConnectToWorld {
@@ -29,6 +28,10 @@
   letter-spacing: 0px;
 }
 
+.ConnectToWorld .content .form {
+  width: 100%;
+}
+
 .ConnectToWorld .content .description {
   font-size: 15px;
   font-weight: 400;
@@ -53,4 +56,26 @@
   font-weight: 400;
   line-height: 15px;
   letter-spacing: 0px;
+}
+
+.ConnectToWorld .content :global(.select-field.error.warning p.message) {
+  margin-bottom: 15px;
+}
+
+@media (min-width: 769px) {
+  .content :global(.SignIn.center) {
+    min-width: 700px;
+  }
+}
+
+@media (max-width: 768px) {
+  .ConnectToWorld .content :global(.dcl.field), .ConnectToWorld .content :global(.dcl.select-field) {
+    min-width: auto;
+  }
+
+  .ConnectToWorld .content {
+    height: 100%;
+    border-radius: unset;
+    padding: 24px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx b/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx
index 61bb02a..5b8f6ca 100644
--- a/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx
+++ b/src/components/Pages/ConnectToWorld/ConnectToWorld.tsx
@@ -2,7 +2,7 @@ import React, { ChangeEvent, useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { AuthIdentity } from '@dcl/crypto'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { Button, Loader, SelectField, Field, DropdownProps } from 'decentraland-ui'
+import { Button, Loader, SelectField, Field, DropdownProps, Form } from 'decentraland-ui'
 import meetOnDecentralandImg from '../../../assets/images/meet-on-decentraland.png'
 import { locations } from '../../../modules/routing/locations'
 import { signedFetch } from '../../../utils/auth'
@@ -92,25 +92,29 @@ function ConnectToWorld(props: Props) {
     throw Error('An error has occurred')
   }
 
-  const handleClick = useCallback(async () => {
-    setError('')
+  const handleClick = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault()
+      setError('')
 
-    try {
-      if (!identity) return
+      try {
+        if (!identity) return
 
-      const response: { url: string; token: string } = await livekitConnect(
-        identity,
-        'https://worlds-content-server.decentraland.zone',
-        selectedServer
-      )
-      onSubmitConnectForm(response.url, response.token)
-      addServerToPreviouslyLoaded(selectedServer)
-      navigate(`/meet/${encodeURIComponent(response.url)}?token=${encodeURIComponent(response.token)}`)
-    } catch (error) {
-      console.error('ERROR livekit connect', error)
-      if (isErrorMessage(error)) setError(error.message)
-    }
-  }, [identity, selectedServer, onSubmitConnectForm])
+        const response: { url: string; token: string } = await livekitConnect(
+          identity,
+          'https://worlds-content-server.decentraland.zone',
+          selectedServer
+        )
+        onSubmitConnectForm(response.url, response.token)
+        addServerToPreviouslyLoaded(selectedServer)
+        navigate(`/meet/${encodeURIComponent(response.url)}?token=${encodeURIComponent(response.token)}`)
+      } catch (error) {
+        console.error('ERROR livekit connect', error)
+        if (isErrorMessage(error)) setError(error.message)
+      }
+    },
+    [identity, selectedServer, onSubmitConnectForm]
+  )
 
   return (
     <PageLayout>
@@ -127,38 +131,40 @@ function ConnectToWorld(props: Props) {
               alt={t('connect_to_world.image_alt')}
               aria-label={t('connect_to_world.image_alt')}
             />
-            <div className={styles.inputContainer}>
-              <label className={styles.label} htmlFor="server">
-                {t('connect_to_world.input_label')}
-              </label>
-              {availableServers.length > 0 ? (
-                <SelectField
-                  value={selectedServer}
-                  options={availableServers.map(server => ({
-                    value: server,
-                    text: server
-                  }))}
-                  onAddItem={handleSelectChange}
-                  onChange={handleSelectChange}
-                  allowAdditions
-                  error={!!error}
-                  message={error}
-                />
-              ) : (
-                <Field
-                  className={styles.input}
-                  name="server"
-                  value={selectedServer}
-                  onChange={handleChange}
-                  placeholder={t('connect_to_world.input_placeholder')}
-                  error={!!error}
-                  message={error}
-                />
-              )}
-            </div>
-            <Button primary onClick={handleClick} fluid disabled={!selectedServer}>
-              {t('connect_to_world.cta')}
-            </Button>
+            <Form className={styles.form}>
+              <div className={styles.inputContainer}>
+                <label className={styles.label} htmlFor="server">
+                  {t('connect_to_world.input_label')}
+                </label>
+                {availableServers.length > 0 ? (
+                  <SelectField
+                    value={selectedServer}
+                    options={availableServers.map(server => ({
+                      value: server,
+                      text: server
+                    }))}
+                    onAddItem={handleSelectChange}
+                    onChange={handleSelectChange}
+                    allowAdditions
+                    error={!!error}
+                    message={error}
+                  />
+                ) : (
+                  <Field
+                    name="server"
+                    value={selectedServer}
+                    onChange={handleChange}
+                    placeholder={t('connect_to_world.input_placeholder')}
+                    error={!!error}
+                    message={error}
+                    onEnter={handleClick}
+                  />
+                )}
+              </div>
+              <Button primary onClick={handleClick} fluid disabled={!selectedServer} type="submit">
+                {t('connect_to_world.cta')}
+              </Button>
+            </Form>
           </div>
         </div>
       )}
diff --git a/src/utils/worldServers.ts b/src/utils/worldServers.ts
index 82d135c..cfa686f 100644
--- a/src/utils/worldServers.ts
+++ b/src/utils/worldServers.ts
@@ -1,6 +1,6 @@
 const KEY = 'previously-loaded-servers'
 
-export const getPreviouslyLoadedServers = () => localStorage.getItem(KEY)?.split(',') || null
+export const getPreviouslyLoadedServers = () => Array.from(new Set(localStorage.getItem(KEY)?.split(','))) || null
 
 export const addServerToPreviouslyLoaded = (server: string) => {
   const previouslyLoadedServers = getPreviouslyLoadedServers() || []