theming

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

@@ -62,6 +62,7 @@
         {#each references as reference (reference.id)}
             <div>
                 <PreviewReference
+                        {graph}
                     record={reference}
                     hasDelete={true}
                     on:remove={removeReference}

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

@@ -5,6 +5,8 @@
     import Dialog from "../../dialog/Dialog.svelte";
     import DialogRecord from "../../dialog/DialogRecord.svelte";
     import axios from "axios";
+    import Dropdown from "../../common/Dropdown.svelte";
+
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     export let schemas;
@@ -56,43 +58,31 @@
 </script>
 
 {#if schemas.length > 1}
-    <button
-            type="button"
-            class:is-first={!recordId}
-            class="button"
-            on:click|preventDefault={(e) => (showOptions = !showOptions)}
+    <div
+            style="display: flex;align-items: center;gap:4px"
     >
-        <Icon width={24} height={24} icon="circle-plus"/>
-    </button>
-
-    {#if showOptions}
-        <div class="bg-light lx-card d-flex">
-            {#each schemas as schema}
-                <div
-                        class="lx-card p-4 text-center me-4"
-                        style="max-width: 250px;"
-                >
-                    <p>{schema.label}</p>
-
-                    <div class="mb-2">
-                        <button
-                                class="btn btn-sm btn-primary"
-                                on:click={(e) =>
-                                createInlineReference(e, schema.name)}
-                        >New
-                        </button>
-                        <button
-                                class="btn btn-sm btn-outline-primary"
-                                on:click={(e) => openBrowseModal(e, schema.name)}
-                        >
-                            <Icon icon="magnifying-glass"/>
-                        </button
-                        >
-                    </div>
+        {#each schemas as schema}
+            <Dropdown>
+                <div slot="button" class:is-first={!recordId}>
+                    {schema.label}
                 </div>
-            {/each}
-        </div>
-    {/if}
+                <button
+                        class=" button"
+                        on:click={(e) =>
+                                createInlineReference(e, schema.name)}
+                >Create New Record
+                </button>
+                <button
+                        class="button"
+                        on:click={(e) => openBrowseModal(e, schema.name)}
+                >
+                    <Icon icon="magnifying-glass"/>
+                    Search
+                </button
+                >
+            </Dropdown>
+        {/each}
+    </div>
 {:else}
     <div style="display:flex;align-items: center;gap: 4px">
         <button

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

@@ -114,7 +114,7 @@
                         on:click={(e) => insert(e, option)}
                         on:keypress={(e) => insert(e, option)}
                 >
-                    {previewTitle(channel.schemas, option)}
+                    {previewTitle(channel.schemas, option ,graph)}
                 </div>
 
             {:else}