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,13 +4,18 @@ 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,
@@ -18,6 +23,7 @@ const Input = ({
   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.