From 6cf59171ec0995cdf5e3f55a0a1b6a44f63ba894 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 10 Dec 2024 19:28:02 +0300
Subject: [PATCH 1/3] Consolidate computed values in Activity Bar component

---
 client/src/components/ActivityBar/ActivityBar.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index aee942c40ee9..c6b2d4ffb1db 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/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,

From f2d497f230f06d482498414d6e59973fd53810e8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 10 Dec 2024 19:45:29 +0300
Subject: [PATCH 2/3] Use theme styles

---
 client/src/components/ActivityBar/ActivityBar.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index c6b2d4ffb1db..3bc383639100 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -222,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'"
@@ -352,6 +352,12 @@ defineExpose({
     display: none;
 }
 
+.activity-can-drag {
+    border-radius: $border-radius-extralarge;
+    outline: 2px dashed $border-color;
+    outline-offset: -3px;
+}
+
 .activity-chosen-class {
     background: $brand-secondary;
     border-radius: $border-radius-extralarge;
@@ -386,11 +392,4 @@ defineExpose({
     overflow-y: auto;
     overflow-x: hidden;
 }
-
-.can-drag {
-    border-radius: 12px;
-    border: 1px;
-    outline: dashed darkgray;
-    outline-offset: -3px;
-}
 </style>

From 080628ca63053efd7d42814f7813c2a1156fbdb5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 10 Dec 2024 19:54:13 +0300
Subject: [PATCH 3/3] Apply to style to activity item

---
 client/src/components/ActivityBar/ActivityBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 3bc383639100..e5bdd51663f5 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -352,7 +352,7 @@ defineExpose({
     display: none;
 }
 
-.activity-can-drag {
+.activity-can-drag .activity-item {
     border-radius: $border-radius-extralarge;
     outline: 2px dashed $border-color;
     outline-offset: -3px;