OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

platform/ui/src/components/Input/Input.jsx

@@ -4,7 +4,7 @@ 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 mt-2 text-sm text-white leading-tight focus:outline-none';
+  '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';
 
 const transparentClasses = {
   true: 'bg-transparent',
@@ -23,6 +23,9 @@ const Input = ({
   onFocus,
   autoFocus,
   onKeyPress,
+  onKeyDown,
+  readOnly,
+  disabled,
   ...otherProps
 }) => {
   return (
@@ -30,16 +33,21 @@ const Input = ({
       <Label className={labelClassName} text={label}></Label>
       <input
         className={classnames(
+          label && 'mt-2',
           className,
           baseInputClasses,
-          transparentClasses[transparent]
+          transparentClasses[transparent],
+          { 'cursor-not-allowed': disabled }
         )}
-        autoFocus
+        disabled={disabled}
+        readOnly={readOnly}
+        autoFocus={autoFocus}
         type={type}
         value={value}
         onChange={onChange}
         onFocus={onFocus}
         onKeyPress={onKeyPress}
+        onKeyDown={onKeyDown}
         {...otherProps}
       />
     </div>
@@ -57,7 +65,10 @@ Input.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   autoFocus: PropTypes.bool,
+  readOnly: PropTypes.bool,
   onKeyPress: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  disabled: PropTypes.bool
 };
 
 export default Input;