fix(app): iOS HIG Phase 3 — content & settings touch targets (44px minimum)
- Detail views: back buttons expanded across all 8 detail components - SettingsModal/SettingsPanel: close, edit/delete, tab buttons expanded - MemoryPanel: edit/delete buttons + gap fix - PersonaSelector: close button expanded - PluginMarketplace: settings gear button expanded - NostrGrid: sub-tab and filter buttons expanded - PlayerBar, MapRenderer, BranchSwitcher, ZapDialog, NostrDMs, NostrThread, NostrArticles, DesignSystemDetail/Grid: all remaining small interactive buttons expanded to 44px minimum Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
723dd6e4d3
commit
a8fc4ab204
+6
-6
@@ -18,17 +18,17 @@
|
||||
|
||||
## Phase 2: Touch Targets — Chat Interface (44×44px Minimum)
|
||||
|
||||
- [ ] **T5** — Fix ChatMessage.vue action buttons. The edit/reply/branch/feedback buttons use `w-7 h-7` (28px). Change the button wrapper to `min-w-[44px] min-h-[44px]` with `flex items-center justify-center` while keeping the inner SVG icon at `w-4 h-4` or `w-5 h-5`. This makes the tap target 44px but the visual icon stays the same size. Also fix the `gap-0.5` (2px) between action buttons to `gap-2` (8px). Apply to all button rows in this file.
|
||||
- [x] **T5** — Fix ChatMessage.vue action buttons. The edit/reply/branch/feedback buttons use `w-7 h-7` (28px). Change the button wrapper to `min-w-[44px] min-h-[44px]` with `flex items-center justify-center` while keeping the inner SVG icon at `w-4 h-4` or `w-5 h-5`. This makes the tap target 44px but the visual icon stays the same size. Also fix the `gap-0.5` (2px) between action buttons to `gap-2` (8px). Apply to all button rows in this file.
|
||||
|
||||
- [ ] **T6** — Fix ChatHeader.vue toolbar buttons. All 9 buttons use `w-8 h-8` or `w-9 h-9` (32-36px). Wrap each in a 44px touch target: `min-w-[44px] min-h-[44px] flex items-center justify-center`. Keep the visual icon sizes unchanged. Fix any `gap-1` between toolbar buttons to `gap-2`.
|
||||
- [x] **T6** — Fix ChatHeader.vue toolbar buttons. All 9 buttons use `w-8 h-8` or `w-9 h-9` (32-36px). Wrap each in a 44px touch target: `min-w-[44px] min-h-[44px] flex items-center justify-center`. Keep the visual icon sizes unchanged. Fix any `gap-1` between toolbar buttons to `gap-2`.
|
||||
|
||||
- [ ] **T7** — Fix ChatInput.vue buttons. The image attach button (`w-8 h-8`), close reply button (`w-5 h-5`), and send button need 44px minimum touch targets. Also fix the send button row gap to 8px minimum between targets.
|
||||
- [x] **T7** — Fix ChatInput.vue buttons. The image attach button (`w-8 h-8`), close reply button (`w-5 h-5`), and send button need 44px minimum touch targets. Also fix the send button row gap to 8px minimum between targets.
|
||||
|
||||
- [ ] **T8** — Fix ChatSearch.vue navigation buttons. Previous/Next/Close buttons use `w-6 h-6` (24px). Expand to 44px touch targets with padding.
|
||||
- [x] **T8** — Fix ChatSearch.vue navigation buttons. Previous/Next/Close buttons use `w-6 h-6` (24px). Expand to 44px touch targets with padding.
|
||||
|
||||
- [ ] **T9** — Fix ArticleReader.vue and PdfViewer.vue controls. Close/navigation buttons use `w-8 h-8` (32px). Expand to 44px. Fix button gaps.
|
||||
- [x] **T9** — Fix ArticleReader.vue and PdfViewer.vue controls. Close/navigation buttons use `w-8 h-8` (32px). Expand to 44px. Fix button gaps.
|
||||
|
||||
- [ ] **TEST:P2** — Run `pnpm typecheck && pnpm lint && pnpm test`. Commit and push.
|
||||
- [x] **TEST:P2** — Run `pnpm typecheck && pnpm lint && pnpm test`. Commit and push.
|
||||
|
||||
## Phase 3: Touch Targets — Content & Settings Components
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
>
|
||||
<div class="glass-button-sm !h-7 !min-h-0 flex items-center gap-1.5 px-2 text-xs">
|
||||
<button
|
||||
class="w-5 h-5 flex items-center justify-center rounded-md hover:bg-white/10 transition-colors text-white/60 hover:text-white/90 disabled:opacity-30 disabled:cursor-default"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-md hover:bg-white/10 transition-colors text-white/60 hover:text-white/90 disabled:opacity-30 disabled:cursor-default"
|
||||
:disabled="currentIndex <= 0"
|
||||
aria-label="Previous branch"
|
||||
@click="switchToBranch(currentIndex - 1)"
|
||||
@@ -18,7 +18,7 @@
|
||||
Branch {{ currentIndex + 1 }} of {{ branches.length }}
|
||||
</span>
|
||||
<button
|
||||
class="w-5 h-5 flex items-center justify-center rounded-md hover:bg-white/10 transition-colors text-white/60 hover:text-white/90 disabled:opacity-30 disabled:cursor-default"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-md hover:bg-white/10 transition-colors text-white/60 hover:text-white/90 disabled:opacity-30 disabled:cursor-default"
|
||||
:disabled="currentIndex >= branches.length - 1"
|
||||
aria-label="Next branch"
|
||||
@click="switchToBranch(currentIndex + 1)"
|
||||
|
||||
@@ -40,16 +40,16 @@
|
||||
</div>
|
||||
<template v-else>
|
||||
<p class="flex-1 text-xs text-white/60 leading-relaxed">{{ item.text }}</p>
|
||||
<div class="shrink-0 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div class="shrink-0 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
class="w-5 h-5 flex items-center justify-center rounded text-white/30 hover:text-white/60 hover:bg-white/10 transition-all"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/30 hover:text-white/60 hover:bg-white/10 transition-all"
|
||||
title="Edit"
|
||||
@click="startEdit(item)"
|
||||
>
|
||||
<svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg>
|
||||
</button>
|
||||
<button
|
||||
class="w-5 h-5 flex items-center justify-center rounded text-white/30 hover:text-red-400/80 hover:bg-white/10 transition-all"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/30 hover:text-red-400/80 hover:bg-white/10 transition-all"
|
||||
title="Delete"
|
||||
@click="memoryStore.deleteItem(item.id)"
|
||||
>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
{{ editingPersona ? 'Edit Persona' : 'New Persona' }}
|
||||
</h3>
|
||||
<button
|
||||
class="w-7 h-7 flex items-center justify-center rounded-lg text-white/40 hover:text-white/70 hover:bg-white/10 transition-all"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/40 hover:text-white/70 hover:bg-white/10 transition-all"
|
||||
@click="closeEditor"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-white/96">Settings</h2>
|
||||
<button
|
||||
class="w-7 h-7 flex items-center justify-center rounded-lg text-white/40 hover:text-white/70 hover:bg-white/10 transition-all"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/40 hover:text-white/70 hover:bg-white/10 transition-all"
|
||||
aria-label="Close settings"
|
||||
@click="$emit('update:open', false)"
|
||||
>
|
||||
@@ -54,16 +54,16 @@
|
||||
</div>
|
||||
<template v-else>
|
||||
<p class="flex-1 text-xs text-white/60 leading-relaxed">{{ item.text }}</p>
|
||||
<div class="shrink-0 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div class="shrink-0 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
class="w-5 h-5 flex items-center justify-center rounded text-white/30 hover:text-white/60 hover:bg-white/10 transition-all"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/30 hover:text-white/60 hover:bg-white/10 transition-all"
|
||||
title="Edit"
|
||||
@click="startEdit(item)"
|
||||
>
|
||||
<svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg>
|
||||
</button>
|
||||
<button
|
||||
class="w-5 h-5 flex items-center justify-center rounded text-white/30 hover:text-red-400/80 hover:bg-white/10 transition-all"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/30 hover:text-red-400/80 hover:bg-white/10 transition-all"
|
||||
title="Delete"
|
||||
@click="memoryStore.deleteItem(item.id)"
|
||||
>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
|
||||
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'">
|
||||
<button
|
||||
class="w-7 h-7 rounded-lg path-glass-icon flex items-center justify-center transition-colors shrink-0"
|
||||
class="min-w-[44px] min-h-[44px] rounded-lg path-glass-icon flex items-center justify-center transition-colors shrink-0"
|
||||
:class="isDark ? 'hover:bg-white/10' : 'hover:bg-black/5'"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<!-- Selection toggle (top-right) — only this area toggles context selection -->
|
||||
<div
|
||||
v-if="codeMode"
|
||||
class="absolute top-2 right-2 w-5 h-5 rounded-full flex items-center justify-center z-10 cursor-pointer transition-colors"
|
||||
class="absolute top-2 right-2 min-w-[44px] min-h-[44px] rounded-full flex items-center justify-center z-10 cursor-pointer transition-colors"
|
||||
:class="isDesignTokenSelected(item.id)
|
||||
? 'bg-accent'
|
||||
: isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-black/10 hover:bg-black/20'"
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10 text-white/80"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10 text-white/80"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -59,7 +59,7 @@
|
||||
:href="image.url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-medium transition-colors"
|
||||
class="inline-flex items-center gap-2 px-4 min-h-[44px] rounded-xl text-xs font-medium transition-colors"
|
||||
:class="isDark
|
||||
? 'bg-white/5 hover:bg-white/10 text-white/80'
|
||||
: 'bg-black/3 hover:bg-black/5 text-gray-800'"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
|
||||
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'">
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4" :class="isDark ? 'text-white/70' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -69,7 +69,7 @@
|
||||
:href="section.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1.5 mt-6 text-xs transition-colors"
|
||||
class="inline-flex items-center gap-2 mt-6 min-h-[44px] text-xs transition-colors"
|
||||
:class="isDark ? 'text-white/40 hover:text-white/70' : 'text-black/40 hover:text-black/70'">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
@@ -85,7 +85,7 @@
|
||||
? 'border-top: 1px solid rgba(255, 255, 255, 0.08)'
|
||||
: 'border-top: 1px solid rgba(0, 0, 0, 0.06)'">
|
||||
<button
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-colors"
|
||||
class="flex items-center gap-1.5 px-3 min-h-[44px] rounded-lg text-xs transition-colors"
|
||||
:class="isDark
|
||||
? 'text-white/50 hover:text-white/80 hover:bg-white/5'
|
||||
: 'text-black/40 hover:text-black/70 hover:bg-black/5'"
|
||||
@@ -107,7 +107,7 @@
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-colors"
|
||||
class="flex items-center gap-1.5 px-3 min-h-[44px] rounded-lg text-xs transition-colors"
|
||||
:class="isDark
|
||||
? 'text-white/50 hover:text-white/80 hover:bg-white/5'
|
||||
: 'text-black/40 hover:text-black/70 hover:bg-black/5'"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<template v-if="selectedArticle">
|
||||
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
@click="selectedArticle = null"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<template v-if="activeThread">
|
||||
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
@click="clearActiveContact"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<!-- Sub-tab switcher -->
|
||||
<div class="flex gap-1 px-4 pt-3 pb-1">
|
||||
<div class="flex gap-2 px-4 pt-3 pb-1">
|
||||
<button
|
||||
v-for="tab in subTabs"
|
||||
:key="tab.id"
|
||||
class="text-xs px-2.5 py-1 rounded-md transition-all duration-150"
|
||||
class="text-xs px-2.5 min-h-[44px] rounded-md transition-all duration-150 flex items-center justify-center"
|
||||
:class="activeSubTab === tab.id
|
||||
? 'nav-tab-active'
|
||||
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
|
||||
@@ -124,11 +124,11 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1.5">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-for="kind in noteKinds"
|
||||
:key="kind.id"
|
||||
class="text-xs px-2 py-1 rounded-md transition-all duration-150"
|
||||
class="text-xs px-2.5 min-h-[44px] rounded-md transition-all duration-150 flex items-center justify-center"
|
||||
:class="activeKind === kind.id
|
||||
? 'nav-tab-active'
|
||||
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
|
||||
@@ -188,7 +188,7 @@
|
||||
</p>
|
||||
<div class="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
class="text-xs px-1.5 py-0.5 rounded bg-white/5 text-accent/60 hover:text-accent hover:bg-accent/10 transition-colors"
|
||||
class="text-xs px-3 py-2 min-h-[44px] min-w-[44px] rounded bg-white/5 text-accent/60 hover:text-accent hover:bg-accent/10 transition-colors flex items-center justify-center"
|
||||
@click.stop="openZap(note)"
|
||||
>
|
||||
Zap
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-white/90">Zap</h3>
|
||||
<button
|
||||
class="w-6 h-6 flex items-center justify-center rounded text-white/40 hover:text-white/70 transition-colors"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/40 hover:text-white/70 transition-colors"
|
||||
@click="close"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Previous button -->
|
||||
<button
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all hover:scale-105 active:scale-95"
|
||||
class="min-w-[44px] min-h-[44px] rounded-full flex items-center justify-center shrink-0 transition-all hover:scale-105 active:scale-95"
|
||||
:class="hasPrevious
|
||||
? isDark ? 'text-white/70 hover:text-white/90' : 'text-gray-600 hover:text-gray-800'
|
||||
: isDark ? 'text-white/20' : 'text-gray-300'"
|
||||
@@ -66,7 +66,7 @@
|
||||
</button>
|
||||
<!-- Next button -->
|
||||
<button
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all hover:scale-105 active:scale-95"
|
||||
class="min-w-[44px] min-h-[44px] rounded-full flex items-center justify-center shrink-0 transition-all hover:scale-105 active:scale-95"
|
||||
:class="hasNext
|
||||
? isDark ? 'text-white/70 hover:text-white/90' : 'text-gray-600 hover:text-gray-800'
|
||||
: isDark ? 'text-white/20' : 'text-gray-300'"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center gap-2 px-4 py-2 bg-black/60 backdrop-blur-md border-b border-white/5 shrink-0">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
|
||||
title="Back"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
Update to v{{ store.updatesAvailable.get(plugin.id) }}
|
||||
</button>
|
||||
<button
|
||||
class="text-xs p-1 rounded text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors"
|
||||
class="text-xs min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors"
|
||||
@click="editingPlugin = editingPlugin === plugin.id ? null : plugin.id"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="p-4 border-b border-white/[0.08] flex items-center justify-between shrink-0">
|
||||
<h2 class="text-sm font-bold text-white/90">Settings</h2>
|
||||
<button
|
||||
class="p-1.5 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
|
||||
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -19,7 +19,7 @@
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
class="text-xs px-2 py-1 rounded-md whitespace-nowrap transition-all duration-150"
|
||||
class="text-xs px-3 min-h-[44px] flex items-center justify-center rounded-md whitespace-nowrap transition-all duration-150"
|
||||
:class="activeTab === tab.id
|
||||
? 'nav-tab-active'
|
||||
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
|
||||
|
||||
Reference in New Issue
Block a user