2 files changed, 61 insertions, 26 deletions

diff --git a/FrontEnd/src/views/common/input/InputGroup.css b/FrontEnd/src/views/common/input/InputGroup.css
index f9d6ac8b..1763ea53 100644
--- a/FrontEnd/src/views/common/input/InputGroup.css
+++ b/FrontEnd/src/views/common/input/InputGroup.css
@@ -1,25 +1,54 @@
-.cru-input-panel-group {
+.cru-input-group {
   display: block;
+}
+
+.cru-input-container {
   margin: 0.4em 0;
 }
 
-.cru-input-panel-label {
+.cru-input-label {
   display: block;
-  color: var(--cru-primary-color);
+  color: var(--cru-key-color);
+  font-size: 0.9em;
+  margin-bottom: 0.3em;
 }
 
-.cru-input-panel-inline-label {
+.cru-input-label-inline {
   margin-inline-start: 0.5em;
 }
 
-.cru-input-panel-error-text {
+.cru-input-type-text input {
+  appearance: none;
+  display: block;
+  border: 1px solid var(--cru-surface-outline-color);
+  color: var(--cru-surface-on-color);
+  background-color: var(--cru-surface-color);
+  margin: 0;
+  padding: 0;
+  font-size: 1.2em;
+}
+
+.cru-input-type-text input:hover {
+  border-color: var(--cru-key-color);
+}
+
+.cru-input-type-text input:focus {
+  border-color: var(--cru-key-color);
+}
+
+.cru-input-type-text input:disabled {
+  border-color: var(--cru-surface-on-color);
+}
+
+.cru-input-error {
   display: block;
   font-size: 0.8em;
   color: var(--cru-danger-color);
+  margin-top: 0.4em;
 }
 
-.cru-input-panel-helper-text {
+.cru-input-helper {
   display: block;
   font-size: 0.8em;
   color: var(--cru-primary-color);
-}
+}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/input/InputGroup.tsx b/FrontEnd/src/views/common/input/InputGroup.tsx
index 232edfc9..eed8266b 100644
--- a/FrontEnd/src/views/common/input/InputGroup.tsx
+++ b/FrontEnd/src/views/common/input/InputGroup.tsx
@@ -98,14 +98,16 @@ export type State = {
   data: InputData;
 };
 
-export type DataInitializeInfo = Partial<InputData>;
+export type DataInitialization = Partial<InputData>;
 
-export type InitializeInfo = {
+export type Initialization = {
   scheme: InputScheme;
-  dataInit?: DataInitializeInfo;
+  dataInit?: DataInitialization;
 };
 
-export type Initialize
+export type GeneralInitialization = Initialization | InputScheme | InputInfo[];
+
+export type Initializer = GeneralInitialization | (() => GeneralInitialization);
 
 export interface InputGroupProps {
   color?: ThemeColor;
@@ -136,9 +138,7 @@ export type ConfirmResult =
       errors: InputErrorDict;
     };
 
-export function useInputs(options: {
-  init: InitializeInfo | (() => InitializeInfo);
-}): {
+export function useInputs(options: { init: Initializer }): {
   inputGroupProps: InputGroupProps;
   hasError: boolean;
   confirm: () => ConfirmResult;
@@ -158,8 +158,14 @@ export function useInputs(options: {
     throw new Error("Unknown input type");
   }
 
-  function initialize(info: InitializeInfo): State {
-    const { scheme, dataInit } = info;
+  function initialize(generalInitialization: GeneralInitialization): State {
+    const initialization: Initialization = Array.isArray(generalInitialization)
+      ? { scheme: { inputs: generalInitialization } }
+      : "scheme" in generalInitialization
+      ? generalInitialization
+      : { scheme: generalInitialization };
+
+    const { scheme, dataInit } = initialization;
     const { inputs, validator } = scheme;
     const keys = inputs.map((input) => input.key);
 
@@ -185,8 +191,8 @@ export function useInputs(options: {
     }
 
     const values: InputValueDict = {};
-    const disabled: InputDisabledDict = clean(info.dataInit?.disabled);
-    const dirties: InputDirtyDict = clean(info.dataInit?.dirties);
+    const disabled: InputDisabledDict = clean(dataInit?.disabled);
+    const dirties: InputDirtyDict = clean(dataInit?.dirties);
 
     for (let i = 0; i < inputs.length; i++) {
       const input = inputs[i];
@@ -195,7 +201,7 @@ export function useInputs(options: {
       values[key] = initializeValue(input, dataInit?.values?.[key]);
     }
 
-    let errors = info.dataInit?.errors;
+    let errors = dataInit?.errors;
 
     if (errors != null) {
       if (process.env.NODE_ENV === "development") {
@@ -331,13 +337,13 @@ export function InputGroup({
       )}
     >
       {inputs.map((item, index) => {
-        const { type, value, label, error, helper, disabled } = item;
+        const { key, type, value, label, error, helper, disabled } = item;
 
         const getContainerClassName = (
           ...additionalClassNames: classNames.ArgumentArray
         ) =>
           classNames(
-            `cru-input-container cru-input-${type}`,
+            `cru-input-container cru-input-type-${type}`,
             error && "error",
             ...additionalClassNames,
           );
@@ -350,7 +356,7 @@ export function InputGroup({
           const { password } = item;
           return (
             <div
-              key={index}
+              key={key}
               className={getContainerClassName(password && "password")}
             >
               {label && <label className="cru-input-label">{c(label)}</label>}
@@ -369,7 +375,7 @@ export function InputGroup({
           );
         } else if (type === "bool") {
           return (
-            <div key={index} className={getContainerClassName()}>
+            <div key={key} className={getContainerClassName()}>
               <input
                 type="checkbox"
                 checked={value}
@@ -386,7 +392,7 @@ export function InputGroup({
           );
         } else if (type === "select") {
           return (
-            <div key={index} className={getContainerClassName()}>
+            <div key={key} className={getContainerClassName()}>
               <label className="cru-input-label">{c(label)}</label>
               <select
                 value={value}
@@ -396,9 +402,9 @@ export function InputGroup({
                 }}
                 disabled={disabled}
               >
-                {item.options.map((option, i) => {
+                {item.options.map((option) => {
                   return (
-                    <option value={option.value} key={i}>
+                    <option value={option.value} key={option.value}>
                       {option.icon}
                       {c(option.label)}
                     </option>