refactor: extract text css

src/element/DM.css

@@ -26,7 +26,3 @@
     max-width: 100%;
     max-height: 500px;
 }
-
-.dm p {
-  margin: 0;
-}

src/element/DM.tsx

@@ -10,7 +10,7 @@ import Event from "../nostr/Event";
 // @ts-ignore
 import NoteTime from "./NoteTime";
 // @ts-ignore
-import Text from "../Text";
+import Text from "./Text";
 
 export type DMProps = {
     data: any
@@ -44,4 +44,4 @@ export default function DM(props: DMProps) {
             </div>
         </div>
     )
-}
+}

src/element/Note.css

@@ -29,55 +29,6 @@
     word-break: normal;
 }
 
-.note > .body h1 {
-    margin: 0;
-}
-.note > .body h2 {
-    margin: 0;
-}
-.note > .body h3 {
-    margin: 0;
-}
-.note > .body h4 {
-    margin: 0;
-}
-.note > .body h5 {
-    margin: 0;
-}
-.note > .body h6 {
-    margin: 0;
-}
-
-.note > .body > p {
-    margin: 0;
-}
-
-.note > .body > pre {
-}
-
-.note > .body > ul, .note > .body > ol {
-    margin: 0;
-}
-
-.note > .body > hr {
-    border: 0;
-    height: 1px;
-    background-image: var(--gray-gradient);
-    margin: 20px;
-}
-
-.note > .body img, .note > .body video, .note > .body iframe {
-    max-width: 100%;
-    max-height: 500px;
-    margin: 10px auto;
-    display: block;
-}
-
-.note > .body iframe, note > .body video {
-    width: -webkit-fill-available;
-    aspect-ratio: 16 / 9;
-}
-
 .note > .header img:hover, .note > .header .name > .reply:hover, .note .body:hover {
     cursor: pointer;
 }
@@ -98,12 +49,7 @@
     border-left: 3px solid var(--highlight);
 }
 
-
 .indented .note {
     border-bottom: none;
     padding: 4px;
 }
-
-.note .body a {
-    color: var(--highlight);
-}

src/element/Note.js

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 import Event from "../nostr/Event";
 import ProfileImage from "./ProfileImage";
-import Text from "../Text";
+import Text from "./Text";
 import { eventLink, hexToBech32 } from "../Util";
 import NoteFooter from "./NoteFooter";
 import NoteTime from "./NoteTime";

src/element/Text.css

@@ -0,0 +1,53 @@
+.text a {
+    color: var(--highlight);
+}
+
+.text h1 {
+    margin: 0;
+}
+.text h2 {
+    margin: 0;
+}
+.text h3 {
+    margin: 0;
+}
+.text h4 {
+    margin: 0;
+}
+.text h5 {
+    margin: 0;
+}
+.text h6 {
+    margin: 0;
+}
+
+.text p {
+    margin: 0;
+}
+
+.text pre {
+    margin: 0;
+}
+
+.text ul, .text ol {
+    margin: 0;
+}
+
+.text hr {
+    border: 0;
+    height: 1px;
+    background-image: var(--gray-gradient);
+    margin: 20px;
+}
+
+.text img, .text video, .text iframe {
+    max-width: 100%;
+    max-height: 500px;
+    margin: 10px auto;
+    display: block;
+}
+
+.text iframe, .text video {
+    width: -webkit-fill-available;
+    aspect-ratio: 16 / 9;
+}

src/element/Text.js

@@ -2,11 +2,13 @@ import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { TwitterTweetEmbed } from "react-twitter-embed";
 
-import Invoice from "./element/Invoice";
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "./Const";
-import { eventLink, hexToBech32, profileLink } from "./Util";
-import LazyImage from "./element/LazyImage";
-import Hashtag from "./element/Hashtag";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "../Const";
+import { eventLink, hexToBech32, profileLink } from "../Util";
+import Invoice from "./Invoice";
+import LazyImage from "./LazyImage";
+import Hashtag from "./Hashtag";
+
+import './Text.css'
 
 function transformHttpLink(a) {
     try {
@@ -165,6 +167,6 @@ export default function Text({ content, tags, users }) {
       a: (props) => transformHttpLink(props.href),
       li: (props) => transformLi({ body: props.children, tags, users }),
     }
-    return <ReactMarkdown components={components}>{content}</ReactMarkdown>
+    return <ReactMarkdown className="text" components={components}>{content}</ReactMarkdown>
 }
 

src/pages/ProfilePage.js

@@ -11,7 +11,7 @@ import useProfile from "../feed/ProfileFeed";
 import FollowButton from "../element/FollowButton";
 import { extractLnAddress, parseId, hexToBech32 } from "../Util";
 import Timeline from "../element/Timeline";
-import Text from '../Text'
+import Text from '../element/Text'
 import LNURLTip from "../element/LNURLTip";
 import Nip05, { useIsVerified } from "../element/Nip05";
 import Copy from "../element/Copy";