Unify primary buttons with gradient pill design across the app.
Deploy Ladill Servers / deploy (push) Successful in 29s

Add shared btn-primary components and plus icons on create/new actions for a consistent Ladill UI.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-08 22:49:50 +00:00
co-authored by Cursor
parent 18057106c1
commit 817afb0c2b
30 changed files with 131 additions and 44 deletions
@@ -57,7 +57,7 @@
{{-- Toolbar --}}
<div class="flex flex-wrap items-center gap-3 rounded-xl border border-slate-200 bg-white p-4">
<button @click="createModal = true; createType = 'folder'" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition">
<button @click="createModal = true; createType = 'folder'" class="btn-primary">
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/></svg>
New Folder
</button>
@@ -203,7 +203,7 @@
<input type="text" x-model="createName" placeholder="Enter name..." class="mt-4 w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
<div class="mt-4 flex justify-end gap-3">
<button type="button" @click="createModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
<button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Create</button>
<button type="submit" class="btn-primary" :disabled="loading">Create</button>
</div>
</form>
</div>
@@ -221,7 +221,7 @@
<div class="flex-1 p-4"><textarea x-model="editContent" class="w-full h-full font-mono text-sm border border-slate-200 rounded-lg p-4 focus:border-indigo-500 focus:ring-indigo-500 resize-none"></textarea></div>
<div class="flex justify-end gap-3 border-t border-slate-200 px-6 py-4">
<button @click="editModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
<button @click="saveEditedFile" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Save</button>
<button @click="saveEditedFile" class="btn-primary" :disabled="loading">Save</button>
</div>
</div>
</div>
@@ -236,7 +236,7 @@
<input type="text" x-model="renameName" class="mt-4 w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
<div class="mt-4 flex justify-end gap-3">
<button type="button" @click="renameModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
<button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Rename</button>
<button type="submit" class="btn-primary" :disabled="loading">Rename</button>
</div>
</form>
</div>
@@ -255,7 +255,7 @@
<p class="mt-1 text-xs text-slate-400">Relative to home directory, e.g. /public_html/backup</p>
<div class="mt-4 flex justify-end gap-3">
<button type="button" @click="moveModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
<button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading" x-text="moveAction === 'move' ? 'Move' : 'Copy'"></button>
<button type="submit" class="btn-primary" :disabled="loading" x-text="moveAction === 'move' ? 'Move' : 'Copy'"></button>
</div>
</form>
</div>
@@ -273,7 +273,7 @@
<input type="text" x-model="archiveName" placeholder="archive.zip" class="mt-1 w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
<div class="mt-4 flex justify-end gap-3">
<button type="button" @click="compressModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
<button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Compress</button>
<button type="submit" class="btn-primary" :disabled="loading">Compress</button>
</div>
</form>
</div>
@@ -298,7 +298,7 @@
</div>
<div class="mt-4 flex justify-end gap-3">
<button type="button" @click="chmodModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
<button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Apply</button>
<button type="submit" class="btn-primary" :disabled="loading">Apply</button>
</div>
</form>
</div>