Combine warning and options iconed buttons in one line

Signed-off-by: Egor Savkin <es@m-labs.hk>

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,
+                !!hovered,
-                model.selected ? true : false,
+                !!model.selected,
                     true
               )}}
               onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
@@ -664,24 +664,28 @@ class ProductCartItem extends React.PureComponent {
               >
 
             {/* warning container */}
-            <OverlayTrigger
+
-              placement="bottom"
+            <div className="progress-container warning d-flex justify-content-evenly">
-              trigger={warning ? ['click', 'hover', 'focus'] : []}
+              {warning &&
-              overlay={
+                  (<OverlayTrigger
-                ({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
+                      placement="bottom"
-                <div className="k-popup-warning" {...props}>
+                      trigger={['click', 'hover', 'focus']}
-                  <p className="rule warning">
+                      overlay={
-                    <i>{warning.message}</i>
+                        ({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
-                  </p>
+                            <div className="k-popup-warning" {...props}>
-                </div>)
+                              <p className="rule warning">
+                                <i>{warning.message}</i>
+                              </p>
+                            </div>)
+                      }
+                      rootClose
+                  >
+                    <img className="alert-warning" src={`/images${warning.icon}`}/>
+                  </OverlayTrigger>)
               }
-              rootClose
+
-            >
+              {options && (
-              <div className="progress-container warning">
+                  <OptionsDialogPopup
-                {warning ?
-                  (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>) :
-                  (options && (
-                    <OptionsDialogPopup
                       options={options}
                       data={options_data}
                       options_class={model.options_class}
@@ -699,11 +703,9 @@ class ProductCartItem extends React.PureComponent {
                           onCardUpdate();
                         })
                       }}
-                    />
+                  />
-                  ))
+              )}
-                }
+            </div>
-              </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 style={{'width': '45px', 'height': '20px'}} className="d-inline-flex align-content-center align-self-center justify-content-evenly">
+                        {(warning ? (
+                            <img
+                                className="alert-warning align-self-start"
+                                src={`/images/${warning.icon}`}
+                            />
+                          ) : (
+                            <span style={{
+                              'display': 'inline-block',
+                              '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>
-
-                    {warning ? (
-                      <img
-                          style={{'marginLeft': '10px'}}
-                          className="alert-warning"
-                          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',
-                      }}>&nbsp;</span>
-                    )}
                   </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}}