diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index fb6f4cf..d5cda41 100644 --- a/sass/css/_shop.scss +++ b/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 { diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index 2861279..6d7952e 100644 --- a/static/css/order-hardware.css +++ b/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 diff --git a/static/js/shop/options/Notification.jsx b/static/js/shop/options/Notification.jsx index a1c7e54..5e21d25 100644 --- a/static/js/shop/options/Notification.jsx +++ b/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 ( -