Refactor VocabCourseListView for improved layout and styling

- Updated the course item structure to enhance visual clarity and organization.
- Introduced new CSS classes for better styling and hover effects on course items.
- Adjusted padding, margins, and gaps for a more cohesive design.
- Improved button styles for enrollment, continuation, and editing actions, enhancing user interaction.

frontend/src/views/social/VocabCourseListView.vue

@@ -44,27 +44,28 @@
         </div>
         <div v-else class="course-list">
           <div v-for="course in courses" :key="course.id" class="course-item">
-            <div class="course-header">
+            <div class="course-content">
-              <h3 @click="openCourse(course.id)" class="course-title">{{ course.title }}</h3>
+              <div class="course-info">
+                <div class="course-title-row">
+                  <span class="course-title">{{ course.title }}</span>
                   <span v-if="course.isOwner" class="badge owner">{{ $t('socialnetwork.vocab.courses.owner') }}</span>
                   <span v-else-if="course.enrolledAt" class="badge enrolled">{{ $t('socialnetwork.vocab.courses.enrolled') }}</span>
-              <span v-if="course.isPublic" class="badge public">{{ $t('socialnetwork.vocab.courses.public') }}</span>
                 </div>
-            <p v-if="course.description" class="course-description">{{ course.description }}</p>
                 <div class="course-meta">
-              <span v-if="course.languageName">{{ $t('socialnetwork.vocab.courses.targetLanguage') }}: {{ course.languageName }}</span>
+                  <span v-if="course.languageName" class="meta-item">{{ course.languageName }}</span>
-              <span v-if="course.nativeLanguageName">{{ $t('socialnetwork.vocab.courses.nativeLanguage') }}: {{ course.nativeLanguageName }}</span>
+                  <span v-if="course.nativeLanguageName" class="meta-item">{{ course.nativeLanguageName }}</span>
-              <span>{{ $t('socialnetwork.vocab.courses.difficulty') }}: {{ course.difficultyLevel }}</span>
+                  <span class="meta-item">{{ $t('socialnetwork.vocab.courses.difficulty') }} {{ course.difficultyLevel }}</span>
-              <span v-if="course.lessons">{{ $t('socialnetwork.vocab.courses.lessons') }}: {{ course.lessons.length }}</span>
+                  <span v-if="course.lessons" class="meta-item">{{ course.lessons.length }} {{ $t('socialnetwork.vocab.courses.lessons') }}</span>
+                </div>
               </div>
               <div class="course-actions">
-              <button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)">
+                <button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)" class="btn-enroll">
                   {{ $t('socialnetwork.vocab.courses.enroll') }}
                 </button>
-              <button v-if="course.enrolledAt" @click="openCourse(course.id)">
+                <button v-if="course.enrolledAt" @click="openCourse(course.id)" class="btn-continue">
                   {{ $t('socialnetwork.vocab.courses.continue') }}
                 </button>
-              <button v-if="course.isOwner" @click="editCourse(course.id)">
+                <button v-if="course.isOwner" @click="editCourse(course.id)" class="btn-edit">
                   {{ $t('socialnetwork.vocab.courses.edit') }}
                 </button>
               </div>
@@ -72,6 +73,7 @@
           </div>
         </div>
       </div>
+    </div>
 
     <!-- Share Code Dialog -->
     <div v-if="showShareCodeDialog" class="dialog-overlay" @click="showShareCodeDialog = false">
@@ -357,36 +359,53 @@ export default {
 .course-list {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 8px;
-  margin-top: 20px;
+  margin-top: 15px;
 }
 
 .course-item {
   background: white;
-  padding: 15px;
   border: 1px solid #ddd;
   border-radius: 4px;
+  transition: box-shadow 0.2s;
 }
 
-.course-header {
+.course-item:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.course-content {
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: space-between;
-  margin-bottom: 10px;
+  padding: 12px 15px;
+  gap: 15px;
+}
+
+.course-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.course-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .course-title {
-  cursor: pointer;
+  font-weight: 600;
+  font-size: 1em;
+  color: #333;
   margin: 0;
-  flex: 1;
-  color: #0066cc;
-  text-decoration: underline;
 }
 
 .badge {
-  padding: 4px 8px;
+  padding: 2px 6px;
   border-radius: 3px;
-  font-size: 0.85em;
+  font-size: 0.75em;
+  white-space: nowrap;
 }
 
 .badge.owner {
@@ -404,23 +423,71 @@ export default {
   color: white;
 }
 
-.course-description {
-  color: #666;
-  margin: 10px 0;
-}
-
 .course-meta {
   display: flex;
-  gap: 15px;
+  gap: 12px;
-  margin: 10px 0;
+  font-size: 0.85em;
-  font-size: 0.9em;
+  color: #666;
-  color: #888;
+  flex-wrap: wrap;
+}
+
+.meta-item {
+  white-space: nowrap;
 }
 
 .course-actions {
   display: flex;
-  gap: 10px;
+  gap: 8px;
-  margin-top: 10px;
+  flex-shrink: 0;
+}
+
+.course-actions button {
+  padding: 6px 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  font-size: 0.9em;
+  white-space: nowrap;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.course-actions button:hover {
+  background: #f5f5f5;
+  border-color: #bbb;
+}
+
+.btn-enroll {
+  background: #4CAF50 !important;
+  color: white !important;
+  border-color: #4CAF50 !important;
+}
+
+.btn-enroll:hover {
+  background: #45a049 !important;
+  border-color: #45a049 !important;
+}
+
+.btn-continue {
+  background: #2196F3 !important;
+  color: white !important;
+  border-color: #2196F3 !important;
+}
+
+.btn-continue:hover {
+  background: #0b7dda !important;
+  border-color: #0b7dda !important;
+}
+
+.btn-edit {
+  background: #FF9800 !important;
+  color: white !important;
+  border-color: #FF9800 !important;
+}
+
+.btn-edit:hover {
+  background: #e68900 !important;
+  border-color: #e68900 !important;
 }
 
 .dialog-overlay {