feat: Added light mode to GH profile buttons (#40)

* chore: Added _blank, noopener to social links * feat: Added light mode to GH profile page buttons * chore: Updated opacity and text color of invite modal of light mode * feat: Toggle light mode based on GH preferences
open-sauced · Apr 28, 2023 · a7ea43a · a7ea43a
1 parent caa4324
commit a7ea43a
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 20 deletions.
diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts
@@ -5,7 +5,7 @@ import { createHtmlElement } from "../../../utils/createHtmlElement";
 export const InviteToOpenSaucedButton = () => {
   const inviteToOpenSaucedButton = createHtmlElement("a", {
     className:
-      "inline-block mt-4 text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border border-solid cursor-pointer bg-gh-gray hover:bg-red-500 hover:shadow-button hover:no-underline",
+      "inline-block mt-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",
     innerHTML: `<img
           class="mx-2 inline-block align-top"
           src="${chrome.runtime.getURL(logoIcon)}"

diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts
@@ -34,6 +34,8 @@ export const InviteToOpenSaucedModal = (
   const emailIcon = emailBody
     ? createHtmlElement("a", {
         href: emailHref,
+        target: "_blank",
+        rel: "noopener noreferrer",
         innerHTML: `<img src=${chrome.runtime.getURL(
           emailSocialIcon
         )} alt="Email">`,
@@ -42,6 +44,8 @@ export const InviteToOpenSaucedModal = (
   const twitterIcon = tweetHref
     ? createHtmlElement("a", {
         href: tweetHref,
+        target: "_blank",
+        rel: "noopener noreferrer",
         innerHTML: `<img src=${chrome.runtime.getURL(
           twitterSocialIcon
         )} alt="Twitter">`,
@@ -50,6 +54,8 @@ export const InviteToOpenSaucedModal = (
   const linkedInIcon = linkedinHref
     ? createHtmlElement("a", {
         href: linkedinHref,
+        target: "_blank",
+        rel: "noopener noreferrer",
         innerHTML: `<img src=${chrome.runtime.getURL(
           linkedInSocailIcon
         )} alt="LinkedIn">`,
@@ -62,7 +68,7 @@ export const InviteToOpenSaucedModal = (
 
   const inviteToOpenSaucedModal = createHtmlElement("div", {
     className:
-      "fixed h-full w-full z-50 bg-gray-600 bg-opacity-50 overflow-y-auto inset-0",
+      "fixed h-full w-full z-50 bg-gray-600 bg-opacity-80 dark:bg-opacity-50 overflow-y-auto inset-0",
     style: { display: "none" },
     id: "invite-modal",
   });
@@ -71,9 +77,9 @@ export const InviteToOpenSaucedModal = (
     className:
       "mt-2 min-w-[33%] relative top-60 mx-auto p-4 border w-96 rounded-md shadow-button border-solid border-orange bg-slate-800",
     innerHTML: `
-    <h3 class="text-2xl leading-6 font-bold">Invite ${username} to <a href="https://insights.opensauced.pizza/start"><span class="hover:text-orange hover:underline">OpenSauced!</span></a></h3>
+    <h3 class="text-2xl leading-6 font-bold text-white">Invite ${username} to <a href="https://insights.opensauced.pizza/start"><span class="hover:text-orange hover:underline">OpenSauced!</span></a></h3>
     <div class="mt-2">
-       <p class="text-md">
+       <p class="text-md text-white">
           Use the links below to invite them.
        </p>
     </div>

diff --git a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts
@@ -6,7 +6,7 @@ export const ViewOnOpenSaucedButton = (username: string) => {
   const viewOnOpenSaucedButton = createHtmlElement("a", {
     href: `https://insights.opensauced.pizza/user/${username}/contributions`,
     className:
-      "inline-block mt-4 text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border border-solid cursor-pointer border-orange hover:shadow-button hover:no-underline",
+      "inline-block mt-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",
     target: "_blank",
     rel: "noopener noreferrer",
     innerHTML: `

diff --git a/src/content-scripts/profileScreen.ts b/src/content-scripts/profileScreen.ts
@@ -2,14 +2,16 @@ import { getGithubUsername } from "../utils/urlMatchers";
 import { isOpenSaucedUser } from "../utils/fetchOpenSaucedApiData";
 import injectViewOnOpenSauced from "../utils/dom-utils/viewOnOpenSauced";
 import injectInviteToOpenSauced from "../utils/dom-utils/inviteToOpenSauced";
+import { getGHColorScheme } from "../utils/colorPreference";
 
 const processProfilePage = async () => {
-const username = getGithubUsername(window.location.href);
-if (username != null) {
-  const user = await isOpenSaucedUser(username);
-  if (user) injectViewOnOpenSauced(username);
-  else injectInviteToOpenSauced(username);
-}
+  const username = getGithubUsername(window.location.href);
+  if (username != null) {
+    const colorScheme = getGHColorScheme(document.cookie);
+    const user = await isOpenSaucedUser(username);
+    if (user) injectViewOnOpenSauced(username, colorScheme);
+    else injectInviteToOpenSauced(username, colorScheme);
+  }
 };
 
 chrome.runtime.onMessage.addListener((request) => {
@@ -18,4 +20,4 @@ chrome.runtime.onMessage.addListener((request) => {
   }
 });
 
-processProfilePage();
+processProfilePage();
diff --git a/src/utils/colorPreference.ts b/src/utils/colorPreference.ts
@@ -0,0 +1,15 @@
+export type ColorScheme = "auto" | "light" | "dark";
+
+export const getGHColorScheme = (cookieString: string) => {
+  const regex = /(?<=\bcolor_mode=)[^;]+/g;
+  const match = regex.exec(cookieString);
+  const cookie = match && JSON.parse(decodeURIComponent(match[0]));
+  return (cookie.color_mode as ColorScheme) || "auto";
+};
+
+export const prefersDarkMode = (colorScheme: ColorScheme): boolean => {
+  if (colorScheme === "auto") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return colorScheme === "dark";
+};
diff --git a/src/utils/dom-utils/inviteToOpenSauced.ts b/src/utils/dom-utils/inviteToOpenSauced.ts
@@ -2,8 +2,12 @@ import { GITHUB_PROFILE_MENU_SELECTOR } from "../../constants";
 import { InviteToOpenSaucedButton } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton";
 import { InviteToOpenSaucedModal } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal";
 import { getTwitterUsername, getLinkedInUsername } from "../urlMatchers";
+import { ColorScheme, prefersDarkMode } from "../colorPreference";
 
-const injectOpenSaucedInviteButton = (username: string) => {
+const injectOpenSaucedInviteButton = (
+  username: string,
+  colorScheme: ColorScheme
+) => {
   const emailAddress: string | undefined = (
     document.querySelector(`a[href^="mailto:"]`) as HTMLAnchorElement
   )?.href.substr(7);
@@ -18,14 +22,20 @@ const injectOpenSaucedInviteButton = (username: string) => {
   const twitterUsername = twitterUrl && getTwitterUsername(twitterUrl);
   const linkedInUsername = linkedInUrl && getLinkedInUsername(linkedInUrl);
   const inviteToOpenSaucedButton = InviteToOpenSaucedButton();
-  const inviteToOpenSaucedModal = InviteToOpenSaucedModal(username, {
-    emailAddress,
-    twitterUsername,
-    linkedInUsername,
-  }, inviteToOpenSaucedButton);
+  const inviteToOpenSaucedModal = InviteToOpenSaucedModal(
+    username,
+    {
+      emailAddress,
+      twitterUsername,
+      linkedInUsername,
+    },
+    inviteToOpenSaucedButton
+  );
 
+  const darkMode = prefersDarkMode(colorScheme);
   const userBio = document.querySelector(GITHUB_PROFILE_MENU_SELECTOR);
   if (!userBio || !userBio.parentNode) return;
+  if (darkMode) userBio.parentElement?.classList.add("dark");
   userBio.parentNode.replaceChild(inviteToOpenSaucedButton, userBio);
   document.body.appendChild(inviteToOpenSaucedModal);
 };

diff --git a/src/utils/dom-utils/viewOnOpenSauced.ts b/src/utils/dom-utils/viewOnOpenSauced.ts
@@ -1,13 +1,22 @@
-import { GITHUB_PROFILE_MENU_SELECTOR, GITHUB_PROFILE_EDIT_MENU_SELECTOR } from "../../constants";
+import {
+  GITHUB_PROFILE_MENU_SELECTOR,
+  GITHUB_PROFILE_EDIT_MENU_SELECTOR,
+} from "../../constants";
 import { ViewOnOpenSaucedButton } from "../../content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
+import { ColorScheme, prefersDarkMode } from "../colorPreference";
 
-const injectViewOnOpenSaucedButton = (username: string) => {
+const injectViewOnOpenSaucedButton = (
+  username: string,
+  colorScheme: ColorScheme
+) => {
   const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
 
+  const darkMode = prefersDarkMode(colorScheme);
   const userBio = document.querySelector(
     `${GITHUB_PROFILE_MENU_SELECTOR}, ${GITHUB_PROFILE_EDIT_MENU_SELECTOR}`
   );
   if (!userBio || !userBio.parentNode) return;
+  if (darkMode) userBio.parentElement?.classList.add("dark");
   userBio.parentNode.replaceChild(viewOnOpenSaucedButton, userBio);
 };
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,6 +13,7 @@ module.exports = {
       },
       backgroundColor: {
         "gh-gray": "#21262d",
+        "gh-white": "#f6f8fa"
       }
     },
   },
@@ -56,4 +57,5 @@ module.exports = {
     })
   ],
   important: true,
+  darkMode: "class"
 };