Show tooltip instead of badge by default

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

sass/css/_shop.scss

@@ -454,29 +454,12 @@ button {
                             height: 24px;
                         }
 
-                        > .alert-warning, .alert-info, .options-notification {
+                        > .alert-warning, .alert-info {
                             background-color: inherit;
                             height: inherit;
                             width: 20px;
                             padding-bottom: 3px;
                         }
-                        .options-notification {
-                            position: relative;
-                            display: inline-block;
-
-                            .options-badge {
-                                position: absolute;
-                                top: -2.5px;
-                                right: -3.5px;
-                                padding: 0;
-                                color: white;
-                                width: 7px;
-                                height: 7px;
-                                background-image: url("/images/shop/icon-notification.svg") ;
-                                background-repeat: no-repeat;
-                                background-size: 7px;
-                            }
-                        }
                     }
 
                     .overlayRemove {

static/css/order-hardware.css

@@ -73,14 +73,6 @@
   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/js/shop/options/Notification.jsx

@@ -1,26 +1,31 @@
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
-import React, {useState} from "react";
+import React, {useEffect, useState, useRef} from "react";
+import {useClickAway} from "./useClickAway";
 
 export function Notification({id, tip, content}) {
-    const [show, setShow] = useState(true);
-    const onClickHandler = (event) => {
-        // prevent removing badge on touchables
-        if (!event.target.classList.contains("options-badge"))
-            setShow(false);
-    };
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setShow(true)
+        }, 100);
+
+        setTimeout(() => {
+            setShow(false)
+        }, 5000);
+    }, []);
 
     return (
-        <div className="options-notification" onClick={onClickHandler}>
-            {content}
-            {show ? <OverlayTrigger
-                placement="auto"
-                trigger={['click', 'hover', 'focus']}
+            <OverlayTrigger
+                placement="top"
+                trigger={["click", "hover"]}
                 style={{display: 'inline'}}
+                show={show}
+                onToggle={() => setShow(false)}
                 overlay={<Tooltip id={id}>{tip}</Tooltip>}
+                rootClose
             >
-                <span className="options-badge"></span>
-            </OverlayTrigger> : null}
-
-        </div>
+                {content}
+            </OverlayTrigger>
     )
 }

static/js/shop/options/components/Tip.jsx

@@ -8,6 +8,7 @@ export function Tip({id, tip}) {
             trigger={['click', 'hover', 'focus']}
             style={{display: 'inline'}}
             overlay={<Tooltip id={id}>{tip}</Tooltip>}
+            rootClose
         >
             <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
         </OverlayTrigger>