fix: view on open sauced (#278)

* fix: margin reduced to two * fix: add your own profile edge case * fix: adjust the margin to bottom only * fix: show the button on top of GitHub CTAs * chore: update the constants file * chore: renaming and removing extra code * chore: lint
open-sauced · Nov 5, 2023 · eb56300 · eb56300
1 parent 6689393
commit eb56300
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -31,8 +31,6 @@ export const OPEN_SAUCED_EMOJIS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/emojis`;
 // Content-scripts selectors
 export const GITHUB_PROFILE_MENU_SELECTOR = ".p-nickname.vcard-username.d-block";
 export const GITHUB_PROFILE_EDIT_MENU_SELECTOR = "button.js-profile-editable-edit-button";
-export const GITHUB_PROFILE_USER_PROFILE_BIO_SELECTOR = ".p-note.user-profile-bio.mb-3.js-user-profile-bio.f4";
-export const GITHUB_PROFILE_USER_PROFILE_EDITABLE_AREA_SELECTOR = "js-profile-editable-area d-flex flex-column d-md-block";
 export const GITHUB_PR_COMMENT_HEADER_SELECTOR = "timeline-comment-header clearfix d-flex";
 export const GITHUB_NEW_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-none d-md-inline-block mr-md-0 mr-3";
 export const GITHUB_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-inline-block mr-3";

diff --git a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts
@@ -7,8 +7,7 @@ export const ViewOnOpenSaucedButton = (username: string) => {
     const viewOnOpenSaucedButton = createHtmlElement("a", {
         id: "view-on-opensauced-button",
         href: `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${username}/contributions`,
-        className:
-      "inline-block my-4 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
+        className: "inline-block mb-2 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
         target: "_blank",
         rel: "noopener noreferrer",
         innerHTML: `

diff --git a/src/utils/dom-utils/viewOnOpenSauced.ts b/src/utils/dom-utils/viewOnOpenSauced.ts
@@ -1,4 +1,3 @@
-import { GITHUB_PROFILE_USER_PROFILE_EDITABLE_AREA_SELECTOR } from "../../constants";
 import { ViewOnOpenSaucedButton } from "../../content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
 
 const injectViewOnOpenSaucedButton = (username: string) => {
@@ -8,12 +7,16 @@ const injectViewOnOpenSaucedButton = (username: string) => {
 
     const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
 
-    const userEditableArea = document.getElementsByClassName(
-        GITHUB_PROFILE_USER_PROFILE_EDITABLE_AREA_SELECTOR,
-    );
-    const editableAreaElement = userEditableArea[0];
+    const editProfileButtonSelector = ".btn-block.js-profile-editable-edit-button";
+    const editProfileButton = document.querySelector(editProfileButtonSelector);
 
-    editableAreaElement.parentNode?.insertBefore(viewOnOpenSaucedButton, editableAreaElement);
+    if (editProfileButton) {
+        editProfileButton.parentNode?.insertBefore(viewOnOpenSaucedButton, editProfileButton);
+    } else {
+        const callToActionButtonsArea = document.querySelector(".js-user-profile-follow-button")?.closest(".flex-order-1.flex-md-order-none");
+
+        callToActionButtonsArea?.insertBefore(viewOnOpenSaucedButton, callToActionButtonsArea.firstChild);
+    }
 };
 
 export default injectViewOnOpenSaucedButton;