From 9b208cfb3f74306b07ade4513cbabee87a20cf4b Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Wed, 25 Sep 2024 12:32:25 +0530 Subject: [PATCH 1/6] feat: new notification ui --- .../src/lib/components/notification/index.tsx | 348 ++++++++---------- .../components/notification/theme/index.ts | 79 ++-- 2 files changed, 191 insertions(+), 236 deletions(-) diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx index 02a010ef0..db3404403 100644 --- a/packages/uiweb/src/lib/components/notification/index.tsx +++ b/packages/uiweb/src/lib/components/notification/index.tsx @@ -3,19 +3,18 @@ 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'; export { baseTheme as notificationBaseTheme, darkTheme as notificationDarkTheme, @@ -54,6 +53,7 @@ export type NotificationItemProps = { notificationBody: string | undefined; cta: string | undefined; app: string | undefined; + isToast?: boolean; icon: string | undefined; image: string | undefined; url: string | undefined; @@ -79,6 +79,10 @@ type OffsetWidthType = { offsetWidth: number; }; +type FontSizeType = { + fontSize: string; +}; + type CustomThemeProps = { themeObject: INotificationItemTheme; }; @@ -100,6 +104,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 @@ -127,12 +132,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; @@ -194,7 +193,6 @@ export const NotificationItem: React.FC = ({ ref={divRef} themeObject={themeObject!} > - {/* header that only pops up on small devices */} = ({ alt="" /> - {app} + + {app} + + {timeStamp ? {convertTimeStamp(timeStamp)} : null} {chainName && chainDetails[chainName] ? ( @@ -216,14 +221,12 @@ export const NotificationItem: React.FC = ({ ) : null} - {/* header that only pops up on small devices */} {/* content of the component */} {/* section for media content */} {notifImage && @@ -231,6 +234,7 @@ export const NotificationItem: React.FC = ({ (!MediaHelper.isMediaSupportedVideo(notifImage) ? ( setImageOverlay(notifImage || '')} @@ -242,7 +246,10 @@ export const NotificationItem: React.FC = ({ ) : // if its a youtube url, RENDER THIS MediaHelper.isMediaYoutube(notifImage) ? ( - +