Skip to content

Commit

Permalink
v2.5.0: stlye now also allows you to set the dialog text color
Browse files Browse the repository at this point in the history
  • Loading branch information
@10xSebastian
10xSebastian committed Sep 6, 2021
1 parent ee162a2 commit 1edc956
Show file tree
Hide file tree
Showing 14 changed files with 84 additions and 71 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,10 @@ DePayWidgets.Payment({
style: {
colors: {
primary: '#ffd265',
text: '#ffd265',
buttonText: '#000000',
icons: '#000000'
},
icons: '#ffd265'
}
},
// ...
})
Expand Down
21 changes: 11 additions & 10 deletions dist/cjs/index.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10617,9 +10617,9 @@ var NoPaymentMethodFoundDialog = (function () {
className: "Graphic",
src: QuestionsGraphic
})), /*#__PURE__*/react.createElement("h1", {
className: "FontSizeL PaddingTopS FontWeightBold"
className: "Text FontSizeL PaddingTopS FontWeightBold"
}, "Insufficient Balance"), /*#__PURE__*/react.createElement("div", {
className: "PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
}, /*#__PURE__*/react.createElement("strong", {
className: "FontSizeM"
}, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment.")))
Expand All @@ -10646,9 +10646,9 @@ var PaymentErrorDialog = (function () {
className: "Graphic",
src: ErrorGraphic
})), /*#__PURE__*/react.createElement("h1", {
className: "FontSizeL PaddingTopS FontWeightBold"
className: "Text FontSizeL PaddingTopS FontWeightBold"
}, "Payment Failed"), /*#__PURE__*/react.createElement("div", {
className: "PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
}, /*#__PURE__*/react.createElement("strong", {
className: "FontSizeM"
}, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/react.createElement("div", {
Expand Down Expand Up @@ -10714,9 +10714,9 @@ var ConnectingWalletDialog = (function () {
className: "Graphic",
src: walletLogo
})), /*#__PURE__*/react.createElement("h1", {
className: "FontSizeL PaddingTopS FontWeightBold"
className: "Text FontSizeL PaddingTopS FontWeightBold"
}, "Connect Wallet"), /*#__PURE__*/react.createElement("div", {
className: "PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
}, /*#__PURE__*/react.createElement("strong", {
className: "FontSizeM"
}, "This payment requires access to your wallet, please login and authorize access to your ", walletName, " account to continue."))),
Expand Down Expand Up @@ -64320,8 +64320,8 @@ var CardStyle = (function (style) {
return "\n\n .Card {\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02); \n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: rgb(240,240,240);\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n \n .CardText {\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ";
});

var DialogStyle = (function () {
return "\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n }\n\n @media screen and (max-width: 450px) {\n \n .Dialog, .ReactDialogAnimation {\n width: 100%;\n }\n\n }\n\n @media (orientation: portrait) and (max-width: 700px) {\n\n .Dialog {\n align-content: stretch;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n max-height: 40vh !important;\n }\n\n .FooterLink {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n width: 100%;\n }\n\n .DialogFooter {\n padding-bottom: 50px;\n }\n\n .ReactDialogStackCell {\n vertical-align: bottom;\n }\n\n .ReactDialogAnimation {\n bottom: -100px !important;\n max-height: 66vh !important;\n top: inherit !important;\n transition: opacity 0.4s ease, bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.HeightAuto {\n height: auto;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .DialogHeaderTitle {\n flex-basis: auto;\n flex-grow: 1;\n }\n \n .DialogHeaderAction {\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
var DialogStyle = (function (style) {
return "\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n }\n\n .Dialog .Text {\n color: ".concat(style.colors.text, ";\n }\n\n @media screen and (max-width: 450px) {\n \n .Dialog, .ReactDialogAnimation {\n width: 100%;\n }\n\n }\n\n @media (orientation: portrait) and (max-width: 700px) {\n\n .Dialog {\n align-content: stretch;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n max-height: 40vh !important;\n }\n\n .FooterLink {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n width: 100%;\n }\n\n .DialogFooter {\n padding-bottom: 50px;\n }\n\n .ReactDialogStackCell {\n vertical-align: bottom;\n }\n\n .ReactDialogAnimation {\n bottom: -100px !important;\n max-height: 66vh !important;\n top: inherit !important;\n transition: opacity 0.4s ease, bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.HeightAuto {\n height: auto;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .DialogHeaderTitle {\n flex-basis: auto;\n flex-grow: 1;\n }\n \n .DialogHeaderAction {\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ");
});

var FontStyle = (function (style) {
Expand Down Expand Up @@ -64377,11 +64377,12 @@ var styleRenderer = (function (style) {
colors: {
primary: '#ea357a',
buttonText: '#ffffff',
icons: '#000000'
icons: '#000000',
text: '#212529'
},
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
}, style);
return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(), FooterStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(), IconStyle(style), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style)].join('');
return [ResetStyle(), FontStyle(style), DialogStyle(style), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(), FooterStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(), IconStyle(style), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style)].join('');
});

var timezoneToCurrency = {
Expand Down
21 changes: 11 additions & 10 deletions dist/cjs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1191,9 +1191,9 @@ var NoPaymentMethodFoundDialog = (function () {
className: "Graphic",
src: QuestionsGraphic
})), /*#__PURE__*/React__default['default'].createElement("h1", {
className: "FontSizeL PaddingTopS FontWeightBold"
className: "Text FontSizeL PaddingTopS FontWeightBold"
}, "Insufficient Balance"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
}, /*#__PURE__*/React__default['default'].createElement("strong", {
className: "FontSizeM"
}, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment.")))
Expand All @@ -1220,9 +1220,9 @@ var PaymentErrorDialog = (function () {
className: "Graphic",
src: ErrorGraphic
})), /*#__PURE__*/React__default['default'].createElement("h1", {
className: "FontSizeL PaddingTopS FontWeightBold"
className: "Text FontSizeL PaddingTopS FontWeightBold"
}, "Payment Failed"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
}, /*#__PURE__*/React__default['default'].createElement("strong", {
className: "FontSizeM"
}, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/React__default['default'].createElement("div", {
Expand Down Expand Up @@ -1288,9 +1288,9 @@ var ConnectingWalletDialog = (function () {
className: "Graphic",
src: walletLogo
})), /*#__PURE__*/React__default['default'].createElement("h1", {
className: "FontSizeL PaddingTopS FontWeightBold"
className: "Text FontSizeL PaddingTopS FontWeightBold"
}, "Connect Wallet"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
}, /*#__PURE__*/React__default['default'].createElement("strong", {
className: "FontSizeM"
}, "This payment requires access to your wallet, please login and authorize access to your ", walletName, " account to continue."))),
Expand Down Expand Up @@ -1764,8 +1764,8 @@ var CardStyle = (function (style) {
return "\n\n .Card {\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02); \n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: rgb(240,240,240);\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n \n .CardText {\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ";
});

var DialogStyle = (function () {
return "\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n }\n\n @media screen and (max-width: 450px) {\n \n .Dialog, .ReactDialogAnimation {\n width: 100%;\n }\n\n }\n\n @media (orientation: portrait) and (max-width: 700px) {\n\n .Dialog {\n align-content: stretch;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n max-height: 40vh !important;\n }\n\n .FooterLink {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n width: 100%;\n }\n\n .DialogFooter {\n padding-bottom: 50px;\n }\n\n .ReactDialogStackCell {\n vertical-align: bottom;\n }\n\n .ReactDialogAnimation {\n bottom: -100px !important;\n max-height: 66vh !important;\n top: inherit !important;\n transition: opacity 0.4s ease, bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.HeightAuto {\n height: auto;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .DialogHeaderTitle {\n flex-basis: auto;\n flex-grow: 1;\n }\n \n .DialogHeaderAction {\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
var DialogStyle = (function (style) {
return "\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n }\n\n .Dialog .Text {\n color: ".concat(style.colors.text, ";\n }\n\n @media screen and (max-width: 450px) {\n \n .Dialog, .ReactDialogAnimation {\n width: 100%;\n }\n\n }\n\n @media (orientation: portrait) and (max-width: 700px) {\n\n .Dialog {\n align-content: stretch;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n max-height: 40vh !important;\n }\n\n .FooterLink {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n width: 100%;\n }\n\n .DialogFooter {\n padding-bottom: 50px;\n }\n\n .ReactDialogStackCell {\n vertical-align: bottom;\n }\n\n .ReactDialogAnimation {\n bottom: -100px !important;\n max-height: 66vh !important;\n top: inherit !important;\n transition: opacity 0.4s ease, bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.HeightAuto {\n height: auto;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .DialogHeaderTitle {\n flex-basis: auto;\n flex-grow: 1;\n }\n \n .DialogHeaderAction {\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ");
});

var FontStyle = (function (style) {
Expand Down Expand Up @@ -1821,11 +1821,12 @@ var styleRenderer = (function (style) {
colors: {
primary: '#ea357a',
buttonText: '#ffffff',
icons: '#000000'
icons: '#000000',
text: '#212529'
},
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
}, style);
return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(), FooterStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(), IconStyle(style), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style)].join('');
return [ResetStyle(), FontStyle(style), DialogStyle(style), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(), FooterStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(), IconStyle(style), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style)].join('');
});

var ToTokenProvider = (function (props) {
Expand Down
Loading

0 comments on commit 1edc956

Please sign in to comment.