From 1180d418fa9178034482c5b90e26dd523e932a56 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Wed, 17 Apr 2024 16:11:12 +0200
Subject: [PATCH] fix: global style in purchase overview widget

---
 .../widgets/commitButton/CommitButton.tsx     | 21 +-----
 .../purchaseOverview/PurchaseOverview.tsx     | 21 ++++--
 src/components/widgets/styles.tsx             | 75 ++++++++++++++++++-
 3 files changed, 89 insertions(+), 28 deletions(-)

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<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
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 (
-    <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
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;
+  }
+`;