Tweak some sizes

packages/app/src/Element/Nip05.tsx

@@ -62,7 +62,7 @@ const Nip05 = ({ nip05, pubkey, verifyNip = true }: Nip05Params) => {
           <span className="domain" data-domain={domain?.toLowerCase()}>
             {domain}
           </span>
-          <Icon name="badge" className="badge" />
+          <Icon name="badge" className="badge" size={16} />
         </>
       )}
     </div>

packages/app/src/Element/Note.css

@@ -73,6 +73,8 @@
   align-items: center;
   justify-content: center;
   margin-left: auto;
+  gap: 1em;
+  padding-left: 0.8em;
 }
 
 @media (min-width: 720px) {
@@ -144,8 +146,6 @@
 
 .reaction-pill {
   display: flex;
-  margin: 0px 7px;
-  padding: 2px 4px;
   min-width: 1rem;
   align-items: center;
   justify-content: center;
@@ -154,10 +154,6 @@
   font-feature-settings: "tnum";
 }
 
-.reaction-pill-icon {
-  margin: auto;
-}
-
 .reaction-pill .reaction-pill-number {
   margin-left: 8px;
   font-feature-settings: "tnum";

packages/app/src/Element/NoteFooter.tsx

@@ -135,7 +135,7 @@ export default function NoteFooter(props: NoteFooterProps) {
       return (
         <>
           <div className={`reaction-pill ${didZap ? "reacted" : ""}`} {...longPress()} onClick={e => fastZap(e)}>
-            <div className="reaction-pill-icon">{zapping ? <Spinner /> : webln?.enabled ? <Icon name="zapFast" /> : <Icon name="zap" />}</div>
+            {zapping ? <Spinner /> : webln?.enabled ? <Icon name="zapFast" /> : <Icon name="zap" />}
             {zapTotal > 0 && <div className="reaction-pill-number">{formatShort(zapTotal)}</div>}
           </div>
         </>
@@ -147,9 +147,7 @@ export default function NoteFooter(props: NoteFooterProps) {
   function repostIcon() {
     return (
       <div className={`reaction-pill ${hasReposted() ? "reacted" : ""}`} onClick={() => repost()}>
-        <div className="reaction-pill-icon">
+        <Icon name="repost" size={17} />
-          <Icon name="repost" size={18} />
-        </div>
         {reposts.length > 0 && <div className="reaction-pill-number">{formatShort(reposts.length)}</div>}
       </div>
     );
@@ -164,9 +162,7 @@ export default function NoteFooter(props: NoteFooterProps) {
         <div
           className={`reaction-pill ${hasReacted("+") ? "reacted" : ""} `}
           onClick={() => react(prefs.reactionEmoji)}>
-          <div className="reaction-pill-icon">
+          <Icon name="heart" />
-            <Icon name="heart" />
-          </div>
           <div className="reaction-pill-number">{formatShort(positive.length)}</div>
         </div>
         {repostIcon()}
@@ -257,7 +253,7 @@ export default function NoteFooter(props: NoteFooterProps) {
         )}
         {!bookmarked.includes(ev.Id) && (
           <MenuItem onClick={() => bookmark(ev.Id)}>
-            <Icon name="bookmark" size={18} />
+            <Icon name="bookmark" />
             <FormattedMessage {...messages.Bookmark} />
           </MenuItem>
         )}
@@ -306,16 +302,12 @@ export default function NoteFooter(props: NoteFooterProps) {
           {tipButton()}
           {reactionIcons()}
           <div className={`reaction-pill ${reply ? "reacted" : ""}`} onClick={() => setReply(s => !s)}>
-            <div className="reaction-pill-icon">
+            <Icon name="reply" size={17} />
-              <Icon name="reply" />
-            </div>
           </div>
           <Menu
             menuButton={
               <div className="reaction-pill">
-                <div className="reaction-pill-icon">
+                <Icon name="dots" size={15} />
-                  <Icon name="dots" />
-                </div>
               </div>
             }
             menuClassName="ctx-menu">

packages/app/src/Icons/Icon.tsx

@@ -5,8 +5,8 @@ type Props = {
 }
 
 const Icon = (props: Props) => {
-  const size = props.size || 16;
+  const size = props.size || 20;
-  const href = 'icons.svg#' + props.name;
+  const href = '/icons.svg#' + props.name;
 
   return (
     <svg width={size} height={size} className={props.className}>

packages/app/src/Pages/ProfilePage.css

@@ -183,12 +183,9 @@
   text-overflow: ellipsis;
 }
 
-.profile .link-icon {
+.profile .links svg {
   color: var(--highlight);
   margin-right: 8px;
-}
-
-.profile .link-icon svg {
   width: 12px;
   height: 12px;
 }

packages/app/src/Pages/ProfilePage.tsx

@@ -138,9 +138,7 @@ export default function ProfilePage() {
       <div className="links">
         {user?.website && (
           <div className="website f-ellipsis">
-            <span className="link-icon">
+            <Icon name="link" />
-              <Icon name="link" />
-            </span>
             <a href={website_url} target="_blank" rel="noreferrer">
               {user.website}
             </a>
@@ -149,9 +147,7 @@ export default function ProfilePage() {
 
         {lnurl && (
           <div className="lnurl f-ellipsis" onClick={() => setShowLnQr(true)}>
-            <span className="link-icon">
+            <Icon name="zap" />
-              <Icon name="zap" />
-            </span>
             {lnurl}
           </div>
         )}