sass/css/_shop.scss

@@ -255,13 +255,10 @@ button {
 
                 .item-card-name,
                 .price {
-                    > .alert-warning, .alert-info {
+                    .alert-warning, .alert-info {
                         background-color: inherit;
                         height: inherit;
                         width: 20px;
-                        padding-bottom: 3px;
-                    }
-                    .alert-info {
                         padding-bottom: 0;
                     }
                 }

static/js/shop.jsx

@@ -655,8 +655,8 @@ class ProductCartItem extends React.PureComponent {
                 provided.draggableProps.style,
                 snapshot,
                 true,
-                hovered ? true : false,
-                model.selected ? true : false,
+                !!hovered,
+                !!model.selected,
                     true
               )}}
               onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
@@ -664,9 +664,12 @@ class ProductCartItem extends React.PureComponent {
               >
 
             {/* warning container */}
-            <OverlayTrigger
+
+            <div className="progress-container warning d-flex justify-content-evenly">
+              {warning &&
+                  (<OverlayTrigger
                       placement="bottom"
-              trigger={warning ? ['click', 'hover', 'focus'] : []}
+                      trigger={['click', 'hover', 'focus']}
                       overlay={
                         ({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
                             <div className="k-popup-warning" {...props}>
@@ -677,10 +680,11 @@ class ProductCartItem extends React.PureComponent {
                       }
                       rootClose
                   >
-              <div className="progress-container warning">
-                {warning ?
-                  (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>) :
-                  (options && (
+                    <img className="alert-warning" src={`/images${warning.icon}`}/>
+                  </OverlayTrigger>)
+              }
+
+              {options && (
                   <OptionsDialogPopup
                       options={options}
                       data={options_data}
@@ -700,10 +704,8 @@ class ProductCartItem extends React.PureComponent {
                         })
                       }}
                   />
-                  ))
-                }
+              )}
             </div>
-            </OverlayTrigger>
 
             <h6>{model.name_number}</h6>
 
@@ -1423,30 +1425,35 @@ class OrderSumary extends React.PureComponent {
                   </td>
 
                   <td className="price">
-                    <div>
+                    <div className="d-inline-flex align-content-center">
                       {`${currency} ${formatMoney(item.price)}`}
 
                       <button onClick={this.handleOnDeleteItem.bind(this, index)}>
                         <img src="/images/shop/icon-remove.svg" />
                       </button>
-                    </div>
 
-                    {warning ? (
+                      <div style={{'width': '45px', 'height': '20px'}} className="d-inline-flex align-content-center align-self-center justify-content-evenly">
+                        {(warning ? (
                             <img
-                          style={{'marginLeft': '10px'}}
-                          className="alert-warning"
+                                className="alert-warning align-self-start"
                                 src={`/images/${warning.icon}`}
                             />
-                    ) : ( (options && options_data) ?
-                      ( <OptionsSummaryPopup id={item.id + "options"} options={options} data={options_data} /> ) : null
-                    )}
-
-                    {(!warning && !options) && (
+                          ) : (
                             <span style={{
                               'display': 'inline-block',
-                        'width': '30px',
+                              'width': '20px',
                             }}>&nbsp;</span>
-                    )}
+                          ))}
+                        {((options && options_data) ? (
+                            <OptionsSummaryPopup id={item.id + "options"} options={options} data={options_data} />
+                        ) : (
+                            <span style={{
+                              'display': 'inline-block',
+                              'width': '20px',
+                            }}>&nbsp;</span>
+                        ))}
+                      </div>
+                    </div>
                   </td>
                 </tr>
               );

static/js/shop_components.jsx

@@ -423,7 +423,6 @@ export function OptionsSummaryPopup({id, options, data}) {
     return (
         <div ref={ref}>
             <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
-                 style={{'marginLeft': '10px'}}
                  id={id + "img"}
                  onClick={handleClick}/>
             <div style={{'display': show ? 'flex' : 'none', 'top': position.y, 'left': position.x}}