fix: re-enable tailwind base class on extension popup (#31)

open-sauced · Apr 25, 2023 · c081217 · c081217
1 parent f4f8cf6
commit c081217
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 15 deletions.
diff --git a/src/index.css → src/content-scripts.css b/src/index.css → src/content-scripts.css
diff --git a/...eToOpenSauced/InviteToOpenSaucedButton.ts → ...eToOpenSauced/InviteToOpenSaucedButton.ts b/...eToOpenSauced/InviteToOpenSaucedButton.ts → ...eToOpenSauced/InviteToOpenSaucedButton.ts
@@ -1,6 +1,6 @@
-import logoIcon from "../../assets/opensauced-icon.svg";
-import "../../index.css";
-import { createHtmlElement } from "../../utils/createHtmlElement";
+import logoIcon from "../../../assets/opensauced-icon.svg";
+import "../../content-scripts.css";
+import { createHtmlElement } from "../../../utils/createHtmlElement";
 
 export const InviteToOpenSaucedButton = () => {
   const inviteToOpenSaucedButton = createHtmlElement("a", {

diff --git a/...teToOpenSauced/InviteToOpenSaucedModal.ts → ...teToOpenSauced/InviteToOpenSaucedModal.ts b/...teToOpenSauced/InviteToOpenSaucedModal.ts → ...teToOpenSauced/InviteToOpenSaucedModal.ts
@@ -1,8 +1,8 @@
-import "../../index.css";
-import { createHtmlElement } from "../../utils/createHtmlElement";
-import emailSocialIcon from "../../assets/mail-icon.svg";
-import twitterSocialIcon from "../../assets/twitter-icon.svg";
-import linkedInSocailIcon from "../../assets/linkedin-icon.svg";
+import "../../content-scripts.css";
+import { createHtmlElement } from "../../../utils/createHtmlElement";
+import emailSocialIcon from "../../../assets/mail-icon.svg";
+import twitterSocialIcon from "../../../assets/twitter-icon.svg";
+import linkedInSocailIcon from "../../../assets/linkedin-icon.svg";
 
 interface Socials {
   emailAddress?: string;

diff --git a/...penSaucedButton/ViewOnOpenSaucedButton.ts → ...penSaucedButton/ViewOnOpenSaucedButton.ts b/...penSaucedButton/ViewOnOpenSaucedButton.ts → ...penSaucedButton/ViewOnOpenSaucedButton.ts
@@ -1,6 +1,6 @@
-import logoIcon from "../../assets/opensauced-icon.svg";
-import "../../index.css";
-import { createHtmlElement } from "../../utils/createHtmlElement";
+import logoIcon from "../../../assets/opensauced-icon.svg";
+import "../../content-scripts.css";
+import { createHtmlElement } from "../../../utils/createHtmlElement";
 
 export const ViewOnOpenSaucedButton = (username: string) => {
   const viewOnOpenSaucedButton = createHtmlElement("a", {

diff --git a/src/content-scripts/content-scripts.css b/src/content-scripts/content-scripts.css
@@ -0,0 +1,27 @@
+/* 
+style for content-scripts
+not using tailwindcss base styles because it's interfering with the github page styles
+*/
+
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
+import './popup.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

diff --git a/src/popup.css b/src/popup.css
@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/src/utils/dom-utils/inviteToOpenSauced.ts b/src/utils/dom-utils/inviteToOpenSauced.ts
@@ -1,5 +1,5 @@
-import { InviteToOpenSaucedButton } from "../../components/InviteToOpenSauced/InviteToOpenSaucedButton";
-import { InviteToOpenSaucedModal } from "../../components/InviteToOpenSauced/InviteToOpenSaucedModal";
+import { InviteToOpenSaucedButton } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton";
+import { InviteToOpenSaucedModal } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal";
 import { getTwitterUsername, getLinkedInUsername } from "../urlMatchers";
 
 const injectOpenSaucedInviteButton = (username: string) => {

diff --git a/src/utils/dom-utils/viewOnOpenSauced.ts b/src/utils/dom-utils/viewOnOpenSauced.ts
@@ -1,4 +1,4 @@
-import { ViewOnOpenSaucedButton } from "../../components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
+import { ViewOnOpenSaucedButton } from "../../content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
 
 const injectViewOnOpenSaucedButton = (username: string) => {
   const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);