Replaced short description with keywords

src/components/IdeaPage/index.jsx

@@ -72,6 +72,7 @@ const translationsEN = {
   'mentors': 'Mentors',
   'look': 'Look this project in',
   'skills': 'Skills',
+  'keywords': 'Keywords',
   'required': 'Required skills',
   'preferred': 'Preferred skills',
   'timeSize': 'Project size',
@@ -88,7 +89,7 @@ export default function IdeaPage() {
   let { id } = useParams();
 
   var idea = loadIdea(id);
-  const { title, description, img, goal, url, supervisors, skills, size, difficulty } = idea;
+  const { title, description, img, goal, url, supervisors, keywords, skills, size, difficulty } = idea;
   const t = buildTranslate(translationsEN);
 
   useEffect(() => {
@@ -122,6 +123,10 @@ export default function IdeaPage() {
 
         <table class="idea-table">
           <tbody>
+            <tr>
+              <td>{t('keywords')}</td>
+              <td>{keywords.join(', ')}</td>
+            </tr>
             <tr>
               <td>{t('required')}</td>
               <td>{skills?.required.join(', ')}</td>

src/components/IdeasPage/IdeaCard.jsx

@@ -1,12 +1,9 @@
-import React from "react"
-import * as URLS from '../../constants/urls'
-import logo from '../../img/logo-big.png'
+import React from 'react';
+import Typography from '@mui/material/Typography';
 
-const shorten = (text, maxlength) => {
-  if (text.length <= maxlength) return text;
+import * as URLS from '../../constants/urls';
+import logo from '../../img/logo-big.png';
 
-  return text.slice(0,maxlength) + " (...)";
-}
 
 export default function IdeaCard({idea}) {
 
@@ -20,9 +17,11 @@ export default function IdeaCard({idea}) {
             className="projectLogo"
           />
         </div>
-        <div className="projectName">{idea['title']}</div>
+        <Typography variant="h6">{idea['title']}</Typography>
       </div>
-      <p className="projectDescription">{shorten(idea['description'], 100)}</p>
+      <Typography variant="body1" className="projectDescription" gutterBottom>
+        <b>Keywords:</b> {idea?.keywords.join(', ')}
+      </Typography>
     </a>
   )
 }

src/components/IdeasPage/style.css

@@ -74,11 +74,6 @@ article {
   display: flex;
   flex-direction: column;
 }
-.projectName {
-  color: var(--color-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-}
 .projectLogo img {
   aspect-ratio: 16 / 9;
   object-fit: cover;