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

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";

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: `

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;