diff options
Diffstat (limited to 'src/tools/otp-code-generator-and-validator/token-display.vue')
-rw-r--r-- | src/tools/otp-code-generator-and-validator/token-display.vue | 76 |
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> |