added basic front-end look

Author: plumshum

src/assets/images/savedIconBig.svg

@@ -56,6 +56,7 @@
     </div>
     <course-menu
       v-if="menuOpen"
+      :courseObj="courseObj"
       :semesterIndex="semesterIndex"
       :isCompact="compact"
       :courseColor="courseObj.color"
@@ -292,8 +293,7 @@ export default defineComponent({
     display: flex;
     align-items: center;
   }
-
-  &-credits {
+  port &-credits {
     white-space: nowrap;
   }
 

src/components/Course/Course.vue

@@ -10,12 +10,7 @@
           />
           <span class="courseMenu-text">Save</span>
         </div>
-        <!-- TODO: access the name of the course-->
-        <save-course-modal
-          v-if="saveCourseModalVisible"
-          :course-name="courseName"
-          @close-save-course-modal="toggleDisplaySaveCourseModal"
-        />
+        <save-course-modal v-if="saveCourseModalVisible" :course-name="courseName" />
       </div>
       <div
         class="courseMenu-section"
@@ -125,7 +120,12 @@ import { coursesColorSet } from '@/assets/constants/colors';
 import SaveCourseModal from '@/components/Modals/SaveCourseModal.vue';
 
 export default defineComponent({
+  components: {
+    SaveCourseModal,
+  },
+
   props: {
+    courseObj: { type: Object as PropType<FirestoreSemesterCourse>, required: true },
     getCreditRange: {
       type: (Array as PropType<readonly number[]>) as PropType<readonly [number, number]>,
       required: true,
@@ -149,7 +149,7 @@ export default defineComponent({
       zIndexColors: 1,
       zIndexEditCredits: 1,
       saveCourseModalVisible: false,
-      courseName: 'todo',
+      courseName: this.courseObj.code,
     };
   },
   computed: {
@@ -176,7 +176,6 @@ export default defineComponent({
     'delete-course': () => true,
     'open-edit-color-modal': (color: string) => typeof color === 'string',
     'edit-course-credit': (credit: number) => typeof credit === 'number',
-    'open-save-course-modal': (courseName: string) => typeof courseName === 'string',
   },
   methods: {
     toggleDisplaySaveCourseModal() {
@@ -252,12 +251,6 @@ export default defineComponent({
       }
       return creditArray;
     },
-    openSaveCourseModal() {
-      this.$emit('open-save-course-modal', 'todo');
-    },
-  },
-  components: {
-    SaveCourseModal,
   },
 });
 </script>

src/components/Modals/CourseMenu.vue

@@ -1,22 +1,31 @@
 <template>
   <teleport-modal
-    :title="`${courseName} Saved`"
     content-class="content-plan"
     right-button-text="Save"
     @model-closed="closeCurrentModal"
     @right-button-clicked="saveCourse"
+    :has-custom-position="true"
   >
-    <div>
-      <hr />
-      <span> Collection </span>
-      <div @click="addNewCollection">
-        <img src="src\assets\images\plus.svg" alt="add new collection" />
+    <template #title>
+      <div class="saveCourseModal-title">
+        <img src="src\assets\images\savedIconBig.svg" alt="big saved icon" />
+        <h1>{{ courseName }} Saved</h1>
       </div>
-      <hr />
+    </template>
+    <div class="saveCourseModal-header">
+      <div class="saveCourseModal-header-line"><hr /></div>
+      <div class="saveCourseModal-header-content">
+        <span>Collections</span>
+        <button class="saveCourseModal-header-addButton" @click="addNewCollection">
+          <img src="src\assets\images\plus.svg" alt="add new collection" />
+        </button>
+      </div>
+      <div class="saveCoursesModal-header-line" v-if="isdefaultCollection"><hr /></div>
     </div>
+
     <div class="saveCourseModal-body">
       <!--TODO: add default view and another view when they are collections to be populated-->
-      <div>
+      <div class="saveCourseModal-body-content">
         <p>{{ collection }}</p>
         <!--Must find all possible collections
             Checkbox Style
@@ -32,11 +41,12 @@ import TeleportModal from '@/components/Modals/TeleportModal.vue';
 // import store from '@/store';
 
 export default defineComponent({
+  components: { TeleportModal },
   props: {
     courseName: { type: String, required: true },
     collection: { type: String, default: 'No collections added yet' },
+    isdefaultCollection: { type: Boolean, default: true },
   },
-  components: { TeleportModal },
   emits: {
     'close-save-course-modal': () => true,
     'save-course': (name: string) => typeof name === 'string',
@@ -55,16 +65,13 @@ export default defineComponent({
       this.$emit('open-add-collection-modal');
     },
   },
-  data() {
-    return { isDisabled: false };
-  },
 });
 </script>
 
 <style lang="scss">
 @import '@/assets/scss/_variables.scss';
 .content-plan {
-  width: 20rem;
+  width: 40rem;
 }
 
 .modal {
@@ -75,4 +82,48 @@ export default defineComponent({
     display: flex;
   }
 }
+
+.saveCourseModal {
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 1rem;
+    gap: 0.5rem;
+    img {
+      align-self: flex-start;
+    }
+  }
+  &-header {
+    display: flex;
+    flex-direction: column;
+    hr {
+      margin-left: -6%;
+      width: 112%;
+    }
+    &-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      color: $primaryGray;
+      span {
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 900;
+      }
+      &-addButton {
+        cursor: pointer;
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  &-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: $darkPlaceholderGray;
+  }
+}
 </style>

src/components/Modals/SaveCourseModal.vue

@@ -16,7 +16,9 @@
         :style="customPosition"
       >
         <div v-if="!isSimpleModal" class="modal-top">
-          <h1>{{ title }}</h1>
+          <slot name="title">
+            <h1>{{ title }}</h1>
+          </slot>
           <button @click="close" data-cyId="modal-exit">
             <img class="modal-exit" src="@/assets/images/x.png" alt="x to close modal" />
           </button>
@@ -61,7 +63,7 @@ import store from '@/store';
 
 export default defineComponent({
   props: {
-    title: { type: String, default: '' },
+    title: { type: String, required: true },
     contentClass: { type: String, required: true },
     leftButtonText: { type: String, default: '' },
     rightButtonText: { type: String, default: '' },