added arrow

src/components/Course/Course.vue

@@ -93,35 +93,12 @@
         :getCreditRange="getCreditRange || []"
         v-click-outside="closeMenuIfOpen"
       />
-      <!-- Triangle element positioned under the course card -->
-      <!-- <div class="rectangle"></div> -->
     </div>
-    <!-- Rectangle that slides out on click -->
-    <!-- <div
-      class="rectangle"
-      :class="{ expanded: isExpanded }"
-      @click.stop="toggleRectangle"
-    ></div>
-  </div> -->
-    <!-- Rectangle that slides up and down on click -->
-    <!-- <div class="rectangle" :class="{ expanded: isExpanded }" @click.stop="toggleRectangle"></div>
-  </div> -->
-    <!-- Use Note component here -->
-    <!-- <Note @toggle="handleToggleNote" />
-  </div> -->
-    <!-- Use Note component here with the specified width and initial translate values -->
-    <!-- <Note
-      :initialTranslateY="'-60px'"
-      :expandedTranslateY="'0px'"
-      :width="'calc(103% - 10px)'"
-      @toggle="handleToggleNote"
-    /> -->
-    <!-- Use Note component with the color prop set to match the course card -->
     <Note
       :initialTranslateY="'-67px'"
       :expandedTranslateY="'-35px'"
       :width="'calc(103% - 10px)'"
       :color="cssVars['--bg-color']"
       @toggle="handleToggleNote"
     />
   </div>
@@ -293,8 +270,8 @@
     // handleToggleNote(isExpanded) {
     //   console.log("Note expanded state:", isExpanded);
     // },
     handleToggleNote(isExpanded) {
       console.log('Note expanded state:', isExpanded);
     },
   },
   directives: {
@@ -330,7 +307,8 @@
   display: flex;
   flex-direction: row;
   background-color: $white;
-  box-shadow: 0px 0px 10px 4px $boxShadowGray;
+  box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 0.3); /* Shadow appears only at the bottom */
+
   height: 5.625rem;
   cursor: grab;
 

src/components/Notes/Note.vue

@@ -1,117 +1,12 @@
-<!-- <template>
-  <div
-    class="note"
-    :class="{ expanded: isExpanded }"
-    :style="noteStyle"
-    @click.stop="toggleNote"
-  ></div>
-</template>
-
-<script>
-export default {
-  name: 'Note',
-  props: {
-    initialTranslateY: { type: String, default: '20px' },
-    expandedTranslateY: { type: String, default: '-10px' },
-    width: { type: String, default: '200px' },
-  },
-  data() {
-    return {
-      isExpanded: false,
-    };
-  },
-  computed: {
-    noteStyle() {
-      return {
-        transform: `translateX(-50%) translateY(${
-          this.isExpanded ? this.expandedTranslateY : this.initialTranslateY
-        })`,
-        width: this.width,
-      };
-    },
-  },
-  methods: {
-    toggleNote() {
-      this.isExpanded = !this.isExpanded;
-      this.$emit('toggle', this.isExpanded);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.note {
-  position: absolute;
-  left: 50%;
-  height: 80px; /* Full height when expanded */
-  background-color: #a8e6cf; /* Pastel green */
-  border-radius: 12.49px;
-  cursor: pointer;
-  z-index: 0;
-  transition: transform 0.3s ease; /* Smooth slide transition */
-}
-</style> -->
-<!-- <template>
-  <div
-    class="note"
-    :class="{ expanded: isExpanded }"
-    :style="noteStyle"
-    @click.stop="toggleNote"
-  ></div>
-</template>
-
-<script>
-export default {
-  name: "Note",
-  props: {
-    initialTranslateY: { type: String, default: "-50px" },
-    expandedTranslateY: { type: String, default: "-10px" },
-    width: { type: String, default: "200px" },
-    color: { type: String, default: "#a8e6cf" }, // Default color for the Note background
-  },
-  data() {
-    return {
-      isExpanded: false,
-    };
-  },
-  computed: {
-    noteStyle() {
-      return {
-        transform: `translateX(-50%) translateY(${this.isExpanded ? this.expandedTranslateY : this.initialTranslateY})`,
-        width: this.width,
-        backgroundColor: this.color, // Set background color based on prop
-      };
-    },
-  },
-  methods: {
-    toggleNote() {
-      this.isExpanded = !this.isExpanded;
-      this.$emit("toggle", this.isExpanded);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.note {
-  position: absolute;
-  left: 50%;
-  height: 80px; /* Full height when expanded */
-  border-radius: 12.49px;
-  cursor: pointer;
-  z-index: 0;
-  transition: transform 0.3s ease; /* Smooth slide transition */
-}
-</style> -->
-<!-- <template>
-  <div
-    class="note"
-    :class="{ expanded: isExpanded }"
-    :style="noteStyle"
-    @click.stop="toggleNote"
-  ></div>
+<template>
+  <div class="note" :class="{ expanded: isExpanded }" :style="noteStyle" @click.stop="toggleNote">
+    <!-- Show "Add a note..." text only when expanded -->
+    <div v-if="isExpanded" class="note-content">
+      <span>Add a note...</span>
+      <img src="@/assets/images/notes/arrow.svg" alt="Arrow icon" class="note-icon" />
+    </div>
+  </div>
 </template>
-
 <script>
 export default {
   name: 'Note',
@@ -134,7 +29,7 @@ export default {
         })`,
         width: this.width,
         backgroundColor: this.color,
-        filter: 'brightness(1.3)', // Adjust for a lighter shade
+        filter: 'brightness(1.7) saturate(0.3)', // Adjust for a lighter, pastel look
       };
     },
   },
@@ -151,66 +46,42 @@ export default {
 .note {
   position: absolute;
   left: 50%;
-  height: 80px; /* Full height when expanded */
+  transform: translateX(-50%);
+  height: 80px; /* Initial height */
   border-radius: 12.49px;
   cursor: pointer;
   z-index: 0;
-  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth slide and brightness transition */
+  transition: transform 0.3s ease, filter 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 10px;
+  overflow: hidden; /* Ensures text stays within bounds */
 }
-</style> -->
-<template>
-  <div
-    class="note"
-    :class="{ expanded: isExpanded }"
-    :style="noteStyle"
-    @click.stop="toggleNote"
-  ></div>
-</template>
 
-<script>
-export default {
-  name: 'Note',
-  props: {
-    initialTranslateY: { type: String, default: '-50px' },
-    expandedTranslateY: { type: String, default: '-10px' },
-    width: { type: String, default: '200px' },
-    color: { type: String, default: '#a8e6cf' },
-  },
-  data() {
-    return {
-      isExpanded: false,
-    };
-  },
-  computed: {
-    noteStyle() {
-      return {
-        transform: `translateX(-50%) translateY(${
-          this.isExpanded ? this.expandedTranslateY : this.initialTranslateY
-        })`,
-        width: this.width,
-        backgroundColor: this.color,
-        // filter: 'brightness(2)', // Increase to make it more pastel
-        filter: 'brightness(1.7) saturate(0.3)',
-      };
-    },
-  },
-  methods: {
-    toggleNote() {
-      this.isExpanded = !this.isExpanded;
-      this.$emit('toggle', this.isExpanded);
-    },
-  },
-};
-</script>
+.note.expanded {
+  height: 80px; /* Full height for expanded state */
+}
 
-<style scoped>
-.note {
+/* Style for the "Add a note..." text */
+.note-content {
+  /* font-size: 1rem; */
+  font-size: 14.48px;
+  color: #555; /* Text color */
+  font-family: inherit;
+  text-align: left;
+  padding: 2px 10px;
+  width: 100%;
+  /* padding-bottom: 5px; */
+}
+/* Style for the icon */
+.note-icon {
+  width: 20.18px; /* Adjust size as needed */
+  height: 20.18px;
   position: absolute;
-  left: 50%;
-  height: 80px; /* Full height when expanded */
-  border-radius: 12.49px;
-  cursor: pointer;
-  z-index: 0;
-  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth slide and brightness transition */
+  bottom: 12px;
+  right: 10px;
+  color: grey;
+  opacity: 1;
 }
 </style>