From f972997e7995d4b883477a52420ebaa344aed278 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Mon, 7 Oct 2024 15:16:43 +0530 Subject: [PATCH] Notification Ui change (#1396) * feat: new notification ui * fix: fixed review comments * lock file changed * fix: fixed color and cta hover * fix: fixed the review comments * fix: fixed link icon --------- Co-authored-by: rohitmalhotra1420 --- .../src/lib/components/notification/index.tsx | 410 +- .../components/notification/theme/index.ts | 81 +- packages/uiweb/src/lib/icons/Link.tsx | 18 +- packages/uiweb/src/lib/utilities/time.ts | 59 +- packages/uiweb/yarn.lock | 11880 ++++++---------- yarn.lock | 2273 +-- 6 files changed, 6028 insertions(+), 8693 deletions(-) diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx index 02a010ef0..a8751c65e 100644 --- a/packages/uiweb/src/lib/components/notification/index.tsx +++ b/packages/uiweb/src/lib/components/notification/index.tsx @@ -3,19 +3,19 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; import { MediaHelper, convertTimeStamp, extractTimeStamp } from '../../utilities'; -import IPFSIcon from '../ipfsicon'; import Loader from '../loader/loader'; import ImageOverlayComponent from '../overlay'; import { ParseMarkdownText } from '../parsetext'; import chainDetails from './chainDetails'; import { DecryptButton, useDecrypt } from './decrypt'; -import ActionButton from './styled/ActionButton'; import { useDivOffsetWidth } from '../../hooks'; import { LinkIcon } from '../../icons/Link'; import type { INotificationItemTheme } from './theme'; import { getCustomTheme } from './theme'; +import { Button } from '../reusables'; +import { CloseIcon } from '../../icons/Close'; export { baseTheme as notificationBaseTheme, darkTheme as notificationDarkTheme, @@ -54,10 +54,12 @@ export type NotificationItemProps = { notificationBody: string | undefined; cta: string | undefined; app: string | undefined; + isToast?: boolean; icon: string | undefined; image: string | undefined; url: string | undefined; isSpam?: boolean; + onClose?: () => void; subscribeFn?: () => Promise; isSubscribedFn?: () => Promise; theme?: string | undefined; @@ -79,6 +81,10 @@ type OffsetWidthType = { offsetWidth: number; }; +type FontSizeType = { + fontSize: string; +}; + type CustomThemeProps = { themeObject: INotificationItemTheme; }; @@ -100,6 +106,7 @@ export const NotificationItem: React.FC = ({ app, icon, image, + isToast = false, url, isSpam, //for rendering the spam conterpart of the notification component isSubscribedFn, //A function for getting if a user is subscribed to the channel in question @@ -109,6 +116,7 @@ export const NotificationItem: React.FC = ({ customTheme, isSecret, decryptFn, + onClose, }) => { const { notificationBody: parsedBody, timeStamp } = extractTimeStamp(notificationBody || ''); const themeObject = getCustomTheme(theme, customTheme!); @@ -118,7 +126,7 @@ export const NotificationItem: React.FC = ({ isSecret ); - const isCtaURLValid = MediaHelper.validURL(notifCta); + const isCtaURLValid = MediaHelper.validURL(notifCta) && !isToast; const isChannelURLValid = MediaHelper.validURL(url); // store the image to be displayed in this state variable @@ -127,12 +135,6 @@ export const NotificationItem: React.FC = ({ const [isSubscribed, setIsSubscribed] = React.useState(true); //use this to confirm if this is s const [divRef, offsetWidth] = useDivOffsetWidth(); - const showMetaInfo = isSecret || timeStamp; - // console.log({ - // chainName, - // rightIcon, - // ai: ChainImages['CHAIN_ICONS'] - // }) const gotToCTA = (e: React.SyntheticEvent) => { e.stopPropagation(); if (!isCtaURLValid) return; @@ -192,9 +194,9 @@ export const NotificationItem: React.FC = ({ timestamp={timeStamp} offsetWidth={offsetWidth} ref={divRef} + cta={isCtaURLValid} themeObject={themeObject!} > - {/* header that only pops up on small devices */} = ({ alt="" /> - {app} + + {app} + + + {timeStamp ? {convertTimeStamp(timeStamp)} : null} - {chainName && chainDetails[chainName] ? ( - - {chainDetails[chainName].icon} - - ) : null} + + {chainName && chainDetails[chainName] ? ( + + {chainDetails[chainName].icon} + + ) : null} + {isToast && onClose && ( + + + + )} + - {/* header that only pops up on small devices */} {/* content of the component */} {/* section for media content */} {notifImage && @@ -231,6 +246,7 @@ export const NotificationItem: React.FC = ({ (!MediaHelper.isMediaSupportedVideo(notifImage) ? ( setImageOverlay(notifImage || '')} @@ -242,7 +258,10 @@ export const NotificationItem: React.FC = ({ ) : // if its a youtube url, RENDER THIS MediaHelper.isMediaYoutube(notifImage) ? ( - +