add a reusable ActivityBarSeparator

Author: ahmedhamidawan

client/src/components/ActivityBar/ActivityBar.vue

@@ -19,6 +19,7 @@ import localize from "@/utils/localization";
 import ChatHistoryPanel from "../ChatGXY/ChatHistoryPanel.vue";
 import InvocationsPanel from "../Panels/InvocationsPanel.vue";
 import ActivityBarHeader from "./ActivityBarHeader.vue";
+import ActivityBarSeparator from "./ActivityBarSeparator.vue";
 import ActivityItem from "./ActivityItem.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
@@ -332,7 +333,8 @@ defineExpose({
                     </div>
                 </draggable>
             </b-nav>
-            <b-nav v-if="!isAnonymous" vertical class="activity-footer flex-nowrap p-1">
+            <ActivityBarSeparator />
+            <b-nav v-if="!isAnonymous" vertical class="flex-nowrap p-1">
                 <template v-for="activity in props.specialActivities">
                     <ActivityItem
                         v-if="activity.panel"
@@ -466,11 +468,6 @@ defineExpose({
     display: none;
 }
 
-.activity-footer {
-    border-top: $border-default;
-    border-top-style: dotted;
-}
-
 .activity-popper-disabled {
     .popper-element {
         display: none;

client/src/components/ActivityBar/ActivityBarHeader.vue

@@ -3,6 +3,8 @@ import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { faChevronLeft, faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
+import ActivityBarSeparator from "./ActivityBarSeparator.vue";
+
 interface Props {
     /** Whether an activity's side panel is currently open. */
     isSideBarOpen: boolean;
@@ -41,7 +43,7 @@ function closeSidebar(event: KeyboardEvent | MouseEvent) {
             <FontAwesomeIcon :icon="props.isSideBarOpen ? faChevronLeft : props.icon" size="sm" fixed-width />
             <span class="activity-bar-header-text">{{ props.title }}</span>
         </div>
-        <div class="activity-bar-header-divider" />
+        <ActivityBarSeparator />
     </div>
 </template>
 
@@ -66,9 +68,4 @@ function closeSidebar(event: KeyboardEvent | MouseEvent) {
         font-size: var(--font-size-small);
     }
 }
-
-.activity-bar-header-divider {
-    border-top: var(--border-default);
-    border-top-style: dotted;
-}
 </style>

client/src/components/ActivityBar/ActivityBarSeparator.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="activity-bar-separator" />
+</template>
+
+<style scoped lang="scss">
+.activity-bar-separator {
+    border-top: 1px solid var(--color-grey-600);
+    border-top-style: dotted;
+}
+</style>

client/src/style/scss/custom_theme_variables.scss

@@ -85,9 +85,6 @@ html,
     --masthead-height: #{$masthead-height};
     --masthead-logo-height: calc(var(--masthead-height) - 0.5rem);
 
-    --border-color: #{$border-color};
-    --border-default: #{$border-default};
-
     --masthead-color: #{$masthead-color};
     --masthead-text-color: #{$masthead-text-color};
     --masthead-text-hover: #{$masthead-text-hover};