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
@@ -109,6 +109,7 @@
|
||||
<Modal
|
||||
bind:open={show}
|
||||
autoclose={false}
|
||||
dismissable={false}
|
||||
placement="top-center"
|
||||
size="lg"
|
||||
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"
|
||||
@@ -116,10 +117,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>Entry Config: {tmp_entry_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-[60vh] overflow-y-auto px-4">
|
||||
@@ -130,8 +134,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
|
||||
@@ -139,8 +143,8 @@
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm transition-all {tab === 'meta'
|
||||
? 'variant-filled-primary'
|
||||
: 'variant-soft-surface'}"
|
||||
? 'preset-filled-primary'
|
||||
: 'preset-tonal-surface'}"
|
||||
onclick={() => (tab = 'meta')}
|
||||
>
|
||||
<Shapes size="1.1em" class="mr-1" /> Metadata
|
||||
@@ -148,8 +152,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
|
||||
@@ -157,8 +161,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
|
||||
@@ -170,7 +174,7 @@
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-secondary w-full"
|
||||
class="btn preset-tonal-secondary w-full"
|
||||
onclick={() => {
|
||||
show = false;
|
||||
on_prepend?.();
|
||||
@@ -180,7 +184,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-secondary w-full"
|
||||
class="btn preset-tonal-secondary w-full"
|
||||
onclick={() => {
|
||||
show = false;
|
||||
on_append?.();
|
||||
@@ -190,7 +194,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-surface w-full"
|
||||
class="btn preset-tonal-surface w-full"
|
||||
onclick={() => {
|
||||
show = false;
|
||||
on_show_export?.();
|
||||
@@ -200,7 +204,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-surface w-full"
|
||||
class="btn preset-tonal-surface w-full"
|
||||
onclick={() => {
|
||||
/* Clone logic here */ alert(
|
||||
'Clone not yet implemented in modal'
|
||||
@@ -221,8 +225,8 @@
|
||||
type="button"
|
||||
class="btn btn-sm {tmp_entry_obj.category_code ===
|
||||
cat.code
|
||||
? 'variant-filled-primary'
|
||||
: 'variant-soft-primary'}"
|
||||
? 'preset-filled-primary'
|
||||
: 'preset-tonal-primary'}"
|
||||
onclick={() => {
|
||||
tmp_entry_obj.category_code = cat.code;
|
||||
handle_update_entry();
|
||||
@@ -240,7 +244,7 @@
|
||||
<label class="label">
|
||||
<span class="text-sm font-bold opacity-70">Category</span>
|
||||
<select
|
||||
class="select variant-form-material"
|
||||
class="select"
|
||||
bind:value={tmp_entry_obj.category_code}
|
||||
onchange={() => {
|
||||
handle_update_entry();
|
||||
@@ -263,7 +267,7 @@
|
||||
<input
|
||||
type="text"
|
||||
bind:value={tmp_entry_obj.tags}
|
||||
class="input variant-form-material grow"
|
||||
class="input grow"
|
||||
placeholder="meeting, urgent, ideas"
|
||||
onchange={() => {
|
||||
handle_update_entry();
|
||||
@@ -287,7 +291,7 @@
|
||||
handle_update_entry();
|
||||
on_save();
|
||||
}}
|
||||
class="input variant-form-material"
|
||||
class="input"
|
||||
/>
|
||||
</label>
|
||||
<label class="label">
|
||||
@@ -297,7 +301,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_entry_obj.sort =
|
||||
(tmp_entry_obj.sort ?? 0) - 1;
|
||||
@@ -310,7 +314,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-icon-sm variant-soft-surface"
|
||||
class="btn-icon btn-icon-sm preset-tonal-surface"
|
||||
onclick={() => {
|
||||
tmp_entry_obj.sort =
|
||||
(tmp_entry_obj.sort ?? 0) + 1;
|
||||
@@ -402,7 +406,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_entry_obj.sort =
|
||||
(tmp_entry_obj.sort ?? 0) - 1;
|
||||
@@ -416,7 +420,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-icon-sm variant-soft-surface"
|
||||
class="btn-icon btn-icon-sm preset-tonal-surface"
|
||||
onclick={() => {
|
||||
tmp_entry_obj.sort =
|
||||
(tmp_entry_obj.sort ?? 0) + 1;
|
||||
@@ -466,7 +470,7 @@
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm variant-filled-error w-full font-bold"
|
||||
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 w-full font-bold"
|
||||
onclick={() => {
|
||||
show = false;
|
||||
on_force_reset?.();
|
||||
@@ -481,7 +485,7 @@
|
||||
<section class="pt-12">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm variant-soft-error w-full"
|
||||
class="btn btn-sm preset-tonal-error w-full"
|
||||
onclick={() => {
|
||||
alert('Delete logic handled in parent component');
|
||||
}}
|
||||
@@ -505,7 +509,7 @@
|
||||
{#snippet footer()}
|
||||
<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={() => (show = false)}
|
||||
>
|
||||
<Check size="1.2em" class="mr-2" />
|
||||
|
||||
Reference in New Issue
Block a user