@multiversx/sdk-dapp-liquidity 1.1.0-alpha.3 → 1.1.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,4 +8,5 @@ export interface ConfirmRateDto extends RateRequestResponse {
8
8
  toChainId: string;
9
9
  sender: string;
10
10
  receiver: string;
11
+ backUrl?: string;
11
12
  }
@@ -16,7 +16,7 @@ require("@headlessui/react");
16
16
  require("react-dom");
17
17
  require("react-popper");
18
18
  require("../../../../reactjs/components/base/MxTooltip/components/TooltipContainer/TooltipContainer.js");
19
- require("../../../../reactjs/constants/index.js");
19
+ const reactjs_constants_index = require("../../../../reactjs/constants/index.js");
20
20
  require("react-number-format");
21
21
  require("@fortawesome/free-solid-svg-icons/faSpinner");
22
22
  require("@multiversx/sdk-dapp-utils/out/helpers/formatAmount");
@@ -156,7 +156,8 @@ const FiatForm = ({
156
156
  receiver: mvxAddress ?? "",
157
157
  fee: (rate == null ? void 0 : rate.fee) ?? "0",
158
158
  provider: (rate == null ? void 0 : rate.provider) ?? types_providerType.ProviderType.None,
159
- orderId: (rate == null ? void 0 : rate.orderId) ?? ""
159
+ orderId: (rate == null ? void 0 : rate.orderId) ?? "",
160
+ backUrl: reactjs_constants_index.safeWindow.location.href
160
161
  }
161
162
  });
162
163
  fetchRateDebounced(amount);
@@ -13,7 +13,7 @@ import "@headlessui/react";
13
13
  import "react-dom";
14
14
  import "react-popper";
15
15
  import "../../../../reactjs/components/base/MxTooltip/components/TooltipContainer/TooltipContainer.mjs";
16
- import "../../../../reactjs/constants/index.mjs";
16
+ import { safeWindow } from "../../../../reactjs/constants/index.mjs";
17
17
  import "react-number-format";
18
18
  import "@fortawesome/free-solid-svg-icons/faSpinner";
19
19
  import "@multiversx/sdk-dapp-utils/out/helpers/formatAmount";
@@ -153,7 +153,8 @@ const FiatForm = ({
153
153
  receiver: mvxAddress ?? "",
154
154
  fee: (rate == null ? void 0 : rate.fee) ?? "0",
155
155
  provider: (rate == null ? void 0 : rate.provider) ?? ProviderType.None,
156
- orderId: (rate == null ? void 0 : rate.orderId) ?? ""
156
+ orderId: (rate == null ? void 0 : rate.orderId) ?? "",
157
+ backUrl: safeWindow.location.href
157
158
  }
158
159
  });
159
160
  fetchRateDebounced(amount);
@@ -46,7 +46,6 @@ require("@fortawesome/free-solid-svg-icons/faCopy");
46
46
  require("@fortawesome/free-solid-svg-icons/faChevronDown");
47
47
  require("@fortawesome/free-solid-svg-icons/faWallet");
48
48
  require("react-select");
49
- const reactjs_components_SmallLoader_SmallLoader = require("../../../../../../reactjs/components/SmallLoader/SmallLoader.js");
50
49
  require("@fortawesome/free-solid-svg-icons/faDiamond");
51
50
  require("lodash/isString");
52
51
  require("animated-number-react");
@@ -54,6 +53,7 @@ require("numeral");
54
53
  require("@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare");
55
54
  const reactjs_components_Error_Error = require("../../../../../../reactjs/components/Error/Error.js");
56
55
  require("@reown/appkit-adapter-wagmi");
56
+ const reactjs_components_base_MxCircleLoader_MxCircleLoader = require("../../../../../../reactjs/components/base/MxCircleLoader/MxCircleLoader.js");
57
57
  const PaymentForm = ({
58
58
  frameContent,
59
59
  status,
@@ -68,27 +68,27 @@ const PaymentForm = ({
68
68
  reactjs_components_base_MxCard_MxCard.MxCard,
69
69
  {
70
70
  className: reactjs_utils_mxClsx.mxClsx(
71
- "flex flex-col items-center justify-center gap-8 px-8 py-14"
71
+ "liq-flex liq-flex-col liq-items-center liq-justify-center liq-gap-8 liq-px-8 liq-py-14"
72
72
  ),
73
73
  children: [
74
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center", children: [
74
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-flex-col liq-gap-4 liq-text-center", children: [
75
75
  /* @__PURE__ */ jsxRuntime.jsx(
76
76
  reactFontawesome.FontAwesomeIcon,
77
77
  {
78
78
  icon: faCheckCircle.faCheckCircle,
79
79
  size: "3x",
80
- className: "bg-opacity-40 text-white"
80
+ className: "liq-bg-opacity-40 liq-text-white"
81
81
  }
82
82
  ),
83
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-xs text-xl font-medium text-neutral-300", children: "Payment successful!" })
83
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-max-w-xs liq-text-xl liq-font-medium liq-text-neutral-300", children: "Payment successful!" })
84
84
  ] }),
85
85
  /* @__PURE__ */ jsxRuntime.jsx(
86
86
  reactjs_components_base_MxButton_MxButton.MxButton,
87
87
  {
88
88
  variant: "neutral-700",
89
- className: "flex items-center gap-3",
89
+ className: "liq-flex liq-items-center liq-gap-3",
90
90
  onClick: onStartOver,
91
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white", children: "Start new payment" })
91
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "liq-font-medium liq-text-white", children: "Start new payment" })
92
92
  }
93
93
  )
94
94
  ]
@@ -100,7 +100,7 @@ const PaymentForm = ({
100
100
  reactjs_components_base_MxCard_MxCard.MxCard,
101
101
  {
102
102
  className: reactjs_utils_mxClsx.mxClsx(
103
- "flex flex-col items-center justify-center gap-8 px-8 py-14"
103
+ "liq-flex liq-flex-col liq-items-center liq-justify-center liq-gap-8 liq-px-8 liq-py-14"
104
104
  ),
105
105
  children: [
106
106
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center", children: [
@@ -159,6 +159,9 @@ const PaymentForm = ({
159
159
  }
160
160
  );
161
161
  }
162
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: frameContent ? /* @__PURE__ */ jsxRuntime.jsx(modules_fiat_components_FiatForm_components_Payment_PaymentFrame.PaymentFrame, { htmlContent: frameContent }) : /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_SmallLoader_SmallLoader.SmallLoader, { show: true }) });
162
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-w-full", children: [
163
+ frameContent && /* @__PURE__ */ jsxRuntime.jsx(modules_fiat_components_FiatForm_components_Payment_PaymentFrame.PaymentFrame, { htmlContent: frameContent }),
164
+ !frameContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex payment-iframe liq-rounded-md liq-border liq-border-neutral-700", children: /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_base_MxCircleLoader_MxCircleLoader.MxCircleLoader, {}) })
165
+ ] });
163
166
  };
164
167
  exports.PaymentForm = PaymentForm;
@@ -43,7 +43,6 @@ import "@fortawesome/free-solid-svg-icons/faCopy";
43
43
  import "@fortawesome/free-solid-svg-icons/faChevronDown";
44
44
  import "@fortawesome/free-solid-svg-icons/faWallet";
45
45
  import "react-select";
46
- import { SmallLoader } from "../../../../../../reactjs/components/SmallLoader/SmallLoader.mjs";
47
46
  import "@fortawesome/free-solid-svg-icons/faDiamond";
48
47
  import "lodash/isString";
49
48
  import "animated-number-react";
@@ -51,6 +50,7 @@ import "numeral";
51
50
  import "@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare";
52
51
  import { Error } from "../../../../../../reactjs/components/Error/Error.mjs";
53
52
  import "@reown/appkit-adapter-wagmi";
53
+ import { MxCircleLoader } from "../../../../../../reactjs/components/base/MxCircleLoader/MxCircleLoader.mjs";
54
54
  const PaymentForm = ({
55
55
  frameContent,
56
56
  status,
@@ -65,27 +65,27 @@ const PaymentForm = ({
65
65
  MxCard,
66
66
  {
67
67
  className: mxClsx(
68
- "flex flex-col items-center justify-center gap-8 px-8 py-14"
68
+ "liq-flex liq-flex-col liq-items-center liq-justify-center liq-gap-8 liq-px-8 liq-py-14"
69
69
  ),
70
70
  children: [
71
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center", children: [
71
+ /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-flex-col liq-gap-4 liq-text-center", children: [
72
72
  /* @__PURE__ */ jsx(
73
73
  FontAwesomeIcon,
74
74
  {
75
75
  icon: faCheckCircle,
76
76
  size: "3x",
77
- className: "bg-opacity-40 text-white"
77
+ className: "liq-bg-opacity-40 liq-text-white"
78
78
  }
79
79
  ),
80
- /* @__PURE__ */ jsx("span", { className: "max-w-xs text-xl font-medium text-neutral-300", children: "Payment successful!" })
80
+ /* @__PURE__ */ jsx("span", { className: "liq-max-w-xs liq-text-xl liq-font-medium liq-text-neutral-300", children: "Payment successful!" })
81
81
  ] }),
82
82
  /* @__PURE__ */ jsx(
83
83
  MxButton,
84
84
  {
85
85
  variant: "neutral-700",
86
- className: "flex items-center gap-3",
86
+ className: "liq-flex liq-items-center liq-gap-3",
87
87
  onClick: onStartOver,
88
- children: /* @__PURE__ */ jsx("span", { className: "font-medium text-white", children: "Start new payment" })
88
+ children: /* @__PURE__ */ jsx("span", { className: "liq-font-medium liq-text-white", children: "Start new payment" })
89
89
  }
90
90
  )
91
91
  ]
@@ -97,7 +97,7 @@ const PaymentForm = ({
97
97
  MxCard,
98
98
  {
99
99
  className: mxClsx(
100
- "flex flex-col items-center justify-center gap-8 px-8 py-14"
100
+ "liq-flex liq-flex-col liq-items-center liq-justify-center liq-gap-8 liq-px-8 liq-py-14"
101
101
  ),
102
102
  children: [
103
103
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center", children: [
@@ -156,7 +156,10 @@ const PaymentForm = ({
156
156
  }
157
157
  );
158
158
  }
159
- return /* @__PURE__ */ jsx("div", { className: "w-full", children: frameContent ? /* @__PURE__ */ jsx(PaymentFrame, { htmlContent: frameContent }) : /* @__PURE__ */ jsx(SmallLoader, { show: true }) });
159
+ return /* @__PURE__ */ jsxs("div", { className: "liq-w-full", children: [
160
+ frameContent && /* @__PURE__ */ jsx(PaymentFrame, { htmlContent: frameContent }),
161
+ !frameContent && /* @__PURE__ */ jsx("div", { className: "liq-flex payment-iframe liq-rounded-md liq-border liq-border-neutral-700", children: /* @__PURE__ */ jsx(MxCircleLoader, {}) })
162
+ ] });
160
163
  };
161
164
  export {
162
165
  PaymentForm
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
4
  const jsxRuntime = require("react/jsx-runtime");
5
5
  const require$$0 = require("react");
6
+ const reactjs_components_base_MxCircleLoader_MxCircleLoader = require("../../../../../../reactjs/components/base/MxCircleLoader/MxCircleLoader.js");
6
7
  ;/* empty css */
7
8
  const reactjs_utils_mxClsx = require("../../../../../../reactjs/utils/mxClsx.js");
8
9
  require("../../../../../../reactjs/components/base/MxCard/MxCard.js");
@@ -42,7 +43,6 @@ require("@fortawesome/free-solid-svg-icons/faCopy");
42
43
  require("@fortawesome/free-solid-svg-icons/faChevronDown");
43
44
  require("@fortawesome/free-solid-svg-icons/faWallet");
44
45
  require("react-select");
45
- const reactjs_components_SmallLoader_SmallLoader = require("../../../../../../reactjs/components/SmallLoader/SmallLoader.js");
46
46
  require("@fortawesome/free-solid-svg-icons/faDiamond");
47
47
  require("lodash/isString");
48
48
  require("animated-number-react");
@@ -78,15 +78,15 @@ const PaymentFrame = ({ htmlContent }) => {
78
78
  (_a = iframe == null ? void 0 : iframe.removeEventListener) == null ? void 0 : _a.call(iframe, "load", onIframeLoad);
79
79
  };
80
80
  }, []);
81
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full`, children: [
82
- !formLoaded && /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_SmallLoader_SmallLoader.SmallLoader, { show: true }),
81
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-relative liq-w-full", children: [
82
+ !formLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payment-iframe liq-w-full liq-rounded-md liq-border liq-border-neutral-700", children: /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_base_MxCircleLoader_MxCircleLoader.MxCircleLoader, {}) }),
83
83
  /* @__PURE__ */ jsxRuntime.jsx(
84
84
  "iframe",
85
85
  {
86
86
  ref: iframeRef,
87
87
  title: "Buy with FIAT",
88
88
  className: reactjs_utils_mxClsx.mxClsx(
89
- "h-[500px] w-full rounded-md border border-neutral-700",
89
+ "payment-iframe scrollbar-thin liq-w-full liq-rounded-md liq-border liq-border-neutral-700",
90
90
  {
91
91
  hidden: !formLoaded
92
92
  }
@@ -1,5 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useRef, useState, useEffect } from "react";
3
+ import { MxCircleLoader } from "../../../../../../reactjs/components/base/MxCircleLoader/MxCircleLoader.mjs";
3
4
  /* empty css */
4
5
  import { mxClsx } from "../../../../../../reactjs/utils/mxClsx.mjs";
5
6
  import "../../../../../../reactjs/components/base/MxCard/MxCard.mjs";
@@ -39,7 +40,6 @@ import "@fortawesome/free-solid-svg-icons/faCopy";
39
40
  import "@fortawesome/free-solid-svg-icons/faChevronDown";
40
41
  import "@fortawesome/free-solid-svg-icons/faWallet";
41
42
  import "react-select";
42
- import { SmallLoader } from "../../../../../../reactjs/components/SmallLoader/SmallLoader.mjs";
43
43
  import "@fortawesome/free-solid-svg-icons/faDiamond";
44
44
  import "lodash/isString";
45
45
  import "animated-number-react";
@@ -75,15 +75,15 @@ const PaymentFrame = ({ htmlContent }) => {
75
75
  (_a = iframe == null ? void 0 : iframe.removeEventListener) == null ? void 0 : _a.call(iframe, "load", onIframeLoad);
76
76
  };
77
77
  }, []);
78
- return /* @__PURE__ */ jsxs("div", { className: `relative w-full`, children: [
79
- !formLoaded && /* @__PURE__ */ jsx(SmallLoader, { show: true }),
78
+ return /* @__PURE__ */ jsxs("div", { className: "liq-relative liq-w-full", children: [
79
+ !formLoaded && /* @__PURE__ */ jsx("div", { className: "payment-iframe liq-w-full liq-rounded-md liq-border liq-border-neutral-700", children: /* @__PURE__ */ jsx(MxCircleLoader, {}) }),
80
80
  /* @__PURE__ */ jsx(
81
81
  "iframe",
82
82
  {
83
83
  ref: iframeRef,
84
84
  title: "Buy with FIAT",
85
85
  className: mxClsx(
86
- "h-[500px] w-full rounded-md border border-neutral-700",
86
+ "payment-iframe scrollbar-thin liq-w-full liq-rounded-md liq-border liq-border-neutral-700",
87
87
  {
88
88
  hidden: !formLoaded
89
89
  }
package/package.json CHANGED
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "homepage": "https://github.com/multiversx/mx-sdk-dapp-liquidity#readme",
30
30
  "license": "MIT",
31
- "version": "1.1.0-alpha.3",
31
+ "version": "1.1.0-alpha.4",
32
32
  "main": "index.js",
33
33
  "module": "index.mjs",
34
34
  "types": "index.d.ts",
@@ -0,0 +1,4 @@
1
+ export declare const MxCircleLoader: ({ containerClassName, spinnerClassName }: {
2
+ containerClassName?: string;
3
+ spinnerClassName?: string;
4
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,29 @@
1
+ #!/usr/bin/env node
2
+ "use strict";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const jsxRuntime = require("react/jsx-runtime");
5
+ const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
6
+ const MxCircleLoader = ({
7
+ containerClassName = "",
8
+ spinnerClassName = ""
9
+ }) => {
10
+ return /* @__PURE__ */ jsxRuntime.jsx(
11
+ "div",
12
+ {
13
+ className: reactjs_utils_mxClsx.mxClsx(
14
+ "liq-flex liq-h-full liq-w-full liq-items-center liq-justify-center",
15
+ containerClassName
16
+ ),
17
+ children: /* @__PURE__ */ jsxRuntime.jsx(
18
+ "div",
19
+ {
20
+ className: reactjs_utils_mxClsx.mxClsx(
21
+ "liq-loader liq-inline-block liq-h-10 liq-w-10 liq-animate-spin liq-rounded-full liq-border-4 liq-border-primary-400 liq-border-t-neutral-850",
22
+ spinnerClassName
23
+ )
24
+ }
25
+ )
26
+ }
27
+ );
28
+ };
29
+ exports.MxCircleLoader = MxCircleLoader;
@@ -0,0 +1,28 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { mxClsx } from "../../../utils/mxClsx.mjs";
3
+ const MxCircleLoader = ({
4
+ containerClassName = "",
5
+ spinnerClassName = ""
6
+ }) => {
7
+ return /* @__PURE__ */ jsx(
8
+ "div",
9
+ {
10
+ className: mxClsx(
11
+ "liq-flex liq-h-full liq-w-full liq-items-center liq-justify-center",
12
+ containerClassName
13
+ ),
14
+ children: /* @__PURE__ */ jsx(
15
+ "div",
16
+ {
17
+ className: mxClsx(
18
+ "liq-loader liq-inline-block liq-h-10 liq-w-10 liq-animate-spin liq-rounded-full liq-border-4 liq-border-primary-400 liq-border-t-neutral-850",
19
+ spinnerClassName
20
+ )
21
+ }
22
+ )
23
+ }
24
+ );
25
+ };
26
+ export {
27
+ MxCircleLoader
28
+ };
@@ -0,0 +1 @@
1
+ export * from './MxCircleLoader';
@@ -0,0 +1,5 @@
1
+ #!/usr/bin/env node
2
+ "use strict";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const reactjs_components_base_MxCircleLoader_MxCircleLoader = require("./MxCircleLoader.js");
5
+ exports.MxCircleLoader = reactjs_components_base_MxCircleLoader_MxCircleLoader.MxCircleLoader;
@@ -0,0 +1,4 @@
1
+ import { MxCircleLoader } from "./MxCircleLoader.mjs";
2
+ export {
3
+ MxCircleLoader
4
+ };
package/style.css CHANGED
@@ -796,6 +796,15 @@ video {
796
796
  .liq-animate-pulse{
797
797
  animation: liq-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
798
798
  }
799
+ @keyframes liq-spin{
800
+
801
+ to{
802
+ transform: rotate(360deg);
803
+ }
804
+ }
805
+ .liq-animate-spin{
806
+ animation: liq-spin 1s linear infinite;
807
+ }
799
808
  .\!liq-cursor-not-allowed{
800
809
  cursor: not-allowed !important;
801
810
  }
@@ -909,6 +918,9 @@ video {
909
918
  .liq-border-0{
910
919
  border-width: 0px;
911
920
  }
921
+ .liq-border-4{
922
+ border-width: 4px;
923
+ }
912
924
  .liq-border-\[3px\]{
913
925
  border-width: 3px;
914
926
  }
@@ -956,6 +968,10 @@ video {
956
968
  --tw-border-opacity: 1;
957
969
  border-color: rgb(59 197 252 / var(--tw-border-opacity, 1));
958
970
  }
971
+ .liq-border-t-neutral-850{
972
+ --tw-border-opacity: 1;
973
+ border-top-color: rgb(30 31 37 / var(--tw-border-opacity, 1));
974
+ }
959
975
  .\!liq-bg-neutral-750{
960
976
  --tw-bg-opacity: 1 !important;
961
977
  background-color: rgb(42 44 52 / var(--tw-bg-opacity, 1)) !important;
@@ -1982,6 +1998,10 @@ video {
1982
1998
  --tw-shadow-colored: 0 0 #0000;
1983
1999
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1984
2000
  }
2001
+ .payment-iframe {
2002
+ height: 475px !important;
2003
+ width: 100% !important;
2004
+ }
1985
2005
  .placeholder\:liq-font-medium::-moz-placeholder{
1986
2006
  font-weight: 500;
1987
2007
  }
@@ -3000,6 +3020,15 @@ video {
3000
3020
  .liq-animate-pulse {
3001
3021
  animation: liq-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
3002
3022
  }
3023
+ @keyframes liq-spin {
3024
+
3025
+ to {
3026
+ transform: rotate(360deg);
3027
+ }
3028
+ }
3029
+ .liq-animate-spin {
3030
+ animation: liq-spin 1s linear infinite;
3031
+ }
3003
3032
  .\!liq-cursor-not-allowed {
3004
3033
  cursor: not-allowed !important;
3005
3034
  }
@@ -3113,6 +3142,9 @@ video {
3113
3142
  .liq-border-0 {
3114
3143
  border-width: 0px;
3115
3144
  }
3145
+ .liq-border-4 {
3146
+ border-width: 4px;
3147
+ }
3116
3148
  .liq-border-\[3px\] {
3117
3149
  border-width: 3px;
3118
3150
  }
@@ -3160,6 +3192,10 @@ video {
3160
3192
  --tw-border-opacity: 1;
3161
3193
  border-color: rgb(59 197 252 / var(--tw-border-opacity, 1));
3162
3194
  }
3195
+ .liq-border-t-neutral-850 {
3196
+ --tw-border-opacity: 1;
3197
+ border-top-color: rgb(30 31 37 / var(--tw-border-opacity, 1));
3198
+ }
3163
3199
  .\!liq-bg-neutral-750 {
3164
3200
  --tw-bg-opacity: 1 !important;
3165
3201
  background-color: rgb(42 44 52 / var(--tw-bg-opacity, 1)) !important;