From fe7fa6e5bf2db1019e5ce42dbff06146e4139a7b Mon Sep 17 00:00:00 2001
From: Braden Morley <63816946+bradenjmorley@users.noreply.github.com>
Date: Fri, 28 Apr 2023 01:01:53 +0000
Subject: [PATCH] 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          | 10 +++++++++-
 .../components/Input/__stories__/input.stories.mdx  | 13 +++++++++++++
 .../ui/src/components/InputNumber/InputNumber.css   |  6 +++++-
 .../ui/src/components/InputNumber/InputNumber.tsx   |  7 +++----
 platform/ui/src/components/InputText/InputText.tsx  |  4 ++--
 platform/ui/tailwind.config.js                      |  7 +++++++
 platform/viewer/tailwind.config.js                  |  7 +++++++
 7 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/platform/ui/src/components/Input/Input.tsx b/platform/ui/src/components/Input/Input.tsx
index a03a4ae7e..2940348b8 100644
--- a/platform/ui/src/components/Input/Input.tsx
+++ b/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,
diff --git a/platform/ui/src/components/Input/__stories__/input.stories.mdx b/platform/ui/src/components/Input/__stories__/input.stories.mdx
index f4cdc174b..aab4caf63 100644
--- a/platform/ui/src/components/Input/__stories__/input.stories.mdx
+++ b/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.
diff --git a/platform/ui/src/components/InputNumber/InputNumber.css b/platform/ui/src/components/InputNumber/InputNumber.css
index 22f0c1ca1..8eae97b2e 100644
--- a/platform/ui/src/components/InputNumber/InputNumber.css
+++ b/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;
+}
diff --git a/platform/ui/src/components/InputNumber/InputNumber.tsx b/platform/ui/src/components/InputNumber/InputNumber.tsx
index a96446293..c7ef97868 100644
--- a/platform/ui/src/components/InputNumber/InputNumber.tsx
+++ b/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">
diff --git a/platform/ui/src/components/InputText/InputText.tsx b/platform/ui/src/components/InputText/InputText.tsx
index 2f5c1bb18..e5d95d81f 100644
--- a/platform/ui/src/components/InputText/InputText.tsx
+++ b/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',
 };
 
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index 90b0c2f99..1bce56ab0 100644
--- a/platform/ui/tailwind.config.js
+++ b/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',
diff --git a/platform/viewer/tailwind.config.js b/platform/viewer/tailwind.config.js
index 535239ca5..272ff180c 100644
--- a/platform/viewer/tailwind.config.js
+++ b/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',