Docs: add enterprise admonition #1198
Conversation
✅ Deploy Preview for pomerium-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
ZPain8464
requested review from
wasaga,
calebdoxsey,
ssveta7ak and
cmo-pomerium
|
Can you link to a few example pages for context @ZPain8464 |
|
@desimone I replaced the admonitions in Original User Context and Branding. I added a new one to PPL underneath the Criteria section. |
|
Looks good to me! I like the purple. What do you think about using the Mui "Business" icon instead? 
|
|
@kenjenkins I'm open to any icon here provided we all agree on it. The business one looks "enterprise-y" to me, I'd be fine with that. |
|
@desimone what do you think of the business icon @kenjenkins proposed? @nhayfield if I could get your blessing on this as well that'd be great. |
|
Looks good for me. Also, I like the Mui business icon. |
src/theme/Admonition/types.css
Outdated
| border-radius: 10px; | ||
| margin: 0 0 16px 0; | ||
| padding: 16px; | ||
| background-color: #f6f3ff; |
There was a problem hiding this comment.
I think we'll need a different set of colors for dark mode, as currently this has poor text contrast:
src/theme/Admonition/Types.js
Outdated
| import DefaultAdmonitionTypes from '@theme-original/Admonition/Types'; | ||
| import BusinessIcon from '@mui/icons-material/Business'; | ||
|
|
||
| import './types.css'; |
There was a problem hiding this comment.
If we're going to add a separate CSS file for this component, can it be scoped to just this component? (See src/theme/Footer/Logo/index.js for an example of using a CSS module.)
|
@kenjenkins would you mind reviewing with the dark mode color palette? Also open to changing these a bit, but mainly wanted to make the text visible. |
There was a problem hiding this comment.
Thanks, the dark mode colors look much better to me.
I think the contrast may still be a little low... https://webaim.org/resources/contrastchecker/?fcolor=E3E3E3&bcolor=7161EF puts the text color contrast ratio at 3.51:1.
If we darken the background to say #4d25bb, we can bring that up to above 7: https://webaim.org/resources/contrastchecker/?fcolor=E3E3E3&bcolor=4D25BB.
Also, as discussed over Slack, I've gone ahead and simplified the component a little using [data-theme] rules in the CSS. (I also took the liberty of renaming the CSS module to styles.module.css, as that seems to be the convention from other components with style modules.)
* adds enterprise admonition * adds inline styling * adds styling to component * swaps material ui icon * adds enterprise admonition examples * swaps mui icon and deletes gif example * adds dark mode colors * updates dark mode palette * simplify dark mode styling * updates hex code --------- Co-authored-by: Kenneth Jenkins <[email protected]>
Docs: add enterprise admonition (#1198) * adds enterprise admonition * adds inline styling * adds styling to component * swaps material ui icon * adds enterprise admonition examples * swaps mui icon and deletes gif example * adds dark mode colors * updates dark mode palette * simplify dark mode styling * updates hex code --------- Co-authored-by: zachary painter <[email protected]> Co-authored-by: Kenneth Jenkins <[email protected]>
Resolves https://github.com/pomerium/internal/issues/1696
This PR presents a first draft of the custom Enterprise admonition. For now, we're using an MUI icon as a stopgap until we decide on a different (or more custom) icon.