feat: add border to the disabled fields

ref issue #138

Author: maxceem

src/components/DateInput/styles.module.scss

@@ -9,6 +9,10 @@
       border-color: #fe665d;
     }
   }
+
+  input:disabled:not(:focus) {
+    border: 1px solid #ddd;
+  }
 }
 
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {

src/components/MarkdownEditor/styles.module.scss

@@ -1,19 +1,16 @@
 @import "styles/include";
 
+// we use viewer mode to show editor when it's "disabled"
 .editor-viewer {
     > div:first-child {
-      // border: 1px solid #aaaaab;
+      border: 1px solid #ddd;
       border-radius: 4px;
       overflow: hidden;
       box-sizing: border-box;
       padding: 16px 25px 0px 25px;
       height: 280px;
       overflow-y: auto;
-      border: 0;
       background: #fafafb;
-      box-shadow: none;
-      color: #6b6b6b;
-      -webkit-text-fill-color: #808080;
     }
     .message {
       @include font-roboto;

src/components/ReactSelect/index.jsx

@@ -14,13 +14,9 @@ const ReactSelect = (props) => {
     control: (provided, state) => ({
       ...provided,
       minHeight: "40px",
-      border: state.isDisabled ? "none" : "1px solid #aaaaab",
+      border:state.isDisabled ? "1px solid #ddd" : "1px solid #aaaaab",
       borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
-      boxShadow: state.isDisabled
-        ? "none"
-        : state.isFocused
-        ? "0 0 2px 1px #cee6ff"
-        : provided.boxShadow,
+      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow,
       backgroundColor: state.isDisabled ? "#fafafb" : provided.backgroundColor,
       color: state.isDisabled ? "#6b6b6b" : provided.color,
     }),

src/components/TextInput/styles.module.scss

@@ -24,3 +24,7 @@
     box-shadow: none !important;
   }
 }
+
+input.TextInput:not([type="checkbox"]):disabled {
+  border: 1px solid #ddd;
+}