UI: Payment notifications improvements

src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx

@@ -135,7 +135,7 @@ export const NotificationsDropdown: React.FC = () => {
     <BasePopover
       trigger="click"
       content={
-        <div style={{ maxWidth: '400px', minWidth: '320px', maxHeight: '450px' }}>
+        <div style={{ maxWidth: '400px', minWidth: '320px' }}>
           <Tabs 
             defaultActiveKey="1" 
             items={tabItems}

src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts

@@ -3,9 +3,11 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { media } from '@app/styles/themes/constants';
 import { BaseDivider } from '@app/components/common/BaseDivider/BaseDivider';
 import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
+import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification';
+import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
 
 export const NoticesOverlayMenu = styled.div`
-  max-width: 15rem;
+  max-width: 100%;
 
   @media only screen and ${media.md} {
     max-width: 25rem;
@@ -54,3 +56,26 @@ export const Text = styled(BaseTypography.Text)`
   display: block;
   text-align: center;
 `;
+export const TransactionWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  gap: 3rem;
+`;
+export const RootNotification = styled(BaseNotification)`
+width: 100%;
+
+`;
+export const NotificationsWrapper = styled(BaseSpace)`
+   .ant-space.ant-space-horizontal {
+    width: 100%;
+  }
+`;
+export const ActionRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;

src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx

@@ -1,10 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { capitalize } from '@app/utils/utils';
-import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
 import { PaymentNotification } from '@app/api/paymentNotifications.api';
@@ -34,8 +31,8 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
   const formatAmount = (satoshis: number) => {
     const btc = satoshis / 100000000;
     return (
-      <div>
-        <div style={{ fontWeight: 'bold' }}>{satoshis.toLocaleString()} sats</div>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
+        <div style={{ fontWeight: 'bold', fontSize: "1rem"}}>{satoshis.toLocaleString()} sats</div>
         <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)' }}>
           ({btc.toFixed(8)} BTC)
         </div>
@@ -48,7 +45,7 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
   }, [markAllAsRead]);
 
   const noticesList = notifications.map((notification) => (
-    <BaseNotification
+    <S.RootNotification
       key={notification.id}
       type="info"
       title={
@@ -89,35 +86,36 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
       }
       description={
         <div>
+          <S.TransactionWrapper>
           <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginBottom: '4px' }}>
             {formatDate(notification.created_at)}
           </div>
 
           <div style={{ marginBottom: '8px' }}>
-            <strong>{t('payment.notifications.amount', 'Amount')}: </strong>
             {formatAmount(notification.amount)}
           </div>
+          </S.TransactionWrapper>
 
-          <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginTop: '4px' }}>
+          {/* <div style={{ fontSize: '0.85rem', color: 'var(--text-light-color)', marginTop: '4px' }}>
             {t('payment.notifications.expiration', 'Expires')}: {formatDate(notification.expiration_date)}
-          </div>
-
+          </div> */}
+          <S.ActionRow>
+            <Link to="/payment-notifications" style={{ fontSize: '0.85rem' }}>
+              {t('payment.notifications.viewDetails', 'View details')}
+            </Link>
           {!notification.is_read && (
             <BaseButton 
               type="link" 
               size="small" 
               onClick={() => markAsRead(notification.id)}
-              style={{ padding: '4px 0', height: 'auto', marginTop: '4px' }}
+              style={{ padding: '4px 0', height: 'auto', marginTop: '4px', fontSize: '0.85rem' }}
             >
               {t('payment.notifications.markAsRead', 'Mark as read')}
             </BaseButton>
           )}
 
-          <div style={{ marginTop: '4px' }}>
-            <Link to="/payment-notifications" style={{ fontSize: '0.85rem' }}>
-              {t('payment.notifications.viewDetails', 'View details')}
-            </Link>
-          </div>
+
+          </S.ActionRow>
         </div>
       }
     />
@@ -129,9 +127,9 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
         <BaseCol span={24}>
           {notifications.length > 0 ? (
             <S.NotificationsList>
-              <BaseSpace direction="vertical" size={10} split={<S.SplitDivider />}>
+              <S.NotificationsWrapper direction="vertical" size={10} split={<S.SplitDivider />} style={{ width: '95%' }}>
                 {noticesList}
-              </BaseSpace>
+              </S.NotificationsWrapper>
             </S.NotificationsList>
           ) : (
             <div style={{ textAlign: 'center', padding: '20px 0' }}>

src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts

@@ -1,8 +1,11 @@
 import styled from 'styled-components';
+import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
 import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
+import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { Card } from 'antd';
+import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 
 export const FiltersWrapper = styled.div`
   margin-bottom: 1.5rem;
@@ -18,43 +21,61 @@ export const SplitDivider = styled.div`
   width: 100%;
 `;
 
-export const NotificationItem = styled.div<{ $isRead: boolean; $isNew?: boolean }>`
+export const NotificationItem = styled(Card)<{ $isRead: boolean; $isNew?: boolean }>`
   position: relative;
   transition: all 0.3s ease;
-
+  width: 100%;
+  background-color: var(--additional-background-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  border: none;
+  .ant-space {
+    background-color: transparent;
+  }
+  .anticon-info-circle {
+    color: var(--text-light-color);
+    width: 2.4rem;
+    padding: 0 0.2rem;
+  }
   ${(props) =>
     !props.$isRead &&
     `
-    background-color: var(--background-color);
     border-radius: ${BORDER_RADIUS};
     position: relative;
 
     &::before {
       content: '';
       position: absolute;
-      left: -0.5rem;
-      top: 50%;
+      left: -1.1rem;
+      top: 2.4rem;
       transform: translateY(-50%);
       width: 0.5rem;
       height: 0.5rem;
       border-radius: 50%;
       background-color: var(--primary-color);
+
+      @media only screen and ${media.lg} {
+        left: -2rem;
+      }
     }
   `}
 
   ${(props) =>
     props.$isNew &&
     `
-    border-left: 3px solid var(--success-color);
+    border-left: 3px solid var(--success-color) !important;
   `}
 `;
-
+export const NotificationHeader = styled(BaseRow)`
+  color: var(--text-main-color);
+  font-size: ${FONT_SIZE.md};
+`;
 export const NotificationContent = styled.div`
   padding-top: 0.5rem;
 `;
 
 export const NotificationMeta = styled.div`
   display: flex;
+
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-bottom: 0.5rem;
@@ -70,11 +91,17 @@ export const MetaItem = styled.div`
 export const MetaLabel = styled.span`
   font-weight: ${FONT_WEIGHT.semibold};
   margin-right: 0.5rem;
+  font-size: ${FONT_SIZE.md};
 `;
 
 export const MetaValue = styled.span`
   display: inline-flex;
+  font-size: ${FONT_SIZE.md};
   align-items: center;
+  &:not(.date){
+    color: var(--text-main-color);
+  }
+
 `;
 
 export const CopyButton = styled(BaseButton)`
@@ -84,23 +111,24 @@ export const CopyButton = styled(BaseButton)`
   justify-content: center;
   font-size: ${FONT_SIZE.xs};
   padding: 2px 6px;
-  height: 20px;
+  height: 24px;
   border-radius: ${BORDER_RADIUS};
   background-color: var(--background-color);
-  
+
   &:hover {
     background-color: var(--secondary-background-color);
   }
 `;
 
 export const MarkReadButton = styled(BaseButton)`
-  margin-top: 0.75rem;
   padding: 0;
   height: auto;
+  font-size: ${FONT_SIZE.xs};
 `;
 
 export const UserInput = styled(BaseInput)`
   width: 100%;
+  background-color: var(--input-bg-color);
 `;
 
 export const Text = styled(BaseTypography.Text)`
@@ -122,19 +150,23 @@ export const TierTag = styled.span<{ $tier: string }>`
 `;
 
 export const NewSubscriberBadge = styled.span`
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
   border-radius: ${BORDER_RADIUS};
   font-size: ${FONT_SIZE.xs};
   font-weight: ${FONT_WEIGHT.semibold};
   margin-left: 0.5rem;
   background-color: var(--success-color);
+  height: 1.5rem;
   color: var(--text-secondary-color);
 `;
 
 export const AmountDisplay = styled.div`
   display: flex;
+  font-size: ${FONT_SIZE.lg};
   flex-direction: column;
+  align-items: flex-end;
 `;
 
 export const SatAmount = styled.span`
@@ -150,12 +182,56 @@ export const ExpirationInfo = styled.div`
   margin-top: 0.5rem;
   font-size: ${FONT_SIZE.xs};
   color: var(--text-light-color);
-
-  ${(props) => props.color === 'warning' && `
+  font-weight: ${FONT_WEIGHT.regular};
+
+  ${(props) =>
+    props.color === 'warning' &&
+    `
     color: var(--warning-color);
   `}
-
-  ${(props) => props.color === 'error' && `
+
+  ${(props) =>
+    props.color === 'error' &&
+    `
     color: var(--error-color);
   `}
 `;
+export const Root = styled(BaseCard)`
+  padding: 0;
+  padding-top: 1.25rem;
+  min-width: fit-content;
+
+  .ant-space.ant-space-horizontal {
+    width: 100%;
+  }
+  margin-left: 5%;
+  margin-right: 5%;
+  @media only screen and ${media.lg} {
+    > .ant-card-head,
+    > .ant-card-body {
+      margin-left: 18%;
+      margin-right: 18%;
+    }
+  }
+`;
+export const TransactionWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
+  min-width: 65vw;
+  @media only screen and ${media.lg} {
+    min-width: 40vw;
+`;
+export const LeftSideTX = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+export const CardFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;