jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit entry option added

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-16 15:06:40 +05:30
parent 7f06fa347a
commit 85477e5499
2 changed files with 322 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/App.css
View File

@@ -1141,6 +1141,26 @@
gap: 0.5rem;
}
.entry-edit-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.625rem;
height: 1.625rem;
border-radius: 7px;
border: 1px solid #dbeafe;
background: #eff6ff;
color: #3b82f6;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
padding: 0;
flex-shrink: 0;
}
.entry-edit-btn:hover {
background: #dbeafe;
border-color: #93c5fd;
}
.entry-delete-btn {
display: flex;
align-items: center;
@@ -1922,6 +1942,115 @@
cursor: not-allowed;
}
/* Edit entry modal */
.entry-modal-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.entry-modal-edit {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: none;
background: #eff6ff;
color: #3b82f6;
cursor: pointer;
transition: background 0.2s, color 0.2s;
flex-shrink: 0;
}
.entry-modal-edit:hover {
background: #dbeafe;
color: #2563eb;
}
.edit-entry-modal {
padding: 1.5rem;
}
.edit-entry-fields {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.edit-entry-title-input {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
color: #111827;
background: #f9fafb;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s;
}
.edit-entry-title-input:focus {
border-color: #6ee7b7;
background: #fff;
}
.edit-entry-content-input {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font-size: 0.9375rem;
font-family: "Sniglet", system-ui;
color: #374151;
background: #f9fafb;
outline: none;
box-sizing: border-box;
resize: vertical;
line-height: 1.6;
transition: border-color 0.2s;
}
.edit-entry-content-input:focus {
border-color: #6ee7b7;
background: #fff;
}
.edit-entry-content-input:disabled,
.edit-entry-title-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.edit-entry-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
}
.edit-entry-save {
flex: 1;
max-width: 10rem;
padding: 0.625rem 1rem;
border: none;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
font-family: inherit;
background: #10b981;
color: #fff;
}
.edit-entry-save:hover:not(:disabled) {
background: #059669;
}
.edit-entry-save:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ---- Responsive: tablet+ (≥ 768px) ---- */
@media (min-width: 768px) {
.entry-modal-overlay {
@@ -2698,6 +2827,25 @@
color: #f87171;
}
[data-theme="dark"] .entry-edit-btn {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
[data-theme="dark"] .entry-edit-btn:hover {
background: rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.35);
}
[data-theme="dark"] .entry-modal-edit {
background: rgba(59, 130, 246, 0.1);
color: #60a5fa;
}
[data-theme="dark"] .entry-modal-edit:hover {
background: rgba(59, 130, 246, 0.2);
color: #93c5fd;
}
[data-theme="dark"] .entry-delete-btn {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.2);
@@ -2708,6 +2856,18 @@
border-color: rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .edit-entry-title-input,
[data-theme="dark"] .edit-entry-content-input {
background: #1a1a1a;
border-color: #2d2d2d;
color: #e8f5e8;
}
[data-theme="dark"] .edit-entry-title-input:focus,
[data-theme="dark"] .edit-entry-content-input:focus {
border-color: #4ade80;
background: #151515;
}
[data-theme="dark"] .delete-confirm-modal {
background: var(--color-surface);
}