fix: UX revamp buttons (#11792)

Co-authored-by: ktx-mihir <mihir.patel@kiara.tech>

web/src/components/common/O2AIContextAddBtn.spec.js

@@ -116,6 +116,6 @@ describe('O2AIContextAddBtn', () => {
   it('has correct button attributes', () => {
     const button = wrapper.find('[data-test="o2-ai-context-add-btn"]');
     expect(button.attributes('flat')).toBe(undefined);
-    expect(button.attributes('style')).toContain('border-radius: 100%');
+    expect(button.classes()).toContain('o2-ai-context-btn');
   });
 });

web/src/components/common/O2AIContextAddBtn.vue

@@ -3,17 +3,14 @@
     <OButton
         v-if="config.isEnterprise == 'true' && store.state.zoConfig.ai_enabled"
         variant="ghost"
-        size="icon-xs-circle"
+        size="icon-toolbar"
         @click.stop="sendToAiChat"
         data-test="o2-ai-context-add-btn"
-        :class="[
-            props.class,
-        ]"
+        :class="['o2-ai-context-btn', props.class]"
         :style="props.style"
-        style="border-radius: 100%;"
         >
         <div class="row items-center no-wrap">
-            <img :height="props.imageHeight" :width="props.imageWidth"  :src="getBtnLogo" class="header-icon ai-icon" />
+            <img :height="props.imageHeight" :width="props.imageWidth" :src="getBtnLogo" class="header-icon ai-icon" />
         </div>
     </OButton>
 </template>
@@ -71,4 +68,28 @@ const sendToAiChat = () => {
 </script>
 
 <style scoped lang="scss">
+.o2-ai-context-btn {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%) !important;
+  color: white !important;
+  transition: background 0.3s ease, box-shadow 0.3s ease !important;
+  width: 30px !important;
+  height: 30px !important;
+  min-width: 30px !important;
+  min-height: 30px !important;
+  border-radius: 6px !important;
+
+  .ai-icon {
+    transition: transform 0.6s ease;
+  }
+
+  &:hover {
+    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
+    box-shadow: 0 0.25rem 0.75rem 0 rgba(139, 92, 246, 0.35) !important;
+
+    .ai-icon {
+      filter: brightness(0) invert(1);
+      transform: rotate(180deg);
+    }
+  }
+}
 </style>

web/src/components/iam/groups/GroupServiceAccounts.vue

@@ -29,27 +29,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               Show
             </span>
-            <div
+            <OToggleGroup
               class="q-ml-xs"
-              style="
-              border: 1px solid #d7d7d7;
-              width: fit-content;
-              border-radius: 0.3rem;
-              padding: 2px;
-            "
+              :model-value="usersDisplay"
+              @update:model-value="(v) => updateUserTable(v as string)"
             >
-              <template v-for="visual in usersDisplayOptions" :key="visual.value">
-                <OButton
-                  :data-test="`iam-service-accounts-selection-show-${visual.value}-btn`"
-                  variant="ghost"
-                  :active="visual.value === usersDisplay"
-                  size="xs"
-                  @click="updateUserTable(visual.value)"
-                >
-                  {{ visual.label }}
-                </OButton>
-              </template>
-            </div>
+              <OToggleGroupItem
+                v-for="visual in usersDisplayOptions"
+                :key="visual.value"
+                :value="visual.value"
+                size="sm"
+                :data-test="`iam-service-accounts-selection-show-${visual.value}-btn`"
+              >
+                {{ visual.label }}
+              </OToggleGroupItem>
+            </OToggleGroup>
           </div>
         </div>
         <div
@@ -112,7 +106,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   
   <script setup lang="ts">
   import AppTable from "@/components/AppTable.vue";
-  import OButton from "@/lib/core/Button/OButton.vue";
+  import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
+  import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
   import usePermissions from "@/composables/iam/usePermissions";
   import { cloneDeep } from "lodash-es";
   import { computed, watch } from "vue";

web/src/components/iam/groups/GroupUsers.vue

@@ -29,27 +29,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             Show
           </span>
-          <div
+          <OToggleGroup
             class="q-ml-xs"
-            style="
-              border: 1px solid #d7d7d7;
-              width: fit-content;
-              border-radius: 0.3rem;
-              padding: 2px;
-            "
+            :model-value="usersDisplay"
+            @update:model-value="(v) => updateUserTable(v as string)"
           >
-            <template v-for="visual in usersDisplayOptions" :key="visual.value">
-              <OButton
-                :data-test="`iam-users-selection-show-${visual.value}-btn`"
-                variant="ghost"
-                :active="visual.value === usersDisplay"
-                size="xs"
-                @click="updateUserTable(visual.value)"
-              >
-                {{ visual.label }}
-              </OButton>
-            </template>
-          </div>
+            <OToggleGroupItem
+              v-for="visual in usersDisplayOptions"
+              :key="visual.value"
+              :value="visual.value"
+              size="sm"
+              :data-test="`iam-users-selection-show-${visual.value}-btn`"
+            >
+              {{ visual.label }}
+            </OToggleGroupItem>
+          </OToggleGroup>
         </div>
       </div>
       <div
@@ -163,7 +157,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import AppTable from "@/components/AppTable.vue";
-import OButton from "@/lib/core/Button/OButton.vue";
+import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
+import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import usePermissions from "@/composables/iam/usePermissions";
 import { cloneDeep } from "lodash-es";
 import { watch, computed } from "vue";

web/src/components/iam/roles/EditRole.vue

@@ -91,30 +91,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   Show
                 </span>
-                <div
+                <OToggleGroup
                   class="q-ml-xs"
-                   style="
-                  border: 1px solid var(--o2-border-color);
-                  width: fit-content;
-                  border-radius: 0.3rem;
-                  padding: 2px;
-                "
+                  :model-value="filter.permissions"
+                  @update:model-value="(v) => updateTableData(v as string)"
                 >
-                  <template
+                  <OToggleGroupItem
                     v-for="visual in permissionDisplayOptions"
                     :key="visual.value"
+                    :value="visual.value"
+                    size="sm"
+                    :data-test="`edit-role-permissions-show-${visual.value}-btn`"
                   >
-                    <OButton
-                      :data-test="`edit-role-permissions-show-${visual.value}-btn`"
-                      variant="ghost"
-                      :active="visual.value === filter.permissions"
-                      size="xs"
-                      @click="updateTableData(visual.value)"
-                    >
-                      {{ visual.label }}
-                    </OButton>
-                  </template>
-                </div>
+                    {{ visual.label }}
+                  </OToggleGroupItem>
+                </OToggleGroup>
               </div>
               <div data-test="edit-role-permissions-search-input">
                 <q-input
@@ -155,31 +146,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </div>
             <div></div>
-            <div
+            <OToggleGroup
               data-test="edit-role-permissions-ui-type-toggle"
               class="q-mr-md q-my-xs"
-              style="
-              border: 1px solid #d7d7d7;
-              width: fit-content;
-              border-radius: 0.3rem;
-              padding: 2px;
-            "
+              :model-value="permissionsUiType"
+              @update:model-value="(v) => updatePermissionsUi(v as string)"
             >
-              <template
+              <OToggleGroupItem
                 v-for="visual in permissionUiOptions"
                 :key="visual.value"
+                :value="visual.value"
+                size="sm"
+                :data-test="`edit-role-permissions-show-${visual.value}-btn`"
               >
-                <OButton
-                  :data-test="`edit-role-permissions-show-${visual.value}-btn`"
-                  variant="ghost"
-                  :active="visual.value === permissionsUiType"
-                  size="xs"
-                  @click="updatePermissionsUi(visual.value)"
-                >
-                  {{ visual.label }}
-                </OButton>
-              </template>
-            </div>
+                {{ visual.label }}
+              </OToggleGroupItem>
+            </OToggleGroup>
           </div>
 
           <div data-test="edit-role-permissions-table-section" class="el-border-radius q-px-md">
@@ -296,6 +278,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { cloneDeep } from "lodash-es";
 import { defineAsyncComponent, ref, type Ref } from "vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
+import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import { useI18n } from "vue-i18n";
 import type { Resource, Entity, Permission } from "@/ts/interfaces";
 import PermissionsTable from "@/components/iam/roles/PermissionsTable.vue";

web/src/components/pipeline/NodeForm/CreateDestinationForm.vue

@@ -591,13 +591,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div v-if="step > 1" class="tw:flex tw:gap-2">
           <OButton
             data-test="step3-back-btn"
-            variant="ghost"
-            size="icon-xs-sq"
+            variant="outline"
+            size="sm-action"
             @click="prevStep"
           >
-            <template #icon-left>
-              <ChevronLeft class="tw:size-3.5 tw:shrink-0" />
-            </template>
+            Back
           </OButton>
           <OButton
             data-test="add-destination-cancel-btn"
@@ -631,7 +629,7 @@ import { useQuasar } from "quasar";
 import type { DestinationData, Headers } from "@/ts/interfaces";
 import { isValidResourceName, getImageURL, getUUID } from "@/utils/zincutils";
 import OButton from "@/lib/core/Button/OButton.vue";
-import { Trash2, Plus, ChevronLeft } from "lucide-vue-next";
+import { Trash2, Plus } from "lucide-vue-next";
 
 // Props
 const props = defineProps<{

web/src/plugins/logs/Index.vue

@@ -175,6 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             @click="toggleErrorDetails"
                             variant="outline"
                             size="sm-action"
+                            style="font-size: 0.875rem"
                             data-test="logs-page-result-error-details-btn"
                             >{{ t("search.histogramErrorBtnLabel") }}</OButton
                           >