chore(web): new beta notification (#796)

reearth · Nov 8, 2023 · 607773e · 607773e
1 parent 7c5587d
commit 607773e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/web/src/beta/features/Notification/hooks.ts b/web/src/beta/features/Notification/hooks.ts
@@ -27,6 +27,8 @@ export default () => {
   const [notification, setNotification] = useNotification();
   const [visible, changeVisibility] = useState(false);
 
+  const [isHovered, setIsHovered] = useState(false);
+
   const policyLimitNotifications = window.REEARTH_CONFIG?.policy?.limitNotifications;
 
   const errorHeading = t("Error");
@@ -89,30 +91,31 @@ export default () => {
   ]);
 
   useEffect(() => {
-    if (!notification) return;
-    if (notification.duration === "persistent") return;
+    if (!notification || notification?.duration === "persistent" || isHovered) return;
+    let notificationTimeout = 3000;
 
-    let notificationTimeout = 5000;
     if (notification.duration) {
       notificationTimeout = notification.duration;
     }
     const timerID = setTimeout(() => {
       changeVisibility(false);
     }, notificationTimeout);
     return () => clearTimeout(timerID);
-  }, [notification]);
+  }, [notification, isHovered]);
 
   useEffect(() => {
     changeVisibility(!!notification);
   }, [notification]);
 
   return {
+    isHovered,
     visible,
     notification: {
       type: notification?.type,
       heading: notificationHeading,
       text: notification?.text,
     } as Notification,
+    setIsHovered,
     setModal,
     resetNotification,
   };

diff --git a/web/src/beta/features/Notification/index.tsx b/web/src/beta/features/Notification/index.tsx
@@ -12,36 +12,41 @@ export type Notification = {
 };
 
 const NotificationBanner: React.FC = () => {
-  const { visible, notification, setModal, resetNotification } = useHooks();
+  const { isHovered, visible, notification, setModal, setIsHovered, resetNotification } =
+    useHooks();
   const theme = useTheme();
 
   return (
     <StyledNotificationBanner
       aria-hidden={!visible}
       role="banner"
       visible={visible}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       type={notification?.type}>
       <HeadingArea>
-        <Text
-          size="body"
-          color={theme.classic.notification.text}
-          weight="bold"
-          otherProperties={{ padding: "0 0 8px 0" }}>
+        <Text size="body" color={theme.content.strong} weight="bold">
           {notification?.heading}
         </Text>
         <CloseBtn
           role="button"
           icon="cancel"
           size={20}
+          show={isHovered}
           onClick={() => {
             setModal?.(false);
             resetNotification?.();
           }}
         />
       </HeadingArea>
-      <Text size="footnote" color={theme.classic.notification.text}>
-        {notification?.text}
-      </Text>
+      {notification?.text && (
+        <Text
+          size="footnote"
+          color={theme.content.strong}
+          otherProperties={{ padding: "8px 0 0 0" }}>
+          {notification?.text}
+        </Text>
+      )}
     </StyledNotificationBanner>
   );
 };
@@ -55,10 +60,15 @@ const StyledNotificationBanner = styled.div<{
   display: flex;
   flex-direction: column;
   position: absolute;
-  top: 49px;
+  top: 30px;
+  left: 0;
   right: 0;
+  margin-left: auto;
+  margin-right: auto;
   width: 312px;
   padding: 8px 12px;
+  border-radius: 6px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
   background-color: ${({ type, theme }) =>
     type === "error"
       ? theme.classic.notification.errorBg
@@ -80,6 +90,8 @@ const HeadingArea = styled.div`
   width: 100%;
 `;
 
-const CloseBtn = styled(Icon)`
+const CloseBtn = styled(Icon)<{ show: boolean }>`
   cursor: pointer;
+  transition: all 1s;
+  opacity: ${({ show }) => (show ? "100%" : "0")};
 `;