fix: global style in purchase overview widget

bosonprotocol · Apr 17, 2024 · 1180d41 · 1180d41
1 parent 35ba87d
commit 1180d41
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 28 deletions.
diff --git a/src/components/widgets/commitButton/CommitButton.tsx b/src/components/widgets/commitButton/CommitButton.tsx
@@ -3,31 +3,14 @@
 
 import { CommitButtonView } from "@bosonprotocol/react-kit";
 import { ElementRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { createGlobalStyle } from "styled-components";
 import * as yup from "yup";
+
+import { GlobalStyle } from "../styles";
 export const commitButtonPath = "/commit-button";
 
 declare const CommitWidgetModal: (props: Record<string, unknown>) => any;
 declare const PurchaseOverviewModal: (props: Record<string, unknown>) => any;
 
-const GlobalStyle = createGlobalStyle`
- html, body, #root {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
-
- font-family: "Plus Jakarta Sans", sans-serif;
-
- margin: 0;
- padding: 0;
- font-style: normal;
-
- height: unset;
- }
- #root{
- display: flex;
- }
-`;
 const emptyObject = {};
 const yupStringOrNumber = yup
  .mixed<string | number>()

diff --git a/src/components/widgets/purchaseOverview/PurchaseOverview.tsx b/src/components/widgets/purchaseOverview/PurchaseOverview.tsx
@@ -4,6 +4,8 @@
 import { PurchaseOverview as PurchaseOverviewReactKit } from "@bosonprotocol/react-kit";
 import { useMemo } from "react";
 import * as yup from "yup";
+
+import { GlobalStyle } from "../styles";
 export const purchaseOverviewPath = "/purchase-overview";
 const emptyObject = {};
 export const PurchaseOverview = () => {
@@ -21,13 +23,16 @@ export const PurchaseOverview = () => {
  .validateSync(props);
  }, [props]);
  return (
- <PurchaseOverviewReactKit
- lookAndFeel="modal"
- modalMargin={validatedProps.modalMargin}
- hideModal={
- validatedProps.close ||
- (() => console.log("close purchase overview modal"))
- }
- />
+ <>
+ <GlobalStyle />
+ <PurchaseOverviewReactKit
+ lookAndFeel="modal"
+ modalMargin={validatedProps.modalMargin}
+ hideModal={
+ validatedProps.close ||
+ (() => console.log("close purchase overview modal"))
+ }
+ />
+ </>
  );
 };
diff --git a/src/components/widgets/styles.tsx b/src/components/widgets/styles.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 
 export const Pre = styled.pre`
  all: unset;
@@ -16,3 +16,76 @@ export const Widget = styled.div`
  gap: 1rem;
  flex-direction: column;
 `;
+
+export const GlobalStyle = createGlobalStyle`
+ html, body, #root {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+
+ font-family: "Plus Jakarta Sans", sans-serif;
+
+ margin: 0;
+ padding: 0;
+ font-style: normal;
+
+ height: unset;
+ }
+ #root{
+ display: flex;
+ }
+
+
+ a,
+ button,
+ input,
+ select,
+ textarea {
+ text-decoration: none;
+ &:focus,
+ &:hover {
+ outline: none;
+ }
+ cursor: pointer;
+ }
+
+ select {
+ -webkit-appearance: none;
+ }
+
+ input {
+ user-select: text;
+ }
+
+ * > small {
+ font-size: 65%;
+ margin: 0 0.5rem;
+ opacity: 0.75;
+ white-space: pre;
+ }
+
+ h1 {
+ font-size: 3.5rem;
+ font-weight: 600;
+ line-height: 1.2;
+ }
+ h2 {
+ font-size: 2rem;
+ font-weight: 600;
+ line-height: 1.2;
+ }
+ h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 1.5;
+ }
+ h4, h5, h6 {
+ font-size: 1.25rem;
+ line-height: 1.5;
+ margin: 0 0 1rem 0;
+ }
+ a, p, span, div {
+ font-size: 1rem;
+ line-height: 1.5;
+ }
+`;