colors and filters

front/js/svelte/records/elements/FieldHeader.svelte

@@ -10,7 +10,7 @@
             >{field.label}</label
             >
             {#if field.help}
-                <small class="help-text">{field.help}</small>
+                <small class="help-text light-text">{field.help}</small>
             {/if}
         </div>
         <span

front/js/svelte/records/elements/Reference.svelte

@@ -51,7 +51,6 @@
 {/if}
 <div class="inline-card-wrapper">
     <ReferenceInlineButtons
-        buttonClass="mt-2"
         recordId={null}
         schemas={collections}
         on:insert={insert}

front/js/svelte/records/elements/ReferenceInlineButtons.svelte

@@ -3,17 +3,15 @@
     import Icon from "../../common/Icon.svelte";
     import InlineEdit from "../InlineEdit.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
-
+    import DialogRecord from "../../dialog/DialogRecord.svelte";
+    import axios from "axios";
     const dispatch = createEventDispatcher();
-    // export let field;
-    // export let buttonLabel = "";
-    // export let buttonClass = "";
-
     const channel = getContext("channel");
     export let schemas;
     export let recordId;
     $: showOptions = false;
     let browseModal;
+    let dialogRecord;
     let inLineCreateRecord;
 
     function openBrowseModal(e, schema) {
@@ -25,6 +23,7 @@
         e.preventDefault();
         console.log("Save inline");
         inLineCreateRecord = null;
+        dialogRecord.close()
         dispatch("save", {
             records: e.detail.records,
             after: recordId,
@@ -47,6 +46,7 @@
             .get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
             .then((response) => {
                 inLineCreateRecord = response.data;
+                dialogRecord.open()
                 showOptions = false;
             })
             .catch((error) => {
@@ -95,53 +95,31 @@
     {/if}
 {:else}
     <div style="display:flex;align-items: center;gap: 4px">
-            <button
-                    class="button"
-                    on:click={(e) => createInlineReference(e, schemas[0].name)}
-            >New
-            </button>
-            <button
-                    class="button"
-                    on:click={(e) => openBrowseModal(e, schemas[0].name)}
-            >
-                <Icon icon="magnifying-glass"/>
-            </button
-            >
+        <button
+                class="button"
+                on:click={(e) => createInlineReference(e, schemas[0].name)}
+        >New
+        </button>
+        <button
+                class="button"
+                on:click={(e) => openBrowseModal(e, schemas[0].name)}
+        >
+            <Icon icon="magnifying-glass"/>
+        </button
+        >
     </div>
 {/if}
 
-{#if inLineCreateRecord}
-    <InlineEdit
-            {...inLineCreateRecord}
-            on:cancel={(e) => (inLineCreateRecord = null)}
-            on:inlinesaved={save}
-    />
-{/if}
+<DialogRecord bind:this={dialogRecord}>
+    {#if inLineCreateRecord}
+
+        <InlineEdit
+                {...inLineCreateRecord}
+                on:cancel={(e) => (inLineCreateRecord = null)}
+                on:inlinesaved={save}
+        />
+
+    {/if}
+</DialogRecord>
 
 <Dialog bind:this={browseModal} on:insert={insert}/>
-
-<style>
-    :global(.inline-card-wrapper) {
-        display: flex;
-        flex-direction: column;
-    }
-
-    :global(.inline-card-wrapper .inline-card-button) {
-        visibility: hidden;
-    }
-
-    :global(.inline-card-wrapper .inline-card-button.is-first) {
-        visibility: visible;
-    }
-
-    :global(.inline-card-wrapper:hover .inline-card-button) {
-        visibility: visible;
-    }
-
-    .inline-card-button {
-        /* padding: 0 5px; */
-        display: inline-block;
-        z-index: 1;
-        margin: 10px auto 0;
-    }
-</style>

front/js/svelte/records/elements/ReferenceTags.svelte

@@ -114,14 +114,14 @@
                         on:click={(e) => insert(e, option)}
                         on:keypress={(e) => insert(e, option)}
                 >
-            <span class="dropdown-item">
-                {previewTitle(channel.schemas, option)}
-            </span>
+                    {previewTitle(channel.schemas, option)}
                 </div>
 
             {:else}
-
-                Start typing...
+                <div
+                        class="start-typing">
+                    Start typing...
+                </div>
             {/each}
         {/if}
         {#if search }
@@ -132,9 +132,7 @@
                     on:click={(e) => saveNew(e,search)}
                     on:keypress={(e) => saveNew(e,search)}
             >
-                <span class="dropdown-item">
-                    Add "{search}"
-                </span>
+                Add "{search}"
             </div>
         {/if}
     </div>
@@ -143,7 +141,7 @@
 {#if references.length > 0}
     <div style="display: flex;align-items: center;gap: 4px">
         {#each references as record (record.id)}
-            <span class="autocomplete-selected-value">
+            <span class="reference-tags-selected-value">
                  <a
                          class="record-title"
                          href="{channel.lucentUrl}/records/{record.id}"

front/js/svelte/records/elements/Slug.svelte

@@ -20,7 +20,7 @@
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
     />
-    <div class="system-help-text">
+    <div class="system-help-text light-text">
         Leave this empty to autogenerate from <i>{field.source}</i>
     </div>
     {#if errorMessage}