Adding tor to twitter and youtube #32

16 files changed, 283 insertions, 93 deletions

diff --git a/src/pages/options/imgur/imgur.js b/src/pages/options/imgur/imgur.js
index 1d4a8263..1ff9bae0 100644
--- a/src/pages/options/imgur/imgur.js
+++ b/src/pages/options/imgur/imgur.js
@@ -11,6 +11,7 @@ imgurHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'rimgo',
+        'normal',
         imgurHelper,
         document,
         imgurHelper.getRimgoRedirectsChecks,
diff --git a/src/pages/options/instagram/instagram.js b/src/pages/options/instagram/instagram.js
index 0b4193df..632ee0bb 100644
--- a/src/pages/options/instagram/instagram.js
+++ b/src/pages/options/instagram/instagram.js
@@ -11,6 +11,7 @@ instagramHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'bibliogram',
+        'normal',
         instagramHelper,
         document,
         instagramHelper.getBibliogramRedirectsChecks,
diff --git a/src/pages/options/medium/medium.js b/src/pages/options/medium/medium.js
index d9574e0d..cb69fecb 100644
--- a/src/pages/options/medium/medium.js
+++ b/src/pages/options/medium/medium.js
@@ -11,6 +11,7 @@ mediumHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'scribe',
+        'normal',
         mediumHelper,
         document,
         mediumHelper.getScribeRedirectsChecks,
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index dd14b8e2..e84f3a6e 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -37,6 +37,7 @@ redditHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'libreddit',
+        'normal',
         redditHelper,
         document,
         redditHelper.getLibredditRedirectsChecks,
@@ -47,6 +48,7 @@ redditHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'teddit',
+        'normal',
         redditHelper,
         document,
         redditHelper.getTedditRedirectsChecks,
diff --git a/src/pages/options/search/search.js b/src/pages/options/search/search.js
index 30128e96..d52c8600 100644
--- a/src/pages/options/search/search.js
+++ b/src/pages/options/search/search.js
@@ -38,6 +38,7 @@ searchHelper.init().then(() => {
 
   commonHelper.processDefaultCustomInstances(
     'searx',
+    'normal',
     searchHelper,
     document,
     searchHelper.getSearxRedirectsChecks,
@@ -48,6 +49,7 @@ searchHelper.init().then(() => {
 
   commonHelper.processDefaultCustomInstances(
     'whoogle',
+    'normal',
     searchHelper,
     document,
     searchHelper.getWhoogleRedirectsChecks,
diff --git a/src/pages/options/tiktok/tiktok.js b/src/pages/options/tiktok/tiktok.js
index f6153e51..34db3dd9 100644
--- a/src/pages/options/tiktok/tiktok.js
+++ b/src/pages/options/tiktok/tiktok.js
@@ -11,6 +11,7 @@ tiktokHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'proxiTok',
+        'normal',
         tiktokHelper,
         document,
         tiktokHelper.getProxiTokRedirectsChecks,
diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js
index 4db80072..ad9e52a5 100644
--- a/src/pages/options/translate/translate.js
+++ b/src/pages/options/translate/translate.js
@@ -58,6 +58,7 @@ translateHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'simplyTranslate',
+        'normal',
         translateHelper,
         document,
         translateHelper.getSimplyTranslateRedirectsChecks,
@@ -68,6 +69,7 @@ translateHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'lingva',
+        'normal',
         translateHelper,
         document,
         translateHelper.getLingvaRedirectsChecks,
diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html
index 948f0be1..40f79407 100644
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@@ -115,29 +115,65 @@
             <input id="disable-nitter" type="checkbox" checked />
         </div>
 
-        <hr>
-
         <div class="some-block option-block">
-            <h4>Default Instances</h4>
+            <h4>Protocol</h4>
+            <select id="protocol">
+                <option value="normal">Normal</option>
+                <option value="tor">Tor</option>
+            </select>
         </div>
-        <div class="checklist" id="nitter-checklist"></div>
+
         <hr>
-        <div class="some-block option-block">
-            <h4>Custom Instances</h4>
+
+        <div id="normal">
+
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="nitter-normal-checklist"></div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-nitter-normal-instance-form">
+                <div class="some-block option-block">
+                    <input id="nitter-normal-custom-instance" placeholder="https://nitter.com" type="url" />
+                    <button type="submit" class="add" id="nitter-normal-add-instance">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                            fill="currentColor">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+            <div class="checklist" id="nitter-normal-custom-checklist"></div>
+
         </div>
-        <form id="custom-nitter-instance-form">
+
+        <div id="tor">
             <div class="some-block option-block">
-                <input id="nitter-custom-instance" placeholder="https://nitter.com" type="url" />
-                <button type="submit" class="add" id="nitter-add-instance">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                        fill="currentColor">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                    </svg>
-                </button>
+                <h4>Default Tor Instances</h4>
             </div>
-        </form>
-        <div class="checklist" id="nitter-custom-checklist"></div>
+            <div class="checklist" id="nitter-tor-checklist"></div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-nitter-tor-instance-form">
+                <div class="some-block option-block">
+                    <input id="nitter-tor-custom-instance" placeholder="https://nitter.com" type="url" />
+                    <button type="submit" class="add" id="nitter-tor-add-instance">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                            fill="currentColor">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+            <div class="checklist" id="nitter-tor-custom-checklist"></div>
+        </div>
 
     </section>
 
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 759ad573..88fadb7b 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -6,16 +6,54 @@ disableTwitterElement.addEventListener("change",
     (event) => twitterHelper.setDisable(!event.target.checked)
 );
 
+let protocolElement = document.getElementById("protocol")
+protocolElement.addEventListener("change",
+    (event) => {
+        let protocol = event.target.options[protocolElement.selectedIndex].value
+        twitterHelper.setProtocol(protocol);
+        changeProtocolSettings(protocol);
+    }
+);
+
+
+function changeProtocolSettings(protocol) {
+    let normalDiv = document.getElementById("normal");
+    let torDiv = document.getElementById("tor");
+    if (protocol == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
+
 twitterHelper.init().then(() => {
-    disableTwitterElement.checked = !twitterHelper.getDisable(); 
+    disableTwitterElement.checked = !twitterHelper.getDisable();
+
+    let protocol = twitterHelper.getprotocol();
+    protocolElement.value = protocol;
+    changeProtocolSettings(protocol);
 
     commonHelper.processDefaultCustomInstances(
         'nitter',
+        'normal',
+        twitterHelper,
+        document,
+        twitterHelper.getNitterNormalRedirectsChecks,
+        twitterHelper.setNitterNormalRedirectsChecks,
+        twitterHelper.getNitterNormalCustomRedirects,
+        twitterHelper.setNitterNormalCustomRedirects
+    )
+    commonHelper.processDefaultCustomInstances(
+        'nitter',
+        'tor',
         twitterHelper,
         document,
-        twitterHelper.getNitterRedirectsChecks,
-        twitterHelper.setNitterRedirectsChecks,
-        twitterHelper.getNitterCustomRedirects,
-        twitterHelper.setNitterCustomRedirects
+        twitterHelper.getNitterTorRedirectsChecks,
+        twitterHelper.setNitterTorRedirectsChecks,
+        twitterHelper.getNitterTorCustomRedirects,
+        twitterHelper.setNitterTorCustomRedirects
     )
 });
\ No newline at end of file
diff --git a/src/pages/options/wikipedia/wikipedia.js b/src/pages/options/wikipedia/wikipedia.js
index 5abaed6f..161f0af4 100644
--- a/src/pages/options/wikipedia/wikipedia.js
+++ b/src/pages/options/wikipedia/wikipedia.js
@@ -10,6 +10,7 @@ wikipediaHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'wikiless',
+        'normal',
         wikipediaHelper,
         document,
         wikipediaHelper.getWikilessRedirectsChecks,
diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index 70b25428..17cbda37 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/src/pages/options/youtube/invidious.js
@@ -26,6 +26,7 @@ persistInvidiousPrefsElement.addEventListener("change",
     (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked)
 );
 
+
 youtubeHelper.init().then(() => {
     invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
     invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
@@ -35,12 +36,24 @@ youtubeHelper.init().then(() => {
 
     commonHelper.processDefaultCustomInstances(
         'invidious',
+        'normal',
+        youtubeHelper,
+        document,
+        youtubeHelper.getInvidiousNormalRedirectsChecks,
+        youtubeHelper.setInvidiousNormalRedirectsChecks,
+        youtubeHelper.getInvidiousNormalCustomRedirects,
+        youtubeHelper.setInvidiousNormalCustomRedirects
+    );
+
+    commonHelper.processDefaultCustomInstances(
+        'invidious',
+        'tor',
         youtubeHelper,
         document,
-        youtubeHelper.getInvidiousRedirectsChecks,
-        youtubeHelper.setInvidiousRedirectsChecks,
-        youtubeHelper.getInvidiousCustomRedirects,
-        youtubeHelper.setInvidiousCustomRedirects
-    )
+        youtubeHelper.getInvidiousTorRedirectsChecks,
+        youtubeHelper.setInvidiousTorRedirectsChecks,
+        youtubeHelper.getInvidiousTorCustomRedirects,
+        youtubeHelper.setInvidiousTorCustomRedirects
+    );
 });
 
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index ed425237..6c541a8d 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -4,13 +4,24 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 youtubeHelper.init().then(() => {
     commonHelper.processDefaultCustomInstances(
         'piped',
+        'normal',
         youtubeHelper,
         document,
-        youtubeHelper.getPipedRedirectsChecks,
-        youtubeHelper.setPipedRedirectsChecks,
-        youtubeHelper.getPipedCustomRedirects,
-        youtubeHelper.setPipedCustomRedirects
-    )
+        youtubeHelper.getPipedNormalRedirectsChecks,
+        youtubeHelper.setPipedNormalRedirectsChecks,
+        youtubeHelper.getPipedNormalCustomRedirects,
+        youtubeHelper.setPipedNormalCustomRedirects
+    );
+    commonHelper.processDefaultCustomInstances(
+        'piped',
+        'tor',
+        youtubeHelper,
+        document,
+        youtubeHelper.getPipedTorRedirectsChecks,
+        youtubeHelper.setPipedTorRedirectsChecks,
+        youtubeHelper.getPipedTorCustomRedirects,
+        youtubeHelper.setPipedTorCustomRedirects
+    );
 });
 
 
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 2d8c75e9..cc5cf05a 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -138,6 +138,15 @@
     </div>
 
     <div id="invidious-piped">
+
+      <div class="some-block option-block">
+        <h4>Protocol</h4>
+        <select id="protocol">
+          <option value="normal">Normal</option>
+          <option value="tor">Tor</option>
+        </select>
+      </div>
+
       <div class="some-block option-block">
         <h4>Redirect Type</h4>
         <select id="only-embed">
@@ -225,54 +234,111 @@
 
       <hr>
 
-      <div class="some-block option-block">
-        <h4>Default Instances</h4>
-      </div>
-      <div class="checklist" id="invidious-checklist">
-      </div>
-      <hr>
-      <div class="some-block option-block">
-        <h4>Custom Instances</h4>
+
+      <div id="invidious-normal">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="invidious-normal-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-invidious-normal-instance-form">
+          <div class="some-block option-block">
+            <input id="invidious-normal-custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" id="invidious-normal-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="invidious-normal-custom-checklist"></div>
       </div>
-      <form id="custom-invidious-instance-form">
+
+      <div id="invidious-tor">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="invidious-tor-checklist">
+        </div>
+        <hr>
         <div class="some-block option-block">
-          <input id="invidious-custom-instance" placeholder="https://invidious.com" type="url" />
-          <button type="submit" class="add" id="invidious-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4>Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="invidious-custom-checklist"></div>
+        <form id="custom-invidious-tor-instance-form">
+          <div class="some-block option-block">
+            <input id="invidious-tor-custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" id="invidious-tor-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="invidious-tor-custom-checklist"></div>
+      </div>
 
     </div>
 
     <div id="piped">
       <hr>
 
-      <div class="some-block option-block">
-        <h4>Default Instances</h4>
-      </div>
-      <div class="checklist" id="piped-checklist">
-      </div>
-      <hr>
-      <div class="some-block option-block">
-        <h4>Custom Instances</h4>
+      <div id="piped-normal">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="piped-normal-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-piped-normal-instance-form">
+          <div class="some-block option-block">
+            <input id="piped-normal-custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" id="piped-normal-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="piped-normal-custom-checklist"></div>
       </div>
-      <form id="custom-piped-instance-form">
+
+      <div id="piped-tor">
         <div class="some-block option-block">
-          <input id="piped-custom-instance" placeholder="https://piped.com" type="url" />
-          <button type="submit" class="add" id="piped-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4>Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="piped-custom-checklist"></div>
+        <div class="checklist" id="piped-tor-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-piped-tor-instance-form">
+          <div class="some-block option-block">
+            <input id="piped-tor-custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" id="piped-tor-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="piped-tor-custom-checklist"></div>
+      </div>
     </div>
 
   </section>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 61d2ec53..d62bdad6 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -103,6 +103,35 @@ alwaysUsePreferredElement.addEventListener("change",
     (event) => youtubeHelper.setAlwaysusePreferred(event.target.checked)
 );
 
+let protocolElement = document.getElementById("protocol")
+protocolElement.addEventListener("change",
+    (event) => {
+        let protocol = event.target.options[protocolElement.selectedIndex].value
+        youtubeHelper.setProtocol(protocol);
+        changeProtocolSettings(protocol);
+    }
+);
+
+function changeProtocolSettings(protocol) {
+    let normalPipedDiv = document.getElementById("piped-normal");
+    let torPipedDiv = document.getElementById("piped-tor");
+
+    let normalInvidiousDiv = document.getElementById("invidious-normal");
+    let torInvidiousDiv = document.getElementById("invidious-tor");
+    if (protocol == 'normal') {
+        normalPipedDiv.style.display = 'block';
+        normalInvidiousDiv.style.display = 'block';
+        torInvidiousDiv.style.display = 'none';
+        torPipedDiv.style.display = 'none';
+    }
+    else if (protocol == 'tor') {
+        normalPipedDiv.style.display = 'none';
+        normalInvidiousDiv.style.display = 'none';
+        torInvidiousDiv.style.display = 'block';
+        torPipedDiv.style.display = 'block';
+    }
+}
+
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
     themeElement.checked = youtubeHelper.getTheme();
@@ -115,6 +144,10 @@ youtubeHelper.init().then(() => {
     youtubeFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
 
+    let protocol = youtubeHelper.getprotocol();
+    protocolElement.value = protocol;
+    changeProtocolSettings(protocol);
+
     let freetubeFrontend = youtubeHelper.getFreetubeFrontend()
     freetubeFrontendElement.value = freetubeFrontend
     if (frontend == "freetube") changeFreetubeFrontendsSettings(freetubeFrontend);
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html
index f42a0889..8cf52e32 100644
--- a/src/pages/popup/popup.html
+++ b/src/pages/popup/popup.html
@@ -141,35 +141,18 @@
       </svg>
       <h4>Medium</h4>
     </div>
-
     <input id="disable-medium" type="checkbox" checked />
   </div>
 
   <div class="buttons">
     <a class="button" id="more-options">
-      <span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
-      <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
-        <path d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48" style="
-            fill: none;
-            stroke: inherit;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 32px;
-          " />
-        <polyline points="336 64 448 64 448 176" style="
-            fill: none;
-            stroke: inherit;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 32px;
-          " />
-        <line x1="224" y1="288" x2="440" y2="72" style="
-            fill: none;
-            stroke: inherit;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 32px;
-          " />
+      <span>Settings&nbsp;</span>
+      <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
+        width="24px" fill="currentColor">
+        <g>
+          <path
+            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
+        </g>
       </svg>
     </a>
   </div>
diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css
index 05c3947a..f223ec52 100644
--- a/src/pages/popup/style.css
+++ b/src/pages/popup/style.css
@@ -1,5 +1,4 @@
 body {
     width: 230px;
     min-height: auto;
-    background-color: var(--bg-main);
 }
\ No newline at end of file