Profile / Thread styles

packages/app/src/Element/Copy.tsx

@@ -16,7 +16,7 @@ export default function Copy({ text, maxSize = 32, className }: CopyProps) {
     <div className={`flex flex-row copy ${className}`} onClick={() => copy(text)}>
       <span className="body">{trimmed}</span>
       <span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
-        {copied ? <Icon name="check" size={14} /> : <Icon name="copy" size={14} />}
+        {copied ? <Icon name="check" size={14} /> : <Icon name="copy-solid" size={14} />}
       </span>
     </div>
   );

packages/app/src/Element/LiveEvent.tsx

@@ -13,7 +13,7 @@ export function LiveEvent({ ev }: { ev: NostrEvent }) {
           <h3>{title}</h3>
         </div>
         <div>
-          <Link to={`/live/${encodeTLV(NostrPrefix.Address, d, undefined, ev.kind, ev.pubkey)}`}>
+          <Link to={`https://zap.stream/${encodeTLV(NostrPrefix.Address, d, undefined, ev.kind, ev.pubkey)}`}>
             <button className="primary" type="button">
               <FormattedMessage defaultMessage="Watch Live!" />
             </button>

packages/app/src/Element/Nip05.tsx

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

packages/app/src/Element/Note.css

@@ -2,7 +2,7 @@
   min-height: 110px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .note:hover {
@@ -185,7 +185,6 @@
 
 .note.active {
   border-left: 1px solid var(--highlight);
-  border-bottom-left-radius: 0;
   margin-left: -1px;
 }
 

packages/app/src/Element/NoteFooter.tsx

@@ -191,7 +191,7 @@ export default function NoteFooter(props: NoteFooterProps) {
   function repostIcon() {
     return (
       <div className={`reaction-pill ${hasReposted() ? "reacted" : ""}`} onClick={() => repost()}>
-        <Icon name="repost" size={17} />
+        <Icon name="repeat" size={18} />
         {reposts.length > 0 && <div className="reaction-pill-number">{formatShort(reposts.length)}</div>}
       </div>
     );
@@ -201,12 +201,11 @@ export default function NoteFooter(props: NoteFooterProps) {
     if (!prefs.enableReactions) {
       return null;
     }
+    const reacted = hasReacted("+");
     return (
       <>
-        <div
-          className={`reaction-pill ${hasReacted("+") ? "reacted" : ""} `}
-          onClick={() => react(prefs.reactionEmoji)}>
-          <Icon name="heart" />
+        <div className={`reaction-pill ${reacted ? "reacted" : ""} `} onClick={() => react(prefs.reactionEmoji)}>
+          <Icon name={reacted ? "heart-solid" : "heart"} size={18} />
           <div className="reaction-pill-number">{formatShort(positive.length)}</div>
         </div>
       </>

packages/app/src/Element/NoteReaction.css

@@ -1,23 +1,14 @@
 .reaction {
-}
-
-.reaction > .note {
-  margin: 10px 0;
-}
-
-.reaction > .header {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.reaction > .header .reply {
-  font-size: var(--font-size-small);
+.reaction > div:nth-child(1) {
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.reaction > .header > .info {
-  font-size: var(--font-size);
-  white-space: nowrap;
-  color: var(--font-secondary-color);
-  margin-right: 24px;
+.reaction > div:nth-child(1) svg {
+  opacity: 0.5;
 }

packages/app/src/Element/NoteReaction.tsx

@@ -1,13 +1,16 @@
 import "./NoteReaction.css";
 import { Link } from "react-router-dom";
 import { useMemo } from "react";
-import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix, EventExt } from "@snort/system";
+import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix } from "@snort/system";
 
 import Note from "Element/Note";
-import ProfileImage from "Element/ProfileImage";
+import { getDisplayName } from "Element/ProfileImage";
 import { eventLink, hexToBech32 } from "SnortUtils";
-import NoteTime from "Element/NoteTime";
 import useModeration from "Hooks/useModeration";
+import { FormattedMessage } from "react-intl";
+import Icon from "Icons/Icon";
+import { useUserProfile } from "@snort/system-react";
+import { System } from "index";
 
 export interface NoteReactionProps {
   data: TaggedNostrEvent;
@@ -16,6 +19,7 @@ export interface NoteReactionProps {
 export default function NoteReaction(props: NoteReactionProps) {
   const { data: ev } = props;
   const { isMuted } = useModeration();
+  const profile = useUserProfile(System, ev.pubkey);
 
   const refEvent = useMemo(() => {
     if (ev) {
@@ -60,12 +64,15 @@ export default function NoteReaction(props: NoteReactionProps) {
   };
 
   return shouldNotBeRendered ? null : (
-    <div className="reaction">
-      <div className="header flex">
-        <ProfileImage pubkey={EventExt.getRootPubKey(ev)} />
-        <div className="info">
-          <NoteTime from={ev.created_at * 1000} />
-        </div>
+    <div className="card reaction">
+      <div className="flex g4">
+        <Icon name="repeat" size={18} />
+        <FormattedMessage
+          defaultMessage="{name} reposted"
+          values={{
+            name: getDisplayName(profile, ev.pubkey),
+          }}
+        />
       </div>
       {root ? <Note data={root} options={opt} related={[]} /> : null}
       {!root && refEvent ? (

packages/app/src/Element/ProfileImage.tsx

@@ -50,8 +50,7 @@ export default function ProfileImage({
     <Link
       className={`pfp${className ? ` ${className}` : ""}`}
       to={link === undefined ? profileLink(pubkey) : link}
-      onClick={handleClick}
-      replace={true}>
+      onClick={handleClick}>
       <div className="avatar-wrapper">
         <Avatar user={user} />
       </div>

packages/app/src/Element/Tabs.css

@@ -5,8 +5,9 @@
   overflow-x: scroll;
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* Firefox */
-  margin-bottom: 18px;
   white-space: nowrap;
+  gap: 8px;
+  padding: 16px 12px;
 }
 
 .tabs::-webkit-scrollbar {
@@ -14,23 +15,21 @@
 }
 
 .tab {
+  background: var(--gray-ultradark);
   color: var(--font-tertiary-color);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
+  border-radius: 100px;
   font-weight: 600;
-  font-size: 14px;
-  padding: 6px 12px;
-  text-align: center;
-  font-feature-settings: "tnum";
-}
-
-.tab:not(:last-of-type) {
-  margin-right: 8px;
+  font-size: 16px;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  gap: 6px;
 }
 
 .tab.active {
-  border-color: var(--font-color);
-  color: var(--font-color);
+  color: black;
+  background: white;
 }
 
 .tabs > div {

packages/app/src/Element/Tabs.tsx

@@ -1,8 +1,9 @@
+import { ReactNode } from "react";
 import "./Tabs.css";
 import useHorizontalScroll from "Hooks/useHorizontalScroll";
 
 export interface Tab {
-  text: string;
+  text: ReactNode;
   value: number;
   disabled?: boolean;
 }

packages/app/src/Element/Thread.css

@@ -1,7 +1,3 @@
-.thread-container {
-  margin: 12px 0 150px 0;
-}
-
 .thread-container .hidden-note {
   margin: 0;
   border-radius: 0;
@@ -11,11 +7,6 @@
   box-shadow: none;
 }
 
-.thread-root.note > .body {
-  margin-top: 8px;
-  padding-left: 8px;
-}
-
 .thread-root.note > .body .text {
   font-size: 19px;
 }
@@ -31,12 +22,13 @@
 }
 
 .thread-note.note {
-  border-radius: 0;
-  margin-bottom: 0;
+  border: 0;
 }
 
-.light .thread-note.note.card {
-  box-shadow: none;
+.thread-note.note .zaps-summary,
+.thread-note.note .footer,
+.thread-note.note .body {
+  margin-left: 61px;
 }
 
 .thread-container .hidden-note {
@@ -58,83 +50,47 @@
   position: relative;
 }
 
-.line-container {
-  background: var(--note-bg);
-}
-
 .subthread-container.subthread-multi .line-container:before {
   content: "";
   position: absolute;
-  left: 36px;
+  left: calc(48px / 2 + 16px);
   top: 48px;
   border-left: 1px solid var(--gray-superdark);
   height: 100%;
+  z-index: -1;
 }
 
-@media (min-width: 720px) {
-  .subthread-container.subthread-multi .line-container:before {
-    left: 48px;
-  }
-}
-
-.subthread-container.subthread-mid:not(.subthread-last) .line-container:after {
-  content: "";
-  position: absolute;
-  left: 36px;
-  top: 48px;
-  border-left: 1px solid var(--gray-superdark);
-  height: 100%;
-}
-
-@media (min-width: 720px) {
-  .subthread-container.subthread-mid:not(.subthread-last) .line-container:after {
-    left: 48px;
-  }
-}
-
-.subthread-container.subthread-mid:not(.subthread-last) .line-container:after {
+.subthread-container.subthread-mid:not(.subthread-last) .line-container:before {
   content: "";
   position: absolute;
   border-left: 1px solid var(--gray-superdark);
-  left: 36px;
+  left: calc(48px / 2 + 16px);
   top: 0;
   height: 48px;
-}
-
-@media (min-width: 720px) {
-  .subthread-container.subthread-mid:not(.subthread-last) .line-container:after {
-    left: 48px;
-  }
+  z-index: -1;
 }
 
 .subthread-container.subthread-last .line-container:before {
   content: "";
   position: absolute;
   border-left: 1px solid var(--gray-superdark);
-  left: 36px;
+  left: calc(48px / 2 + 16px);
   top: 0;
   height: 48px;
-}
-
-@media (min-width: 720px) {
-  .subthread-container.subthread-last .line-container:before {
-    left: 48px;
-  }
+  z-index: -1;
 }
 
 .divider-container {
-  background: var(--note-bg);
+  margin-right: 16px;
 }
 
 .divider {
   height: 1px;
   background: var(--gray-superdark);
-  margin-left: 28px;
-  margin-right: 22px;
 }
 
 .divider.divider-small {
-  margin-left: 80px;
+  margin-left: calc(16px + 61px);
 }
 
 .thread-container .collapsed,
@@ -143,11 +99,6 @@
   min-height: 48px;
 }
 
-.thread-note.is-last-note {
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
-}
-
 .thread-container .collapsed {
   background-color: var(--note-bg);
 }
@@ -155,13 +106,3 @@
 .thread-container .hidden-note {
   padding-left: 48px;
 }
-
-.thread-root.thread-root-single.note {
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
-}
-
-.thread-root.ghost-root {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
-}

packages/app/src/Element/Thread.tsx

@@ -374,9 +374,11 @@ export default function Thread() {
     description: "Navigate back button on threads view",
   });
   return (
-    <div className="main-content mt10">
-      <BackButton onClick={goBack} text={parent ? parentText : backText} />
-      <div className="thread-container">
+    <>
+      <div className="main-content">
+        <BackButton onClick={goBack} text={parent ? parentText : backText} />
+      </div>
+      <div className="main-content">
         {root && renderRoot(root)}
         {root && renderChain(root.id)}
 
@@ -392,7 +394,7 @@ export default function Thread() {
           );
         })}
       </div>
-    </div>
+    </>
   );
 }