Custom Themes for Flatfile Portal

Theming gives you independent control over the look and feel of Flatfile Portal. With this, you can adjust both a global styles and individual components within the importer, as well as control the CSS pseudo-class :hover on buttons.

How it works

Portal Theming is one of the optional settings within the FlatfileImporter Options. For simplicity's sake, the below code example shows only the global setting, and then we will expand out a bit more on each specific area and what can be customized.

As mentioned above, the

theme
key is an options key within the Portal Options. This key is an object with keys that reference specific areas of the importer. Below you will see each key and how to work with it in more depth.

global

The

global
key is a generic and easy-to-use key for giving a very general/global styling or even some defaults to then override in more specific keys. Some of these keys work very similarly to Portal Theme's predecessor,
styleOverrides
. So if you previously used that, some of these will look familiar. The options available in the
global
key are:

  • backgroundColor
    - This will control the general background color of the importer. Note that this does not control the main manual input and review tables during the process, but those can now be controlled as well.
  • textColor
    - This sets a default text color for the importer. Much like with the
    backgroundColor
    setting, this does not apply to the manual input and review tables, but that too can be controlled in another setting below.
  • primaryTextColor
    - This will get slightly more specific than the previous
    textColor
    key and will control specific pieces of text that you can see here.
  • secondaryTextColor
    - This too is a more specific styling that the
    textColor
    key and you can see all examples of the text it controls here.
  • successColor
    - This controls some specific UI elements like certain buttons, icons and some text. You can see some examples of these here.
  • warningColor
    - Like
    successColor
    , this controls some specific UI elements like certain buttons, icons and some text. You can see some examples of these here.
  • fontFamily
    - This allows for you to set the custom font within the theme. Please note that you must also import the fonts in the integrations setting

buttons

The

buttons
key allows for control of the buttons within the importer. This key also allows for the use of the
:hover
pseudo-class for styling buttons in a deeper manner. All buttons have the ability to use
backgroundColor
,
color
,
padding
,
border
,
fontSize
,
borderRadius
and
":hover"
. With these options in mind, there are a few different button options for styling as follows:

  • primary
    - Controls the primary buttons within the importer.
  • secondary
    - Controls the secondary buttons within the importer.
  • tertiary
    - Controls the tertiary buttons within the importer.
  • success
    - Controls the success, confirm match, etc buttons that by default end up green.
  • headerMatchYes
    - Controls the 'Yes' button in the header matching screen.
  • headerMatchNo
    - Controls the 'No' button in the header matching screen.

As an example for these, and to keep the code cleaner and DRYer, the theme will reference the following button styling objects.

And here's what this might look like when being used.

The remainder of the keys below will all use a root option. This option will control the base styling of the area of the specific section. This will allow for control of backgroundColor, border, borderRadius and padding while the more specific options within each key will control fontWeight , fontSize and color.

progressBar

The

progressBar
allows for the styling of the progress indicator section (sometimes called breadcrumbs) in the top right that indicates which stage of the import process you have completed, are currently on and are still to come. Here are the options for this key:

  • root
    - controls the base stylings for the section.
  • current
    - Controls the styling of the current step.
  • complete
    - Controls the styling of the completed steps.
  • incomplete
    - Controls the styling of the incomplete steps.

This key controls the styling for anything above the tables in the importer outside of specific items like the above

progressBar
or
dropzone
pieces which have their own styling. Here are the available options for use:

  • root
    - Controls the base stylings for the section.
  • title
    - Controls the header title text in the upper left. This text will by default say "Bulk add" and whatever you set your import
    type
    to or will match the value provided in the
    title
    configuration option.
  • closeButton
    - Controls the styling of the button to close the importer in the top right corner. This styling will allow for the same use of the
    ":hover"
    option in the
    buttons
    key above.

This key controls the root stylings of the bottom of the importer. The only option available to use here is the

root
key.

  • root
    - Controls the base stylings for the section.

dropzone

This key allows for the control of the dropzone section that appears when the importer first opens. Note that the button inside this section is controlled by the buttons for the importer and not in this section. Here are the available options:

  • root
    - Controls the base stylings for the section.
  • content
    - Controls the bubble that defaults with dotted lines. This section will use the same styling options as
    root
    but will control a different section of the dropzone.
  • fileTypes
    - Controls the styling for the content on the right paragraph.
  • accepted
    - Conrtols the styling for the content on the left paragraph.

manualInput

This key will control the styling for the manual input table that appears when the importer is initially loaded. Keep in mind that if

diasbleManualInput: true
is in your settings, this key is unneccesary as this table will never display. Here are the available options:

  • root
    - Controls the base stylings for the section.
  • title
    - Controls the base stylings and the text styling for the section right above the actual manual input table. By default, this section will say "...or just manually enter your data here:"
  • table
    - Controls the table elements with additional nested options for table specific elements such as
    th
    ,
    td
    , etc.

headerMatch

This controls styling on the header matching phase of the import process. Here are the available keys:

  • root
    - Controls the base stylings for the section.
  • content
    - Controls the text content of everything on the left side of this stage and anything not inside a table element.
  • icon
    - Controls the arrow icon fill color. Its only available option is the
    fill
    key.
  • table
    - Controls the tables within this stage. It uses a very similar format to the above manual input table where its nested options are that of table elements such as
    th
    ,
    td
    , etc.

columnMatch

This key controls the elements in the column matching/mapping stage of the importer.

  • root
    - Controls the base stylings for the entire section.
  • content
    - Controls the text color within the data preview part of the table (left side) and the background/base/root of each field's card.
  • rule
    - Controls the text color of the right side of each card.
  • autoMatchRule
    - This is a nested object that is associated only with field content on the right that informs the user a field has been matched. You can use
    root
    ,
    field
    ,
    description
    and
    icon
    to control different aspect of the line that will tell you that the data in the card has been match to a certain field.

dialog

This key controls the styling of the dialog boxes that will pop up for confirmations and input from users during the import flow. The keys available for use are:

  • root
    - Controls the base stylings for the section.
  • content
    - Controls the styling of content in the top part of the dialogs.
  • footer
    - Controls the styling of the content on the bottom of the dialogs.
  • overlayColor
    - Controls the color for the overlay around the dialogs.

dataSource

When giving a datasource other than a csv file (xls for example) there is a dialogue that will go through the individual sheets and has its own flow. This key controls the styling for that dialogue. Here are the available options:

  • root
    - Controls the base stylings for the section.
  • title
    - Controls the styling for the title of the dialog.
  • subtitle
    - Controls the styling for the subtitle for the dialogue (for xls this will say "select sheet").
  • step
    - Controls the styling for the steps/progress indicators for the dialog.
  • footer
    - Controls the footer section of the dialog.

loader

When the importer is initially loading, there is a loading indicator that will appear. This key styles that indicator and its container.

  • root
    - Controls the base stylings for the section.
  • overlayColor
    - Controls the color of the overlay that surrounds the dialog container.

iterator

  • root
    - Controls the base stylings for the section.
  • overlayColor
    - Controls the color of the overlay that surrounds the iterator.

Here is a full snippet of all of the pieces from above.

Should I remove my styleOverrides if I plan to start using Portal Theming?

We recommend that if you want to use this newer Portal Theme that you should remove the

styleOverrides
setting all together. While it technically won't hurt anything if you leave them in, if you use both settings, anything in
styleOverrides
will be ignored/disabled. This means that even if you aren't technically overriding some of the same pieces of the importer, the default styles would be in place over what you have in the
styleOverrides
setting.