From ff1c70f43714c92ea15f5f4743af5898977a82cc Mon Sep 17 00:00:00 2001
From: Forrest <gravyboat@users.noreply.github.com>
Date: Thu, 25 Feb 2021 13:48:23 -0800
Subject: [PATCH] Set a minimum value for fontSize setting (#3042)

Co-authored-by: Opender Singh <opender.singh@konghq.com>
---
 packages/insomnia-app/app/common/constants.js |  4 +++
 .../app/ui/components/settings/general.js     | 32 ++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/insomnia-app/app/common/constants.js b/packages/insomnia-app/app/common/constants.js
index f0ad6db5a..7966322a5 100644
--- a/packages/insomnia-app/app/common/constants.js
+++ b/packages/insomnia-app/app/common/constants.js
@@ -148,6 +148,10 @@ export const MIN_PANE_HEIGHT = 0.01;
 export const DEFAULT_PANE_WIDTH = 0.5;
 export const DEFAULT_PANE_HEIGHT = 0.5;
 export const DEFAULT_SIDEBAR_WIDTH = 19;
+export const MIN_INTERFACE_FONT_SIZE = 8;
+export const MAX_INTERFACE_FONT_SIZE = 24;
+export const MIN_EDITOR_FONT_SIZE = 8;
+export const MAX_EDITOR_FONT_SIZE = 24;
 
 // Activities
 export type GlobalActivity = 'spec' | 'debug' | 'unittest' | 'home' | 'migration' | 'onboarding';
diff --git a/packages/insomnia-app/app/ui/components/settings/general.js b/packages/insomnia-app/app/ui/components/settings/general.js
index 2797495ff..56acb287e 100644
--- a/packages/insomnia-app/app/ui/components/settings/general.js
+++ b/packages/insomnia-app/app/ui/components/settings/general.js
@@ -17,6 +17,10 @@ import {
   isWindows,
   UPDATE_CHANNEL_BETA,
   UPDATE_CHANNEL_STABLE,
+  MIN_INTERFACE_FONT_SIZE,
+  MAX_INTERFACE_FONT_SIZE,
+  MIN_EDITOR_FONT_SIZE,
+  MAX_EDITOR_FONT_SIZE,
 } from '../../../common/constants';
 import HelpTooltip from '../help-tooltip';
 import type { GlobalActivity, HttpVersion } from '../../../common/constants';
@@ -81,11 +85,22 @@ class General extends React.PureComponent<Props, State> {
     const el = e.currentTarget;
     let value = el.type === 'checkbox' ? el.checked : el.value;
 
-    if (e.currentTarget.type === 'number') {
-      value = parseInt(value, 10);
+    if (el.type === 'number') {
+      value = parseInt(value, 10) || 0;
+      const min = parseInt(el.min, 10);
+      const max = parseInt(el.max, 10);
+
+      const moreThanMax = Number.isNaN(max) || value > max;
+      const lessThanMin = Number.isNaN(min) || value < min;
+
+      if (moreThanMax) {
+        value = max;
+      } else if (lessThanMin) {
+        value = min;
+      }
     }
 
-    if (e.currentTarget.value === '__NULL__') {
+    if (el.value === '__NULL__') {
       value = null;
     }
 
@@ -101,6 +116,7 @@ class General extends React.PureComponent<Props, State> {
 
   async _handleFontSizeChange(el: SyntheticEvent<HTMLInputElement>) {
     const settings = await this._handleUpdateSetting(el);
+
     setFont(settings);
   }
 
@@ -280,9 +296,9 @@ class General extends React.PureComponent<Props, State> {
             </label>
           </div>
           {this.renderNumberSetting('Interface Font Size (px)', 'fontSize', '', {
-            min: 8,
-            max: 20,
-            onChange: this._handleFontSizeChange,
+            min: MIN_INTERFACE_FONT_SIZE,
+            max: MAX_INTERFACE_FONT_SIZE,
+            onBlur: this._handleFontSizeChange,
           })}
         </div>
 
@@ -310,8 +326,8 @@ class General extends React.PureComponent<Props, State> {
             </label>
           </div>
           {this.renderNumberSetting('Editor Font Size (px)', 'editorFontSize', '', {
-            min: 8,
-            max: 20,
+            min: MIN_EDITOR_FONT_SIZE,
+            max: MAX_EDITOR_FONT_SIZE,
           })}
         </div>