From fd29dcd222d67b55688fcd87a814f6930224d149 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Fri, 20 Jan 2023 14:21:13 +0000
Subject: [PATCH] chore: extract note styles to generic "card" class

---
 src/Element/Note.css      | 22 ----------------------
 src/Element/Note.tsx      |  2 +-
 src/Element/NoteGhost.tsx |  2 +-
 src/index.css             | 22 ++++++++++++++++++++++
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/Element/Note.css b/src/Element/Note.css
index 41fb2f0b3..a9b127398 100644
--- a/src/Element/Note.css
+++ b/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;
 }
diff --git a/src/Element/Note.tsx b/src/Element/Note.tsx
index 8d5ba8b39..d68d13837 100644
--- a/src/Element/Note.tsx
+++ b/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>
     )
diff --git a/src/Element/NoteGhost.tsx b/src/Element/NoteGhost.tsx
index dec46e2fc..6eaa268ac 100644
--- a/src/Element/NoteGhost.tsx
+++ b/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>
diff --git a/src/index.css b/src/index.css
index 126203d10..38cfe07a0 100644
--- a/src/index.css
+++ b/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;