Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(journals): standardize Skeleton v4 preset-* classes across all journal components

Browse Source 
- 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
2026-03-06 19:15:51 -05:00
parent 3ca9503b88
commit cc6f73ca04
18 changed files with 201 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/routes/journals/ae_comp__journal_obj_id_edit.svelte
View File

@@ -173,6 +173,7 @@
<Modal
bind:open={show}
autoclose={false}
dismissable={false}
placement="top-center"
size="xl"
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -180,10 +181,13 @@
footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
>
{#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold">
<h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
<Settings class="text-primary-500" />
<span>Journal Config: {$lq__journal_obj?.name ?? '--'}</span>
</h3>
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
<X size="1.1em" />
</button>
{/snippet}
<div class="space-y-6 py-2 h-[75vh] overflow-y-auto px-4">
@@ -194,8 +198,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'actions'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'actions')}
>
<Zap size="1.1em" class="mr-1" /> Quick Actions
@@ -203,8 +207,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'general'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'general')}
>
<Layout size="1.1em" class="mr-1" /> General
@@ -212,8 +216,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'security'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'security')}
>
<ShieldCheck size="1.1em" class="mr-1" /> Status & Security
@@ -221,8 +225,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'ui'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'ui')}
>
<Palette size="1.1em" class="mr-1" /> UI/Visuals
@@ -230,8 +234,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'json'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'json')}
>
<CodeXml size="1.1em" class="mr-1" /> JSON
@@ -243,7 +247,7 @@
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button
type="button"
class="btn variant-soft-secondary w-full py-4 text-lg font-bold"
class="btn preset-tonal-secondary w-full py-4 text-lg font-bold"
onclick={() => {
show = false;
on_new_entry?.();
@@ -253,7 +257,7 @@
</button>
<button
type="button"
class="btn variant-soft-surface w-full py-4"
class="btn preset-tonal-surface w-full py-4"
onclick={() => {
show = false;
on_show_export?.();
@@ -263,7 +267,7 @@
</button>
<button
type="button"
class="btn variant-soft-surface w-full py-4"
class="btn preset-tonal-surface w-full py-4"
onclick={() => {
show = false;
on_show_import?.();
@@ -284,7 +288,7 @@
<input
type="text"
bind:value={tmp__journal_obj.name}
class="input variant-form-material"
class="input"
placeholder="e.g. Personal Log"
/>
</label>
@@ -294,7 +298,7 @@
>
<textarea
bind:value={tmp__journal_obj.description}
class="textarea variant-form-material h-32"
class="textarea h-32"
placeholder="Describe the purpose of this journal..."
></textarea>
</label>
@@ -305,7 +309,7 @@
>
<select
bind:value={tmp__journal_obj.type_code}
class="select variant-form-material"
class="select"
>
{#each $journals_loc.journal.type_code_li as type (type.code)}
<option value={type.code}
@@ -321,7 +325,7 @@
<input
type="text"
bind:value={tmp__journal_obj.group}
class="input variant-form-material"
class="input"
placeholder="Standard"
/>
</label>
@@ -355,7 +359,7 @@
/>
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-error"
class="btn-icon btn-icon-sm preset-tonal-error"
onclick={() => {
tmp__journal_obj.cfg_json.category_li.splice(
i,
@@ -369,7 +373,7 @@
{/each}
<button
type="button"
class="btn btn-sm variant-soft-primary w-full mt-2"
class="btn btn-sm preset-tonal-primary w-full mt-2"
onclick={() => {
if (!tmp__journal_obj.cfg_json.category_li)
tmp__journal_obj.cfg_json.category_li = [];
@@ -456,7 +460,7 @@
<div class="flex items-center gap-2">
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp__journal_obj.sort =
(tmp__journal_obj.sort ?? 0) - 1;
@@ -469,7 +473,7 @@
>
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp__journal_obj.sort =
(tmp__journal_obj.sort ?? 0) + 1;
@@ -501,7 +505,7 @@
<input
type="password"
bind:value={tmp__journal_obj.passcode}
class="input variant-form-material grow"
class="input grow"
placeholder="Module-level passcode"
/>
<Fingerprint class="opacity-30" />
@@ -518,7 +522,7 @@
bind:value={
tmp__journal_obj.private_passcode
}
class="input variant-form-material grow"
class="input grow"
placeholder="User-level secret"
/>
<ShieldCheck class="opacity-30" />
@@ -537,7 +541,7 @@
<section class="pt-8">
<button
type="button"
class="btn btn-sm variant-filled-error w-full shadow-lg"
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 w-full shadow-lg"
onclick={delete_journal}
>
<Trash2 size="1.1em" class="mr-2" /> Delete Entire Journal
@@ -564,7 +568,7 @@
bind:value={
tmp__journal_obj.cfg_json.pref_viewer
}
class="select variant-form-material"
class="select"
>
<option value="rendered"
>Rendered HTML (Default)</option
@@ -583,7 +587,7 @@
bind:value={
tmp__journal_obj.cfg_json.pref_editor
}
class="select variant-form-material"
class="select"
>
<option value="textarea"
>Standard Textarea</option
@@ -601,7 +605,7 @@
bind:value={
tmp__journal_obj.cfg_json.color_scheme
}
class="select variant-form-material"
class="select"
>
<option value="">Default (Slate)</option>
<option value="blue">Deep Blue</option>
@@ -619,7 +623,7 @@
bind:value={
tmp__journal_obj.cfg_json.entry_add_text
}
class="select variant-form-material"
class="select"
>
<option value="append"
>Append to End (Default)</option
@@ -826,7 +830,7 @@
bind:value={
tmp__journal_obj.cfg_json.expand_li_content
}
class="select select-sm variant-form-material"
class="select"
>
<option value="click">Click to Expand</option>
<option value="hover">Hover to Expand</option>
@@ -842,7 +846,7 @@
tmp__journal_obj.cfg_json
.entry_li_max_height
}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="">Default</option>
<option value="max-h-16">Small (16)</option>
@@ -861,7 +865,7 @@
tmp__journal_obj.cfg_json
.entry_li_click_max_height
}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="">Default</option>
<option value="active:max-h-64"
@@ -895,14 +899,14 @@
<div class="flex gap-4">
<button
type="button"
class="btn variant-ghost-surface font-bold min-w-[100px]"
class="btn preset-tonal-surface font-bold min-w-[100px]"
onclick={() => (show = false)}
>
<X size="1.2em" class="mr-2" /> Cancel
</button>
<button
type="button"
class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
class="btn preset-filled-primary font-bold min-w-[120px]"
onclick={() => handle_update_journal(true)}
>
<Check size="1.2em" class="mr-2" /> Save Changes