From 4437416d969e2ba3aba8157b12b9acb73ed6abc2 Mon Sep 17 00:00:00 2001
From: ekzyis <ramdip.singhgill@gmail.com>
Date: Sun, 25 Dec 2022 03:15:42 +0100
Subject: [PATCH] Add CSS for button for consistent style with SN

---
 sn_translator/sn-translator.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/sn_translator/sn-translator.js b/sn_translator/sn-translator.js
index bb23f00..0d8f6b9 100644
--- a/sn_translator/sn-translator.js
+++ b/sn_translator/sn-translator.js
@@ -7,6 +7,7 @@
 // @match        https://stacker.news/*
 // @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
 // @grant        GM_xmlhttpRequest
+// @grant        GM_addStyle
 // ==/UserScript==
 
 const headers = {
@@ -48,11 +49,12 @@ const log = (msg) => console.log(`sn-translator:`, msg);
 
 function createButton(content) {
   const btn = document.createElement('button');
-  btn.innerText = 'Translate';
+  btn.innerText = 'translate';
   btn.onclick = async (e) => {
     const t = await translate(content.innerText, 'auto', 'en').catch(console.error);
     if (t) content.innerText = t;
   };
+  btn.classList.add('translate');
   return btn;
 }
 
@@ -65,10 +67,7 @@ function addButtons() {
   for (const comment of comments) {
     const topBar = comment.querySelector('.item_other__qNlji');
     const content = comment.querySelector('.comment_text__nHI0E');
-    const padding = document.createElement('span');
-    padding.innerText = ' ';
     const btn = createButton(content);
-    topBar.appendChild(padding);
     topBar.appendChild(btn);
   }
   log(`Done`);
@@ -80,6 +79,15 @@ function addButtons() {
   const initialSleep = 1000;
   await sleep(initialSleep);
 
+  GM_addStyle(`
+    .translate {
+      color: var(--theme-grey);
+      border: none;
+      cursor: pointer;
+      background: rgba(0,0,0,0);
+    }
+  `);
+
   let pathname = window.location.pathname;
   log(`Current location: ${pathname}`);
   addButtons();