feat(ui): update oss login page #17291
Conversation
alexpaxton
requested review from
a team and
glinton
and removed request for
a team
| } | ||
|
|
||
| .cf-dapper-scrollbars--content { | ||
| display: flex !important; |
There was a problem hiding this comment.
is this !important necessary?
There was a problem hiding this comment.
Unfortunately yes, in clockface there's an !important present to override styles from a library, so the madness trickles down
| width: 70%; | ||
| height: auto; | ||
| margin-top: 1em; | ||
| margin-bottom: 3em; | ||
| } | ||
|
|
||
| .signin-page--cubo { | ||
| background-image: url('../../assets/images/auth-logo.svg'); | ||
| background-size: 100% 100%; | ||
| background-position: center center; | ||
| background-repeat: no-repeat; | ||
| width: 100px; | ||
| height: 100px; | ||
| display: inline-block; | ||
| } |
There was a problem hiding this comment.
ninor nit: wanna alphabetize these selectors?
There was a problem hiding this comment.
I can do that, though makes me think we could benefit from more thorough CSS formatting. I think prettier supports that? Maybe a nice little tooling improvement
There was a problem hiding this comment.
@alexpaxton deffo. I usually just say "alphabetize absent any other organizing scheme. would be rad to have one in place"
| <SplashPage.Logo /> | ||
| <SplashPage.Header title="InfluxData" /> | ||
| <div className="signin-page--cubo" /> | ||
| <InfluxDBCloudLogo cloud={false} className="signin-page--logo" /> |
There was a problem hiding this comment.
what is cloud={false} we have a CLOUD global variable that denotes whether we're in a cloud context or not.
There was a problem hiding this comment.
that prop controls whether the word "Cloud" renders in the image. https://influxdata.github.io/clockface/?path=/story/graphics-brand-logos--influxdb-cloud
In this instance I left it false cuz this page is OSS only
|
@hoorayimhelping just pushed a commit that sorts the css attributes alphabetically |
Completes half the work described in #17151
The other half is contingent upon this issue: influxdata/clockface#455
FunnelPagecomponent in the OSS login pageInfluxDBLogofrom Clockface in login panelSplashPagecomponents and styles