changes in my survey styles

SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx

@@ -36,16 +36,16 @@ export const MySurveyList = () => {
     return(
         <div className={styles.main}>
             {surveys.map((survey) => (
-                <div
+                <button
                     key={survey.id}
                     className={styles.survey}
                     onClick={() => handleSurveyClick(survey.id)}
-                    role="button"
-                    tabIndex={0}
                 >
-                    <div>
+                    <div className={styles.textContent}>
-                        <h1 className={styles.title}>{survey.title}</h1>
+                        <div className={styles.surveyData}>
-                        <h2 className={styles.description}>{survey.description}</h2>
+                            <h1 className={styles.title}>{survey.title}</h1>
+                            <h2 className={styles.description}>{survey.description}</h2>
+                        </div>
                         <span className={styles.date}>Дата создания: {survey.date}</span>
                     </div>
                     <div className={`${styles.status} ${
@@ -53,7 +53,7 @@ export const MySurveyList = () => {
                     }`}>
                         {survey.status === 'active' ? 'Активен' : 'Завершён'}
                     </div>
-                </div>
+                </button>
             ))}
         </div>
     )

SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css

@@ -1,34 +1,67 @@
-.main{
+.main {
     background-color: #F6F6F6;
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
-    padding: 34px 8%;
+    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{
+.completed {
-    width: fit-content;
-    height: fit-content;
-    padding: 15px 47px;
-    border-radius: 15px;
     background-color: #B0B0B0;
-    color: #FFFFFF;
+}
+
+.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;
 }