commit ca8257e6821106c65d9611fef9e7afa2338b6979
parent 3357c7cc88156dbd8eeaebbd1a7438f6d34c8d0a
Author: Amit Dutta <mail@amit.is-a.dev>
Date: Mon, 17 Aug 2026 12:25:47 +0530
Merge pull request #50 from notamitgamer2/fix/external-link-modal-actions
Redesign external link modal actions: Yes/No pair + inline copy icon
Diffstat:
1 file changed, 46 insertions(+), 15 deletions(-)
diff --git a/docs/.vitepress/theme/components/ExternalLinkWarning.vue b/docs/.vitepress/theme/components/ExternalLinkWarning.vue
@@ -78,26 +78,25 @@ const copyUrl = async () => {
This link leads to an external site I don't control, and can't vouch for its content. Continue anyway?
</p>
- <div class="url-box">{{ pendingUrl }}</div>
-
- <div class="actions">
- <button class="btn btn-copy" @click="copyUrl">
- <svg v-if="!copied" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <div class="url-box">
+ <span class="url-text">{{ pendingUrl }}</span>
+ <button class="copy-icon-btn" @click="copyUrl" :aria-label="copied ? 'Copied' : 'Copy link'" :title="copied ? 'Copied' : 'Copy link'">
+ <svg v-if="!copied" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>
- <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <svg v-else width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"/>
</svg>
- {{ copied ? 'Copied' : 'Copy Link' }}
+ </button>
+ </div>
+
+ <div class="actions">
+ <button class="btn btn-no" @click="reset">
+ No
</button>
<button class="btn btn-open" @click="openLink">
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
- <polyline points="15 3 21 3 21 9"/>
- <line x1="10" y1="14" x2="21" y2="3"/>
- </svg>
Continue
</button>
</div>
@@ -154,17 +153,49 @@ const copyUrl = async () => {
}
.url-box {
+ display: flex;
+ align-items: center;
+ gap: 8px;
font-size: 0.8rem;
font-family: var(--vp-font-family-mono);
color: var(--vp-c-text-1);
background: var(--vp-c-bg-alt);
border-radius: 8px;
- padding: 10px 12px;
+ padding: 10px 10px 10px 12px;
margin-bottom: 16px;
- word-break: break-all;
line-height: 1.4;
}
+.url-text {
+ flex: 1;
+ min-width: 0;
+ word-break: break-all;
+}
+
+.copy-icon-btn {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ border-radius: 6px;
+ border: none;
+ background: transparent;
+ color: var(--vp-c-text-2);
+ cursor: pointer;
+ transition: background 0.15s, color 0.15s;
+}
+
+.copy-icon-btn:hover {
+ background: var(--vp-c-bg);
+ color: var(--vp-c-text-1);
+}
+
+.copy-icon-btn:active {
+ opacity: 0.75;
+}
+
.actions {
display: flex;
gap: 10px;
@@ -189,7 +220,7 @@ const copyUrl = async () => {
opacity: 0.75;
}
-.btn-copy {
+.btn-no {
background: var(--vp-c-bg-alt);
color: var(--vp-c-text-1);
}
