fix: icon size new notification (#518)

* feat: add rent land notifications * feaT: add reward notification * fix prettier * fix metadata * change type * fix: notification new icon
decentraland · Mar 25, 2024 · 38d7798 · 38d7798
1 parent 3c1b122
commit 38d7798
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/src/components/Notifications/NotificationItem.css b/src/components/Notifications/NotificationItem.css
@@ -4,6 +4,7 @@
   align-items: center;
   padding: 16px;
   justify-content: space-between;
+  gap: 16px;
 }
 
 .dcl.notification-item__image {
@@ -14,7 +15,6 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin-left: 16px;
 }
 
 .dcl.notification-item__content-title {

diff --git a/src/components/Notifications/NotificationItem.tsx b/src/components/Notifications/NotificationItem.tsx
@@ -34,7 +34,7 @@ export default function NotificationItem({
           {Time(timestamp).locale(locale).fromNow()}
         </p>
       </div>
-      {isNew && <NewNotification width="8px" height="8px" />}
+      {isNew && <NewNotification width="12px" height="12px" />}
     </div>
   )
 }
diff --git a/src/components/Notifications/NotificationTypes/Land/LandRentalEndedNotification.tsx b/src/components/Notifications/NotificationTypes/Land/LandRentalEndedNotification.tsx
@@ -10,27 +10,43 @@ import { IconBadge } from '../../../IconBadge'
 
 const i18N = {
   en: {
-    description: (coords: string): React.ReactNode => (
+    description: (coords: string, link: string): React.ReactNode => (
       <>
-        The rent on your LAND at <IconBadge icon="places" text={coords} /> has
-        ended
+        The rent on your LAND at
+        <IconBadge
+          icon="places"
+          text={coords}
+          onClick={() => window.open(link, '_blank')}
+        />
+        has ended
       </>
     ),
     title: 'Rent Period Ended'
   },
   es: {
-    description: (coords: string): React.ReactNode => (
+    description: (coords: string, link: string): React.ReactNode => (
       <>
-        El alquiler de su LAND en <IconBadge icon="places" text={coords} /> ha
-        terminado
+        El alquiler de su LAND en
+        <IconBadge
+          icon="places"
+          text={coords}
+          onClick={() => window.open(link, '_blank')}
+        />
+        ha terminado
       </>
     ),
     title: 'Período de alquiler finalizado'
   },
   zh: {
-    description: (coords: string): React.ReactNode => (
+    description: (coords: string, link: string): React.ReactNode => (
       <>
-        土地上的租金 <IconBadge icon="places" text={coords} /> 结束了
+        土地上的租金
+        <IconBadge
+          icon="places"
+          text={coords}
+          onClick={() => window.open(link, '_blank')}
+        />
+        结束了
       </>
     ),
     title: '租金期结束'
@@ -52,7 +68,10 @@ export default function LandRentalEndedNotificationCmp({
         {i18N[locale].title}
       </p>
       <p className="dcl notification-item__content-description">
-        {i18N[locale].description(notification.metadata.land)}
+        {i18N[locale].description(
+          notification.metadata.land,
+          notification.metadata.link
+        )}
       </p>
     </NotificationItem>
   )

diff --git a/src/components/Notifications/NotificationTypes/Land/LandRentedNotification.tsx b/src/components/Notifications/NotificationTypes/Land/LandRentedNotification.tsx
@@ -9,11 +9,16 @@ const i18N = {
   en: {
     description: (
       coords: string,
-      tenant: JSX.Element | string
+      tenant: JSX.Element | string,
+      link: string
     ): React.ReactNode => (
       <>
         Your LAND at
-        <IconBadge icon="places" text={coords} />
+        <IconBadge
+          icon="places"
+          text={coords}
+          onClick={() => window.open(link, '_blank')}
+        />
         was rented by {tenant}
       </>
     ),
@@ -22,11 +27,16 @@ const i18N = {
   es: {
     description: (
       coords: string,
-      tenant: JSX.Element | string
+      tenant: JSX.Element | string,
+      link: string
     ): React.ReactNode => (
       <>
         Tu LAND en
-        <IconBadge icon="places" text={coords} />
+        <IconBadge
+          icon="places"
+          text={coords}
+          onClick={() => window.open(link, '_blank')}
+        />
         fue alquilada por {tenant}
       </>
     ),
@@ -35,11 +45,16 @@ const i18N = {
   zh: {
     description: (
       coords: string,
-      tenant: JSX.Element | string
+      tenant: JSX.Element | string,
+      link: string
     ): React.ReactNode => (
       <>
         你的土地
-        <IconBadge icon="places" text={coords} />
+        <IconBadge
+          icon="places"
+          text={coords}
+          onClick={() => window.open(link, '_blank')}
+        />
         租了 {tenant}
       </>
     ),
@@ -67,7 +82,8 @@ export default function LandRentedNotificationCmp({
           notification.metadata.land,
           renderProfile
             ? renderProfile(notification.metadata.tenant)
-            : notification.metadata.tenant
+            : notification.metadata.tenant,
+          notification.metadata.link
         )}
       </p>
     </NotificationItem>