Skip to main content

Customizable Alerts

We have received feedback from some ATSs that they want to customize the look of some of the alerts inside the app (mostly inline alerts).


We use the same component internally, as the Toast Alerts, for showing some inline messages that should stand out to the end user.


We had the border-radius, background-color and color properties inside the component as hardcoded (referencing global info, success, warning and danger variables). We now moved them to the alert object in theming module's theme variable. The alert component has the type of the alert added as a CSS classes as below, so that individual types can be customized:

  • .info
  • .success
  • .warning
  • .error

You will now be able to customize the look of the alerts via theming module's theme variable but in addition to this, all alerts have had HTML ID attribute added, so you can further customize alerts via UI submodule.


With theming:

window.hapi.theming.state.theme = window.hapiUtils.mergeDeepOverwriteArrays(window.hapi.theming.state.theme.value, {
    alert: {
        "&.error": {
            color: "blue"
        }
    },
    alertProgressBar: {
        "&.Toastify__progress-bar--error": {
            backgroundColor: "blue"
        }
    }
})

With UI submodule functions, per alert:

note

There is no way to change the color of the progress bar per alert; it can only be done using the theming method above.

const ourCustomStylesForWalletHasEnoughBalanceToOrderCampaignAlert = {
    backgroundColor: "yellow",
    color: "black",
    borderRadius: "8px"
}

window.hapi.ui.service.setStyle(
   "[id=wallet-has-enough-balance-to-order-campaign-alert]",
   ourCustomStylesForWalletHasEnoughBalanceToOrderCampaignAlert,
)

As part of this change, these IDs have been added:

  • code-block-copy-button-copied-alert
  • card-campaign-create-form.order-error
  • contract-credential-authenticated-alert
  • contract-fields-disabled-until-authenticated-alert
  • page-contracts-add-create-error
  • contract-create-success-alert
  • contract-group-create-success-alert
  • contract-edit-success-alert
  • contract-delete-success-alert
  • contract-channel-posting-requirements-missing-fields-error-alert
  • product-channel-posting-requirements-missing-fields-error-alert
  • wallet-unexpected-error-alert
  • basket.error
  • wallet-billing-details-warning
  • wallet-max-outstanding-balance-reached-alert
  • wallet-negative-balance-cannot-top-up-alert
  • wallet-has-enough-balance-to-order-campaign-alert
  • campaign-copy-products-or-contracts-deleted-warning-alert
  • backend-error-message-alert
  • wallet-payments-are-not-enabled-alert
  • wallet-currency-should-be-specified-alert
  • wallet-currency-not-supported-alert
  • campaign-take-offline-success-alert
  • campaign-order-unexpected-error-alert
  • campaign-order-success-alert
  • campaign-save-success-alert
  • campaign-save-unexpected-error-alert
  • campaign-product-take-offline-success-alert
  • basket-add-success-alert
  • basket-remove-success-alert
  • ats-user-payment-settings-error-alert
  • ats-user-data-error-alert
  • debug-log-recording-started-alert (irrelevant in terms of business, just for development purposes)