feat: add colour to dropdown (#53)

nearform · May 22, 2024 · ea3c52c · ea3c52c
1 parent 986762b
commit ea3c52c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 83 deletions.
diff --git a/src/components/ScenarioBox.tsx b/src/components/ScenarioBox.tsx
@@ -1,8 +1,4 @@
-import { Circle } from '@mui/icons-material'
-import { Box, Rating, Tooltip, Typography } from '@mui/material'
-import { red, orange, green } from '@mui/material/colors'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 
 interface ScenarioBoxProps {
@@ -18,85 +14,22 @@ const ScenarioBox: React.FC<ScenarioBoxProps> = ({
   link,
   rating,
 }) => {
-  const { t } = useTranslation()
-
   return (
-    <Link to={`/${link}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-      <Box
-        sx={{
-          border: 1,
-          borderColor: 'primary.main',
-          borderRadius: 2,
-          padding: 2,
-          textAlign: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          minHeight: '240px',
-        }}
-        data-testid={`${link}-input`}
+    <Link to={`/${link}`}>
+      <div
+        className={`mt-6 rounded-2xl p-6 min-h-48 ${
+          Number(rating) >= 2
+            ? Number(rating) >= 3
+              ? 'bg-yellow-100'
+              : 'bg-red-100'
+            : 'bg-green-100'
+        }`}
       >
-        <Box
-          sx={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            flex: '0 0 auto',
-          }}
-        >
-          <Typography variant='h6' gutterBottom>
-            {title}
-          </Typography>
-        </Box>
-        <Box sx={{ flex: '0 0 auto' }}>
-          <Typography variant='body2' paragraph>
-            {t('common.difficulty')}:
-          </Typography>
-          <Rating
-            name='read-only'
-            value={Number(rating)}
-            icon={<Circle fontSize='small' />}
-            emptyIcon={<Circle fontSize='small' />}
-            max={3}
-            readOnly
-            sx={{
-              color:
-                Number(rating) >= 2
-                  ? Number(rating) >= 3
-                    ? red[300]
-                    : orange[300]
-                  : green[300],
-            }}
-          />
-        </Box>
-        <Box
-          sx={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            flex: '1 0 auto',
-            display: 'flex',
-            justifyContent: 'flex-end',
-            alignItems: 'flex-end',
-          }}
-        >
-          <Tooltip title={description} arrow>
-            <Typography
-              variant='body2'
-              paragraph
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-              }}
-            >
-              {description}
-            </Typography>
-          </Tooltip>
-        </Box>
-      </Box>
+        <div className='font-semibold'>{title}</div>
+        <div className='text-foreground-muted text-sm text-primary-900'>
+          {description}
+        </div>
+      </div>
     </Link>
   )
 }

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -88,12 +88,15 @@ export default function Index(): JSX.Element {
               </SelectItem>
               <SelectItem value='1' data-testid='select-difficulty-easy'>
                 {t('common.easy')}
+                <div className='mt-1.5 ml-2 w-2 h-2 bg-green-200 rounded-full float-right'></div>
               </SelectItem>
               <SelectItem value='2' data-testid='select-difficulty-medium'>
                 {t('common.medium')}
+                <div className='mt-1.5 ml-2 w-2 h-2 bg-yellow-200 rounded-full float-right'></div>
               </SelectItem>
               <SelectItem value='3' data-testid='select-difficulty-hard'>
                 {t('common.hard')}
+                <div className='mt-1.5 ml-2 w-2 h-2 bg-red-200 rounded-full float-right'></div>
               </SelectItem>
             </SelectContent>
           </Select>

diff --git a/src/tests/ScenarioBox.test.tsx b/src/tests/ScenarioBox.test.tsx
@@ -14,12 +14,11 @@ describe('ScenarioBox component', async () => {
       description:
         'This is a test scenario description that is really long and should be restricted to 50 characters.',
       link: 'test-scenario',
-      rating: 3
+      rating: '3',
     }
     TestRenderer(<ScenarioBox {...scenarioData} />)
 
     expect(screen.getByText(scenarioData.title)).toBeInTheDocument()
-    expect(screen.getByText('Difficulty:')).toBeInTheDocument()
 
     const truncatedDescription = scenarioData.description