fix(ui): updated input fields to match new color scheme (#3323)

* Updated input fields to match new color scheme

Added small input text fields and fixed coloring

* Added tailwind changes to viewers file

platform/ui/src/components/Input/Input.tsx

@@ -4,20 +4,26 @@ import Label from '../Label';
 import classnames from 'classnames';
 
 const baseInputClasses =
-  'shadow transition duration-300 appearance-none border border-primary-main hover:border-gray-500 focus:border-gray-500 focus:outline-none rounded w-full py-2 px-3 text-sm text-white leading-tight focus:outline-none';
+  'shadow transition duration-300 appearance-none border border-inputfield-main focus:border-inputfield-focus focus:outline-none disabled:border-inputfield-disabled rounded w-full py-2 px-3 text-sm text-white placeholder-inputfield-placeholder leading-tight';
 
 const transparentClasses = {
   true: 'bg-transparent',
   false: 'bg-black',
 };
 
+const smallInputClasses = {
+  true: 'input-small',
+  false: ''
+}
+
 const Input = ({
   id,
   label,
   containerClassName = '',
   labelClassName = '',
   className = '',
   transparent = false,
+  smallInput = false,
   type = 'text',
   value,
   onChange,
@@ -39,6 +45,7 @@ const Input = ({
           className,
           baseInputClasses,
           transparentClasses[transparent],
+          smallInputClasses[smallInput],
           { 'cursor-not-allowed': disabled }
         )}
         disabled={disabled}
@@ -63,6 +70,7 @@ Input.propTypes = {
   labelClassName: PropTypes.string,
   className: PropTypes.string,
   transparent: PropTypes.bool,
+  smallInput: PropTypes.bool,
   type: PropTypes.string,
   value: PropTypes.any,
   onChange: PropTypes.func,

platform/ui/src/components/Input/__stories__/input.stories.mdx

@@ -53,6 +53,19 @@ Input is a component that renders the Inputs.
   </Story>
 </Canvas>
 
+### Small Input
+
+<Canvas>
+  <Story
+    name="Small"
+    args={{
+      smallInput: true,
+    }}
+  >
+    {InputTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ### Classnames
 
 You can change the appearance of the container and label.

platform/ui/src/components/InputNumber/InputNumber.css

@@ -2,7 +2,7 @@ input[type='text'] {
   -webkit-appearance: none;
 }
 
-input[type='text']:focus {
+.input-number:focus {
   border: none;
   outline: none;
 }
@@ -15,3 +15,7 @@ input[type='text']:focus {
 .up-arrowsize svg path {
   fill: #726f7e;
 }
+
+.input-small {
+  height: 26px;
+}

platform/ui/src/components/InputNumber/InputNumber.tsx

@@ -77,16 +77,15 @@ const InputNumber: React.FC<{
 
   return (
     <div
-      className={`flex items-center bg-black border-2 px-1 overflow-hidden justify-center border-secondary-light rounded-md ${
-        sizesClasses[size]
-      } ${className ? className : ''}`}
+      className={`flex items-center bg-black border-2 px-1 overflow-hidden justify-center border-secondary-light rounded-md ${sizesClasses[size]
+        } ${className ? className : ''}`}
     >
       <div className="flex">
         <input
           type="text"
           value={numberValue}
           onChange={handleChange}
-          className={`bg-black text-white text-[12px] w-full text-center`}
+          className={`bg-black text-white text-[12px] w-full text-center input-number`}
         />
 
         <div className="up-arrowsize flex flex-col items-center justify-around">

platform/ui/src/components/InputText/InputText.tsx

@@ -21,7 +21,7 @@ const InputText = ({
     >
       <Input
         id={id}
-        className="border-primary-main mt-2 bg-black"
+        className="mt-2"
         type="text"
         containerClassName="mr-2"
         value={value}
@@ -36,7 +36,7 @@ const InputText = ({
 InputText.defaultProps = {
   value: '',
   isSortable: false,
-  onLabelClick: () => {},
+  onLabelClick: () => { },
   sortDirection: 'none',
 };
 

platform/ui/tailwind.config.js

@@ -35,6 +35,13 @@ module.exports = {
         active: '#348cfd',
       },
 
+      inputfield: {
+        main: '#3a3f99',
+        disabled: '#2b166b',
+        focus: '#5acce6',
+        placeholder: '#39383f'
+      },
+
       secondary: {
         light: '#3a3f99',
         main: '#2b166b',

platform/viewer/tailwind.config.js

@@ -46,6 +46,13 @@ module.exports = {
         active: '#348cfd',
       },
 
+      inputfield: {
+        main: '#3a3f99',
+        disabled: '#2b166b',
+        focus: '#5acce6',
+        placeholder: '#39383f'
+      },
+
       secondary: {
         light: '#3a3f99',
         main: '#2b166b',