Polish pass.

Author: DavidAnson

src/css/tabs/osd.less

@@ -362,6 +362,10 @@
             font-weight: normal;
         }
     }
+    #font-logo {
+        display: flex;
+        margin-bottom: 2em;
+    }
     #font-logo-preview-container {
         background: rgba(0, 255, 0, 0.4);
         margin-bottom: 10px;
@@ -373,6 +377,8 @@
         margin: auto;
     }
     #font-logo-info {
+        flex: 1;
+        margin-left: 2em;
         line-height: 150%;
         h3 {
             margin-bottom: 0.2em;

src/js/utils/initializeModalDialog.js

@@ -11,7 +11,7 @@ import { i18n } from "../localization";
 function getDialogTitleBar(messageId, messageParameters, onClose) {
     // HTML structure
     const dialogTitleBar = $(`
-        <div class="jBox-title" style="display: flex; height: 47px">
+        <div style="display: flex; height: 47px; background: var(--surface-300); border-bottom: 1px solid var(--surface-950);">
             <div style="flex: 1; display: flex; align-items: center;">
                 <div style="padding: 15px;">${i18n.getMessage(messageId, messageParameters || undefined)}</div>
             </div>

src/tabs/osd.html

@@ -168,13 +168,12 @@ <h1 class="tab_title" i18n="osdSetupFontPresets"></h1>
                     </div>
                     <!-- Boot logo setup -->
                     <h1 class="tab_title" i18n="osdSetupCustomLogoTitle"></h1>
-                    <div style="display: flex; margin-bottom: 2em;">
+                    <div id="font-logo">
                         <div id="font-logo-preview-container">
                             <div id="font-logo-preview">
                                 <!-- this will be resized at runtime -->
                             </div>
                         </div>
-                        <div style="flex: 1"></div>
                         <div id="font-logo-info">
                             <h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
                             <ul>