style(new posts button): improve design

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;
 }

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>
   );