refactor(web): improve web app styling

2 files changed, 8 insertions, 2 deletions

diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index c029f746..01b04305 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -89,7 +89,11 @@ export default class RootStore {
         if (simpleName === undefined) {
           document.title = 'Refinery';
         } else {
-          document.title = `${unsavedChanges ? '\u25cf ' : ''}${simpleName} - Refinery`;
+          // Chromium web apps don't like whe the file name precedes the app name,
+          // and turn `filename - Refinery` into `Refinery - filename - Refinery`.
+          // We elect to use just `Refinery - filename` instead.
+          // Change indicator in a style similar to VSCodium.
+          document.title = `Refinery - ${unsavedChanges ? '\u25cf ' : ''}${simpleName}`;
         }
       });
     }
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 738052c7..6c9c4f7e 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -92,7 +92,9 @@ const FileName = styled('span', {
   fontWeight: theme.typography.fontWeightLight,
   fontSize: '1.25rem',
   lineHeight: '1.6rem',
-  fontStyle: unsavedChanges ? 'italic' : 'normal',
+  color: unsavedChanges
+    ? theme.palette.text.primary
+    : theme.palette.text.secondary,
 }));
 
 export default observer(function TopBar(): JSX.Element {