`Splash` component improvements
See original GitHub issueThis issue describes changes planned for the Splash component in order to make it more customizable.
Customizable logos
Currently, the Splash
component’s logo is hard-coded Operational
one, with the spinning animation relying on a state flag set every 8 seconds. This should be customizable for outside projects and other use-cases. The following steps are required to make this happen:
- the
rotation
handling and state management should move fromSplash.tsx
toSplash.Logo.tsx
. This will allow the spinning logo to be self-contained and swappable to a different one with its own animations. Splash.tsx
should take alogo?: React.ReactNode
prop to allow for customizable logos. It should default to the current hard-coded one in case one isn’t provided.
Readable colors
Text colors in the Splash
component are currently hard-coded to white, which won’t be readable if the background is set to a very bright color. As in the Button
implementation in , this color should toggle between white and dark using the readableTextColor
utility. This would involve tweaking animation colors, logo colors and backdrop colors.
Dev workflow
Simply clone the repo and run yarn install
+ yarn start
to get the dev environment going. See React Styleguidist for help developing with styleguidist if you haven’t had the chance to work with it yet.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:7 (7 by maintainers)
Top GitHub Comments
I haven’t yet seen the entire implementation for
Splash
, i’ll have a look at it when I get free from office today and come up with a approach that we can use for this, i’ll keep the above mentioned guidelines in mind when thinking for an approach for this. @peterszerzoLooking forward to your PR, @adeelibr!