Add fa icons

src/element/Note.js

@@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import moment from "moment";
 import { Link, useNavigate } from "react-router-dom";
+import { faHeart, faReply, faInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import Event from "../nostr/Event";
 import ProfileImage from "./ProfileImage";
 import useEventPublisher from "../pages/feed/EventPublisher";
@@ -89,7 +92,7 @@ export default function Note(props) {
                         let idx = parseInt(matchTag[1]);
                         let ref = ev.Tags.find(a => a.Index === idx);
                         if (ref) {
-                            switch(ref.Key) {
+                            switch (ref.Key) {
                                 case "p": {
                                     let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
                                     return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
@@ -99,8 +102,8 @@ export default function Note(props) {
                                     return <Link key={ref.Event} to={`/e/${ref.Event}`}>#{eText}</Link>;
                                 }
                             }
-                        } 
-                        return <b style={{color: "red"}}>{matchTag[0]}?</b>;
+                        }
+                        return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
                     } else {
                         return match;
                     }
@@ -129,7 +132,7 @@ export default function Note(props) {
     return (
         <div className="note">
             <div className="header">
-                <ProfileImage pubKey={ev.PubKey} subHeader={replyTag()}/>
+                <ProfileImage pubKey={ev.PubKey} subHeader={replyTag()} />
                 <div className="info">
                     {moment(ev.CreatedAt * 1000).fromNow()}
                 </div>
@@ -138,11 +141,15 @@ export default function Note(props) {
                 {transformBody()}
             </div>
             <div className="footer">
+                <span className="pill" onClick={() => {}}>
+                    <FontAwesomeIcon icon={faReply} />
+                </span>
                 <span className="pill" onClick={() => like()}>
-                    👍 {(reactions?.length ?? 0)}
+                    <FontAwesomeIcon icon={faHeart} /> &nbsp;
+                    {(reactions?.length ?? 0)}
                 </span>
                 <span className="pill" onClick={() => console.debug(ev)}>
-                    <i>i</i>
+                    <FontAwesomeIcon icon={faInfo} />
                 </span>
             </div>
         </div>

src/element/ProfileImage.css

@@ -8,4 +8,5 @@
     height: 40px;
     margin-right: 20px;
     border-radius: 10px;
+    cursor: pointer;
 }

src/index.css

@@ -32,6 +32,11 @@ code {
   flex-grow: 1;
 }
 
+.page > .header > div:nth-child(2) {
+  display: flex;
+  align-items: center;
+}
+
 .btn { 
   padding: 10px;
   border-radius: 5px;
@@ -50,6 +55,10 @@ code {
   padding: 5px;
 }
 
+.btn-rnd {
+  border-radius: 25px;
+}
+
 input[type="text"], input[type="password"] {
   padding: 10px;
   border-radius: 5px;

src/pages/Layout.css

@@ -0,0 +1,3 @@
+.notifications {
+    margin-right: 10px;
+}

src/pages/Layout.js

@@ -1,11 +1,15 @@
+import "./Layout.css";
 import { useContext, useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import { faBell } from "@fortawesome/free-solid-svg-icons";
+
 import { NostrContext } from ".."
 import ProfileImage from "../element/ProfileImage";
 import { init } from "../state/Login";
 import useLoginFeed from "./feed/LoginFeed";
 import useUsersCache from "./feed/UsersFeed";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Layout(props) {
     const dispatch = useDispatch();
@@ -28,12 +32,23 @@ export default function Layout(props) {
         dispatch(init());
     }, []);
 
+    function accountHeader() {
+        return (
+            <>
+                <div className="btn btn-rnd notifications">
+                    <FontAwesomeIcon icon={faBell} size="xl" />
+                </div>
+                <ProfileImage pubKey={key} />
+            </>
+        )
+    }
+
     return (
         <div className="page">
             <div className="header">
                 <div onClick={() => navigate("/")}>n o s t r</div>
                 <div>
-                    {key ? <ProfileImage pubKey={key} /> :
+                    {key ? accountHeader() :
                         <div className="btn" onClick={() => navigate("/login")}>Login</div>
                     }
                 </div>