feat: improve pages layout (#55)

nearform · May 22, 2024 · d066b48 · d066b48
1 parent ef7eed6
commit d066b48
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 30 deletions.
diff --git a/src/components/PageSetup.tsx b/src/components/PageSetup.tsx
@@ -1,4 +1,3 @@
-import { Box, Divider, Typography } from '@mui/material'
 import ReactHtmlParser from 'html-react-parser'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,39 +12,46 @@ interface PageSetupProps {
 const PageSetup: React.FC<PageSetupProps> = ({
   title,
   description,
-  information
+  information,
 }) => {
   const { t } = useTranslation()
 
   return (
     <>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        }}
-      >
-        <Typography variant='h4' component='h1' gutterBottom>
-          {title}
-        </Typography>
-        <Link to='/' data-testid={t('navigation.back').toLowerCase()}>
-          {t('navigation.back_to_main_page')}
+      <div className='flex justify-between items-center'>
+        <h1 className='text-2xl mb-4'>{title}</h1>
+        <Link
+          to='/'
+          data-testid={t('navigation.back').toLowerCase()}
+          className='text-foreground-muted text-sm'
+        >
+          &lt; {t('navigation.back_to_main_page')}
         </Link>
-      </Box>
-      <Box>
-        <Typography variant='h6'>{t('scenarios.description')}</Typography>
-        <Typography gutterBottom>{ReactHtmlParser(t(description))}</Typography>
-      </Box>
+      </div>
+      <div>
+        <h6 className='text-l'>{t('scenarios.description')}</h6>
+        <p className='mb-4 text-sm text-foreground-muted'>
+          {ReactHtmlParser(t(description))}
+        </p>
+      </div>
       {information != null && (
-        <Box>
-          <Typography variant='h6'>{t('scenarios.information')}</Typography>
-          <Typography gutterBottom>
+        <div>
+          <h6 className='text-l'>{t('scenarios.information')}</h6>
+          <p className='mb-4 text-foreground-muted'>
             {ReactHtmlParser(t(information))}
-          </Typography>
-        </Box>
+          </p>
+        </div>
       )}
-      <Divider sx={{ mt: 4, mb: 4 }} />
+      <div className='relative py-4 mb-8'>
+        <div className='absolute inset-0 flex items-center'>
+          <div className='w-full border-b border-gray-300'></div>
+        </div>
+        <div className='relative flex justify-center'>
+          <span className='bg-grey-100 px-4 text-sm text-foreground-muted'>
+            {t('common.playground')}
+          </span>
+        </div>
+      </div>
     </>
   )
 }

diff --git a/src/components/ScenarioBox.tsx b/src/components/ScenarioBox.tsx
@@ -20,8 +20,8 @@ const ScenarioBox: React.FC<ScenarioBoxProps> = ({
         className={`mt-6 rounded-2xl p-6 min-h-48 ${
           Number(rating) >= 2
             ? Number(rating) >= 3
-              ? 'bg-yellow-100 hover:bg-yellow-400'
-              : 'bg-red-100  hover:bg-red-400'
+              ? 'bg-red-100 hover:bg-red-400'
+              : 'bg-yellow-100  hover:bg-yellow-400'
             : 'bg-green-100  hover:bg-green-400'
         }`}
       >

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -11,7 +11,8 @@
     "all": "All",
     "easy": "Easy",
     "medium": "Medium",
-    "hard": "Hard"
+    "hard": "Hard",
+    "playground": "Playground"
   },
   "navigation": {
     "back": "Back",

diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -12,7 +12,8 @@
     "all": "Tous",
     "easy": "Facile",
     "medium": "Moyen",
-    "hard": "Difficile"
+    "hard": "Difficile",
+    "playground": "Cour de récréation"
   },
   "navigation": {
     "back": "Retour",

diff --git a/src/i18n/locales/pt-br.json b/src/i18n/locales/pt-br.json
@@ -12,7 +12,8 @@
     "all": "Todos",
     "easy": "Fácil",
     "medium": "Médio",
-    "hard": "Difícil"
+    "hard": "Difícil",
+    "playground": "Recreio"
   },
   "navigation": {
     "back": "Voltar",