Functional
The behavior in some elements can be changed or turned off completely, those options are the following:
Name | Applies to | Default behavior | Description |
|---|---|---|---|
Tabs | Navigation controls (tabs in the bottom) | All tabs are shown by default. | Controls main navigation in the GameTracker, user is able to move between different tabs in order to see specific content. A subset of tabs could be defined in order to hide certain options. The following tabs are available:
|
Team icon/logo | Scoreboard | Each team has a customized helmet based on brand colors and name abbreviation. | Whether or not to hide team icon/logo. |
Styling
Theme options
The Game Tracker’s appearance can be customized by changing values in the Material UI theme. By default it looks like this:
But we can change several aspects such as the following:
Name | Applies to | Default value | Description |
|---|---|---|---|
primaryColor.main | Possession indicator, Tab highlight, buttons |
| Color used to highlight elements, is implemented in backgrounds, icons and some decorative elements |
primaryColor.contrastText | Buttons |
| Text color to be used when background is set to primary color |
background.default | Game Tracker background |
| Background color for the Game Tracker |
background.paper | Cards, scores |
| Background color for contained elements such as cards and scores within the scoreboard |
text.primary | Most elements |
| Text color used by default in most elements |
typography.fontFamily | Most elements |
| Font to be used in the Game Tracker |
For example, by using this options a Game Tracker can be styled to be used in Fanduel’s website and look like this:
Advanced customization
We are able to do more specific customization upon request through advanced themes powered by CSS overrides, it could include changes such different font size for a particular element, icon size, spacing changes and more.
Changes powered by advanced themes are just for presentation, it can’t provide new functionality.
To have a better idea of what could be achieved through an advanced theme, let’s make some changes in the scoreboard as an example. We would start with something like this:
We could write and advanced theme that targets several elements in the scoreboard so that we can change its appearance through CSS overrides:
partialTheme: {
GameTrackerCompetitor: {
scoreWrapper: {
background: '#000',
borderRadius: 6,
color: '#fff',
fontSize: 18
height: 50,
width: 50
},
timeoutContainer: {
width: '1.5em',
gap: '6px'
},
timeout: {
borderRadius: '50%'
},
teamName: {
textTransform: 'none'
},
possessionIcon: {
color: 'hotpink'
}
}
}
By applying that theme, the scoreboard would start looking like this:
