sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-18 13:25:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Web design tweaks

Browse source
This commit is contained in:
Peter Steinberger 2025-06-20 06:59:22 +02:00
parent 70312fda17
commit b228ffb64c
4 changed files with 16 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
web/src/client/components/app-header.ts
View file

@ -67,9 +67,9 @@ export class AppHeader extends LitElement {
${exitedSessions.length > 0
? html`
<button
class="btn-ghost font-mono text-xs ${this.hideExited
? 'text-accent-green border border-accent-green'
: ''}"
class="btn-secondary font-mono text-xs px-4 py-2 ${this.hideExited
? ''
: 'bg-accent-green text-dark-bg hover:bg-accent-green-darker'}"
@click=${() =>
this.dispatchEvent(
new CustomEvent('hide-exited-change', {
@ -78,8 +78,8 @@ export class AppHeader extends LitElement {
)}
>
${this.hideExited
? `Show Exited (${exitedSessions.length})`
: `Hide Exited (${exitedSessions.length})`}
? `Show (${exitedSessions.length})`
: `Hide (${exitedSessions.length})`}
</button>
`
: ''}
@ -132,31 +132,19 @@ export class AppHeader extends LitElement {
${exitedSessions.length > 0
? html`
<button
class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
style="background: black; color: #d4d4d4; border: 1px solid ${this.hideExited
? '#23d18b'
: '#888'};"
class="btn-secondary font-mono text-xs px-4 py-2 ${this.hideExited
? ''
: 'bg-accent-green text-dark-bg hover:bg-accent-green-darker'}"
@click=${() =>
this.dispatchEvent(
new CustomEvent('hide-exited-change', {
detail: !this.hideExited,
})
)}
@mouseover=${(e: Event) => {
const btn = e.target as HTMLElement;
const borderColor = this.hideExited ? '#23d18b' : '#888';
btn.style.background = borderColor;
btn.style.color = 'black';
}}
@mouseout=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'black';
btn.style.color = '#d4d4d4';
}}
>
${this.hideExited
? `SHOW EXITED (${exitedSessions.length})`
: `HIDE EXITED (${exitedSessions.length})`}
? `Show Exited (${exitedSessions.length})`
: `Hide Exited (${exitedSessions.length})`}
</button>
`
: ''}

6
web/src/client/components/file-browser.ts
View file

@ -237,9 +237,9 @@ export class FileBrowser extends LitElement {
`
: ''}
<div class="p-4 border-t border-dark-border flex gap-4 justify-end flex-shrink-0">
<button class="btn-ghost font-mono" @click=${this.handleCancel}>Cancel</button>
<button class="btn-primary font-mono" @click=${this.handleSelect}>Select</button>
<div class="p-4 border-t border-dark-border flex gap-4 flex-shrink-0">
<button class="btn-ghost font-mono flex-1 py-3" @click=${this.handleCancel}>Cancel</button>
<button class="btn-primary font-mono flex-1 py-3" @click=${this.handleSelect}>Select</button>
</div>
</div>
</div>

6
web/src/client/components/session-create-form.ts
View file

@ -284,16 +284,16 @@ export class SessionCreateForm extends LitElement {
/>
</div>
<div class="flex gap-4 justify-end">
<div class="flex gap-4 mt-6">
<button
class="btn-ghost font-mono"
class="btn-ghost font-mono flex-1 py-3"
@click=${this.handleCancel}
?disabled=${this.isCreating}
>
Cancel
</button>
<button
class="btn-primary font-mono disabled:opacity-50 disabled:cursor-not-allowed"
class="btn-primary font-mono flex-1 py-3 disabled:opacity-50 disabled:cursor-not-allowed"
@click=${this.handleCreate}
?disabled=${this.disabled ||
this.isCreating ||

1
web/tailwind.config.js
View file

@ -50,7 +50,6 @@ module.exports = {
"vs-nav-active": "#00ff88",
"vs-highlight": "#8b6914",
},
},
boxShadow: {
'glow-green': '0 0 20px rgba(0, 255, 136, 0.4)',
'glow-green-sm': '0 0 10px rgba(0, 255, 136, 0.3)',