quick UI updates (center imageview, fix terminal cursor colors, and add firacode font) (#445)

* center imageview images

* fix terminal selection colors #442

* add firacode font

public/themes/term-default.css

@@ -3,7 +3,7 @@
 
 :root {
     /* 
-     * term colors (16 + 5) form the base terminal theme 
+     * term colors (16 + 6) form the base terminal theme 
      * for consistency these colors should be used by plugins/applications
      */
     --term-black: #000000;
@@ -27,5 +27,6 @@
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
-    --term-selection-background: #ffffff40;
+    --term-selection-background: #ffffff90;
+    --term-cursor-accent: #000000;
 }

public/themes/term-light.css

@@ -6,5 +6,6 @@
     --term-foreground: #000000;
     --term-background: #fefefe;
     --term-cmdtext: #000000;
-    --term-selection-background: #00000018;
+    --term-selection-background: #00000040;
+    --term-cursor-accent: #000000;
 }

src/app/clientsettings/clientsettings.tsx

@@ -87,6 +87,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const availableFontFamilies: DropdownItem[] = [];
         availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" });
         availableFontFamilies.push({ label: "Hack", value: "Hack" });
+        availableFontFamilies.push({ label: "Fira Code", value: "Fira Code" });
         return availableFontFamilies;
     }
 

src/plugins/image/image.less

@@ -1,4 +1,10 @@
 .image-renderer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--termpad);
+
     img {
         display: block;
     }

src/plugins/terminal/term.ts

@@ -58,6 +58,9 @@ function getThemeFromCSSVars(): ITheme {
     theme.brightCyan = rootStyle.getPropertyValue("--term-bright-cyan");
     theme.brightWhite = rootStyle.getPropertyValue("--term-bright-white");
     theme.selectionBackground = rootStyle.getPropertyValue("--term-selection-background");
+    theme.selectionInactiveBackground = rootStyle.getPropertyValue("--term-selection-background");
+    theme.cursor = rootStyle.getPropertyValue("--term-selection-background");
+    theme.cursorAccent = rootStyle.getPropertyValue("--term-cursor-accent");
     return theme;
 }
 

src/util/fontutil.ts

@@ -5,6 +5,7 @@ let isJetBrainsMonoLoaded = false;
 let isLatoFontLoaded = false;
 let isHackFontLoaded = false;
 let isBaseFontsLoaded = false;
+let isFiraCodeLoaded = false;
 
 function addToFontFaceSet(fontFaceSet: FontFaceSet, fontFace: FontFace) {
     // any cast to work around typing issue
@@ -55,6 +56,25 @@ function loadLatoFont() {
     latoFontBold.load();
 }
 
+function loadFiraCodeFont() {
+    if (isFiraCodeLoaded) {
+        return;
+    }
+    isFiraCodeLoaded = true;
+    let firaCodeRegular = new FontFace("Fira Code", "url('public/fonts/firacode-regular.woff2')", {
+        style: "normal",
+        weight: "400",
+    });
+    let firaCodeBold = new FontFace("Fira Code", "url('public/fonts/firacode-bold.woff2')", {
+        style: "normal",
+        weight: "700",
+    });
+    addToFontFaceSet(document.fonts, firaCodeRegular);
+    addToFontFaceSet(document.fonts, firaCodeBold);
+    firaCodeRegular.load();
+    firaCodeBold.load();
+}
+
 function loadHackFont() {
     if (isHackFontLoaded) {
         return;
@@ -104,6 +124,7 @@ function loadFonts() {
     loadLatoFont();
     loadJetBrainsMonoFont();
     loadHackFont();
+    loadFiraCodeFont();
 }
 
 export { loadFonts };