Notification badge on unviewed options

sass/css/_shop.scss

@@ -454,12 +454,29 @@ button {
                             height: 24px;
                         }
 
-                        > .alert-warning, .alert-info {
+                        > .alert-warning, .alert-info, .options-notification {
                             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/js/shop/options/DialogPopup.jsx

@@ -20,7 +20,7 @@ export function DialogPopup({options, data, target, id, big, first, last, option
         <div ref={ref}>
             <Notification
                 id={"processed_options_notification" + id}
-                tip="ABOBA"
+                tip="Customization options available"
                 content={
                     <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
                          onClick={handleClick}/>

static/js/shop/options/Notification.jsx

@@ -3,17 +3,24 @@ import React, {useState} from "react";
 
 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);
+    };
+
     return (
-        <div className="" onClick={() => setShow(false)}>
+        <div className="options-notification" onClick={onClickHandler}>
             {content}
-            <OverlayTrigger
+            {show ? <OverlayTrigger
                 placement="auto"
                 trigger={['click', 'hover', 'focus']}
-                style={{display: show ? 'inline' : "hidden"}}
+                style={{display: 'inline'}}
                 overlay={<Tooltip id={id}>{tip}</Tooltip>}
             >
-                <img src="/images/shop/icon-notification.svg" className="options-notification" style={{display: show ? 'inline' : "hidden"}}/>
-            </OverlayTrigger>
+                <span className="options-badge"></span>
+            </OverlayTrigger> : null}
+
         </div>
     )
 }