UI improvements and add abt section

client/src/components/Header/Header.tsx

@@ -10,10 +10,11 @@ export default function Header() {
                     <span className="font-bold">The Anon Operation</span>
                 </div>
                 </a>
+                <a href='/settings'>
                 <button className="ml-auto pr-4">
                     <QuestionMarkCircleIcon className="h-6 w-6 text-transperant" />
                 </button>
-                <a href='/settings'>
+                
                 <button className="">
                     <Cog6ToothIcon className="h-6 w-6 text-transperant" />
                 </button>

client/src/components/Modals/LinkPreview.tsx

@@ -18,7 +18,7 @@ const LinkModal = ({ url }: { url: string }) => {
   }, [url]);
 
   if (!linkPreview) {
-    return <a className='hover:underline' href={url}>{url}</a>; // or some loading state
+    return <a className='hover:underline text-xs text-neutral-500' href={url}>{url}</a>; // or some loading state
   }
 
   return (

client/src/components/Modals/TextModal.tsx

@@ -6,59 +6,61 @@ import { nip19 } from "nostr-tools";
 import LinkModal from "./LinkPreview";
 
 const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
-    const [finalComment, setFinalComment] = useState(comment)
-    const [quoteEvents, setQuoteEvents] = useState<Event[]>([]); // Initialize state
-    const [isExpanded, setIsExpanded] = useState(false);
-    const [url, setUrl] = useState('')
+  const [finalComment, setFinalComment] = useState(comment)
+  const [quoteEvents, setQuoteEvents] = useState<Event[]>([]); // Initialize state
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [url, setUrl] = useState('')
 
-      // Define your callback function for subGlobalFeed
-    const onEvent = (event: Event, relay: string) => {
-        setQuoteEvents((prevEvents) => [...prevEvents, event]);
-    };
+  // Define your callback function for subGlobalFeed
+  const onEvent = (event: Event, relay: string) => {
+    setQuoteEvents((prevEvents) => [...prevEvents, event]);
+  };
 
-    useEffect(() => {
-        const findUrl = comment.match(/\bhttps?:\/\/\S+/gi);
-        if (findUrl && findUrl.length > 0) {
-            setUrl(findUrl[0])
-            setFinalComment(finalComment.replace(findUrl[0], '').trim())
-        }
+  useEffect(() => {
+    const findUrl = comment.match(/\bhttps?:\/\/\S+/gi);
+    if (findUrl && findUrl.length > 0) {
+      setUrl(findUrl[0])
+      setFinalComment(finalComment.replace(findUrl[0], '').trim())
+    }
 
-        const match = comment.match(/\bnostr:([a-z0-9]+)/i);
-        const nostrQuoteID = match && match[1];
-        if (nostrQuoteID && nostrQuoteID.length > 0) {
-          let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
-          subNoteOnce(id_to_hex, onEvent);
-          setFinalComment(finalComment.replace('nostr:'+nostrQuoteID, '').trim())
-        }
-      }, [comment, finalComment]);
+    const match = comment.match(/\bnostr:([a-z0-9]+)/i);
+    const nostrQuoteID = match && match[1];
+    if (nostrQuoteID && nostrQuoteID.length > 0) {
+      let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
+      subNoteOnce(id_to_hex, onEvent);
+      setFinalComment(finalComment.replace('nostr:' + nostrQuoteID, '').trim())
+    }
+  }, [comment, finalComment]);
 
-    const getMetadataEvent = (event: Event) => {
+  const getMetadataEvent = (event: Event) => {
     const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
     if (metadataEvent) {
-        return metadataEvent;
+      return metadataEvent;
     }
     return null;
-    }
-
-    return (
-      <div className="mr-2 flex flex-col break-words">
-        {isExpanded ? finalComment : finalComment.slice(0, 240)}
-        {finalComment.length > 240 && (
-          <button className="text-gray-500" onClick={() => setIsExpanded(true)}>
-            ... Read more
-          </button>
-        )}
-        {url !== '' && (
-            <LinkModal key={key} url={url} />
-        )}
-        {quoteEvents[0] && quoteEvents.length > 0 && (
-          <a href={`/thread/${nip19.noteEncode(quoteEvents[0].id)}`}>
-            <QuoteEmbed key={key} event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
-          </a>
-        )}
-      </div>
-    );
   }
 
-  export default ContentPreview;
+  return (
+    <div className="mr-2 flex flex-col break-words text-sm">
+      {isExpanded ? finalComment : finalComment.slice(0, 240)}
+      {finalComment.length > 240 && (
+        <button
+          className="text-gray-500 text-sm text-neutral-500"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {isExpanded ? '...Read less' : '...Read more'}
+        </button>
+      )}
+      {url !== '' && (
+        <LinkModal key={key} url={url} />
+      )}
+      {quoteEvents[0] && quoteEvents.length > 0 && (
+        <a href={`/thread/${nip19.noteEncode(quoteEvents[0].id)}`}>
+          <QuoteEmbed key={key} event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
+        </a>
+      )}
+    </div>
+  );
+}
 
+export default ContentPreview;

client/src/components/PostCard/CardContainer.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 export default function CardContainer({ children }: PropsWithChildren) {
   return (
     <div className="card bg-gradient-to-r from-black to-neutral-950 shadow-lg shadow-black">
-      <div className="card-body p-1">{children}</div>
+      <div className="card-body p-4">{children}</div>
     </div>
   );
 }

client/src/components/PostCard/NewThreadCard.tsx

@@ -145,7 +145,7 @@ const NewThreadCard: React.FC = () => {
           {doingWorkProp ? (
               <div className='flex animate-pulse text-sm text-gray-300'>
                 <CpuChipIcon className="h-4 w-4 ml-auto" />
-                <span>Working...</span>
+                <span>Generating Proof-of-Work...</span>
               </div>
             ) : null}
           <div id="postFormError" className="text-red-500" />

client/src/components/PostCard/PostCard.tsx

@@ -93,9 +93,9 @@ const PostCard = ({ key, event, metadata, replyCount }: { key: string, event: Ev
             <div className="mr-2 flex flex-col break-words">
               <ContentPreview key={event.id} comment={comment} />
             </div>            
-            {renderMedia(file)}              
           </div>
         </a>
+        {renderMedia(file)}  
       </CardContainer>
     </>
   );

client/src/components/Settings.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 // import {powEvent} from './system';
 // import {publish} from './relays';
 import { addRelay } from '../utils/relays';
-
+import { CpuChipIcon } from '@heroicons/react/24/outline';
 const Settings = () => {
   const [filterDifficulty, setFilterDifficulty] = useState(localStorage.getItem('filterDifficulty') || 21);
   const [difficulty, setDifficulty] = useState(localStorage.getItem('difficulty') || 21);
@@ -20,9 +20,9 @@ const Settings = () => {
     window.dispatchEvent(event);
   };
 
-//   useEffect(() => {
-//     addRelay('wss://powrelay.xyz');
-// }, []);
+  //   useEffect(() => {
+  //     addRelay('wss://powrelay.xyz');
+  // }, []);
 
   return (
     <div className="settings-page bg-black text-white p-8">
@@ -31,7 +31,9 @@ const Settings = () => {
         <div className="flex flex-wrap -mx-2 mb-4">
           <div className="w-full md:w-1/3 px-2 mb-4 md:mb-0">
             <label className="block mb-2" htmlFor="filterDifficulty">
-              Filter Difficulty:
+              <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                Proof-of-Work Difficulty Filter {'('}<CpuChipIcon className="h-4 w-4" />{'>'}X to appear on feed{')'}:
+              </span>
             </label>
             <input
               id="filterDifficulty"
@@ -44,7 +46,9 @@ const Settings = () => {
 
           <div className="w-full md:w-1/3 px-2 mb-4 md:mb-0">
             <label className="block mb-2" htmlFor="difficulty">
-              Post Difficulty:
+              <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                Post Difficulty {'('}<CpuChipIcon className="h-4 w-4" /> required to make post{')'}:
+              </span>
             </label>
             <input
               id="difficulty"
@@ -61,13 +65,20 @@ const Settings = () => {
       </form>
 
       <div className="settings-page py-10">
-          <h1 className="text-lg font-semibold mb-4">About</h1>
-          <div className='flex'>  
-            <a href='https://github.com/smolgrrr/TAO'>
-            <img src="https://img.shields.io/github/stars/smolgrrr/TAO.svg?style=social"/>
-            </a>
-          </div>
+        <h1 className="text-lg font-semibold mb-4">About</h1>
+        <div className="flex flex-col">
+          <p>The Anon Operation (TAO) is an anonymous-first forum, built upon the <a className="underline" href="https://nostr.com/">NOSTR protocol</a>.</p>
+          <br />
+          <p>TAO is built to facilitate unstoppable free speech on the internet.</p>
+          <p>-PWA to be widely accessible with distribution via URLS, and to side-step App Store gatekeeping</p>
+          <p>-Uses NOSTR as a censorship-resistant global "social" network</p>
+          <p>-Employs Proof-of-Work (PoW) as a spam prevention mechanism, as opposed to Captcha, moderation or other verification methods</p>
+          <br />
+          <a href="https://github.com/smolgrrr/TAO">
+            <img src="https://img.shields.io/github/stars/smolgrrr/TAO.svg?style=social" alt="Github Stars Badge" />
+          </a>
         </div>
+      </div>
     </div>
 
   );

client/src/components/Thread/ThreadPost.tsx

@@ -173,7 +173,7 @@ const ThreadPost = ({ OPEvent, state, type }: { OPEvent: NostrEvent, state: Bool
                     {doingWorkProp ? (
                         <div className='flex animate-pulse text-sm text-gray-300'>
                             <CpuChipIcon className="h-4 w-4 ml-auto" />
-                            <span>Working...</span>
+                            <span>Generating Proof-of-Work...</span>
                         </div>
                     ) : null}
                     <div id="postFormError" className="text-red-500" />