From 927938cb561d3c4622ce09a6f56ecf8ef88a0a7c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 4 Oct 2022 21:20:21 +0530
Subject: [PATCH] fix: android monospace font (#1735)

---
 packages/web/src/javascripts/App.tsx               | 14 +++++++++++++-
 .../Application/Device/WebOrDesktopDevice.ts       |  3 +++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx
index 8996a7981..1414e4c65 100644
--- a/packages/web/src/javascripts/App.tsx
+++ b/packages/web/src/javascripts/App.tsx
@@ -26,7 +26,7 @@ declare global {
 }
 
 import { IsWebPlatform, WebAppVersion } from '@/Constants/Version'
-import { DesktopManagerInterface, Environment, SNLog } from '@standardnotes/snjs'
+import { DesktopManagerInterface, Environment, Platform, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Application/Device/WebDevice'
 import { StartApplication } from './Application/Device/StartApplication'
@@ -48,6 +48,15 @@ const setViewportHeight = () => {
   )
 }
 
+const setDefaultMonospaceFont = (platform?: Platform) => {
+  if (platform === Platform.Android) {
+    document.documentElement.style.setProperty(
+      '--sn-stylekit-monospace-font',
+      '"Roboto Mono", "Droid Sans Mono", monospace',
+    )
+  }
+}
+
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
   device: WebOrDesktopDevice,
@@ -77,12 +86,15 @@ const startApplication: StartApplication = async function startApplication(
     root = createRoot(appendedRootNode)
 
     disableIosTextFieldZoom()
+
     setViewportHeight()
     window.addEventListener('orientationchange', setViewportHeight)
     if (device.environment === Environment.Desktop) {
       window.addEventListener('resize', setViewportHeight)
     }
 
+    setDefaultMonospaceFont(device.platform)
+
     root.render(
       <ApplicationGroupView
         key={getKey()}
diff --git a/packages/web/src/javascripts/Application/Device/WebOrDesktopDevice.ts b/packages/web/src/javascripts/Application/Device/WebOrDesktopDevice.ts
index c608f1a62..938aa0c98 100644
--- a/packages/web/src/javascripts/Application/Device/WebOrDesktopDevice.ts
+++ b/packages/web/src/javascripts/Application/Device/WebOrDesktopDevice.ts
@@ -8,10 +8,13 @@ import {
   NamespacedRootKeyInKeychain,
   extendArray,
   WebOrDesktopDeviceInterface,
+  Platform,
 } from '@standardnotes/snjs'
 import { Database } from '../Database'
 
 export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface {
+  platform?: Platform
+
   constructor(public appVersion: string) {}
 
   private databases: Database[] = []