From 07a225c161a9fda1695531c556eb730f5964d4b5 Mon Sep 17 00:00:00 2001
From: Apoorv Taneja <purutaneja.com@gmail.com>
Date: Tue, 13 Aug 2019 21:57:31 +0530
Subject: [PATCH] Fixed input field (#1130)

* fixed

* fixed

* fixed
---
 client/modules/IDE/components/Preferences.jsx | 14 ++--
 client/styles/components/_preferences.scss    | 73 +++++++++++--------
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 1d3402eb..eb31ddc7 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -29,9 +29,12 @@ class Preferences extends React.Component {
   }
 
   onFontInputChange(event) {
-    this.setState({
-      fontSize: event.target.value
-    });
+    const INTEGER_REGEX = /^[0-9\b]+$/;
+    if (event.target.value === '' || INTEGER_REGEX.test(event.target.value)) {
+      this.setState({
+        fontSize: event.target.value
+      });
+    }
   }
 
   onFontInputSubmit(event) {
@@ -151,10 +154,9 @@ class Preferences extends React.Component {
                   aria-atomic="true"
                   value={this.state.fontSize}
                   onChange={this.onFontInputChange}
+                  type="text"
                   ref={(element) => { this.fontSizeInput = element; }}
-                  onClick={() => {
-                    this.fontSizeInput.select();
-                  }}
+                  onClick={() => { this.fontSizeInput.select(); }}
                 />
               </form>
               <button
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 3f77e40a..7d3bc6df 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -5,7 +5,8 @@
   min-height: #{460 / $base-font-size}rem;
   max-height: 100%;
   z-index: 9999;
-  padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
+  padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 /
+    $base-font-size}rem;
   display: flex;
   flex-direction: column;
   outline: none;
@@ -47,17 +48,17 @@
   flex-direction: row;
   justify-content: space-between;
   @include themify() {
-    color: getThemifyVariable('heading-text-color');
+    color: getThemifyVariable("heading-text-color");
   }
 }
 
-.preferences__title{
+.preferences__title {
   width: #{90 / $base-font-size}rem;
-    height: #{25 / $base-font-size}rem;
-    font-family: Montserrat;
-    font-size: #{21 / $base-font-size}rem;
-    font-weight: bold;
-    text-align: left;
+  height: #{25 / $base-font-size}rem;
+  font-family: Montserrat;
+  font-size: #{21 / $base-font-size}rem;
+  font-weight: bold;
+  text-align: left;
 }
 
 .preference__subheadings {
@@ -65,7 +66,7 @@
   flex-wrap: wrap;
   padding-bottom: #{0.1 / $base-font-size}rem;
   @include themify() {
-    border-bottom: 1px solid getThemifyVariable('button-border-color');
+    border-bottom: 1px solid getThemifyVariable("button-border-color");
   }
 }
 
@@ -75,7 +76,7 @@
   padding-bottom: #{12 / $base-font-size}rem;
   & + & {
     @include themify() {
-      border-top: 1px dashed getThemifyVariable('button-border-color');
+      border-top: 1px dashed getThemifyVariable("button-border-color");
     }
   }
 }
@@ -86,13 +87,13 @@
   margin-top: #{13 / $base-font-size}rem;
   margin-bottom: #{7 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('heading-text-color');
+    color: getThemifyVariable("heading-text-color");
   }
 }
 
 .preference__subtitle {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable("inactive-text-color");
   }
   width: 100%;
   margin-bottom: #{10 / $base-font-size}rem;
@@ -101,9 +102,10 @@
 
 .preference__value {
   @include themify() {
-    border: #{1 / $base-font-size}rem solid getThemifyVariable('button-border-color');
-    background-color: getThemifyVariable('button-background-color');
-    color: getThemifyVariable('input-text-color');
+    border: #{1 / $base-font-size}rem solid
+      getThemifyVariable("button-border-color");
+    background-color: getThemifyVariable("button-background-color");
+    color: getThemifyVariable("input-text-color");
   }
   text-align: center;
   border-radius: 0%;
@@ -118,11 +120,10 @@
 
 .preference__label {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable("inactive-text-color");
     &:hover {
-      color: getThemifyVariable('primary-text-color');
+      color: getThemifyVariable("primary-text-color");
     }
-
   }
   margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
   font-size: #{9 / $base-font-size}rem;
@@ -131,13 +132,14 @@
 
 .react-tabs__tab--selected {
   @include themify() {
-    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+    border-bottom: #{4 / $base-font-size}rem solid
+      getThemifyVariable("button-background-hover-color");
   }
 }
 
 .react-tabs__tab--selected .preference__subheading {
   @include themify() {
-    color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable("primary-text-color");
   }
 }
 
@@ -154,21 +156,22 @@
 
 .preference__subheading {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
-    &:hover, &:focus{
-      color: getThemifyVariable('primary-text-color');
-      cursor: pointer; 
+    color: getThemifyVariable("inactive-text-color");
+    &:hover,
+    &:focus {
+      color: getThemifyVariable("primary-text-color");
+      cursor: pointer;
     }
-    &:focus  {
-      color: getThemifyVariable('primary-text-color');
-      cursor: pointer; 
+    &:focus {
+      color: getThemifyVariable("primary-text-color");
+      cursor: pointer;
     }
   }
   font-size: #{12 / $base-font-size}rem;
   height: #{20 / $base-font-size}rem;
   width: 100%;
   margin: 0;
-  padding: 0 #{5 /$base-font-size}rem;
+  padding: 0 #{5 / $base-font-size}rem;
 }
 
 .preference__vertical-list {
@@ -186,8 +189,8 @@
   margin-top: #{40 / $base-font-size}rem;
   margin-bottom: #{10 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
-    border-bottom: 1px dashed getThemifyVariable('button-border-color');
+    color: getThemifyVariable("inactive-text-color");
+    border-bottom: 1px dashed getThemifyVariable("button-border-color");
   }
 }
 
@@ -195,6 +198,12 @@
   @extend %hidden-element;
 }
 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .preference__option {
   @include themify() {
     @extend %preference-option;
@@ -213,7 +222,7 @@
   @include themify() {
     @extend %preference-option;
     &:hover {
-      color: getThemifyVariable('button-background-hover-color');
+      color: getThemifyVariable("button-background-hover-color");
     }
   }
   margin-left: #{30 / $base-font-size}rem;
@@ -233,7 +242,7 @@
 .preference__radio-button:checked + .preference__option {
   @include themify() {
     //for some reason this won't work for getThemifyVariable
-    color: map-get($theme-map, 'primary-text-color');
+    color: map-get($theme-map, "primary-text-color");
   }
 }