chore: extract note styles to generic "card" class

src/Element/Note.css

@@ -1,23 +1,7 @@
-.note {
-    margin-bottom: 12px;
-    border-radius: 16px;
-    background-color: var(--note-bg);
-    padding: 12px;
-    min-height: 110px;
-}
-@media (min-width: 720px) {
-  .note { margin-bottom: 24px; padding: 24px; }
-}
-
 .note.thread {
     border-bottom: none;
 }
 
-.note .header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
 
 .note > .header .reply {
     font-size: var(--font-size-tiny);
@@ -43,12 +27,6 @@
     cursor: pointer;
 }
 
-.note > .footer {
-  display: flex;
-  flex-direction: row-reverse;
-  margin-top: 12px;
-}
-
 .note > .note-creator {
   margin-top: 12px;
 }

src/Element/Note.tsx

@@ -115,7 +115,7 @@ export default function Note(props: NoteProps) {
     }
 
     return (
-        <div className={`note${highlight ? " active" : ""}${isThread ? " thread" : ""}`} ref={ref}>
+        <div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}`} ref={ref}>
             {content()}
         </div>
     )

src/Element/NoteGhost.tsx

@@ -3,7 +3,7 @@ import ProfileImage from "Element/ProfileImage";
 
 export default function NoteGhost(props: any) {
     return (
-        <div className="note">
+        <div className="note card">
             <div className="header">
                 <ProfileImage pubkey="" />
             </div>

src/index.css

@@ -84,6 +84,28 @@ code {
   align-items: center;
 }
 
+.card {
+  margin-bottom: 12px;
+  border-radius: 16px;
+  background-color: var(--note-bg);
+  padding: 12px;
+}
+@media (min-width: 720px) {
+  .card { margin-bottom: 24px; padding: 24px; }
+}
+
+.card .header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.card > .footer {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: 12px;
+}
+
 .btn { 
   padding: 10px;
   border-radius: 5px;