Revert legend

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

sass/css/_shop.scss

@@ -216,18 +216,6 @@ button {
                 width: 50%;
                 padding-right: 30px;
             }
-
-            > .legend {
-                //d-flex justify-content-end align-self-start
-                display: flex;
-                justify-content: end;
-                align-self: start;
-                width: 50%;
-                table {
-                    width: 75%;
-                    max-width: 300px;
-                }
-            }
         }
 
         .summary {

static/css/order-hardware.css

@@ -108,17 +108,9 @@
   }
 
   #root-shop .panel .control > .description,
-  #root-shop .panel .control > .legend,
   #root-shop .crate-mode {
     width: 100%;
   }
-  #root-shop .panel .control > .legend {
-    justify-content: center;
-    align-self: center;
-  }
-  #root-shop .panel .control > .legend tr {
-    padding: 0;
-  }
 
   #root-shop .crate-mode {
     text-align: left;
@@ -315,17 +307,9 @@
     margin-bottom: 1.5rem;
   }
 
-  #root-shop .panel .control > .description,
+  #root-shop .panel .control > .description {
-  #root-shop .panel .control > .legend {
     width: 100%;
   }
-  #root-shop .panel .control > .legend {
-    justify-content: center;
-    align-self: center;
-  }
-  #root-shop .panel .control > .legend tr {
-    padding: 0;
-  }
 
   #root-shop .panel .crate .crate-bar .crate-mode {
     text-align: left;
@@ -589,17 +573,9 @@
     font-size: 1.5rem;
   }
 
-  #root-shop .panel .control > .description,
+  #root-shop .panel .control > .description {
-  #root-shop .panel .control > .legend {
     width: 100%;
   }
-  #root-shop .panel .control > .legend {
-    justify-content: center;
-    align-self: center;
-  }
-  #root-shop .panel .control > .legend tr {
-    padding: 0;
-  }
 
   #root-shop .panel .crate .crate-bar .crate-mode {
     text-align: left;

static/js/shop/Legend.jsx

@@ -1,21 +0,0 @@
-import React from "react";
-import {useShopStore} from "./shop_store";
-
-export function LegendItem({icon, description}) {
-    return (
-        <tr>
-            <td className="p-1"><img className="" width="20px" src={icon} alt={description}/></td>
-            <td className="p-1"><span> {description} </span></td>
-        </tr>
-    )
-}
-
-export function Legend() {
-    const legend = useShopStore(state => state.legend);
-
-    return <table>
-        <tbody>
-        {legend.map((item, i) => <LegendItem key={"legend_item"+i} icon={item.icon} description={item.description}/>)}
-        </tbody>
-    </table>
-}

static/js/shop/OrderPanel.jsx

@@ -13,7 +13,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * Component that renders all things for order.
  * It acts like-a layout, this component do nothing more.
  */
-export function OrderPanel({title, description, legend}) {
+export function OrderPanel({title, description}) {
     // #!render_count
     const renderCount = useRenderCount();
     const isMobile = useShopStore((state) => state.isMobile);
@@ -28,11 +28,6 @@ export function OrderPanel({title, description, legend}) {
 
         <div className="control justify-content-between">
             {description}
-
-            <div className="legend">
-                {legend}
-            </div>
-
         </div>
 
         <div>

static/js/shop/Shop.jsx

@@ -9,7 +9,6 @@ import {Layout} from "./Layout";
 import {Backlog} from "./Backlog";
 import {OrderPanel} from "./OrderPanel";
 import {useShopStore} from "./shop_store";
-import {Legend} from "./Legend";
 
 /**
  * Component that renders the entire shop
@@ -60,7 +59,6 @@ export function Shop() {
                                 this ordering system, or if you need other configurations, 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>)}
-                        legend={(<Legend/>)}
                     />
                 )}>
             </Layout>

static/js/shop/shop_store.js

@@ -28,10 +28,6 @@ const useBacklog = ((set, get) => ({
     cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element))
 }));
 
-const useLegend = ((set, get) => ({
-    legend: shared_data.legend
-}))
-
 const useCrateModes  = ((set, get) => ({
     crate_modes: shared_data.crateModes,
     modes_order: shared_data.crateModeOrder,
@@ -454,5 +450,4 @@ export const useShopStore = createWithEqualityFn((...params) => ({
     ...useLayout(...params),
     ...useHighlighted(...params),
     ...useImportJSON(...params),
-    ...useLegend(...params),
 }))

static/js/shop_data.js

@@ -3,16 +3,6 @@ const shop_data = {
   API_RFQ: 'https://hooks.m-labs.hk/rfq',
   currency: 'USD',
 
-  legend: [
-    {icon: "/images/shop/icon-customize.svg", description: "cards configuration available"},
-    {icon: "/images/shop/icon-add.svg", description: "add a card or crate to the order"},
-    {icon: "/images/shop/icon-remove.svg", description: "remove a card or crate from the order"},
-    {icon: "/images/shop/icon-clear.svg", description: "remove all the cards from the crate"},
-    {icon: "/images/shop/icon-warning.svg", description: "the card or crate contains errors"},
-    {icon: "/images/shop/icon-reminder.svg", description: "suggestions or hints available"},
-
-  ],
-
   crateModes: {
     rack: {
       id: 'rack',