style(journals): standardize Skeleton v4 preset-* classes across all journal components
- Replace all Skeleton v2 variant-* classes with v4 preset-* equivalents - variant-filled-* → preset-filled-* - variant-soft-* / variant-ghost-* → preset-tonal-* - variant-outline-* → preset-outlined-* - variant-form-material removed from inputs/selects/textareas - input-bordered removed - Fix dark mode: journal entry content hover (dark:hover:bg-blue-950) - Fix dark mode: journal obj view section/description bg and text colors - Fix modal headers: add dismissable=false + explicit X close button (all 3 journals modals) - Fix DaisyUI wrappers removed from modal_journal_entry_append - app.css: add global select padding-inline to fix text-against-border issue
This commit is contained in:
Scott Idem
@@ -147,78 +147,67 @@
|
||||
size="xl"
|
||||
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col gap-1 mx-auto w-full"
|
||||
>
|
||||
<div class="modal">
|
||||
<div class="modal-box">
|
||||
<div class="flex flex-col gap-1">
|
||||
<!-- Checkbox Options -->
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="append_timestamp_header"
|
||||
bind:checked={add_timestamp_header}
|
||||
class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
|
||||
/>
|
||||
<label
|
||||
for="append_timestamp_header"
|
||||
class="p-2 inline-block"
|
||||
>
|
||||
Use timestamp as Markdown header
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
id="append_timestamp_header_w_day_of_week"
|
||||
bind:checked={add_timestamp_header_w_day_of_week}
|
||||
class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
|
||||
/>
|
||||
<label
|
||||
for="append_timestamp_header_w_day_of_week"
|
||||
class="p-2 inline-block"
|
||||
>
|
||||
Include day of week
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Text Header Input -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Checkbox Options -->
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<label class="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Markdown header for content (Optional)"
|
||||
bind:value={add_text_header}
|
||||
class="grow min-h-12 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
|
||||
type="checkbox"
|
||||
id="append_timestamp_header"
|
||||
bind:checked={add_timestamp_header}
|
||||
class="checkbox"
|
||||
/>
|
||||
<span>Use timestamp as Markdown header</span>
|
||||
</label>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<textarea
|
||||
bind:value={add_text}
|
||||
class="grow min-h-48 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
|
||||
placeholder="Content to {mode === 'auto'
|
||||
? journal_config?.entry_add_text
|
||||
: mode}..."
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
<label class="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="append_timestamp_header_w_day_of_week"
|
||||
bind:checked={add_timestamp_header_w_day_of_week}
|
||||
class="checkbox"
|
||||
/>
|
||||
<span>Include day of week</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="modal-action flex justify-end gap-2 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
disabled={!has_changes}
|
||||
onclick={handle_save}
|
||||
class="btn btn-sm md:btn-md lg:btn-lg min-w-32 hover:variant-outline-success hover:preset-filled-success-500"
|
||||
class:preset-filled-primary-500={has_changes}
|
||||
class:preset-filled-surface-500={!has_changes}
|
||||
>
|
||||
<Check class="mr-1" />
|
||||
Update
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={on_close}
|
||||
class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
|
||||
>
|
||||
<X class="mr-1" />
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<!-- Text Header Input -->
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Markdown header for content (Optional)"
|
||||
bind:value={add_text_header}
|
||||
class="input"
|
||||
/>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<textarea
|
||||
bind:value={add_text}
|
||||
class="textarea min-h-48"
|
||||
placeholder="Content to {mode === 'auto'
|
||||
? journal_config?.entry_add_text
|
||||
: mode}..."
|
||||
>
|
||||
</textarea>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={!has_changes}
|
||||
onclick={handle_save}
|
||||
class="btn preset-filled-primary"
|
||||
class:opacity-50={!has_changes}
|
||||
>
|
||||
<Check class="mr-1" />
|
||||
Update
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={on_close}
|
||||
class="btn preset-tonal-surface"
|
||||
>
|
||||
<X class="mr-1" />
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user