diff --git a/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx b/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx index 0add6e6..678d30d 100644 --- a/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx +++ b/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx @@ -36,16 +36,16 @@ export const MySurveyList = () => { return(
{surveys.map((survey) => ( -
handleSurveyClick(survey.id)} - role="button" - tabIndex={0} > -
-

{survey.title}

-

{survey.description}

+
+
+

{survey.title}

+

{survey.description}

+
Дата создания: {survey.date}
{ }`}> {survey.status === 'active' ? 'Активен' : 'Завершён'}
-
+ ))}
) diff --git a/SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css b/SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css index e623c4e..d7f500a 100644 --- a/SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css +++ b/SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css @@ -1,34 +1,67 @@ -.main{ +.main { background-color: #F6F6F6; width: 100%; - height: 100vh; - padding: 34px 8%; + min-height: 100vh; + padding: 34px 10%; } -.survey{ +.survey { display: flex; justify-content: space-between; - background-color: #FFFFFF; + background-color: white; width: 79%; border-radius: 14px; padding: 29px 36px 29px 54px; margin-bottom: 23px; + gap: 20px; + border: none; + text-align: left; + font: inherit; + outline: none; } -.completed{ +.textContent { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.status { width: fit-content; height: fit-content; padding: 15px 47px; border-radius: 15px; - background-color: #65B953; color: #FFFFFF; + white-space: nowrap; + margin-left: 20px; } -.active{ - width: fit-content; - height: fit-content; - padding: 15px 47px; - border-radius: 15px; +.completed { background-color: #B0B0B0; - color: #FFFFFF; -} \ No newline at end of file +} + +.active { + background-color: #65B953; +} + +.surveyData { + margin-bottom: 33px; +} + +.title { + font-size: 40px; + font-weight: 600; + word-break: break-word; +} + +.description { + font-size: 24px; + font-weight: 500; + word-break: break-word; +} + +.date { + font-size: 18px; + font-weight: 500; + color: #7D7983; +}