aboutsummaryrefslogtreecommitdiff
path: root/src/tools/otp-code-generator-and-validator
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools/otp-code-generator-and-validator')
-rw-r--r--src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue4
-rw-r--r--src/tools/otp-code-generator-and-validator/token-display.vue11
2 files changed, 7 insertions, 8 deletions
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index 73fbd25..95527d0 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -25,10 +25,10 @@
<n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
<div style="text-align: center">Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s</div>
</div>
- <n-space justify="center" vertical align="center" style="margin-top: 10px">
+ <div mt-4 flex flex-col items-center justify-center gap-3>
<n-image :src="qrcode"></n-image>
<c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
- </n-space>
+ </div>
</div>
<div style="max-width: 350px">
<input-copyable
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 6eadcb2..532cbe7 100644
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -1,10 +1,10 @@
<template>
<div>
- <n-space class="labels" item-style="flex: 1 1 0" w-full align="center">
- <div style="text-align: left">Previous</div>
- <div style="text-align: center">Current OTP</div>
- <div style="text-align: right">Next</div>
- </n-space>
+ <div class="labels" w-full flex items-center>
+ <div flex-1 text-left>Previous</div>
+ <div flex-1 text-center>Current OTP</div>
+ <div flex-1 text-right>Next</div>
+ </div>
<n-input-group>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
@@ -63,7 +63,6 @@ const { tokens } = toRefs(props);
.labels {
div {
- text-align: center;
padding: 0 2px 6px 2px;
line-height: 1.25;
}