Alignment fixes, remove price of spare cards, reworded the description phrase,

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

sass/css/_shop.scss

@@ -323,9 +323,11 @@ button {
                     }
                 }
                 span {
-                    margin-left: 16px;
                     width: 28px;
                 }
+                .span-with-margin {
+                    margin-left: 16px;
+                }
             }
 
             > .summary-form {

static/js/shop/CardWarnings.jsx

@@ -39,7 +39,7 @@ export function WarningIndicator({crate_index, card_index}) {
     const max_level = MaxLevel(warnings);
     return (
         <img
-            className="alert-warning align-self-start"
+            className="alert-warning align-self-start d-block"
             src={max_level.icon}
         />
     )

static/js/shop/OrderSummary.jsx

@@ -14,7 +14,6 @@ import {useRenderCount} from "@uidotdev/usehooks";
 export function OrderSummary() {
     // #!render_count
     const renderCount = useRenderCount();
-    const clearAll = useShopStore((state) => state.clearAll);
 
     // #!render_count
     console.log("OrderSummary renders: ", renderCount)
@@ -23,19 +22,6 @@ export function OrderSummary() {
         <div className="summary-price">
 
             <table>
-
-                <thead>
-                <tr>
-                    <td colSpan="2" className="summary-remove-all">
-                        <span className="item-card-name">Reset the order</span>
-
-                        <button onClick={clearAll}>
-                            <img src="/images/shop/icon-remove.svg"/>
-                        </button>
-                    </td>
-                </tr>
-                </thead>
-
                 <SummaryCrates/>
 
                 <tfoot>

static/js/shop/Shop.jsx

@@ -53,12 +53,15 @@ export function Shop() {
                     <OrderPanel
                         title="Order hardware"
                         description={(
-                            <p className="description">Drag and drop the cards you want into the crate below to see how
+                            <p className="description">
-                                the combination would look like. Setup card's configuration by tapping at the top of the
+                                Drag and drop the cards you want into the crate below to see how
-                                card, most of the options can be modified after shipment. If you have any issues with
+                                the combination would look like. Configure the card settings by tapping on the top of
-                                this ordering system, or if you need other configurations, email us directly anytime
+                                the card; many of the options can be adjusted even after the card has been shipped.
-                                at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>. The price is estimated and must
+                                If you have any issues with this ordering system, or if you need other configurations,
-                                be confirmed by a quote.</p>)}
+                                email us directly anytime at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>.
+                                The price is estimated and must be confirmed by a quote.
+                            </p>
+                        )}
                     />
                 )}>
             </Layout>

static/js/shop/SummaryCrateCard.jsx

@@ -54,7 +54,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
                     {`${currency} ${formatMoney(card.price)}`}
 
                     <button onClick={() => deleteCard(crate_id, card_index)}>
-                        <img src="/images/shop/icon-remove.svg"/>
+                        <img src="/images/shop/icon-remove.svg" className="d-block"/>
                     </button>
 
                     <div style={{'width': '45px', 'height': '20px'}}
@@ -64,7 +64,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
                         ) : (
                             <span style={{
                                 'display': 'inline-block',
-                                'width': '20px',
+                                'minWidth': '20px',
                             }}>&nbsp;</span>
                         ))}
                         {((options && options_data) ? (

static/js/shop/SummaryCrateHeader.jsx

@@ -19,6 +19,7 @@ export function SummaryCrateHeader({crate_index}) {
     const crate_id = useShopStore((state) => state.crates[crate_index].id);
     const crate_name = useShopStore((state) => state.crates[crate_index].name);
     const modes_order = useShopStore((state) => state.modes_order);
+    const crate_mode_displayed = modes_order.includes(crate_mode);
 
 
     // #!render_count
@@ -31,18 +32,19 @@ export function SummaryCrateHeader({crate_index}) {
             <td className="item-card-name">{!!crate_name ? crate_name :  crate_type.name + " #" + crate_index}</td>
             <td className="price">
                 <div className="d-inline-flex">
-                    {`${currency} ${formatMoney(crate_type.price)}`}
+
+                    {crate_mode_displayed && `${currency} ${formatMoney(crate_type.price)}`}
 
                     <button onClick={() => clearCrate(crate_id)}>
                         <img src="/images/shop/icon-clear.svg" alt="empty crate"/>
                     </button>
 
                     {
-                        modes_order.includes(crate_mode) ? (
+                        crate_mode_displayed ? (
                             <button onClick={() => delCrate(crate_id)}>
                                 <img src="/images/shop/icon-remove.svg" alt="remove crate"/>
                             </button>
-                        ) : <span></span>
+                        ) : <span className="span-with-margin"></span>
                     }
 
                 </div>

static/js/shop/options/SummaryPopup.jsx

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