[#976] added optional RelationOptions.DisplayFields and refactored the relation picker UI

ui/src/components/settings/EmailTestPopup.svelte

@@ -117,7 +117,7 @@
     </form>
 
     <svelte:fragment slot="footer">
-        <button type="button" class="btn btn-secondary" on:click={hide} disabled={isSubmitting}>Close</button>
+        <button type="button" class="btn btn-transparent" on:click={hide} disabled={isSubmitting}>Close</button>
         <button
             type="submit"
             form={formId}

ui/src/components/settings/ImportPopup.svelte

@@ -137,7 +137,7 @@
     {/each}
 
     <svelte:fragment slot="footer">
-        <button type="button" class="btn btn-secondary" on:click={hide} disabled={isImporting}>Close</button>
+        <button type="button" class="btn btn-transparent" on:click={hide} disabled={isImporting}>Close</button>
         <button
             type="button"
             class="btn btn-expanded"

ui/src/components/settings/PageApplication.svelte

@@ -129,7 +129,7 @@
                         {#if hasChanges}
                             <button
                                 type="button"
-                                class="btn btn-secondary btn-hint"
+                                class="btn btn-transparent btn-hint"
                                 disabled={isSaving}
                                 on:click={() => reset()}
                             >

ui/src/components/settings/PageAuthProviders.svelte

@@ -110,7 +110,7 @@
                     {#if hasChanges}
                         <button
                             type="button"
-                            class="btn btn-secondary btn-hint"
+                            class="btn btn-transparent btn-hint"
                             disabled={isSaving}
                             on:click={() => reset()}
                         >

ui/src/components/settings/PageExportCollections.svelte

@@ -88,7 +88,7 @@
                 >
                     <button
                         type="button"
-                        class="btn btn-sm btn-secondary fade copy-schema"
+                        class="btn btn-sm btn-transparent fade copy-schema"
                         on:click={() => copy()}
                     >
                         <span class="txt">Copy</span>

ui/src/components/settings/PageImportCollections.svelte

@@ -382,7 +382,7 @@
 
                 <div class="flex m-t-base">
                     {#if !!schemas}
-                        <button type="button" class="btn btn-secondary link-hint" on:click={() => clear()}>
+                        <button type="button" class="btn btn-transparent link-hint" on:click={() => clear()}>
                             <span class="txt">Clear</span>
                         </button>
                     {/if}

ui/src/components/settings/PageMail.svelte

@@ -242,7 +242,7 @@
                     {#if hasChanges}
                         <button
                             type="button"
-                            class="btn btn-secondary btn-hint"
+                            class="btn btn-transparent btn-hint"
                             disabled={isSaving}
                             on:click={() => reset()}
                         >

ui/src/components/settings/PageStorage.svelte

@@ -291,7 +291,7 @@
                     {#if hasChanges}
                         <button
                             type="button"
-                            class="btn btn-secondary btn-hint"
+                            class="btn btn-transparent btn-hint"
                             disabled={isSaving}
                             on:click={() => reset()}
                         >

ui/src/components/settings/PageTokenOptions.svelte

@@ -131,7 +131,7 @@
                     {#if hasChanges}
                         <button
                             type="button"
-                            class="btn btn-secondary btn-hint"
+                            class="btn btn-transparent btn-hint"
                             disabled={isSaving}
                             on:click={() => reset()}
                         >

ui/src/components/settings/SettingsSidebar.svelte

@@ -31,7 +31,6 @@
 
         <div class="sidebar-title">
             <span class="txt">Sync</span>
-            <small class="label label-danger label-sm">Experimental</small>
         </div>
         <a
             href="/settings/export-collections"