small changes

move tooltips to the right for the form fields
move pickers into a folder
some designs changes in product search form

19 files changed, 26 insertions, 22 deletions

diff --git a/packages/frontend/src/components/form/Input.tsx b/packages/frontend/src/components/form/Input.tsx
index f7e0b5c..9a9691e 100644
--- a/packages/frontend/src/components/form/Input.tsx
+++ b/packages/frontend/src/components/form/Input.tsx
@@ -44,7 +44,7 @@ export function Input<T>({ name, readonly, placeholder, tooltip, label, expand,
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/InputArray.tsx b/packages/frontend/src/components/form/InputArray.tsx
index 13800c7..211d995 100644
--- a/packages/frontend/src/components/form/InputArray.tsx
+++ b/packages/frontend/src/components/form/InputArray.tsx
@@ -47,7 +47,7 @@ export function InputArray<T>({ name, readonly, placeholder, tooltip, label, hel
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/InputDate.tsx b/packages/frontend/src/components/form/InputDate.tsx
index 614e44a..75f955f 100644
--- a/packages/frontend/src/components/form/InputDate.tsx
+++ b/packages/frontend/src/components/form/InputDate.tsx
@@ -22,7 +22,7 @@ import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Translate, useTranslator } from "../../i18n";
-import { DatePicker } from "./DatePicker";
+import { DatePicker } from "../picker/DatePicker";
 import { InputProps, useField } from "./useField";
 
 export interface Props<T> extends InputProps<T> {
@@ -53,7 +53,7 @@ export function InputDate<T>({ name, readonly, label, placeholder, help, tooltip
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/InputDuration.tsx b/packages/frontend/src/components/form/InputDuration.tsx
index 76e9022..258858b 100644
--- a/packages/frontend/src/components/form/InputDuration.tsx
+++ b/packages/frontend/src/components/form/InputDuration.tsx
@@ -23,7 +23,7 @@ import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Translate, useTranslator } from "../../i18n";
 import { SimpleModal } from "../modal";
-import { DurationPicker } from "./DurationPicker";
+import { DurationPicker } from "../picker/DurationPicker";
 import { InputProps, useField } from "./useField";
 
 export interface Props<T> extends InputProps<T> {
diff --git a/packages/frontend/src/components/form/InputGroup.tsx b/packages/frontend/src/components/form/InputGroup.tsx
index 146b977..a4252f0 100644
--- a/packages/frontend/src/components/form/InputGroup.tsx
+++ b/packages/frontend/src/components/form/InputGroup.tsx
@@ -39,7 +39,7 @@ export function InputGroup<T>({ name, label, children, tooltip, alternative, ini
     <header class="card-header">
       <p class="card-header-title">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
         {group?.hasError && <span class="icon has-text-danger" data-tooltip={tooltip}>
diff --git a/packages/frontend/src/components/form/InputImage.tsx b/packages/frontend/src/components/form/InputImage.tsx
index 2f598b3..55a6b66 100644
--- a/packages/frontend/src/components/form/InputImage.tsx
+++ b/packages/frontend/src/components/form/InputImage.tsx
@@ -18,7 +18,7 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
-import { ComponentChildren, h } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
 import emptyImage from "../../assets/empty.png";
 import { Translate } from "../../i18n";
@@ -31,7 +31,7 @@ export interface Props<T> extends InputProps<T> {
   children?: ComponentChildren;
 }
 
-export function InputImage<T>({ name, readonly, placeholder, tooltip, label, help, children, expand }: Props<keyof T>) {
+export function InputImage<T>({ name, readonly, placeholder, tooltip, label, help, children, expand }: Props<keyof T>): VNode {
   const { error, value, onChange } = useField<T>(name);
 
   const image = useRef<HTMLInputElement>(null)
@@ -42,7 +42,7 @@ export function InputImage<T>({ name, readonly, placeholder, tooltip, label, hel
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/InputSearchProduct.tsx b/packages/frontend/src/components/form/InputSearchProduct.tsx
index f9f8f68..51f84fd 100644
--- a/packages/frontend/src/components/form/InputSearchProduct.tsx
+++ b/packages/frontend/src/components/form/InputSearchProduct.tsx
@@ -60,7 +60,7 @@ export function InputSearchProduct({ selected, onChange, products }: Props): VNo
           <p class="media-meta"><Translate>Product id</Translate>: <b>{selected.id}</b></p>
           <p><Translate>Description</Translate>: {selected.description}</p>
           <div class="buttons is-right mt-5">
-            <button class="button" onClick={() => onChange(undefined)}>clear</button>
+            <button class="button is-info" onClick={() => onChange(undefined)}>clear</button>
           </div>
         </div>
       </div>
@@ -71,9 +71,9 @@ export function InputSearchProduct({ selected, onChange, products }: Props): VNo
 
     <InputWithAddon<ProductSearch>
       name="name"
-      label={i18n`Name`}
-      tooltip={i18n`search products using description or id`}
-      addonBefore={<span class="icon" ><i class="mdi mdi-magnify" /></span>}
+      label={i18n`Product`}
+      tooltip={i18n`search products by it's description or id`}
+      addonAfter={<span class="icon" ><i class="mdi mdi-magnify" /></span>}
     >
       <div>
         <ProductList
diff --git a/packages/frontend/src/components/form/InputSecured.tsx b/packages/frontend/src/components/form/InputSecured.tsx
index 7f871c7..c9b0f43 100644
--- a/packages/frontend/src/components/form/InputSecured.tsx
+++ b/packages/frontend/src/components/form/InputSecured.tsx
@@ -48,7 +48,7 @@ export function InputSecured<T>({ name, readonly, placeholder, tooltip, label, h
       <div class="field-label is-normal">
         <label class="label">
           {label}
-          {tooltip && <span class="icon" data-tooltip={tooltip}>
+          {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
             <i class="mdi mdi-information" />
           </span>}
         </label>
diff --git a/packages/frontend/src/components/form/InputSelector.tsx b/packages/frontend/src/components/form/InputSelector.tsx
index d787495..3e155d2 100644
--- a/packages/frontend/src/components/form/InputSelector.tsx
+++ b/packages/frontend/src/components/form/InputSelector.tsx
@@ -39,7 +39,7 @@ export function InputSelector<T>({ name, readonly, expand, placeholder, tooltip,
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/InputStock.tsx b/packages/frontend/src/components/form/InputStock.tsx
index a9200cd..158f441 100644
--- a/packages/frontend/src/components/form/InputStock.tsx
+++ b/packages/frontend/src/components/form/InputStock.tsx
@@ -51,7 +51,7 @@ interface StockDelta {
 }
 
 
-export function InputStock<T>({ name, readonly, placeholder, tooltip, label, help, alreadyExist }: Props<keyof T>) {
+export function InputStock<T>({ name, tooltip, label, alreadyExist }: Props<keyof T>) {
   const { error, value, onChange } = useField<T>(name);
 
   const [errors, setErrors] = useState<FormErrors<Entity>>({})
@@ -79,7 +79,7 @@ export function InputStock<T>({ name, readonly, placeholder, tooltip, label, hel
         <div class="field-label is-normal">
           <label class="label">
             {label}
-            {tooltip && <span class="icon" data-tooltip={tooltip}>
+            {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
               <i class="mdi mdi-information" />
             </span>}
           </label>
diff --git a/packages/frontend/src/components/form/InputWithAddon.tsx b/packages/frontend/src/components/form/InputWithAddon.tsx
index d2905df..a16ebc2 100644
--- a/packages/frontend/src/components/form/InputWithAddon.tsx
+++ b/packages/frontend/src/components/form/InputWithAddon.tsx
@@ -43,7 +43,7 @@ export function InputWithAddon<T>({ name, readonly, addonBefore, children, expan
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/TextField.tsx b/packages/frontend/src/components/form/TextField.tsx
index 50ea26a..2579a27 100644
--- a/packages/frontend/src/components/form/TextField.tsx
+++ b/packages/frontend/src/components/form/TextField.tsx
@@ -34,7 +34,7 @@ export function TextField<T>({ name, tooltip, label, expand, help, children, sid
     <div class="field-label is-normal">
       <label class="label">
         {label}
-        {tooltip && <span class="icon" data-tooltip={tooltip}>
+        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
           <i class="mdi mdi-information" />
         </span>}
       </label>
diff --git a/packages/frontend/src/components/form/DatePicker.tsx b/packages/frontend/src/components/picker/DatePicker.tsx
index 084b7b0..084b7b0 100644
--- a/packages/frontend/src/components/form/DatePicker.tsx
+++ b/packages/frontend/src/components/picker/DatePicker.tsx
diff --git a/packages/frontend/src/components/form/DurationPicker.scss b/packages/frontend/src/components/picker/DurationPicker.scss
index a355753..a355753 100644
--- a/packages/frontend/src/components/form/DurationPicker.scss
+++ b/packages/frontend/src/components/picker/DurationPicker.scss
diff --git a/packages/frontend/src/components/form/DurationPicker.stories.tsx b/packages/frontend/src/components/picker/DurationPicker.stories.tsx
index 275c80f..275c80f 100644
--- a/packages/frontend/src/components/form/DurationPicker.stories.tsx
+++ b/packages/frontend/src/components/picker/DurationPicker.stories.tsx
diff --git a/packages/frontend/src/components/form/DurationPicker.tsx b/packages/frontend/src/components/picker/DurationPicker.tsx
index 2d51f2d..2d51f2d 100644
--- a/packages/frontend/src/components/form/DurationPicker.tsx
+++ b/packages/frontend/src/components/picker/DurationPicker.tsx
diff --git a/packages/frontend/src/components/product/InventoryProductForm.tsx b/packages/frontend/src/components/product/InventoryProductForm.tsx
index 6f05f26..8f05c97 100644
--- a/packages/frontend/src/components/product/InventoryProductForm.tsx
+++ b/packages/frontend/src/components/product/InventoryProductForm.tsx
@@ -79,14 +79,14 @@ export function InventoryProductForm({ currentProducts, onAddProduct, inventory
   return <FormProvider<Form> errors={errors} object={state} valueHandler={setState}>
     <InputSearchProduct selected={state.product} onChange={(p) => setState(v => ({ ...v, product: p }))} products={inventory} />
     { state.product && <div class="columns mt-5">
-      <div class="column is-four-fifths">
+      <div class="column is-two-thirds">
         {!productWithInfiniteStock &&
           <InputNumber<Form> name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`} />
         }
       </div>
       <div class="column">
         <div class="buttons is-right">
-          <button class="button is-success" onClick={submit}><Translate>Add</Translate></button>
+          <button class="button is-success" onClick={submit}><Translate>Add from inventory</Translate></button>
         </div>
       </div>
     </div> }
diff --git a/packages/frontend/src/components/product/NonInventoryProductForm.tsx b/packages/frontend/src/components/product/NonInventoryProductForm.tsx
index 3ba4764..8bb1489 100644
--- a/packages/frontend/src/components/product/NonInventoryProductForm.tsx
+++ b/packages/frontend/src/components/product/NonInventoryProductForm.tsx
@@ -64,7 +64,7 @@ export function NonInventoryProductFrom({ productToEdit, onAddProduct }: Props):
 
   return <Fragment>
     <div class="buttons">
-      <button class="button is-success" onClick={() => setShowCreateProduct(true)} ><Translate>add custom product</Translate></button>
+      <button class="button is-success" data-tooltip={i18n`describe and add a product that is not in the inventory list`} onClick={() => setShowCreateProduct(true)} ><Translate>Add custom product</Translate></button>
     </div>
     {showCreateProduct && <div class="modal is-active">
       <div class="modal-background " onClick={() => setShowCreateProduct(false)} />
diff --git a/packages/frontend/src/scss/main.scss b/packages/frontend/src/scss/main.scss
index 100cadc..d59a1db 100644
--- a/packages/frontend/src/scss/main.scss
+++ b/packages/frontend/src/scss/main.scss
@@ -175,3 +175,7 @@ input:read-only {
 span[data-tooltip] {
   border-bottom: none;
 }
+
+div[data-tooltip]::before {
+  position: absolute;
+}
\ No newline at end of file