From df0413ab94b65d3e6e4838b2805c6347fc65768d Mon Sep 17 00:00:00 2001
From: Jessica Nguyen <122261093+jtnguyen45@users.noreply.github.com>
Date: Sun, 2 Apr 2023 22:08:54 +0000
Subject: [PATCH] add-font-in-settings-assets

---
 assets/javascripts/app/settings.coffee           |  7 +++++++
 .../templates/pages/settings_tmpl.coffee         | 16 +++++++++++++++-
 .../views/content/settings_page.coffee           |  7 +++++++
 assets/stylesheets/global/_base.scss             |  6 +++++-
 devdocs                                          |  1 +
 5 files changed, 35 insertions(+), 2 deletions(-)
 create mode 160000 devdocs

diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index 74e32a658c..9aeb615b94 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -16,6 +16,7 @@ class app.Settings
     'autoInstall'
     'spaceScroll'
     'spaceTimeout'
+    'font'
   ]
 
   INTERNAL_KEYS = [
@@ -65,6 +66,7 @@ class app.Settings
     @store.set(key, value)
     delete @cache[key]
     @setTheme(value) if key == 'theme'
+    @setFont(value) if key == 'font'
     return
 
   del: (key) ->
@@ -152,6 +154,11 @@ class app.Settings
     @updateColorMeta()
     return
 
+  setFont: (font) ->
+    chosenFont = @get('font')
+    document.documentElement.style.setProperty('--selectedFont', chosenFont)
+    return
+
   updateColorMeta: ->
     color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
     $('meta[name=theme-color]').setAttribute('content', color)
diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee b/assets/javascripts/templates/pages/settings_tmpl.coffee
index 048afa1a8e..9b67011157 100644
--- a/assets/javascripts/templates/pages/settings_tmpl.coffee
+++ b/assets/javascripts/templates/pages/settings_tmpl.coffee
@@ -7,7 +7,6 @@ themeOption = ({ label, value }, settings) -> """
 
 app.templates.settingsPage = (settings) -> """
   <h1 class="_lined-heading">Preferences</h1>
-
   <div class="_settings-fieldset">
     <h2 class="_settings-legend">Theme:</h2>
     <div class="_settings-inputs">
@@ -20,6 +19,21 @@ app.templates.settingsPage = (settings) -> """
     </div>
   </div>
 
+  <div class="_settings-fieldset">
+    <h2 class="_settings-legend">Font:</h2>
+    <div class="_settings-inputs">
+      <label class="_settings-label _setting-font-family">
+        <select name="font" id="_setting-font-family">
+          <option value="arial" #{if (settings.font == 'Arial' or not settings.font) then ' selected' else ''}>Arial (default)</option>
+          <option value="cascadia" #{if settings.font == 'Cascadia' then ' selected' else ''}>Cascadia</option>
+          <option value="fira-code" #{if settings.font == 'Fira Code' then ' selected' else ''}>Fira Code</option>
+          <option value="proxima-nova" #{if settings.font == 'Proxima Nova' then ' selected' else ''}>Proxima Nova</option>
+          <option value="verdana" #{if settings.font == 'Verdana' then ' selected' else ''}>Verdana</option>
+        </select>
+      </label>
+    </div>
+  </div>
+
   <div class="_settings-fieldset">
     <h2 class="_settings-legend">General:</h2>
 
diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee
index 7a7b624696..3569912715 100644
--- a/assets/javascripts/views/content/settings_page.coffee
+++ b/assets/javascripts/views/content/settings_page.coffee
@@ -19,6 +19,7 @@ class app.views.SettingsPage extends app.View
     settings.analyticsConsent = app.settings.get('analyticsConsent')
     settings.spaceScroll = app.settings.get('spaceScroll')
     settings.spaceTimeout = app.settings.get('spaceTimeout')
+    settings.font = app.settings.get('font')
     settings.autoSupported = app.settings.autoSupported
     settings[layout] = app.settings.hasLayout(layout) for layout in app.settings.LAYOUTS
     settings
@@ -30,6 +31,10 @@ class app.views.SettingsPage extends app.View
     app.settings.set('theme', value)
     return
 
+  setFont: (value) ->
+    app.settings.set('font', value)
+    return
+
   toggleLayout: (layout, enable) ->
     app.settings.setLayout(layout, enable)
     return
@@ -87,6 +92,8 @@ class app.views.SettingsPage extends app.View
     switch input.name
       when 'theme'
         @setTheme input.value
+      when 'font'
+        @setFont input.value
       when 'layout'
         @toggleLayout input.value, input.checked
       when 'smoothScroll'
diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index ab0ccb6071..c43a948d3e 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@@ -17,13 +17,17 @@ html._theme-dark {
   color-scheme: dark only;
 }
 
+:root {
+  --selectedFont: Arial;
+}
+
 body {
   height: 100%;
   margin: 0;
   overflow: auto;
   font-size: 1em;
   font-weight: normal;
-  font-family: $baseFont;
+  font-family: var(--selectedFont, $baseFont);
   line-height: 1.7;
   color: $textColor; // fallback to show the error message to browsers that don't support CSS variables.
   color: var(--textColor);
diff --git a/devdocs b/devdocs
new file mode 160000
index 0000000000..1a45f62e39
--- /dev/null
+++ b/devdocs
@@ -0,0 +1 @@
+Subproject commit 1a45f62e391459aed274fa9f8dcbd496c966726e