Merge pull request #716 from chriscross12324/bugfix/setting-panel-hierarchy

bugfix/setting-panel-hierarchy: Fixed visual inconsistencies

src/modules/features/SettingDialogue/PaneCustomisationSync.ts

@@ -21,7 +21,7 @@ export function paneCustomisationSync(
                 text: "Please set device name to identify this device. This name should be unique among your devices. While not configured, we cannot enable this feature.",
                 cls: "op-warn",
             },
-            (c) => {},
+            (c) => { },
             visibleOnly(() => this.isConfiguredAs("deviceAndVaultName", ""))
         );
         this.createEl(
@@ -31,7 +31,7 @@ export function paneCustomisationSync(
                 text: "We cannot change the device name while this feature is enabled. Please disable this feature to change the device name.",
                 cls: "op-warn-info",
             },
-            (c) => {},
+            (c) => { },
             visibleOnly(() => this.isConfiguredAs("usePluginSync", true))
         );
 

src/modules/features/SettingDialogue/PaneHatch.ts

@@ -168,7 +168,7 @@ ${stringifyYaml(responseConfig)}
 ${stringifyYaml({
                         version: this.manifestVersion,
                         ...pluginConfig,
-})}`;
+                    })}`;
                     console.log(msgConfig);
                     await navigator.clipboard.writeText(msgConfig);
                     Logger(

src/modules/features/SettingDialogue/PaneMaintenance.ts

@@ -98,7 +98,7 @@ export function paneMaintenance(
             );
     });
 
-    void addPanel(paneEl, "Syncing", () => {}, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
+    void addPanel(paneEl, "Syncing", () => { }, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
         new Setting(paneEl)
             .setName("Resend")
             .setDesc("Resend all chunks to the remote.")
@@ -283,7 +283,7 @@ export function paneMaintenance(
             .addOnUpdate(this.onlyOnCouchDB);
     });
 
-    void addPanel(paneEl, "Total Overhaul", () => {}, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
+    void addPanel(paneEl, "Total Overhaul", () => { }, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
         new Setting(paneEl)
             .setName("Rebuild everything")
             .setDesc("Rebuild local and remote database with local files.")
@@ -307,7 +307,7 @@ export function paneMaintenance(
                     })
             );
     });
-    void addPanel(paneEl, "Rebuilding Operations (Remote Only)", () => {}, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
+    void addPanel(paneEl, "Rebuilding Operations (Remote Only)", () => { }, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
         new Setting(paneEl)
             .setName("Perform cleanup")
             .setDesc(

src/modules/features/SettingDialogue/PaneRemoteConfig.ts

@@ -321,6 +321,8 @@ export function paneRemoteConfig(
             },
             onUpdate: this.enableOnlySyncDisabled,
         });
+    });
+    
     void addPanel(paneEl, "Peer-to-Peer", undefined, this.onlyOnOnlyP2P).then((paneEl) => {
         const syncWarnP2P = this.createEl(paneEl, "div", {
             text: "",
@@ -512,7 +514,7 @@ The pane also can be launched by \`P2P Replicator\` command from the Command Pal
                 paneEl,
                 "div",
                 { text: "" },
-                    (el) => {},
+                (el) => { },
                 visibleOnly(() => this.editingSettings.useJWT)
             );
 
@@ -595,8 +597,7 @@ The pane also can be launched by \`P2P Replicator\` command from the Command Pal
                 .addOnUpdate(this.onlyOnCouchDB);
         }
     );
-    });
+    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleNotification"), () => { }, this.onlyOnCouchDB).then(
-    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleNotification"), () => {}, this.onlyOnCouchDB).then(
         (paneEl) => {
             paneEl.addClass("wizardHidden");
             new Setting(paneEl).autoWireNumeric("notifyThresholdOfRemoteStorageSize", {}).setClass("wizardHidden");

styles.css

@@ -110,10 +110,10 @@
 div.sls-setting-menu-btn {
     color: var(--text-normal);
     background-color: var(--background-secondary-alt);
-    border-radius: 4px 4px 0 0;
+    border-radius: 8px;
     padding: 6px 10px;
     cursor: pointer;
-    margin-right: 12px;
+    margin-right: 2px;
     font-family: "Inter", sans-serif;
     outline: none;
     user-select: none;
@@ -140,9 +140,9 @@ div.sls-setting-menu-btn {
     flex-grow: 1;
     position: sticky;
     top: 0;
-    background-color: rgba(var(--background-primary), 0.3);
+    backdrop-filter: blur(15px);
-    backdrop-filter: blur(4px);
+    padding: 4px;
-    border-radius: 4px;
+    border-radius: 10px;
     z-index: 10;
 }
 
@@ -437,13 +437,11 @@ div.workspace-leaf-content[data-type=bases]  .livesync-status {
 
 .sls-setting-panel-title {
     position: sticky;
-}
+    font-size: medium;
-
+    top: 2.5em;
-.sls-setting-panel-title {
+    background-color: var(--background-secondary-alt);
-    top: 2em;
+    border-radius: 10px;
-    background-color: rgba(var(--background-primary), 0.3);
+    padding: 0.5em 1.0em;
-    backdrop-filter: blur(4px);
-    border-radius: 30%;
 }
 
 .sls-dialogue-note-wrapper {