From 4e47e2eb7f0c1dad7b3ed5b2f4ee9739656c6bfc Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Sat, 27 Apr 2024 20:01:40 +0200
Subject: [PATCH] Bugs en la ayuda

---
 webapp/src/locales/en.json                  |  1 +
 webapp/src/pages/Ayuda/Ayuda.js             | 10 +++++-----
 webapp/src/pages/Ayuda/AyudaEstadisticas.js |  8 ++++----
 webapp/src/pages/Ayuda/AyudaJuego.js        | 12 ++++++------
 webapp/src/pages/Ayuda/AyudaSocial.js       | 10 +++++-----
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 4898dd80..c178eace 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -252,6 +252,7 @@
       "category": "Category",
       "descriptionC": "Description",
       "gameModes": "Help: Game Modes",
+      "details": "Details",
       "gameModesDescription": "In our application, we have 3 game modes to entertain you. In this section, we aim to address all your doubts.",
       "socialHelp": "Help: Social",
       "socialHelpDescription": "We have different ways to interact with other users. If you have any doubts about how to do it, this is your section.",
diff --git a/webapp/src/pages/Ayuda/Ayuda.js b/webapp/src/pages/Ayuda/Ayuda.js
index 6fda74a4..ea242f8c 100644
--- a/webapp/src/pages/Ayuda/Ayuda.js
+++ b/webapp/src/pages/Ayuda/Ayuda.js
@@ -11,10 +11,10 @@ const Ayuda = () => {
     <>
       <Nav />
       <Heading as="h1">{t('pages.help.title')}</Heading>
-      <Heading as="h2" size="md">
+      <Heading maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"} as="h2" size="md">
         {t('pages.help.description')}
       </Heading>
-      <Table className="help-table" id="help-table">
+      <Table maxWidth={{base: "100%", lg:"40%"}} className="help-table" id="help-table">
         <Thead>
           <Tr>
             <Th>{t('pages.help.category')}</Th>
@@ -25,7 +25,7 @@ const Ayuda = () => {
         <Tbody>
           <Tr>
             <Td>{t('pages.help.gameModes')}</Td>
-            <Td>
+            <Td textAlign={"justify"}>
               {t('pages.help.gameModesDescription')}
             </Td>
             <Td>
@@ -34,7 +34,7 @@ const Ayuda = () => {
           </Tr>
           <Tr>
             <Td>{t('pages.help.socialHelp')}</Td>
-            <Td>
+            <Td textAlign={"justify"}>
               {t('pages.help.socialHelpDescription')}
             </Td>
             <Td>
@@ -43,7 +43,7 @@ const Ayuda = () => {
           </Tr>
           <Tr>
             <Td>{t('pages.help.statsHelp')}</Td>
-            <Td>
+            <Td textAlign={"justify"}>
               {t('pages.help.statsHelpDescription')}
             </Td>
             <Td>
diff --git a/webapp/src/pages/Ayuda/AyudaEstadisticas.js b/webapp/src/pages/Ayuda/AyudaEstadisticas.js
index d3aaca40..09282fa6 100644
--- a/webapp/src/pages/Ayuda/AyudaEstadisticas.js
+++ b/webapp/src/pages/Ayuda/AyudaEstadisticas.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Heading} from '@chakra-ui/react';
+import { Heading,Text } from '@chakra-ui/react';
 import Nav from '../../components/Nav/Nav';
 import Footer from '../../components/Footer/Footer';
 
@@ -12,10 +12,10 @@ const AyudaEstadisticas = () => {
     <>
       <Nav />
       <Heading as="h2">{t('pages.helpStats.title')}</Heading>
-      <p>{t('pages.helpStats.description')}
-      </p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpStats.description')}
+      </Text>
       <Heading as="h2">{t('pages.helpStats.title2')}</Heading>
-      <p>{t('pages.helpStats.description2')}</p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpStats.description2')}</Text>
       <Footer />
       </>
   );
diff --git a/webapp/src/pages/Ayuda/AyudaJuego.js b/webapp/src/pages/Ayuda/AyudaJuego.js
index 457f1d4a..656b2616 100644
--- a/webapp/src/pages/Ayuda/AyudaJuego.js
+++ b/webapp/src/pages/Ayuda/AyudaJuego.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Heading} from '@chakra-ui/react';
+import { Heading, Text} from '@chakra-ui/react';
 import Nav from '../../components/Nav/Nav';
 import Footer from '../../components/Footer/Footer';
 const AyudaJuego = () => {
@@ -11,14 +11,14 @@ const AyudaJuego = () => {
     <>
       <Nav />
       <Heading as="h1">{t('pages.helpGame.title')}</Heading>
-      <p>{t('pages.helpGame.description')}
-      </p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpGame.description')}
+      </Text>
       <Heading as="h2" size="md">{t('pages.helpGame.classic')}</Heading>
-      <p>{t('pages.helpGame.classicDescription')}</p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpGame.classicDescription')}</Text>
       <Heading as="h2" size="md">{t('pages.helpGame.sabios')}</Heading>
-      <p>{t('pages.helpGame.sabiosDescription')}</p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpGame.sabiosDescription')}</Text>
       <Heading as="h2" size="md">{t('pages.helpGame.calculator')}</Heading>
-      <p>{t('pages.helpGame.calculatorDescription')}</p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpGame.calculatorDescription')}</Text>
       <Footer />
       </>
   );
diff --git a/webapp/src/pages/Ayuda/AyudaSocial.js b/webapp/src/pages/Ayuda/AyudaSocial.js
index 3d154f61..fbab249a 100644
--- a/webapp/src/pages/Ayuda/AyudaSocial.js
+++ b/webapp/src/pages/Ayuda/AyudaSocial.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Heading} from '@chakra-ui/react';
+import { Heading, Text} from '@chakra-ui/react';
 
 import Nav from '../../components/Nav/Nav';
 import Footer from '../../components/Footer/Footer';
@@ -14,12 +14,12 @@ const AyudaSocial = () => {
     <>
       <Nav />
       <Heading as="h1">{t('pages.helpSocial.title')}</Heading>
-      <p>{t('pages.helpSocial.description')}
-      </p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpSocial.description')}
+      </Text>
       <Heading as="h2" size="md">{t('pages.helpSocial.friends')}</Heading>
-      <p>{t('pages.helpSocial.description2')}</p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpSocial.description2')}</Text>
       <Heading as="h2" size="md">{t('pages.helpSocial.groups')}</Heading>
-      <p>{t('pages.helpSocial.description3')}</p>
+      <Text maxWidth={{base: "100%", lg:"40%"}} textAlign={"justify"}>{t('pages.helpSocial.description3')}</Text>
       <Footer />
       </>
   );