From b4b20e6be466dc67fde58a78e711b687a46adb03 Mon Sep 17 00:00:00 2001
From: Hannah Zhou <hannahyunzizhou@gmail.com>
Date: Wed, 30 Oct 2024 17:25:53 -0400
Subject: [PATCH] fixed frontend

---
 src/components/Modals/SaveCourseModal.scss | 8 +++++---
 src/components/Modals/SaveCourseModal.vue  | 8 ++++++--
 src/components/Modals/TeleportModal.vue    | 2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Modals/SaveCourseModal.scss b/src/components/Modals/SaveCourseModal.scss
index 06cabfb9c..81bc06137 100644
--- a/src/components/Modals/SaveCourseModal.scss
+++ b/src/components/Modals/SaveCourseModal.scss
@@ -19,7 +19,6 @@
     align-self: center;
     width: 112%;
     height: 2.5rem;
-    border: 0.3px solid $lightestGray;
     color: $primaryGray;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -54,6 +53,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: border-box;
+    flex-grow: 1;
 
     ::-webkit-scrollbar-button {
       display: none; // Hide the up and down arrows
@@ -66,8 +66,9 @@
       align-items: flex-start;
       gap: 0.5rem;
       width: 100%;
-
+    
       &.default-collection {
+        margin-top: 0.5rem;
         justify-content: center;
         align-items: center;
       }
@@ -80,7 +81,8 @@
         color: $primaryGray;
         font-weight: 600;
         column-gap: 0.5rem;
-        padding-bottom: 11px; // adjust padding if needed
+        padding-top: 0.5rem;
+        padding-bottom: 8px; // adjust padding if needed
 
         input[type='checkbox'] {
           margin: 0;
diff --git a/src/components/Modals/SaveCourseModal.vue b/src/components/Modals/SaveCourseModal.vue
index 389a84417..dbea9f591 100644
--- a/src/components/Modals/SaveCourseModal.vue
+++ b/src/components/Modals/SaveCourseModal.vue
@@ -16,6 +16,7 @@
       </div>
     </template>
 
+    <div class="saveCourseModal-divider-line"></div>
     <div class="saveCourseModal-header">
       <div class="saveCourseModal-header-text">
         <span> Collections </span>
@@ -24,6 +25,10 @@
         </button>
       </div>
     </div>
+    <div
+      v-if="isNumCollectionGreaterThanFour || (isDefaultCollection && !isEditing)"
+      class="saveCourseModal-divider-line"
+    ></div>
 
     <div :class="['saveCourseModal-body']">
       <div
@@ -70,6 +75,7 @@
             maxlength="30"
             v-model="newCollectionName"
             @keydown.enter="finishEditing"
+            @blur="finishEditing"
             class="editable-input"
             placeholder="Add new collection"
           />
@@ -80,8 +86,6 @@
   </teleport-modal>
 </template>
 
-<!--@blur="finishEditing"-->
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TeleportModal from '@/components/Modals/TeleportModal.vue';
diff --git a/src/components/Modals/TeleportModal.vue b/src/components/Modals/TeleportModal.vue
index b5cb478dd..484360ddc 100644
--- a/src/components/Modals/TeleportModal.vue
+++ b/src/components/Modals/TeleportModal.vue
@@ -244,7 +244,7 @@ export default defineComponent({
     }
 
     &--addCollection {
-      margin-top: 3rem;
+      margin-top: 1rem;
       margin-right: 0.2rem;
     }
   }