feat: add notification icons

decentraland · Sep 28, 2023 · 6e4b8ad · 6e4b8ad
1 parent 6c1db53
commit 6e4b8ad
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/src/components/Icon/Notifications/Announcement.tsx b/src/components/Icon/Notifications/Announcement.tsx
@@ -0,0 +1,13 @@
+function Announcement() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="12" fill="#736E7D" opacity="0.1"></circle>
+      <path
+        fill="#736E7D"
+        d="M17.25 6.751a.753.753 0 00-1.282-.532l-1.022 1.024a6 6 0 01-4.242 1.758H7.5c-.827 0-1.5.673-1.5 1.5v2.25c0 .827.673 1.5 1.5 1.5v3c0 .414.335.749.75.749h1.5a.75.75 0 00.75-.75v-3h.204a6 6 0 014.242 1.758l1.022 1.022a.75.75 0 001.282-.532V13.04c.436-.206.75-.761.75-1.415s-.314-1.21-.75-1.416V6.751zm-1.5 1.798v6.154a7.497 7.497 0 00-5.046-1.952H10.5V10.5h.204c1.87 0 3.668-.699 5.046-1.952z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Announcement
diff --git a/src/components/Icon/Notifications/Grant.tsx b/src/components/Icon/Notifications/Grant.tsx
@@ -0,0 +1,10 @@
+function Grant() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="12" fill="#736E7D" opacity="0.1"></circle>
+      <path stroke="#736E7D" strokeWidth="3" d="M6 12l4 4 8-8"></path>
+    </svg>
+  )
+}
+
+export default Grant
diff --git a/src/components/Icon/Notifications/Proposal.tsx b/src/components/Icon/Notifications/Proposal.tsx
@@ -0,0 +1,13 @@
+function Proposal() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="12" fill="#736E7D" opacity="0.1"></circle>
+      <path
+        fill="#736E7D"
+        d="M11.75 6.75c-1.894 0-3.41.862-4.514 1.89-1.097 1.016-1.83 2.235-2.177 3.072a.745.745 0 000 .576c.346.837 1.08 2.056 2.177 3.073 1.104 1.026 2.62 1.889 4.514 1.889 1.894 0 3.41-.863 4.514-1.89 1.097-1.019 1.83-2.235 2.18-3.072a.745.745 0 000-.576c-.35-.837-1.083-2.056-2.18-3.073-1.104-1.026-2.62-1.889-4.514-1.889zM8.375 12a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zm3.375-1.5a1.501 1.501 0 01-1.976 1.423c-.129-.043-.279.037-.274.173a2.251 2.251 0 102.346-2.346c-.136-.005-.216.143-.173.274.049.15.077.31.077.476z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Proposal
diff --git a/src/components/Notifications/NotificationItem.tsx b/src/components/Notifications/NotificationItem.tsx
@@ -3,9 +3,9 @@ import { Notification, NotificationCustomType } from '../../utils/notifications'
 import Link from '../Common/Typography/Link'
 import Markdown from '../Common/Typography/Markdown'
 import Text from '../Common/Typography/Text'
-import CheckCircle from '../Icon/CheckCircle'
-import CheckCircleOutline from '../Icon/CheckCircleOutline'
-import QuestionCircle from '../Icon/QuestionCircle'
+import Announcement from '../Icon/Notifications/Announcement'
+import Grant from '../Icon/Notifications/Grant'
+import Proposal from '../Icon/Notifications/Proposal'
 
 import './NotificationItem.css'
 
@@ -16,12 +16,12 @@ interface Props {
 function getIcon(metadata: { customType: string }) {
   switch (metadata?.customType) {
     case NotificationCustomType.Announcement:
-      return QuestionCircle // TODO: Add Announcement icon
+      return Announcement
     case NotificationCustomType.Grant:
-      return CheckCircleOutline // TODO: Add Grant icon
+      return Grant
     case NotificationCustomType.Proposal:
     default:
-      return CheckCircle // TODO: Add Proposal icon
+      return Proposal
   }
 }
 
@@ -34,7 +34,7 @@ export default function NotificationItem({ notification }: Props) {
   return (
     <Component className="NotificationItem" href={notification.payload.data.acta}>
       <div className="NotificationItem__IconContainer">
-        <Icon size="24" />
+        <Icon />
       </div>
       <div>
         <Markdown className="NotificationItem__Text" size="sm">