From 8ab56f5bcfe720b8e6d03f85b5f4ada1a18bfc37 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Wed, 27 Mar 2024 21:44:54 +0100
Subject: [PATCH] ReadAllNotificationButton: make button less ugly

---
 src/plugins/readAllNotificationsButton/index.tsx | 10 +++++++---
 src/plugins/readAllNotificationsButton/style.css | 11 +++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/readAllNotificationsButton/style.css

diff --git a/src/plugins/readAllNotificationsButton/index.tsx b/src/plugins/readAllNotificationsButton/index.tsx
index 0e08edb6..ae66e11a 100644
--- a/src/plugins/readAllNotificationsButton/index.tsx
+++ b/src/plugins/readAllNotificationsButton/index.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
@@ -49,9 +51,11 @@ const ReadAllButton = () => (
     <Button
         onClick={onClick}
         size={Button.Sizes.MIN}
-        color={Button.Colors.BRAND}
-        style={{ marginTop: "2px", marginBottom: "8px", marginLeft: "9px" }}
-    >Read all</Button>
+        color={Button.Colors.CUSTOM}
+        className="vc-ranb-button"
+    >
+        Read All
+    </Button>
 );
 
 export default definePlugin({
diff --git a/src/plugins/readAllNotificationsButton/style.css b/src/plugins/readAllNotificationsButton/style.css
new file mode 100644
index 00000000..3d10b2bd
--- /dev/null
+++ b/src/plugins/readAllNotificationsButton/style.css
@@ -0,0 +1,11 @@
+.vc-ranb-button {
+    color: var(--interactive-normal);
+    padding: 0 0.5em;
+    margin-bottom: 0.5em;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.vc-ranb-button:hover {
+    color: var(--interactive-active);
+}