fix

src/features/admin/courses/components/CoursesFilters.vue

@@ -3,7 +3,7 @@
     <div class="courses-filters__grid">
       <TextField v-model="form.title" name="title" label="عنوان دوره">
         <template #appendIcon>
-          <SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
+          <SvgIcon name="graduation-cap" :size="20" color="var(--color-thd-gray)" />
         </template>
       </TextField>
       <SelectField

src/features/admin/courses/pages/CourseFormPage.vue

@@ -14,16 +14,6 @@
 
     <form class="course-form__form" @submit.prevent="onSubmit">
       <div class="course-form__grid">
-        <div class="course-form__image-col">
-          <ImageCropper
-            v-model="image"
-            name="image"
-            bg-color="#eeeeee"
-            @crop="onImageCropped"
-            @error="onImageError"
-          />
-        </div>
-
         <div class="course-form__main-col">
           <div class="course-form__row">
             <div class="course-form__cell course-form__cell--third">
@@ -100,6 +90,16 @@
             </div>
           </div>
         </div>
+
+        <div class="course-form__image-col">
+          <ImageCropper
+            v-model="image"
+            name="image"
+            bg-color="#eeeeee"
+            @crop="onImageCropped"
+            @error="onImageError"
+          />
+        </div>
       </div>
 
       <div class="course-form__divider" />
@@ -309,29 +309,23 @@ const onCancel = () => router.push({ name: 'admin-courses' })
     gap: 1rem;
 
     @media (min-width: 1024px) {
-      grid-template-columns: 4fr 8fr;
+      grid-template-columns: 8fr 4fr;
     }
 
     @media (min-width: 1280px) {
-      grid-template-columns: 3fr 9fr;
+      grid-template-columns: 9fr 3fr;
     }
   }
 
   &__image-col {
-    order: 2;
-
     @media (min-width: 1024px) {
-      order: 1;
       padding: 0.5rem;
     }
   }
 
   &__main-col {
-    order: 1;
-
     @media (min-width: 1024px) {
-      order: 2;
-      padding-inline-start: 1.25rem;
+      padding-inline-end: 1.25rem;
     }
   }
 

src/features/admin/courses/pages/CoursesListPage.vue

@@ -6,7 +6,7 @@
       desc="در این قسمت می‌توانید دوره‌های خود را مدیریت کنید"
     >
       <template #icon>
-        <SvgIcon name="book" :size="24" color="var(--color-primary)" />
+        <img :src="courseIcon" alt="" />
       </template>
     </BoxedIconTitleBlock>
 
@@ -37,10 +37,10 @@
 </template>
 
 <script setup>
+import { gallery } from '@/utils/gallery'
 import useModal from '@/composables/useModal'
 import { useRoute, useRouter } from 'vue-router'
 import { useQueryClient } from '@tanstack/vue-query'
-import SvgIcon from '@/components/icons/SvgIcon.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import NoItems from '@/components/blocks/NoItems.vue'
 import TabsBlock from '@/components/blocks/TabsBlock.vue'
@@ -64,6 +64,8 @@ const router = useRouter()
 const queryClient = useQueryClient()
 const { openModal, isModal } = useModal()
 
+const courseIcon = gallery.courseIcon
+
 const routeTermId = computed(() => (route.params.termId ? Number(route.params.termId) : null))
 
 const onAdd = () => {