Add prototype of the notification, fixes and animation needed

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

static/css/order-hardware.css

@@ -61,6 +61,14 @@
   text-decoration: none;
 }
 
+.options-notification {
+  width: 5px;
+  height: 5px;
+  position: relative;
+  top: -2.5px;
+  right: -2.5px;
+}
+
 /*
   ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px

static/images/shop/icon-notification.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" version="1.1" viewBox="0 0 8.4667 8.4667" xmlns="http://www.w3.org/2000/svg"><circle cx="4.2333" cy="4.2333" r="3.9077" fill="#d0423f" stroke="#d0423f" stroke-linecap="round" stroke-width=".65136"/></svg>

static/js/shop/options/DialogPopup.jsx

@@ -1,6 +1,7 @@
 import React, {useState} from "react";
 import {useClickAway} from "./useClickAway";
 import {ProcessOptions} from "./Options";
+import {Notification} from "./Notification";
 
 export function DialogPopup({options, data, target, id, big, first, last, options_class}) {
     const [show, setShow] = useState(false);
@@ -17,8 +18,14 @@ export function DialogPopup({options, data, target, id, big, first, last, option
 
     return (
         <div ref={ref}>
-            <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
-                 onClick={handleClick}/>
+            <Notification
+                id={"processed_options_notification" + id}
+                tip="ABOBA"
+                content={
+                    <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
+                         onClick={handleClick}/>
+                }
+            />
             <div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
                 <ProcessOptions
                     options={options}

static/js/shop/options/Notification.jsx

@@ -0,0 +1,19 @@
+import {OverlayTrigger, Tooltip} from "react-bootstrap";
+import React, {useState} from "react";
+
+export function Notification({id, tip, content}) {
+    const [show, setShow] = useState(true);
+    return (
+        <div className="" onClick={() => setShow(false)}>
+            {content}
+            <OverlayTrigger
+                placement="auto"
+                trigger={['click', 'hover', 'focus']}
+                style={{display: show ? 'inline' : "hidden"}}
+                overlay={<Tooltip id={id}>{tip}</Tooltip>}
+            >
+                <img src="/images/shop/icon-notification.svg" className="options-notification" style={{display: show ? 'inline' : "hidden"}}/>
+            </OverlayTrigger>
+        </div>
+    )
+}