(quality) Refacto tooltip

app/frontend/src/javascript/components/form/abstract-form-item.tsx

@@ -63,7 +63,7 @@ export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label,
     <>
       {(label && !inLine) && <div className='form-item-header'>
         <p onClick={handleLabelClick}>{label}</p>
-        {tooltip && <div className="item-tooltip">
+        {tooltip && <div className="fab-tooltip">
           <span className="trigger"><i className="fa fa-question-circle" /></span>
           <div className="content">{tooltip}</div>
         </div>}
@@ -71,7 +71,7 @@ export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label,
 
       <div className='form-item-field'>
         {inLine && <div className='form-item-header'><p>{label}</p>
-          {tooltip && <div className="item-tooltip">
+          {tooltip && <div className="fab-tooltip">
             <span className="trigger"><i className="fa fa-question-circle" /></span>
             <div className="content">{tooltip}</div>
           </div>}

app/frontend/src/javascript/components/store/order-item.tsx

@@ -6,6 +6,7 @@ import { FabButton } from '../base/fab-button';
 import { User } from '../../models/user';
 import { FabStateLabel } from '../base/fab-state-label';
 import OrderLib from '../../lib/order';
+import { ArrowClockwise } from 'phosphor-react';
 
 interface OrderItemProps {
   order?: Order,
@@ -47,7 +48,18 @@ export const OrderItem: React.FC<OrderItemProps> = ({ order, currentUser }) => {
           <p>{order?.user?.name || ''}</p>
         </div>
       }
-      <p className="date">{FormatLib.date(order.created_at)}</p>
+      <div className="date">
+        <span>{t('app.shared.store.order_item.created_at')}</span>
+        <p>{FormatLib.date(order.created_at)}
+          <div className="fab-tooltip">
+            <span className="trigger"><ArrowClockwise size={16} weight="light" /></span>
+            <div className="content">
+              {t('app.shared.store.order_item.last_update')}<br />
+              {FormatLib.date(order.updated_at)}
+            </div>
+          </div>
+        </p>
+      </div>
       <div className='price'>
         <span>{t('app.shared.store.order_item.total')}</span>
         <p>{FormatLib.price(order.state === 'cart' ? order.total : order.paid_total)}</p>

app/frontend/src/javascript/components/store/orders.tsx

@@ -356,7 +356,7 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onError }) => {
             <button onClick={removeFilter('user')}><X size={16} weight="light" /></button>
           </div>}
           {filters.period_from && <div className='features-item'>
-            <p>{filters.period_from} - {filters.period_to}</p>
+            <p>{filters.period_from} {'>'} {filters.period_to}</p>
             <button onClick={removeFilter('period')}><X size={16} weight="light" /></button>
           </div>}
         </div>

app/frontend/src/stylesheets/application.scss

@@ -30,6 +30,7 @@
 @import "modules/base/fab-popover";
 @import "modules/base/fab-state-label";
 @import "modules/base/fab-text-editor";
+@import "modules/base/fab-tooltip";
 @import "modules/base/labelled-input";
 @import "modules/calendar/calendar";
 @import "modules/cart/cart-button";

app/frontend/src/stylesheets/modules/base/fab-tooltip.scss

@@ -0,0 +1,29 @@
+.fab-tooltip {
+  position: relative;
+  cursor: help;
+
+  .trigger i { display: block; }
+  .content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    width: max-content;
+    max-width: min(75vw, 65ch);
+    padding: 1rem;
+    background-color: var(--information-lightest);
+    color: var(--information);
+    border: 1px solid var(--information);
+    border-radius: var(--border-radius);
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.2em;
+    z-index: 1;
+    & > span { display: block; }
+    a {
+      color: var(--gray-hard);
+      text-decoration: underline;
+    }
+  }
+  &:hover .content { display: block; }
+}

app/frontend/src/stylesheets/modules/form/abstract-form-item.scss

@@ -15,36 +15,6 @@
       cursor: pointer;
       &::first-letter { text-transform: uppercase; }
     }
-
-    .item-tooltip {
-      position: relative;
-      cursor: help;
-
-      .trigger i { display: block; }
-      .content {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: none;
-        width: max-content;
-        max-width: min(75vw, 65ch);
-        padding: 1rem;
-        background-color: var(--information-lightest);
-        color: var(--information);
-        border: 1px solid var(--information);
-        border-radius: var(--border-radius);
-        font-size: 14px;
-        font-weight: normal;
-        line-height: 1.2em;
-        z-index: 1;
-        & > span { display: block; }
-        a {
-          color: var(--gray-hard);
-          text-decoration: underline;
-        }
-      }
-      &:hover .content { display: block; }
-    }
   }
   &.is-hidden {
     display: none;

app/frontend/src/stylesheets/modules/form/form-switch.scss

@@ -6,7 +6,7 @@
       margin-left: 1.5rem;
     }
 
-    .item-tooltip .content {
+    .fab-tooltip .content {
       max-width: min(75vw, 30ch);
     }
   }

app/frontend/src/stylesheets/modules/store/order-item.scss

@@ -36,7 +36,20 @@
     }
     p { @include text-sm; }
   }
-  .date { @include text-sm; }
+  .date {
+    & > span {
+      @include text-xs;
+      color: var(--gray-hard-light);
+    }
+    p {
+      display: flex;
+      @include text-sm;
+      .fab-tooltip {
+        margin-left: 1rem;
+        color: var(--information);
+      }
+    }
+  }
   .price {
     flex: 0 1 30%;
     display: flex;

config/locales/app.shared.en.yml

@@ -564,6 +564,8 @@ en:
         order_item:
           total: "Total"
           client: "Client"
+          created_at: "Order creation"
+          last_update: "Last update"
           state:
             cart: 'Cart'
             in_progress: 'In progress'