Crates UI fixes

TODO ex .rfqFeedback fixes

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

sass/css/_shop.scss

@@ -201,22 +201,6 @@ button {
                 width: 50%;
                 padding-right: 30px;
             }
-            .crate-mode {
-                text-align: right;
-                width: 50%;
-
-                a {
-                    cursor: pointer;
-                    margin-right: 1rem;
-                    color: inherit;
-                    text-decoration: none;
-                    padding-bottom: 5px;
-                }
-                a.active {
-                    font-weight: 700;
-                    border-bottom: 3px solid $btn-primary-2;
-                }
-            }
         }
 
         .summary {
@@ -555,6 +539,41 @@ button {
             .crate-info {
                 padding: 1rem 0 0;
             }
+
+            .crate-bar {
+                width: 100%;
+
+                .crate-mode {
+                    text-align: left;
+                    width: 75%;
+                    display: inline;
+
+                    a {
+                        cursor: pointer;
+                        margin-right: 1rem;
+                        color: inherit;
+                        text-decoration: none;
+                        padding-bottom: 5px;
+                    }
+                    a.active {
+                        font-weight: 700;
+                        border-bottom: 3px solid $btn-primary-2;
+                    }
+                }
+                .delete-crate {
+                    text-decoration: none;
+                    cursor: pointer;
+                    text-align: right;
+                    display: inline-flex;
+                    width: 25%;
+                    color: inherit;
+                    img {
+                        margin-left: 1rem;
+                        align-self: center;
+                    }
+                }
+            }
+
         }
     }
 

static/css/order-hardware.css

@@ -61,6 +61,26 @@
   text-decoration: none;
 }
 
+#accordion_crates #accordion_crates_add .accordion-button:after {
+  background-image: url("/images/shop/icon-add.svg");
+}
+
+#accordion_crates .accordion-header button {
+  font-weight: bold;
+}
+
+#accordion_crates,
+#accordion_crates .accordion-header,
+#accordion_crates .accordion-button,
+#accordion_crates .accordion-item {
+  background-color: inherit;
+}
+
+#accordion_crates .accordion-button:not(.collapsed) {
+  background-color: rgba(26, 109, 147, 0.1);
+}
+
+
 /*
   ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px
@@ -108,11 +128,11 @@
   }
 
   #root-shop .panel .control > .description,
-  #root-shop .panel .control > .crate-mode {
+  #root-shop .crate-mode {
     width: 100%;
   }
 
-  #root-shop .panel .control > .crate-mode {
+  #root-shop .crate-mode {
     text-align: left;
   }
 
@@ -308,11 +328,11 @@
   }
 
   #root-shop .panel .control > .description,
-  #root-shop .panel .control > .crate-mode {
+  #root-shop .crate-mode {
     width: 100%;
   }
 
-  #root-shop .panel .control > .crate-mode {
+  #root-shop .crate-mode {
     text-align: left;
   }
 

static/js/shop/Crate.jsx

@@ -20,13 +20,12 @@ export function Crate({crate_index}) {
     return (
         <div className="crate">
 
-            <CrateMode crate_index={crate_index}/>
+            <div className="crate-bar d-inline-flex">
+                <CrateMode crate_index={crate_index}/>
 
-            <div>
-                Delete crate
-                <button style={{width: "32px"}} onClick={() => onDeleteCrate(crate.id)}>
-                    <img src="/images/shop/icon-remove.svg" alt="remove"/>
-                </button>
+                <div className="delete-crate align-self-end align-content-end justify-content-end" onClick={() => onDeleteCrate(crate.id)}>
+                    Delete crate <img src="/images/shop/icon-remove.svg" alt="remove"/>
+                </div>
             </div>
 
             <div className="crate-products">

static/js/shop/CrateList.jsx

@@ -16,7 +16,7 @@ export function CrateList() {
         setActiveCrate: state.setActiveCrate,
     }));
     return (
-        <Accordion flush activeKey={active_crate} onSelect={(e) => {
+        <Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={(e) => {
             // if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
             if (e !== null)
                 setActiveCrate(e);
@@ -31,10 +31,9 @@ export function CrateList() {
                     </Accordion.Body>
                 </Accordion.Item>
             )}
-            <Accordion.Item eventKey="last">
+            <Accordion.Item eventKey="last" id="accordion_crates_add">
                 <Accordion.Header onClick={onAddCrate}>
                     Add new crate
-                    <img src="/images/shop/icon-add.svg" alt="add" width="32px"/>
                 </Accordion.Header>
             </Accordion.Item>
         </Accordion>)

static/js/shop/shop_store.js

@@ -356,7 +356,7 @@ const useCart = ((set, get) => ({
     setCrateMode: (id, mode) => {
         get()._setCrateMode(id, mode)
         get().fillWarnings(id);
-        get().setActiveCrate(crate_to);
+        get().setActiveCrate(id);
     },
 
     addCardFromBacklog: (crate_to, index_from, index_to, just_mounted) => {