Merge pull request #19299 from guerler/minor-drag-style-adjustment-ac…

…tivities

Minor drag style adjustment for activities

client/src/components/ActivityBar/ActivityBar.vue

@@ -98,6 +98,10 @@ const dragItem: Ref<Activity | null> = ref(null);
 // drag state
 const isDragging = ref(false);
 
+// computed values
+const canDrag = computed(() => isActiveSideBar("settings"));
+const isSideBarOpen = computed(() => activityStore.toggledSideBar !== "");
+
 /**
  * Checks if the route of an activity is currently being visited and panels are collapsed
  */
@@ -112,8 +116,6 @@ function isActiveSideBar(menuKey: string) {
     return activityStore.toggledSideBar === menuKey;
 }
 
-const isSideBarOpen = computed(() => activityStore.toggledSideBar !== "");
-
 /**
  * Checks if an activity that has a panel should have the `is-active` prop
  */
@@ -189,10 +191,6 @@ function setActiveSideBar(key: string) {
     activityStore.toggledSideBar = key;
 }
 
-const canDrag = computed(() => {
-    return isActiveSideBar("settings");
-});
-
 defineExpose({
     isActiveSideBar,
     setActiveSideBar,
@@ -224,7 +222,7 @@ defineExpose({
                     <div
                         v-for="(activity, activityIndex) in activities"
                         :key="activityIndex"
-                        :class="{ 'can-drag': canDrag }">
+                        :class="{ 'activity-can-drag': canDrag }">
                         <div v-if="activity.visible && (activity.anonymous || !isAnonymous)">
                             <UploadItem
                                 v-if="activity.id === 'upload'"
@@ -354,6 +352,12 @@ defineExpose({
     display: none;
 }
 
+.activity-can-drag .activity-item {
+    border-radius: $border-radius-extralarge;
+    outline: 2px dashed $border-color;
+    outline-offset: -3px;
+}
+
 .activity-chosen-class {
     background: $brand-secondary;
     border-radius: $border-radius-extralarge;
@@ -388,11 +392,4 @@ defineExpose({
     overflow-y: auto;
     overflow-x: hidden;
 }
-
-.can-drag {
-    border-radius: 12px;
-    border: 1px;
-    outline: dashed darkgray;
-    outline-offset: -3px;
-}
 </style>