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

@@ -41,11 +41,14 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
   }
 
   return (
-      <div className="mr-2 flex flex-col break-words">
+    <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" onClick={() => setIsExpanded(true)}>
+        <button
-            ... Read more
+          className="text-gray-500 text-sm text-neutral-500"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {isExpanded ? '...Read less' : '...Read more'}
         </button>
       )}
       {url !== '' && (
@@ -61,4 +64,3 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
 }
 
 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);
@@ -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"
@@ -62,9 +66,16 @@ const Settings = () => {
 
       <div className="settings-page py-10">
         <h1 className="text-lg font-semibold mb-4">About</h1>
-          <div className='flex'>  
+        <div className="flex flex-col">
-            <a href='https://github.com/smolgrrr/TAO'>
+          <p>The Anon Operation (TAO) is an anonymous-first forum, built upon the <a className="underline" href="https://nostr.com/">NOSTR protocol</a>.</p>
-            <img src="https://img.shields.io/github/stars/smolgrrr/TAO.svg?style=social"/>
+          <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>

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" />