client: mark the check boxes and radio buttons that should use the new style

src/public/app/widgets/dialogs/delete_notes.ts

@@ -34,13 +34,17 @@ const TPL = `
             </div>
             <div class="modal-body">
                 <div class="form-checkbox">
-                    <input id="delete-all-clones" class="delete-all-clones form-check-input" value="1" type="checkbox">
-                    <label for="delete-all-clones" class="form-check-label">${t("delete_notes.delete_all_clones_description")}</label>
+                    <label for="delete-all-clones" class="form-check-label tn-checkbox">
+                        <input id="delete-all-clones" class="delete-all-clones form-check-input" value="1" type="checkbox">
+                        ${t("delete_notes.delete_all_clones_description")}
+                    </label>
                 </div>
 
                 <div class="form-checkbox" style="margin-bottom: 1rem">
-                    <input id="erase-notes" class="erase-notes form-check-input" value="1" type="checkbox">
-                    <label for="erase-notes" class="form-check-label">${t("delete_notes.erase_notes_warning")}</label>
+                    <label for="erase-notes" class="form-check-label tn-checkbox">
+                        <input id="erase-notes" class="erase-notes form-check-input" value="1" type="checkbox">
+                        ${t("delete_notes.erase_notes_warning")}
+                    </label>
                 </div>
 
                 <div class="delete-notes-list-wrapper">

src/public/app/widgets/dialogs/export.js

@@ -14,17 +14,17 @@ const TPL = `
         padding-top: 10px;
         padding-bottom: 10px;
     }
-    
+
     .export-dialog .export-form .format-choice {
         padding-left: 40px;
         display: none;
     }
-    
+
     .export-dialog .export-form .opml-versions {
         padding-left: 60px;
         display: none;
     }
-    
+
     .export-dialog .export-form .form-check-label {
         padding: 2px;
     }
@@ -39,7 +39,7 @@ const TPL = `
             <form class="export-form">
                 <div class="modal-body">
                     <div class="form-check">
-                        <label class="form-check-label">
+                        <label class="form-check-label tn-radio">
                             <input class="export-type-subtree form-check-input" type="radio" name="export-type" value="subtree">
                             ${t("export.export_type_subtree")}
                         </label>
@@ -47,21 +47,21 @@ const TPL = `
 
                     <div class="export-subtree-formats format-choice">
                         <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-check-label tn-radio">
                                 <input class="form-check-input" type="radio" name="export-subtree-format" value="html">
                                 ${t("export.format_html_zip")}
                             </label>
                         </div>
 
                         <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-check-label tn-radio">
                                 <input class="form-check-input" type="radio" name="export-subtree-format" value="markdown">
                                 ${t("export.format_markdown")}
                             </label>
                         </div>
 
                         <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-check-label tn-radio">
                                 <input class="form-check-input" type="radio" name="export-subtree-format" value="opml">
                                 ${t("export.format_opml")}
                             </label>
@@ -69,14 +69,14 @@ const TPL = `
 
                         <div class="opml-versions">
                             <div class="form-check">
-                                <label class="form-check-label">
+                                <label class="form-check-label tn-radio">
                                     <input class="form-check-input" type="radio" name="opml-version" value="1.0">
                                     ${t("export.opml_version_1")}
                                 </label>
                             </div>
 
                             <div class="form-check">
-                                <label class="form-check-label">
+                                <label class="form-check-label tn-radio">
                                     <input class="form-check-input" type="radio" name="opml-version" value="2.0">
                                     ${t("export.opml_version_2")}
                                 </label>
@@ -85,7 +85,7 @@ const TPL = `
                     </div>
 
                     <div class="form-check">
-                        <label class="form-check-label">
+                        <label class="form-check-label tn-radio">
                             <input class="form-check-input" type="radio" name="export-type" value="single">
                             ${t("export.export_type_single")}
                         </label>
@@ -93,14 +93,14 @@ const TPL = `
 
                     <div class="export-single-formats format-choice">
                         <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-check-label tn-radio">
                                 <input class="form-check-input" type="radio" name="export-single-format" value="html">
                                 ${t("export.format_html")}
                             </label>
                         </div>
 
                         <div class="form-check">
-                            <label class="form-check-label">
+                            <label class="form-check-label tn-radio">
                                 <input class="form-check-input" type="radio" name="export-single-format" value="markdown">
                                 ${t("export.format_markdown")}
                             </label>

src/public/app/widgets/dialogs/import.js

@@ -27,40 +27,40 @@ const TPL = `
                         <strong>${t("import.options")}:</strong>
 
                         <div class="checkbox">
-                            <label data-bs-toggle="tooltip" title="${t("import.safeImportTooltip")}">
+                            <label class="tn-checkbox" data-bs-toggle="tooltip" title="${t("import.safeImportTooltip")}">
                                 <input class="safe-import-checkbox" value="1" type="checkbox" checked>
                                 <span>${t("import.safeImport")}</span>
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label data-bs-toggle="tooltip" title="${t("import.explodeArchivesTooltip")}">
+                            <label class="tn-checkbox" data-bs-toggle="tooltip" title="${t("import.explodeArchivesTooltip")}">
                                 <input class="explode-archives-checkbox" value="1" type="checkbox" checked>
                                 <span>${t("import.explodeArchives")}</span>
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label data-bs-toggle="tooltip" title="${t("import.shrinkImagesTooltip")}">
+                            <label class="tn-checkbox" data-bs-toggle="tooltip" title="${t("import.shrinkImagesTooltip")}">
                                 <input class="shrink-images-checkbox" value="1" type="checkbox" checked> <span>${t("import.shrinkImages")}</span>
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label>
+                            <label class="tn-checkbox">
                                 <input class="text-imported-as-text-checkbox" value="1" type="checkbox" checked>
                                 ${t("import.textImportedAsText")}
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label>
+                            <label class="tn-checkbox">
                                 <input class="code-imported-as-code-checkbox" value="1" type="checkbox" checked> ${t("import.codeImportedAsCode")}
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label>
+                            <label class="tn-checkbox">
                                 <input class="replace-underscores-with-spaces-checkbox" value="1" type="checkbox" checked>
                                 ${t("import.replaceUnderscoresWithSpaces")}
                             </label>

src/public/app/widgets/dialogs/sort_child_notes.js

@@ -14,38 +14,52 @@ const TPL = `<div class="sort-child-notes-dialog modal mx-auto" tabindex="-1" ro
                 <div class="modal-body">
                     <h5>${t("sort_child_notes.sorting_criteria")}</h5>
                     <div class="form-check">
-                        <input id="sort-by-title" class="form-check-input" type="radio" name="sort-by" value="title" checked>
-                        <label for="sort-by-title" class="form-check-label">${t("sort_child_notes.title")}</label>
+                        <label for="sort-by-title" class="form-check-label tn-radio">
+                            <input id="sort-by-title" class="form-check-input" type="radio" name="sort-by" value="title" checked>
+                            ${t("sort_child_notes.title")}
+                        </label>
                     </div>
                     <div class="form-check">
-                        <input id="sort-by-dateCreated" class="form-check-input" type="radio" name="sort-by" value="dateCreated">
-                        <label for="sort-by-dateCreated" class="form-check-label">${t("sort_child_notes.date_created")}</label>
+                        <label for="sort-by-dateCreated" class="form-check-label tn-radio">
+                            <input id="sort-by-dateCreated" class="form-check-input" type="radio" name="sort-by" value="dateCreated">
+                            ${t("sort_child_notes.date_created")}
+                        </label>
                     </div>
                     <div class="form-check">
-                        <input id="sort-by-dateModified" class="form-check-input" type="radio" name="sort-by" value="dateModified">
-                        <label for="sort-by-dateModified" class="form-check-label">${t("sort_child_notes.date_modified")}</label>
+                        <label for="sort-by-dateModified" class="form-check-label tn-radio">
+                            <input id="sort-by-dateModified" class="form-check-input" type="radio" name="sort-by" value="dateModified">
+                            ${t("sort_child_notes.date_modified")}
+                        </label>
                     </div>
                     <br/>
                     <h5>${t("sort_child_notes.sorting_direction")}</h5>
                     <div class="form-check">
-                        <input id="sort-direction-asc" class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
-                        <label for="sort-direction-asc" class="form-check-label">${t("sort_child_notes.ascending")}</label>
+                        <label for="sort-direction-asc" class="form-check-label tn-radio">
+                            <input id="sort-direction-asc" class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
+                            ${t("sort_child_notes.ascending")}
+                        </label>
                     </div>
                     <div class="form-check">
-                        <input id="sort-direction-desc" class="form-check-input" type="radio" name="sort-direction" value="desc">
-                        <label for="sort-direction-desc" class="form-check-label">${t("sort_child_notes.descending")}</label>
+                        <label for="sort-direction-desc" class="form-check-label tn-radio">
+                            <input id="sort-direction-desc" class="form-check-input" type="radio" name="sort-direction" value="desc">
+                            ${t("sort_child_notes.descending")}
+                        </label>
                     </div>
                     <br />
                     <h5>${t("sort_child_notes.folders")}</h5>
                     <div class="form-check">
-                        <input id="sort-folders-first" class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
-                        <label for="sort-folders-first" class="form-check-label">${t("sort_child_notes.sort_folders_at_top")}</label>
+                        <label for="sort-folders-first" class="form-check-label tn-checkbox">
+                            <input id="sort-folders-first" class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
+                            ${t("sort_child_notes.sort_folders_at_top")}
+                        </label>
                     </div>
                     <br />
                     <h5>${t("sort_child_notes.natural_sort")}</h5>
                     <div class="form-check">
-                        <input id="sort-natural" class="form-check-input" type="checkbox" name="sort-natural" value="1">
-                        <label for="sort-natural" class="form-check-label">${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}</label>
+                        <label for="sort-natural" class="form-check-label tn-checkbox">
+                            <input id="sort-natural" class="form-check-input" type="checkbox" name="sort-natural" value="1">
+                            ${t("sort_child_notes.sort_with_respect_to_different_character_sorting")}
+                        </label>
                     </div>
                     <br />
                     <div class="form-check">

src/public/app/widgets/find.js

@@ -23,11 +23,11 @@ const TPL = `
             padding: 2px 10px 2px 10px;
             align-items: center;
         }
-        
+
         .find-widget-box > *, .replace-widget-box > *{
             margin-right: 15px;
         }
-        
+
         .find-widget-box, .replace-widget-box {
             display: flex;
         }
@@ -35,11 +35,11 @@ const TPL = `
         .find-widget-found-wrapper {
             font-weight: bold;
         }
-        
+
         .find-widget-search-term-input-group, .replace-widget-replacetext-input {
             max-width: 300px;
         }
-        
+
         .find-widget-spacer {
             flex-grow: 1;
         }
@@ -51,29 +51,29 @@ const TPL = `
             <button class="btn btn-outline-secondary bx bxs-chevron-up find-widget-previous-button" type="button"></button>
             <button class="btn btn-outline-secondary bx bxs-chevron-down find-widget-next-button" type="button"></button>
         </div>
-        
+
         <div class="form-check">
-            <label tabIndex="-1" class="form-check-label">
-                <input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox"> 
+            <label tabIndex="-1" class="form-check-label tn-checkbox">
+                <input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox">
                 ${t("find.case_sensitive")}
             </label>
         </div>
 
         <div class="form-check">
-            <label tabIndex="-1" class="form-check-label">
+            <label tabIndex="-1" class="form-check-label tn-checkbox">
                 <input type="checkbox" class="form-check-input find-widget-match-words-checkbox">
                 ${t("find.match_words")}
             </label>
         </div>
-        
+
         <div class="find-widget-found-wrapper">
             <span class="find-widget-current-found">0</span>
             /
             <span class="find-widget-total-found">0</span>
         </div>
-        
+
         <div class="find-widget-spacer"></div>
-        
+
         <div class="find-widget-close-button"><button class="btn icon-action bx bx-x"></button></div>
     </div>
 

src/public/app/widgets/note_tree.js

@@ -115,16 +115,14 @@ const TPL = `
     <div class="tree-settings-popup">
         <h4>${t("note_tree.tree-settings-title")}</h4>
         <div class="form-check">
-            <label class="form-check-label">
+            <label class="form-check-label tn-checkbox">
                 <input class="form-check-input hide-archived-notes" type="checkbox" value="">
-
                 ${t("note_tree.hide-archived-notes")}
             </label>
         </div>
         <div class="form-check">
-            <label class="form-check-label">
+            <label class="form-check-label tn-checkbox">
                 <input class="form-check-input auto-collapse-note-tree" type="checkbox" value="">
-
                 ${t("note_tree.automatically-collapse-notes")}
                 <span class="bx bx-info-circle"
                       title="${t("note_tree.automatically-collapse-notes-title")}"></span>

src/public/app/widgets/type_widgets/options/appearance/code_block.ts

@@ -34,7 +34,7 @@ const TPL = `
         </div>
 
         <div class="col-md-6 side-checkbox">
-            <label class="form-check">
+            <label class="form-check tn-checkbox">
                 <input type="checkbox" class="word-wrap form-check-input" />
                 ${t("code_block.word_wrapping")}
             </label>

src/public/app/widgets/type_widgets/options/appearance/ribbon.ts

@@ -5,12 +5,12 @@ import OptionsWidget from "../options_widget.js";
 const TPL = `
 <div class="options-section">
     <h4>${t("ribbon.widgets")}</h4>
-    <label>
+    <label class="tn-checkbox">
         <input type="checkbox" class="promoted-attributes-open-in-ribbon form-check-input">
         ${t("ribbon.promoted_attributes_message")}
     </label>
 
-    <label>
+    <label class="tn-checkbox">
         <input type="checkbox" class="edited-notes-open-in-ribbon form-check-input">
         ${t("ribbon.edited_notes_message")}
     </label>

src/public/app/widgets/type_widgets/options/appearance/theme.ts

@@ -10,7 +10,7 @@ const TPL = `
 
     <div class="form-group row">
         <div>
-            <label>
+            <label class="tn-radio">
                 <input type="radio" name="layout-orientation" value="vertical" />
                 <strong>${t("theme.layout-vertical-title")}</strong>
                 - ${t("theme.layout-vertical-description")}
@@ -18,7 +18,7 @@ const TPL = `
         </div>
 
         <div>
-            <label>
+            <label class="tn-radio">
                 <input type="radio" name="layout-orientation" value="horizontal" />
                 <strong>${t("theme.layout-horizontal-title")}</strong>
                 - ${t("theme.layout-horizontal-description")}
@@ -37,7 +37,7 @@ const TPL = `
         </div>
 
         <div class="col-md-6 side-checkbox">
-            <label class="form-check">
+            <label class="form-check tn-checkbox">
                 <input type="checkbox" class="override-theme-fonts form-check-input">
                 ${t("theme.override_theme_fonts_label")}
             </label>

src/public/app/widgets/type_widgets/options/backup.ts

@@ -13,19 +13,19 @@ const TPL = `
 
     <ul style="list-style: none">
         <li>
-            <label>
+            <label class="tn-checkbox">
                 <input type="checkbox" class="daily-backup-enabled form-check-input">
                 ${t("backup.enable_daily_backup")}
             </label>
         </li>
         <li>
-            <label>
+            <label class="tn-checkbox">
                 <input type="checkbox" class="weekly-backup-enabled form-check-input">
                 ${t("backup.enable_weekly_backup")}
             </label>
         </li>
         <li>
-        <label>
+        <label class="tn-checkbox">
             <input type="checkbox" class="monthly-backup-enabled form-check-input">
             ${t("backup.enable_monthly_backup")}
             </label>

src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts

@@ -94,7 +94,7 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
     #buildSelectionForMimeType(mimeType: MimeType) {
         const id = "code-mime-type-" + idCtr++;
 
-        const checkbox = $("<label>")
+        const checkbox = $(`<label class="tn-checkbox">`)
             .append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
             .on("change", () => this.save())
             .append(mimeType.title)

src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts

@@ -5,7 +5,7 @@ import type { OptionMap } from "../../../../../../services/options_interface.js"
 const TPL = `
 <div class="options-section">
     <h4>${t("vim_key_bindings.use_vim_keybindings_in_code_notes")}</h4>
-    <label>
+    <label class="tn-checkbox">
         <input type="checkbox" class="vim-keymap-enabled form-check-input">
         ${t("vim_key_bindings.enable_vim_keybindings")}
     </label>

src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts

@@ -5,7 +5,7 @@ import type { OptionMap } from "../../../../../../services/options_interface.js"
 const TPL = `
 <div class="options-section">
     <h4>${t("wrap_lines.wrap_lines_in_code_notes")}</h4>
-    <label>
+    <label class="tn-checkbox">
         <input type="checkbox" class="line-wrap-enabled form-check-input">
         ${t("wrap_lines.enable_line_wrap")}
     </label>

src/public/app/widgets/type_widgets/options/images/images.ts

@@ -13,7 +13,7 @@ const TPL = `
 
     <h4>${t("images.images_section_title")}</h4>
 
-    <label>
+    <label class="tn-checkbox">
         <input class="download-images-automatically" type="checkbox" name="download-images-automatically">
         ${t("images.download_images_automatically")}
     </label>
@@ -22,7 +22,7 @@ const TPL = `
 
     <hr />
 
-    <label>
+    <label class="tn-checkbox">
         <input class="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
         ${t("images.enable_image_compression")}
     </label>

src/public/app/widgets/type_widgets/options/other/network_connections.ts

@@ -6,7 +6,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t("network_connections.network_connections_title")}</h4>
 
-    <label>
+    <label class="tn-checkbox">
         <input class="check-for-updates form-check-input" type="checkbox" name="check-for-updates">
         ${t("network_connections.check_for_updates")}
     </label>

src/public/app/widgets/type_widgets/options/text_notes/editor.ts

@@ -8,7 +8,7 @@ const TPL = `
     <h4>${t("editing.editor_type.label")}</h4>
 
     <div>
-        <label>
+        <label class="tn-radio">
             <input type="radio" name="editor-type" value="ckeditor-balloon" />
             <strong>${t("editing.editor_type.floating.title")}</strong>
             - ${t("editing.editor_type.floating.description")}
@@ -16,14 +16,14 @@ const TPL = `
     </div>
 
     <div>
-        <label>
+        <label class="tn-radio">
             <input type="radio" name="editor-type" value="ckeditor-classic" />
             <strong>${t("editing.editor_type.fixed.title")}</strong>
             - ${t("editing.editor_type.fixed.description")}
         </label>
 
         <div>
-            <label>
+            <label class="tn-checkbox">
                 <input type="checkbox" name="multiline-toolbar" />
                 ${t("editing.editor_type.multiline-toolbar")}
             </label>

src/public/app/widgets/type_widgets/options/text_notes/highlights_list.ts

@@ -9,11 +9,11 @@ const TPL = `
     <p>${t("highlights_list.description")}</p>
 
     <div>
-        <label><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
+        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
+        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
+        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
+        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")} &nbsp;</label>
+        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
     </div>
 
     <hr />

src/views/login.ejs

@@ -32,8 +32,9 @@
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
-                        <input id="remember-me" name="rememberMe" value="1" type="checkbox"> <%= t("login.remember-me") %>
+                    <label class="tn-checkbox">
+                        <input id="remember-me" name="rememberMe" value="1" type="checkbox">
+                        <%= t("login.remember-me") %>
                     </label>
                 </div>
             </div>