From 2f66f45fa2a92e9ad965123b9782beb61d482215 Mon Sep 17 00:00:00 2001
From: Hristiyan Valkov <115925463+icoxxx@users.noreply.github.com>
Date: Thu, 2 Jan 2025 09:50:46 +0200
Subject: [PATCH] fix: button style in ComplexKey (#1406)

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
Co-authored-by: John Bair <117694970+jbair06@users.noreply.github.com>
---
 .../ComplexKeyAddPublicKeyModal.vue           | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/front-end/src/renderer/components/ComplexKey/ComplexKeyAddPublicKeyModal.vue b/front-end/src/renderer/components/ComplexKey/ComplexKeyAddPublicKeyModal.vue
index 80bdd0204..07fa3be35 100644
--- a/front-end/src/renderer/components/ComplexKey/ComplexKeyAddPublicKeyModal.vue
+++ b/front-end/src/renderer/components/ComplexKey/ComplexKeyAddPublicKeyModal.vue
@@ -154,19 +154,22 @@ function filterKeyList(keyList: { publicKey: string; nickname: string | null }[]
         <hr class="separator my-5" />
 
         <template v-if="isLoggedInOrganization(user.selectedOrganization)">
-          <div class="btn-group d-flex justify-content-between">
-            <template v-for="kt in KeyTab" :key="kt">
-              <AppButton
-                @click="handleKeyTabChange(kt)"
-                :class="{ active: currentTab === kt }"
-                color="secondary"
-                type="button"
-                data-testid="tab-keys-my"
-                >{{ kt }}</AppButton
-              >
-            </template>
-          </div></template
-        >
+          <div class="btn-group-container" role="group">
+            <div class="btn-group d-flex justify-content-between gap-3">
+              <template v-for="kt in KeyTab" :key="kt">
+                <AppButton
+                  class="rounded-3 text-nowrap"
+                  @click="handleKeyTabChange(kt)"
+                  :class="{ active: currentTab === kt, 'text-body': currentTab !== kt }"
+                  :color="currentTab === kt ? 'primary' : undefined"
+                  type="button"
+                  data-testid="tab-keys-my"
+                  >{{ kt }}</AppButton
+                >
+              </template>
+            </div>
+          </div>
+        </template>
         <div>
           <template v-if="listedKeyList.length > 0">
             <div class="overflow-auto mt-4" :style="{ height: '35vh' }">