From 5a16b11b278027a00d77b840bfc7876085008a3f Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 19 Jan 2023 11:19:10 +0100
Subject: [PATCH] fix: add missing css

---
 src/Number.ts              | 9 +++++++--
 src/element/FollowsYou.css | 6 ++++++
 src/element/Note.css       | 3 +--
 src/element/NoteFooter.tsx | 2 +-
 4 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 src/element/FollowsYou.css

diff --git a/src/Number.ts b/src/Number.ts
index 551f48b2..64460dbd 100644
--- a/src/Number.ts
+++ b/src/Number.ts
@@ -1,9 +1,14 @@
+const intl = new Intl.NumberFormat("en", {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+});
+
 export function formatShort(n: number) {
   if (n < 999) {
     return n
   } else if (n < 1e8) {
-    return `${Math.floor(n / 1e3)}K`
+    return `${intl.format(Math.floor(n / 1e3))}K`
   } else {
-    return `${Math.floor(n / 1e6)}M`
+    return `${intl.format(Math.floor(n / 1e6))}M`
   }
 }
diff --git a/src/element/FollowsYou.css b/src/element/FollowsYou.css
new file mode 100644
index 00000000..2b1cf5ec
--- /dev/null
+++ b/src/element/FollowsYou.css
@@ -0,0 +1,6 @@
+.follows-you {
+  color: var(--font-secondary-color);
+  font-size: var(--font-size-tiny);
+  margin-left: .2em;
+  font-weight: normal
+}
diff --git a/src/element/Note.css b/src/element/Note.css
index aa097402..33c5af8e 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -87,8 +87,7 @@
 .reaction-pill {
   display: flex;
   flex-direction: row;
-  padding: 2px 10px;
-  border-radius: 10px;
+  padding: 0px 10px;
   user-select: none;
   color: var(--font-secondary-color);
 }
diff --git a/src/element/NoteFooter.tsx b/src/element/NoteFooter.tsx
index afb6a6b4..fef70fc5 100644
--- a/src/element/NoteFooter.tsx
+++ b/src/element/NoteFooter.tsx
@@ -108,7 +108,7 @@ export default function NoteFooter(props: NoteFooterProps) {
                     </div>
                   </div>
                 )}
-                <div className="reaction-pill" onClick={(e) => setReply(s => !s)}>
+                <div className={`reaction-pill ${reply ? 'reacted' : ''}`} onClick={(e) => setReply(s => !s)}>
                   <div className="reaction-pill-icon">
                     <FontAwesomeIcon icon={faReply} />
                   </div>