fix: fixed review comments

push-protocol · Sep 25, 2024 · 07f87ec · 07f87ec
1 parent 9b208cf
commit 07f87ec
Show file tree

Hide file tree

Showing 4 changed files with 4,633 additions and 7,318 deletions.
diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx
@@ -213,6 +213,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           >
             {app}
           </ChannelName>
+          <Ellipse background={theme === 'dark' ? '#757D8D' : '#c4cbd5'} />
           {timeStamp ? <TimestampLabel themeObject={themeObject!}>{convertTimeStamp(timeStamp)}</TimestampLabel> : null}
         </HeaderButton>
         {chainName && chainDetails[chainName] ? (
@@ -319,6 +320,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           </NotificationDetails>
           {isSpam && (
             <Button
+              height="32px"
               onClick={onSubscribe}
               width="fit-content"
               color={themeObject.color?.optInButtonText}
@@ -425,6 +427,12 @@ const BlockchainContainer = styled.div`
   font-weight: 700;
 `;
 
+const Ellipse = styled.div<{ background?: string }>`
+  width: 4px;
+  height: 4px;
+  background: ${(props) => props?.background};
+  border-radius: 100%;
+`;
 const ChainIconSVG = styled.div<OffsetWidthType>`
   width: 18px;
   height: 18px;
@@ -534,6 +542,9 @@ const ChannelTitleWrapper = styled.div<CTADataType>`
   &:hover {
     text-decoration: ${(props) => (props.cta ? 'underline' : 'none')};
     color: #d548ec;
+    span {
+      color: #d548ec;
+    }
   }
   cursor: pointer;
   display: flex;

diff --git a/packages/uiweb/src/lib/components/notification/theme/index.ts b/packages/uiweb/src/lib/components/notification/theme/index.ts
@@ -63,7 +63,7 @@ export const baseTheme: INotificationItemTheme = {
     timestamp: '10px',
     optInButtonText: '12px',
   },
-  fontFamily: 'Strawford, sans-serif',
+  fontFamily: 'inherit',
 };
 //light theme object
 export const lightTheme: INotificationItemTheme = {
@@ -76,8 +76,8 @@ export const lightTheme: INotificationItemTheme = {
     notificationContentText: '#313338',
     timestamp: '#8C93A0',
     optInButtonText: '#fff',
-    optInButtonBackground: 'rgb(226, 8, 128)',
-    modalBorder: '#D548EC',
+    optInButtonBackground: '#D548EC',
+    modalBorder: '#C4CBD5',
   },
   modalDivider: '1px solid #D9D9D9',
 };

diff --git a/packages/uiweb/src/lib/utilities/time.ts b/packages/uiweb/src/lib/utilities/time.ts
@@ -1,34 +1,41 @@
-import { format } from "date-fns";
 import { FormatBody } from './formatbody';
+import moment from 'moment';
 
 /**
  * @description parse and extract the timestamp from the body of the notification and remove the text from the body
  * @param notificationBody the text which would represent the body of the notification
  * @returns
  */
- export function extractTimeStamp(notificationBody: string): {
-    notificationBody: string;
-    timeStamp: string;
-    originalBody: string;
-  } {
-    const parsedBody = {
-      notificationBody: FormatBody(notificationBody),
-      timeStamp: "",
-      originalBody: notificationBody,
-    };
-    const matches = notificationBody.match(/\[timestamp:(.*?)\]/);
-    if (matches) {
-      parsedBody.timeStamp = matches[1];
-      const textWithoutTimeStamp = notificationBody.replace(
-        / *\[timestamp:[^)]*\] */g,
-        ""
-      );
-      parsedBody.notificationBody = FormatBody(textWithoutTimeStamp);
-      parsedBody.originalBody = textWithoutTimeStamp;
-    }
-    return parsedBody;
+export function extractTimeStamp(notificationBody: string): {
+  notificationBody: string;
+  timeStamp: string;
+  originalBody: string;
+} {
+  const parsedBody = {
+    notificationBody: FormatBody(notificationBody),
+    timeStamp: '',
+    originalBody: notificationBody,
+  };
+  const matches = notificationBody.match(/\[timestamp:(.*?)\]/);
+  if (matches) {
+    parsedBody.timeStamp = matches[1];
+    const textWithoutTimeStamp = notificationBody.replace(/ *\[timestamp:[^)]*\] */g, '');
+    parsedBody.notificationBody = FormatBody(textWithoutTimeStamp);
+    parsedBody.originalBody = textWithoutTimeStamp;
   }
-
-  export function convertTimeStamp(timeStamp: string) {
-    return format(new Date(Number(timeStamp) * 1000), 'dd MMM yyyy | hh:mm a')
-  }
+  return parsedBody;
+}
+
+export function convertTimeStamp(timeStamp: string) {
+  const date = moment.unix(Number(timeStamp));
+
+  if (moment().isSame(date, 'day')) {
+    return `Today | ${date.format('hh:mm A')}`;
+  } else if (moment().subtract(1, 'days').isSame(date, 'day')) {
+    return `Yesterday | ${date.format('hh:mm A')}`;
+  } else if (moment().add(1, 'days').isSame(date, 'day')) {
+    return `Tomorrow | ${date.format('hh:mm A')}`;
+  } else {
+    return date.format('DD MMM YYYY | hh:mm A');
+  }
+}