diff --git a/src/components/widgets/commitButton/CommitButton.tsx b/src/components/widgets/commitButton/CommitButton.tsx index f739402..b9b3b6b 100644 --- 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) => any; declare const PurchaseOverviewModal: (props: Record) => 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() diff --git a/src/components/widgets/purchaseOverview/PurchaseOverview.tsx b/src/components/widgets/purchaseOverview/PurchaseOverview.tsx index 3c4b0e8..fb68779 100644 --- 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 ( - console.log("close purchase overview modal")) - } - /> + <> + + console.log("close purchase overview modal")) + } + /> + ); }; diff --git a/src/components/widgets/styles.tsx b/src/components/widgets/styles.tsx index 128a8c9..ae7d68b 100644 --- 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; + } +`;