Social: Use primary color for selected message tabs in Account/Home

Author: christianbeeznest

assets/css/scss/_social.scss

@@ -1040,20 +1040,11 @@
 }
 
 #social-wall-container {
-  .tab {
-    padding: 0.5rem 1rem;
-    border-radius: 9999px;
-    transition: background-color 0.3s, color 0.3s;
-    cursor: pointer;
+  .tab-active:hover {
+    @apply bg-primary/90;
   }
-
-  .tab:hover {
-     background-color: #e2e8f0;
-  }
-
-  .tab-active {
-    background-color: #3b82f6;
-    color: white;
+  .tab:disabled {
+    @apply opacity-60 cursor-not-allowed;
   }
 }
 

assets/vue/views/social/SocialWall.vue

@@ -1,15 +1,25 @@
 <template>
   <div id="social-wall-container">
-    <div class="flex justify-center mb-6 space-x-4">
+    <div
+      class="flex justify-center mb-6 space-x-4"
+      role="tablist"
+      aria-label="Social wall filters"
+    >
       <button
-        :class="['tab', { 'tab-active': !filterType }]"
+        :class="tabClasses(null)"
+        role="tab"
+        :aria-selected="!filterType"
         @click="filterMessages(null)"
+        type="button"
       >
         {{ t("All Messages") }}
       </button>
       <button
-        :class="['tab', { 'tab-active': filterType === 'promoted' }]"
+        :class="tabClasses('promoted')"
+        role="tab"
+        :aria-selected="filterType === 'promoted'"
         @click="filterMessages('promoted')"
+        type="button"
       >
         {{ t("Promoted Messages") }}
       </button>
@@ -55,8 +65,8 @@ const isAdmin = securityStore.isAdmin
 watch(
   () => route.query.filterType,
   (newFilterType) => {
-    filterType.value = newFilterType
-    refreshPosts()
+    filterType.value = newFilterType || null
+    postListRef.value?.refreshPosts()
   },
 )
 
@@ -73,4 +83,15 @@ function filterMessages(type) {
     router.push({ path: "/social", query: { filterType: type } })
   }
 }
+
+function tabClasses(type) {
+  const isActive = type ? filterType.value === type : !filterType.value
+  return [
+    "inline-flex items-center rounded-full border px-4 py-2 text-body-2 font-medium transition-colors duration-150",
+    "focus:outline-none focus:ring-2 focus:ring-primary",
+    isActive
+      ? "bg-primary border-primary text-white shadow-sm hover:bg-primary/90"
+      : "bg-white border-gray-25 text-gray-90 hover:bg-gray-15",
+  ]
+}
 </script>