From 56d099934f1fb112cde2b34b41d82d0371cf3d39 Mon Sep 17 00:00:00 2001
From: Oleksandr Zaitsev <olk.zaytsev@gmail.com>
Date: Thu, 8 Feb 2024 00:30:47 +0100
Subject: [PATCH] Replaced short description with keywords

---
 src/components/IdeaPage/index.jsx               |  7 ++++++-
 .../CheckboxesForm/{index.js => index.jsx}      |  0
 src/components/IdeasPage/IdeaCard.jsx           | 17 ++++++++---------
 src/components/IdeasPage/style.css              |  5 -----
 4 files changed, 14 insertions(+), 15 deletions(-)
 rename src/components/IdeasPage/FilterIdeasForm/CheckboxesForm/{index.js => index.jsx} (100%)

diff --git a/src/components/IdeaPage/index.jsx b/src/components/IdeaPage/index.jsx
index d1291de04..c83fecea5 100644
--- a/src/components/IdeaPage/index.jsx
+++ b/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>
diff --git a/src/components/IdeasPage/FilterIdeasForm/CheckboxesForm/index.js b/src/components/IdeasPage/FilterIdeasForm/CheckboxesForm/index.jsx
similarity index 100%
rename from src/components/IdeasPage/FilterIdeasForm/CheckboxesForm/index.js
rename to src/components/IdeasPage/FilterIdeasForm/CheckboxesForm/index.jsx
diff --git a/src/components/IdeasPage/IdeaCard.jsx b/src/components/IdeasPage/IdeaCard.jsx
index 42316c52f..86d54a7bc 100644
--- a/src/components/IdeasPage/IdeaCard.jsx
+++ b/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>
   )
 }
\ No newline at end of file
diff --git a/src/components/IdeasPage/style.css b/src/components/IdeasPage/style.css
index 0ee5f018e..40182f1d4 100644
--- a/src/components/IdeasPage/style.css
+++ b/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;