sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +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 ${exitedSessions.length > 0
? html` ? html`
<button <button
class="btn-ghost font-mono text-xs ${this.hideExited class="btn-secondary font-mono text-xs px-4 py-2 ${this.hideExited
? 'text-accent-green border border-accent-green' ? ''
: ''}" : 'bg-accent-green text-dark-bg hover:bg-accent-green-darker'}"
@click=${() => @click=${() =>
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('hide-exited-change', { new CustomEvent('hide-exited-change', {
@ -78,8 +78,8 @@ export class AppHeader extends LitElement {
)} )}
> >
${this.hideExited ${this.hideExited
? `Show Exited (${exitedSessions.length})` ? `Show (${exitedSessions.length})`
: `Hide Exited (${exitedSessions.length})`} : `Hide (${exitedSessions.length})`}
</button> </button>
` `
: ''} : ''}
@ -132,31 +132,19 @@ export class AppHeader extends LitElement {
${exitedSessions.length > 0 ${exitedSessions.length > 0
? html` ? html`
<button <button
class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap" class="btn-secondary font-mono text-xs px-4 py-2 ${this.hideExited
style="background: black; color: #d4d4d4; border: 1px solid ${this.hideExited ? ''
? '#23d18b' : 'bg-accent-green text-dark-bg hover:bg-accent-green-darker'}"
: '#888'};"
@click=${() => @click=${() =>
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('hide-exited-change', { new CustomEvent('hide-exited-change', {
detail: !this.hideExited, 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 ${this.hideExited
? `SHOW EXITED (${exitedSessions.length})` ? `Show Exited (${exitedSessions.length})`
: `HIDE EXITED (${exitedSessions.length})`} : `Hide Exited (${exitedSessions.length})`}
</button> </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"> <div class="p-4 border-t border-dark-border flex gap-4 flex-shrink-0">
<button class="btn-ghost font-mono" @click=${this.handleCancel}>Cancel</button> <button class="btn-ghost font-mono flex-1 py-3" @click=${this.handleCancel}>Cancel</button>
<button class="btn-primary font-mono" @click=${this.handleSelect}>Select</button> <button class="btn-primary font-mono flex-1 py-3" @click=${this.handleSelect}>Select</button>
</div> </div>
</div> </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>
<div class="flex gap-4 justify-end"> <div class="flex gap-4 mt-6">
<button <button
class="btn-ghost font-mono" class="btn-ghost font-mono flex-1 py-3"
@click=${this.handleCancel} @click=${this.handleCancel}
?disabled=${this.isCreating} ?disabled=${this.isCreating}
> >
Cancel Cancel
</button> </button>
<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} @click=${this.handleCreate}
?disabled=${this.disabled || ?disabled=${this.disabled ||
this.isCreating || this.isCreating ||

1
web/tailwind.config.js
View file

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