1 files changed, 20 insertions, 56 deletions
diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue
index 5313b0b..317f083 100644
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -11,7 +11,7 @@ const { tokens } = toRefs(props);
 
 <template>
   <div>
-    <div class="labels" w-full flex items-center>
+    <div mb-5px w-full flex items-center>
       <div flex-1 text-left>
         Previous
       </div>
@@ -22,60 +22,24 @@ const { tokens } = toRefs(props);
         Next
       </div>
     </div>
-    <n-input-group>
-      <n-tooltip trigger="hover" placement="bottom">
-        <template #trigger>
-          <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
-            {{ tokens.previous }}
-          </c-button>
-        </template>
-        <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
-      </n-tooltip>
-      <n-tooltip trigger="hover" placement="bottom">
-        <template #trigger>
-          <c-button
-            data-test-id="current-otp"
-            class="current-otp"
-            important:h-12
-            @click.prevent="copyCurrent(tokens.current)"
-          >
-            {{ tokens.current }}
-          </c-button>
-        </template>
-        <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
-      </n-tooltip>
-      <n-tooltip trigger="hover" placement="bottom">
-        <template #trigger>
-          <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">
-            {{
-              tokens.next
-            }}
-          </c-button>
-        </template>
-        <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
-      </n-tooltip>
-    </n-input-group>
+    <div flex items-center>
+      <c-tooltip :tooltip="previousCopied ? 'Copied !' : 'Copy previous OTP'" position="bottom" flex-1>
+        <c-button data-test-id="previous-otp" w-full important:h-12 important:rounded-r-none important:font-mono @click.prevent="copyPrevious(tokens.previous)">
+          {{ tokens.previous }}
+        </c-button>
+      </c-tooltip>
+      <c-tooltip :tooltip="currentCopied ? 'Copied !' : 'Copy current OTP'" position="bottom" flex-1 flex-basis-5xl>
+        <c-button
+          data-test-id="current-otp" w-full important:border-x="1px solid gray op-40" important:h-12 important:rounded-0 important:text-22px @click.prevent="copyCurrent(tokens.current)"
+        >
+          {{ tokens.current }}
+        </c-button>
+      </c-tooltip>
+      <c-tooltip :tooltip="nextCopied ? 'Copied !' : 'Copy next OTP'" position="bottom" flex-1>
+        <c-button data-test-id="next-otp" w-full important:h-12 important:rounded-l-none @click.prevent="copyNext(tokens.next)">
+          {{ tokens.next }}
+        </c-button>
+      </c-tooltip>
+    </div>
   </div>
 </template>
-
-<style scoped lang="less">
-.current-otp {
-  font-size: 22px;
-  flex: 1 0 35% !important;
-}
-
-.n-button {
-  height: 45px;
-}
-
-.labels {
-  div {
-    padding: 0 2px 6px 2px;
-    line-height: 1.25;
-  }
-}
-
-.n-input-group > * {
-  flex: 1 0 0;
-}
-</style>