From 81cc251f1fc1150822a613e33223276ad6fa7911 Mon Sep 17 00:00:00 2001 From: Anush008 Date: Thu, 27 Apr 2023 18:26:08 +0530 Subject: [PATCH 1/4] chore: Added _blank, noopener to social links --- .../InviteToOpenSauced/InviteToOpenSaucedModal.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts index 455a2896..9898cd44 100644 --- 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: `Email`, @@ -42,6 +44,8 @@ export const InviteToOpenSaucedModal = ( const twitterIcon = tweetHref ? createHtmlElement("a", { href: tweetHref, + target: "_blank", + rel: "noopener noreferrer", innerHTML: `Twitter`, @@ -50,6 +54,8 @@ export const InviteToOpenSaucedModal = ( const linkedInIcon = linkedinHref ? createHtmlElement("a", { href: linkedinHref, + target: "_blank", + rel: "noopener noreferrer", innerHTML: `LinkedIn`, From 37e1c3a16461ba2eb021a4b9a051017343e0d29c Mon Sep 17 00:00:00 2001 From: Anush008 Date: Thu, 27 Apr 2023 18:27:05 +0530 Subject: [PATCH 2/4] feat: Added light mode to GH profile page buttons --- .../components/InviteToOpenSauced/InviteToOpenSaucedButton.ts | 2 +- .../components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts | 2 +- tailwind.config.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts index b1de7f14..60b8789f 100644 --- 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: ` { 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/tailwind.config.js b/tailwind.config.js index a51ba6cf..2fb97a5f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,6 +13,7 @@ module.exports = { }, backgroundColor: { "gh-gray": "#21262d", + "gh-white": "#f6f8fa" } }, }, From 6063bf18e67217348acb5fb5817a9b47db97d2ab Mon Sep 17 00:00:00 2001 From: Anush008 Date: Thu, 27 Apr 2023 18:36:15 +0530 Subject: [PATCH 3/4] chore: Updated opacity and text color of invite modal of light mode --- .../InviteToOpenSauced/InviteToOpenSaucedModal.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts index 9898cd44..a2bddbd1 100644 --- a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts +++ b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts @@ -68,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", }); @@ -77,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: ` -

Invite ${username} to OpenSauced!

+

Invite ${username} to OpenSauced!

-

+

Use the links below to invite them.

From c458773c7f31a6172eca8571b5d243b3e000a115 Mon Sep 17 00:00:00 2001 From: Anush008 Date: Fri, 28 Apr 2023 01:23:40 +0530 Subject: [PATCH 4/4] feat: Toggle light mode based on GH preferences --- src/content-scripts/profileScreen.ts | 16 +++++++++------- src/utils/colorPreference.ts | 15 +++++++++++++++ src/utils/dom-utils/inviteToOpenSauced.ts | 22 ++++++++++++++++------ src/utils/dom-utils/viewOnOpenSauced.ts | 13 +++++++++++-- tailwind.config.js | 1 + 5 files changed, 52 insertions(+), 15 deletions(-) create mode 100644 src/utils/colorPreference.ts diff --git a/src/content-scripts/profileScreen.ts b/src/content-scripts/profileScreen.ts index 495f2a15..2727fb2c 100644 --- 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(); \ No newline at end of file +processProfilePage(); diff --git a/src/utils/colorPreference.ts b/src/utils/colorPreference.ts new file mode 100644 index 00000000..b0737863 --- /dev/null +++ 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 index c5e16e63..0643b03b 100644 --- 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 index 186a87b2..857a9308 100644 --- 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 index 2fb97a5f..b177619b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -57,4 +57,5 @@ module.exports = { }) ], important: true, + darkMode: "class" };