elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

style: highlight delete actions and align event row buttons

Browse Source 
Add btn-icon danger styling, strengthen btn-delete and photo delete, and fix events table action layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-06-03 17:27:46 +02:00
parent ac627a022f
commit 9f76c200b0
6 changed files with 82 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+53 -23
View File
@@ -1180,12 +1180,29 @@ html.scheme-dark .themed-select-option.is-selected {
color: var(--app-accent-light);
}
.btn-icon.logout:hover {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
.btn-icon.danger {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.35);
color: #f87171;
}
.btn-icon.danger:hover {
background: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
color: #fca5a5;
}
.btn-icon.danger:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-icon.logout:hover {
background: var(--app-accent-bg);
border-color: var(--app-accent);
color: var(--app-accent-light);
}
.dashboard-main {
display: grid;
grid-template-columns: 350px 1fr;
@@ -2181,12 +2198,12 @@ html.scheme-dark .themed-select-option.is-selected {
}
.btn-delete {
background: none;
border: none;
color: #475569;
background: rgba(239, 68, 68, 0.18);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #f87171;
cursor: pointer;
padding: 6px;
border-radius: 6px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
@@ -2202,8 +2219,9 @@ html.scheme-dark .themed-select-option.is-selected {
}
.btn-delete:hover {
color: #f43f5e;
background: rgba(244, 63, 94, 0.1);
color: #fca5a5;
background: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
}
.btn-pdf {
@@ -2684,15 +2702,18 @@ html.scheme-dark .themed-select-option.is-selected {
}
.events-actions-td {
width: 1%;
min-width: 88px;
white-space: nowrap;
vertical-align: middle;
}
.events-actions-td .btn-icon {
margin-left: 4px;
}
.events-actions-td .btn-icon:first-child {
margin-left: 0;
.events-actions-cell {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: nowrap;
}
.events-table tbody tr:hover {
@@ -3172,9 +3193,9 @@ html.theme-cupertino .events-scroll-container {
position: absolute;
top: 8px;
right: 8px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #f43f5e;
background: rgba(239, 68, 68, 0.22);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #fca5a5;
border-radius: 50%;
width: 32px;
height: 32px;
@@ -3186,9 +3207,10 @@ html.theme-cupertino .events-scroll-container {
}
.photo-btn-delete:hover {
background: #f43f5e;
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
color: #ffffff;
transform: scale(1.1);
transform: scale(1.08);
}
.photo-caption-bar {
@@ -4083,15 +4105,23 @@ html.theme-cupertino .events-scroll-container {
min-height: auto !important;
}
.btn-inline-icon {
width: auto !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
}
.btn.danger {
background: rgba(239, 68, 68, 0.15) !important;
background: rgba(239, 68, 68, 0.2) !important;
color: #fca5a5 !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
border: 1px solid rgba(239, 68, 68, 0.38) !important;
}
.btn.danger:hover {
background: rgba(239, 68, 68, 0.25) !important;
background: rgba(239, 68, 68, 0.32) !important;
border-color: #ef4444 !important;
color: #fecaca !important;
}
/* Crew Avatar Card Styling */
client/src/components/CrewForm.tsx
+1 -1
View File
@@ -818,7 +818,7 @@ export default function CrewForm({
<button className="btn-icon" onClick={() => openEditMember(m)} title="Edit">
<Edit2 size={14} />
</button>
<button className="btn-icon logout" onClick={() => handleDeleteMember(m.payloadId)} title="Delete">
<button className="btn-icon danger" onClick={() => handleDeleteMember(m.payloadId)} title="Delete">
<Trash2 size={14} />
</button>
</div>
client/src/components/LogEntryEditor.tsx
+25 -20
View File
@@ -1820,23 +1820,25 @@ export default function LogEntryEditor({
</td>
{!readOnly && (
<td className="events-actions-td">
<button
type="button"
className="btn-icon"
onClick={() => handleEditEvent(idx)}
title={t('logs.edit_event')}
disabled={editingEventIndex !== null && editingEventIndex !== idx}
>
<Pencil size={14} />
</button>
<button
type="button"
className="btn-icon logout"
onClick={() => handleDeleteEvent(idx)}
title={t('logs.delete_event')}
>
<Trash2 size={14} />
</button>
<div className="events-actions-cell">
<button
type="button"
className="btn-icon"
onClick={() => handleEditEvent(idx)}
title={t('logs.edit_event')}
disabled={editingEventIndex !== null && editingEventIndex !== idx}
>
<Pencil size={14} />
</button>
<button
type="button"
className="btn-icon danger"
onClick={() => handleDeleteEvent(idx)}
title={t('logs.delete_event')}
>
<Trash2 size={14} />
</button>
</div>
</td>
)}
</tr>
@@ -2260,9 +2262,8 @@ export default function LogEntryEditor({
{!readOnly && (
<button
type="button"
className="btn secondary"
className="btn danger btn-sm btn-inline-icon"
onClick={handleDeleteTrack}
style={{ width: 'auto', padding: '6px 12px', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px', background: 'rgba(239, 68, 68, 0.1)', color: '#ef4444', borderColor: 'rgba(239, 68, 68, 0.2)' }}
title={t('logs.gps_track_delete')}
>
<Trash2 size={14} />
@@ -2295,7 +2296,11 @@ export default function LogEntryEditor({
<button type="button" className="btn secondary" style={{ width: 'auto', padding: '4px 10px', fontSize: '13px' }} onClick={() => downloadNmeaArchive(nmeaArchive)}>
<Download size={14} />
</button>
<button type="button" className="btn secondary" style={{ width: 'auto', padding: '4px 10px', fontSize: '13px' }} onClick={handleDeleteNmeaArchive}>
<button
type="button"
className="btn danger btn-sm btn-inline-icon"
onClick={handleDeleteNmeaArchive}
>
<Trash2 size={14} />
</button>
</div>
client/src/components/PersonPoolForm.tsx
+1 -1
View File
@@ -147,7 +147,7 @@ export default function PersonPoolForm() {
</button>
<button
type="button"
className="btn-icon logout"
className="btn-icon danger"
onClick={() => void handleDelete(person.payloadId)}
title="Delete"
>
client/src/components/SettingsForm.tsx
+1 -1
View File
@@ -429,7 +429,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
<td>
<button
type="button"
className="btn-icon logout"
className="btn-icon danger"
onClick={() => handleRevoke(c.id, c.username)}
title="Revoke access"
>
client/src/components/VesselPoolForm.tsx
+1 -1
View File
@@ -193,7 +193,7 @@ export default function VesselPoolForm() {
</button>
<button
type="button"
className="btn-icon logout"
className="btn-icon danger"
onClick={() => void handleDelete(v.payloadId)}
>
<Trash2 size={14} />