refactor: Rename dependency classes to match modal

Author: DanielTMolloy919

src/ui/Dependency.svelte

@@ -181,7 +181,7 @@
     />
 </span>
 {#if searchResults && searchResults.length !== 0}
-    <ul class="suggested-tasks"
+    <ul class="task-dependency-dropdown"
         bind:this={dropdown}
         on:mouseleave={() => searchIndex = null}>
         {#each searchResults as searchTask, index}
@@ -195,7 +195,7 @@
                     [{searchTask.status.symbol}] {searchTask.descriptionWithoutTags}
                 </div>
                 {#if filepath}
-                    <div class="dependency-location"
+                    <div class="dependency-path"
                          on:mouseenter={(e) => showDescriptionTooltip(e.currentTarget, filepath)}>
                         {filepath}
                     </div>
@@ -204,13 +204,13 @@
         {/each}
     </ul>
 {/if}
-<div class="chip-container results">
+<div class="task-dependencies-container results">
     {#each editableTask[type] as task}
-        <div class="chip"
+        <div class="task-dependency"
              on:mouseenter={(e) => showDescriptionTooltip(e.currentTarget, task.descriptionWithoutTags)}>
-            <span class="chip-name">[{task.status.symbol}] {task.descriptionWithoutTags}</span>
+            <span class="task-dependency-name">[{task.status.symbol}] {task.descriptionWithoutTags}</span>
 
-            <button on:click={() => removeTask(task)} type="button" class="chip-close">
+            <button on:click={() => removeTask(task)} type="button" class="task-dependency-delete">
                 <svg style="display: block; margin: auto;" xmlns="http://www.w3.org/2000/svg" width="12"
                      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round" class="lucide lucide-x">

styles.css

@@ -287,33 +287,32 @@ a.tasks-edit, a.tasks-postpone {
         grid-row: 1;
     }
 }
-
 /* Dependency Styles */
 
-.chip-container {
+.task-dependencies-container {
     padding-bottom: 4px;
     padding-top: 4px;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }
-.chip {
+.task-dependency {
     display: inline-flex;
     background-color: var(--interactive-normal);
     box-shadow: var(--input-shadow);
     border-radius: 28px;
     padding: 6px 8px 6px 12px;
 }
 
-.chip-name {
+.task-dependency-name {
     font-size: 14px;
     max-width: 160px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.chip-close {
+.task-dependency-delete {
     padding: 3px;
     border-radius: 50%;
     margin-left: 6px;
@@ -323,7 +322,7 @@ a.tasks-edit, a.tasks-postpone {
     background-color: var(--background-primary) !important;
 }
 
-.suggested-tasks {
+.task-dependency-dropdown {
     list-style: none;
     position: absolute;
     top: 0;
@@ -340,28 +339,28 @@ a.tasks-edit, a.tasks-postpone {
     overflow-y: auto;
 }
 
-.suggested-tasks li {
+.task-dependency-dropdown li {
     padding: 5px;
     margin: 2px;
     border-radius: 6px;
     cursor: pointer;
     display: flex;
     justify-content: space-between
 }
-.suggested-tasks li .dependency-name {
+.task-dependency-dropdown li .dependency-name {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.suggested-tasks li .dependency-name-shared {
+.task-dependency-dropdown li .dependency-name-shared {
     width: calc(60%);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.suggested-tasks li .dependency-location {
+.task-dependency-dropdown li .dependency-path {
     width: calc(40%);
     overflow: hidden;
     white-space: nowrap;
@@ -371,25 +370,10 @@ a.tasks-edit, a.tasks-postpone {
     color: var(--italic-color)
 }
 
-.suggested-tasks li.selected {
+.task-dependency-dropdown li.selected {
     background-color: var(--text-selection);
 }
 
-.blocking-tooltip {
-    display: none;
-    width: max-content;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #222;
-    color: white;
-    font-weight: bold;
-    padding: 5px;
-    border-radius: 4px;
-    font-size: 90%;
-}
-
-
 /**------------------------------------------------------------------------
  **                            SETTINGS
  *------------------------------------------------------------------------**/