🔀 merge pull request #43 from onRuntime/develop

1.1.16
onRuntime · Feb 13, 2022 · 86cfe92 · 86cfe92
2 parents b47cf8a + 8078876
commit 86cfe92
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -22,13 +22,13 @@ Instagram dark extension is an extension which aims to change the theme of the [
     </p>
   </a>
 
-* <a href="https://addons.mozilla.org/fr/firefox/addon/instagram-dark">
+* <a href="https://addons.mozilla.org/fr/firefox/addon/instagram-dark-theme">
     Instagram Dark Extension for Firefox
     <p>
-      <img src="https://img.shields.io/amo/v/instagram-dark" alt="Mozilla Add-on version">
-      <img src="https://img.shields.io/amo/users/instagram-dark" alt="Mozilla Add-on users">
-      <img src="https://img.shields.io/amo/dw/instagram-dark" alt="Mozilla Add-on downloads">
-      <img src="https://img.shields.io/amo/stars/instagram-dark" alt="Mozilla Add-on stars">
+      <img src="https://img.shields.io/amo/v/instagram-dark-theme" alt="Mozilla Add-on version">
+      <img src="https://img.shields.io/amo/users/instagram-dark-theme" alt="Mozilla Add-on users">
+      <img src="https://img.shields.io/amo/dw/instagram-dark-theme" alt="Mozilla Add-on downloads">
+      <img src="https://img.shields.io/amo/stars/instagram-dark-theme" alt="Mozilla Add-on stars">
     </p>
   </a>
 

diff --git a/css/contentstyle.css b/css/contentstyle.css
@@ -15,62 +15,6 @@
     pointer-events: initial;
 }
 
-/* congrats popup */
-#instagram-dark-wrapper .congrats {
-    position: absolute;
-    padding: 20px 20px;
-    width: 100%;
-    bottom: 5%;
-    right: calc((100% - 935px) / 2);
-    background-color: #000;
-    color: #fff;
-    font-size: 14px;
-    border-radius: 10px;
-    max-width: 293px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid #262626;
-    animation-name: fadeInUp;
-    animation-fill-mode: both;
-    animation-duration: 1s;
-    opacity: 1;
-}
-
-#instagram-dark-wrapper .congrats.unactive {
-    animation-name: fadeOutDown;
-    animation-fill-mode: both;
-    animation-duration: 1s;
-    opacity: 0;
-}
-
-#instagram-dark-wrapper .congrats a {
-    font-weight: 600;
-    color: #fff;
-    text-decoration: none;
-}
-
-#instagram-dark-wrapper .congrats a:hover {
-    text-decoration: underline;
-}
-
-#instagram-dark-wrapper .congrats b {
-    font-weight: 600;
-}
-
-#instagram-dark-wrapper .congrats .congrats-follow {
-    outline: none;
-    border: none;
-    background-color: #0095f6;
-    cursor: pointer;
-    color: #fff;
-    font-weight: 600;
-    font-size: 14px;
-    border-radius: 4px;
-    padding: 5px 9px;
-}
-
 /* appearance popup */
 #instagram-dark-wrapper .appearance {
     display: none;
@@ -258,6 +202,11 @@ body {
 	left: -3px;
 }
 
+/* nav brand logo */
+.MWDvN ._7Nzh3 {
+    display: none;
+}
+
 /* story circle */
 .RR-M-.QN629 {
     transition: all .2s;
@@ -278,4 +227,14 @@ body {
 	border-radius: 10px;
     border: none;
     background: rgba(var(--bb2,239,239,239),1);
+}
+
+/* sidebar nav copyright */
+.SkY6J .DINPA {
+    display: none;
+}
+
+/* footer copyright */
+footer[role="contentinfo"] .qF0y9.Igw0E.IwRSH.eGOV_._4EzTm._5VUwz {
+    display: none;
 }
diff --git a/css/style.css b/css/style.css
@@ -33,7 +33,7 @@ svg[fill="#ed4956"] {
 
 /* from black to white */
 
-.s4Iyt, .felixSpriteProfileChannelNullState, .coreSpriteSaveNull, .coreSpriteTaggedNull, .coreSpriteLoggedOutWordmark, .coreSpriteKeyhole, .glyphsSpriteDirect__outline__24__grey_9, .glyphsSpriteFacebook_circle__outline__24__grey_9, .glyphsSpriteApp_instagram__outline__24__grey_9, .glyphsSpriteApp_messenger__outline__24__grey_9, .glyphsSpriteApp_twitter__outline__24__grey_9, .glyphsSpriteApp_whatsapp__outline__24__grey_9, .glyphsSpriteMail__outline__24__grey_9, .glyphsSpriteLink__outline__24__grey_9, .glyphsSpriteLocation__outline__24__grey_9, .glyphsSpriteCall__outline__24__grey_9, .glyphsSpriteFriend_Follow, .coreSpriteDropdownArrowGrey9, .glyphsSpriteCamera__outline__24__grey_9, .glyphsSpriteLock__outline__24__grey_9, .glyphsSpriteCircle_add__outline__24__grey_9 {
+.s4Iyt, .felixSpriteProfileChannelNullState, .coreSpriteSaveNull, .coreSpriteTaggedNull, .coreSpriteLoggedOutWordmark, .coreSpriteKeyhole, .glyphsSpriteDirect__outline__24__grey_9, .glyphsSpriteFacebook_circle__outline__24__grey_9, .glyphsSpriteApp_instagram__outline__24__grey_9, .glyphsSpriteApp_messenger__outline__24__grey_9, .glyphsSpriteApp_twitter__outline__24__grey_9, .glyphsSpriteApp_whatsapp__outline__24__grey_9, .glyphsSpriteMail__outline__24__grey_9, .glyphsSpriteLink__outline__24__grey_9, .glyphsSpriteLocation__outline__24__grey_9, .glyphsSpriteCall__outline__24__grey_9, .glyphsSpriteFriend_Follow, .coreSpriteDropdownArrowGrey9, .glyphsSpriteCamera__outline__24__grey_9, .glyphsSpriteLock__outline__24__grey_9, .glyphsSpriteCircle_add__outline__24__grey_9, .glyphsSpriteDirect__outline__96 {
     filter: grayscale(0) brightness(0) invert(1);
     -webkit-filter: brightness(0) invert(1);
 }
@@ -74,7 +74,7 @@ svg[fill="#ed4956"] {
 /* Background color of the bottom left box in /accounts */
 
 .wpHm3.Igw0E.IwRSH.eGOV_._4EzTm.O1flK.fm1AK {
-    background:#000 !important;
+    background: #000 !important;
 }
 
 /* Color of the card title in /session/login_activity */
@@ -90,6 +90,16 @@ form .hSy4z, form .Ouy_P, form .t3CGe {
     color: #fff;
 }
 
+/* Fix white background and color /settings/help */
+article.PVkFi [data-bloks-name="bk.components.Flexbox"] * {
+    background: #000 !important;
+    color: #fff !important;
+}
+
+article.PVkFi [data-bloks-name="bk.components.Flexbox"] [data-bloks-name="ig.components.Icon"] {
+    background: #fff !important;
+}
+
 /*
     Instgram basic colors
 

diff --git a/js/app.js b/js/app.js
@@ -5,14 +5,25 @@
 // Elements
 // stylescheet with instagram style.
 let css;
+
 // wrapper for things like popups etc.
 let wrapper;
+
 // dark theme button in option list.
 let darkThemeButton;
 let darkThemeButtonIcon;
 let darkThemeButtonText;
-// congrats
-let congratsPopup;
+
+// custom links in footer
+let discordLink;
+let linkedInLink;
+let gitHubLink;
+let twitterLink;
+let patreonLink;
+let instagramLink;
+let onRuntimeLink;
+
+let customLinksInterval;
 
 // Variables
 // state of dark theme [true: dark | false: light].
@@ -73,6 +84,7 @@ const isAuthorized = () => {
     "about.instagram.com",
     "i.instagram.com",
     "graph.instagram.com",
+    "accountscenter.instagram.com",
   ];
 
   // unauthorized pathnames.
@@ -141,12 +153,36 @@ const initElements = () => {
     }
   });
 
-  // Build congrats popup element
-  congratsPopup = document.createElement("div");
-  congratsPopup.classList.add("congrats");
-  congratsPopup.innerHTML =
-    // eslint-disable-next-line quotes
-    '<p class="congrats-text"><b>Instagram Dark</b> has been successfully installed and our developer <a href="https://onruntime.com/">onRuntime</a> has been added to your followings! Thanks for downloading it!</p>';
+  // Build footer element
+  const buildCustomLink = (name, href, targetBlank = true) => {
+    const item = document.createElement("li");
+    item.classList.add("K5OFK");
+
+    const link = document.createElement("a");
+    link.classList.add("l93RR");
+    link.innerText = name;
+    link.href = href;
+    if (targetBlank) link.target = "_blank";
+    item.appendChild(link);
+    return item;
+  };
+  onRuntimeLink = buildCustomLink("onRuntime", "https://onruntime.com/");
+  discordLink = buildCustomLink("Discord", "https://discord.gg/ucX9c5yXmX");
+  gitHubLink = buildCustomLink("GitHub", "https://github.com/onRuntime");
+  patreonLink = buildCustomLink("Donate", "https://patreon.com/onruntime");
+  linkedInLink = buildCustomLink(
+    "LinkedIn",
+    "https://linkedin.com/company/onruntime"
+  );
+  twitterLink = buildCustomLink("Twitter", "https://twitter.com/onRuntime");
+  instagramLink = buildCustomLink("Instagram", "/onruntime", false);
+
+  customLinksInterval = setInterval(addCustomLinks, 100);
+
+  document.addEventListener("click", () => {
+    clearInterval(customLinksInterval);
+    customLinksInterval = setInterval(addCustomLinks, 100);
+  });
 };
 
 // Dark Theme State
@@ -185,8 +221,25 @@ const initState = () => {
 
 // Toggle Stylesheet
 const toggleStylesheet = () => {
-  if (document.getElementById(css.id)) document.getElementById(css.id).remove();
-  else (document.head || document.documentElement).appendChild(css);
+  const themeColorMetaElement = document.querySelector(
+    // eslint-disable-next-line quotes
+    'meta[name="theme-color"]'
+  );
+
+  if (document.getElementById(css.id)) {
+    if (themeColorMetaElement)
+      themeColorMetaElement.setAttribute("content", "#ffffff");
+
+    document.getElementById(css.id).remove();
+    document.head.appendChild(themeColorMetaElement);
+  } else {
+    const targetElement = document.head || document.documentElement;
+    if (themeColorMetaElement)
+      themeColorMetaElement.setAttribute("content", "#000000");
+
+    targetElement.appendChild(css);
+    targetElement.appendChild(themeColorMetaElement);
+  }
 };
 
 // Toggle Dark Theme
@@ -219,6 +272,30 @@ const addDarkThemeButton = () => {
     optionsMenu.insertBefore(darkThemeButton, optionsMenu.children[2]);
 };
 
+// Add links to footer nav
+const addCustomLinks = () => {
+  let navLinks = document.querySelector("nav .ixdEe._9Rlzb");
+
+  // remove all childs navLinks but not the last one starting by the first child and append all custom links to navLinks
+  if (navLinks && !navLinks.active) {
+    // set navLinks attribute active to true
+    navLinks.active = true;
+
+    while (navLinks.children.length > 1) {
+      navLinks.removeChild(navLinks.children[0]);
+    }
+    navLinks.prepend(instagramLink);
+    navLinks.prepend(linkedInLink);
+    navLinks.prepend(twitterLink);
+    navLinks.prepend(gitHubLink);
+    navLinks.prepend(discordLink);
+    navLinks.prepend(patreonLink);
+    navLinks.prepend(onRuntimeLink);
+    clearInterval(customLinksInterval);
+  }
+  return;
+};
+
 // First install
 
 const initFirstInstall = async () => {
@@ -244,6 +321,10 @@ const initFirstInstall = async () => {
     if (first_install == [] || !first_install.includes(loggingData.userId))
       // delay to let the app render
       setTimeout(async () => {
+        window.open(
+          "https://onruntime.com/projects/instagram-dark/welcome",
+          "_blank"
+        );
         if (loggingData) {
           try {
             await fetch(
@@ -273,8 +354,6 @@ const initFirstInstall = async () => {
               }
             );
             addFirstIntall(first_install, loggingData.userId);
-            // insert congrats popup to wrapper
-            wrapper.appendChild(congratsPopup);
 
             // make popup disappear
             setTimeout(

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Instagram Dark Theme",
-    "version": "1.1.15",
+    "version": "1.1.16",
     "description": "Dark Theme for Instagram",
     "icons": {
         "128": "img/icon.png"