Add note for default presets

src/assets/css/key-binding-dialog.styl

@@ -16,7 +16,7 @@
     margin-right: -50%;
     transform: translate(-50%, -50%);
     min-width: 420px;
-    padding: 20px;
+    padding: 16px;
     border-radius: 8px;
     z-index: var(--bx-key-binding-dialog-z-index);
     background: #1a1b1e;

src/assets/css/navigation-dialog.styl

@@ -45,7 +45,7 @@
     width: 450px;
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
-    padding: 20px;
+    padding: 16px;
 
     max-height: 95vh;
     flex-direction: column;
@@ -90,6 +90,13 @@
             flex: 1;
         }
     }
+
+    .bx-default-preset-note {
+        font-size: 0.8rem;
+        font-style: italic;
+        text-align: center;
+        margin-bottom: 10px;
+    }
 }
 
 .bx-centered-dialog,

src/assets/css/remote-play.styl

@@ -10,7 +10,7 @@
     width: 420px;
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
-    padding: 20px;
+    padding: 16px;
 
     > .bx-button {
         display: table;

src/modules/ui/dialog/profile-manger/base-profile-manager-dialog.ts

@@ -16,6 +16,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
 
     private $presets!: HTMLSelectElement;
     private $header!: HTMLElement;
+    private $defaultNote!: HTMLElement;
     protected $content!: HTMLElement;
 
     private $btnRename!: HTMLButtonElement;
@@ -36,6 +37,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
         const isDefaultPreset = this.currentPresetId <= 0;
         this.$btnRename.disabled = isDefaultPreset;
         this.$btnDelete.disabled = isDefaultPreset;
+        this.$defaultNote.classList.toggle('bx-gone', !isDefaultPreset);
     }
 
     private async renderPresetsList() {
@@ -121,7 +123,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
             createButton({
                 icon: BxIcon.NEW,
                 title: t('new'),
-                style: ButtonStyle.FOCUSABLE,
+                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
                 onClick: async (e) => {
                     const newName = this.promptNewName(t('new'));
                     if (!newName) {
@@ -140,7 +142,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
             createButton({
                 icon: BxIcon.COPY,
                 title: t('copy'),
-                style: ButtonStyle.FOCUSABLE,
+                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
                 onClick: async (e) => {
                     const preset = this.allPresets.data[this.currentPresetId];
 
@@ -168,7 +170,10 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                     onClick: e => this.hide(),
                 }),
             ),
-            $header,
+            CE('div', {},
+                $header,
+                this.$defaultNote = CE('div', { class: 'bx-default-preset-note bx-gone' }, t('default-preset-note')),
+            ),
             CE('div', { class: 'bx-dialog-content bx-hide-scroll-bar' }, this.$content),
         );
     }

src/utils/translation.ts

@@ -94,6 +94,7 @@ const Texts = {
     "deadzone-counterweight": "Deadzone counterweight",
     "decrease": "Decrease",
     "default": "Default",
+    "default-preset-note": "You can't modify default presets. Create a new one to customize it.",
     "delete": "Delete",
     "device": "Device",
     "device-unsupported-touch": "Your device doesn't have touch support",