Reply view improvements

src/Element/NoteCreator.css

@@ -1,9 +1,10 @@
 .note-creator {
     margin-bottom: 10px;
     background-color: var(--note-bg);
-    border: 1px solid var(--gray);
+    border: none;
     border-radius: 10px;
     padding: 6px;
+    position: relative;
 }
 
 .note-reply {
@@ -15,10 +16,25 @@
     resize: none;
     background-color: var(--note-bg);
     border-radius: 10px 10px 0 0;
+    min-height: 120px;
     max-width: stretch;
     min-width: stretch;
 }
 
+.note-creator textarea::placeholder {
+  color: var(--font-secondary-color);
+  font-size: var(--font-size);
+  line-height: 24px;
+}
+
+@media (min-width: 520px) {
+  .note-creator textarea { min-height: 210px; }
+}
+
+@media (min-width: 720px) {
+  .note-creator textarea { min-height: 321px; }
+}
+
 .note-creator-actions {
     width: 100%;
     display: flex;
@@ -29,18 +45,45 @@
 }
 
 .note-creator .attachment {
-    cursor: pointer;
-    margin-left: auto;
+  cursor: pointer;
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  width: 48px;
+  height: 36px;
+  background: var(--gray-dark);
+  color: white;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.note-creator .attachment:hover {
+  background: var(--font-color);
+  color: var(--gray-dark);
+}
+
+.light .note-creator .attachment {
+  background: var(--gray-light);
+}
+
+.light .note-creator .attachment:hover {
+  background: var(--gray-dark);
+  color: white;
 }
 
 .note-creator-actions button:not(:last-child) {
     margin-right: 4px;
 }
 
-.note-creator .attachment .error {
-    font-weight: normal;
-    margin-right: 5px;
-    font-size: 14px;
+.note-creator .error {
+    position: absolute;
+    left: 16px;
+    bottom: 12px;
+    font-color: var(--error);
+    margin-right: 12px;
+    font-size: 16px;
 }
 
 .note-creator .btn {
@@ -77,6 +120,10 @@
   }
 }
 
+.note-creator-modal .modal-body {
+  background: var(--modal-bg-color);
+}
+
 @media (max-width: 720px) {
   .note-creator-modal {
     align-items: flex-start;
@@ -85,3 +132,13 @@
     margin-top: 20vh;
   }
 }
+
+.note-preview {
+  word-break: break-all;
+}
+
+.note-preview-body {
+  text-overflow: ellipsis;
+  padding: 4px 4px 0 56px;
+  font-size: 14px;
+}

src/Element/NoteCreator.tsx

@@ -1,17 +1,33 @@
-import { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPaperclip } from "@fortawesome/free-solid-svg-icons";
-
 import "./NoteCreator.css";
 
+import { useState } from "react";
+
+import Attachment from "Icons/Attachment";
 import Plus from "Icons/Plus";
 import useEventPublisher from "Feed/EventPublisher";
 import { openFile } from "Util";
 import Textarea from "Element/Textarea";
 import Modal from "Element/Modal";
+import ProfileImage from "Element/ProfileImage";
 import { default as NEvent } from "Nostr/Event";
 import useFileUpload from "Upload";
 
+interface NotePreviewProps {
+  note: NEvent
+}
+
+function NotePreview({ note }: NotePreviewProps) {
+  return (
+    <div className="note-preview">
+      <ProfileImage pubkey={note.PubKey} />
+      <div className="note-preview-body">
+        {note.Content.slice(0, 136)}
+        {note.Content.length > 140 && '...'}
+      </div>
+    </div>
+  )
+}
+
 export interface NoteCreatorProps {
     show: boolean
     setShow: (s: boolean) => void
@@ -27,6 +43,7 @@ export function NoteCreator(props: NoteCreatorProps) {
     const [error, setError] = useState<string>();
     const [active, setActive] = useState<boolean>(false);
     const uploader = useFileUpload();
+    const hasErrors = (error?.length ?? 0) > 0
 
     async function sendNote() {
         if (note) {
@@ -88,6 +105,9 @@ export function NoteCreator(props: NoteCreatorProps) {
             className="note-creator-modal"
             onClose={() => setShow(false)}
           >
+            {replyTo &&  (
+              <NotePreview note={replyTo} />
+            )}
             <div className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}>
                 <div className="flex f-col mr10 f-grow">
                     <Textarea
@@ -97,11 +117,11 @@ export function NoteCreator(props: NoteCreatorProps) {
                         value={note}
                         onFocus={() => setActive(true)}
                     />
-                <div className="attachment">
-                    {(error?.length ?? 0) > 0 ? <b className="error">{error}</b> : null}
-                    <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
-                </div>
+                <button type="button" className="attachment" onClick={(e) => attachFile()}>
+                  <Attachment />
+                </button>
                 </div>
+                {hasErrors && <span className="error">{error}</span>}
             </div>
             <div className="note-creator-actions">
                 <button className="secondary" type="button" onClick={cancel}>

src/Element/Textarea.tsx

@@ -61,7 +61,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
     <ReactTextareaAutocomplete
       {...rest}
       loadingComponent={() => <span>Loading....</span>}
-      placeholder="Say something!"
+      placeholder="What's on your mind?"
       onChange={onChange}
       textAreaComponent={TextareaAutosize}
       trigger={{

src/Icons/Attachment.tsx

@@ -0,0 +1,11 @@
+import IconProps from './IconProps'
+
+const Attachment = (props: IconProps) => {
+  return (
+    <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.1525 9.89945L10.1369 18.9151C8.08662 20.9653 4.7625 20.9653 2.71225 18.9151C0.661997 16.8648 0.661998 13.5407 2.71225 11.4904L11.7279 2.47483C13.0947 1.108 15.3108 1.108 16.6776 2.47483C18.0444 3.84167 18.0444 6.05775 16.6776 7.42458L8.01555 16.0866C7.33213 16.7701 6.22409 16.7701 5.54068 16.0866C4.85726 15.4032 4.85726 14.2952 5.54068 13.6118L13.1421 6.01037" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  )
+}
+
+export default Attachment