[patch] Add css reset (#63)

skip-mev · Jul 16, 2024 · 8250a67 · 8250a67
1 parent fd95dba
commit 8250a67
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 3 deletions.
diff --git a/.changeset/eight-mails-thank.md b/.changeset/eight-mails-thank.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+Add cssReset to widget
diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css
@@ -9,5 +9,13 @@ body {
 }
 
 input {
-  background-color: black;
+  background: black;
+}
+
+div,
+p,
+span {
+  color: gray;
+  border: 2px solid gray;
+  background: gray;
 }
diff --git a/packages/widget/src/styles/cssReset.css b/packages/widget/src/styles/cssReset.css
@@ -0,0 +1,27 @@
+/* Reset relevant styles within Shadow DOM */
+* {
+  font-family: unset;
+  font-style: unset;
+  font-weight: unset;
+  text-align: revert;
+  text-decoration: unset;
+  text-indent: unset;
+  text-transform: unset;
+  line-height: unset;
+  letter-spacing: unset;
+  white-space: unset;
+  box-sizing: border-box;
+  margin: unset;
+  padding: unset;
+  visibility: unset;
+  float: unset;
+  clear: unset;
+  background-color: unset;
+  word-spacing: unset;
+}
+
+div,
+p,
+span {
+  color: black;
+}
diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx
@@ -294,7 +294,10 @@ export const SwapWidgetUI = ({
                 }
               }}
             >
-              <div key={accountStateKey} className="animate-slide-up-and-fade">
+              <div
+                key={accountStateKey}
+                className="animate-slide-up-and-fade text-white"
+              >
                 {!srcAccount?.isWalletConnected && 'Connect Wallet'}
               </div>
             </button>

diff --git a/packages/widget/src/ui/index.tsx b/packages/widget/src/ui/index.tsx
@@ -7,6 +7,7 @@ import {
 import { SwapWidgetUI } from './Widget';
 import shadowDomStyles from '../styles/shadowDomStyles.css';
 import toastStyles from '../styles/toastStyles.css';
+import cssReset from '../styles/cssReset.css';
 import { Scope } from 'react-shadow-scope';
 import { useInjectFontsToDocumentHead } from '../hooks/use-inject-fonts-to-document-head';
 
@@ -42,7 +43,7 @@ export const SwapWidget: React.FC<SwapWidgetProps> = ({
 
   return (
     <Scope
-      stylesheets={[toastStyles, shadowDomStyles]}
+      stylesheets={[cssReset, toastStyles, shadowDomStyles]}
       config={{ dsd: 'emulated' }}
     >
       <SwapWidgetProvider {...swapWidgetProviderProps}>