From 8952f42540027d9d4f8cb23c3fd93b19ceb93c8f Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 9 Sep 2024 17:29:35 +0200
Subject: [PATCH] style(new posts button): improve design

---
 .../newer-posts-button.module.css             | 26 ++-----------------
 .../newer-posts-button/newer-posts-button.tsx | 10 ++++---
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/src/components/newer-posts-button/newer-posts-button.module.css b/src/components/newer-posts-button/newer-posts-button.module.css
index 62e7581a..3d33852b 100644
--- a/src/components/newer-posts-button/newer-posts-button.module.css
+++ b/src/components/newer-posts-button/newer-posts-button.module.css
@@ -1,43 +1,21 @@
 .newerPostsButton {
   position: fixed;
   left: 10%;
-  border-radius: 25px;
-  background-color: green;
-  color: white;
   z-index: 5;
   transition: top 0.3s ease-in-out;
-  font-size: 13px;
 }
 
 .resetButton {
-  display: inline-block;
+  display: inline-block;  
   cursor: pointer;
-  font-weight: 700;
-  padding: 5px 10px;
 }
 
-.resetButton:hover {
-  opacity: 0.8;
-}
 
 .hide {
   display: none;
 }
 
 .hideButton {
-  display: inline-block;
   cursor: pointer;
-  background-image: url("/public/assets/buttons/close-x-button.png");
-  background-size: cover;
-  height: 12px;
-  width: 12px;
-  transform: translateY(1px);
-}
-
-.hideButtonWrapper {
-  padding-right: 10px;
-}
-
-.hideButton:hover {
-  opacity: 0.8;
+  padding: 0px 3px;
 }
\ No newline at end of file
diff --git a/src/components/newer-posts-button/newer-posts-button.tsx b/src/components/newer-posts-button/newer-posts-button.tsx
index 922ee958..e6001a42 100644
--- a/src/components/newer-posts-button/newer-posts-button.tsx
+++ b/src/components/newer-posts-button/newer-posts-button.tsx
@@ -38,11 +38,13 @@ const NewerPostsButton = ({ reset, subplebbitAddressesWithNewerPosts }: NewerPos
 
   return (
     <div className={`${styles.newerPostsButton} ${!hide && styles.show} ${hide && styles.hide}`} style={{ top: `${buttonPosition}px` }}>
-      <span className={styles.resetButton} onClick={handleNewerPostsButtonClick}>
-        Newer Posts
-      </span>
+      <button className={styles.resetButton} onClick={handleNewerPostsButtonClick}>
+        ↑ new posts
+      </button>
       <span className={styles.hideButtonWrapper}>
-        <span className={styles.hideButton} onClick={() => setHideButton(true)} />
+        <button className={styles.hideButton} onClick={() => setHideButton(true)}>
+          x
+        </button>
       </span>
     </div>
   );