DOP-4713: implement DarkMode Dropdown in new Action Bar #1105
Conversation
…mmodate for system setting
| @@ -11,7 +11,7 @@ const StyledHeaderContainer = styled.header( | |||
| grid-area: header; | |||
| top: 0; | |||
| z-index: ${theme.zIndexes.header}; | |||
| ${props.template === 'landing' ? '' : 'position: sticky;'} | |||
| ${props.template === 'landing' || process.env['GATSBY_ENABLE_DARK_MODE'] === 'true' ? '' : 'position: sticky;'} | |||
There was a problem hiding this comment.
Does this mean that we don't want the header to stick to the top when scrolling on dark mode?
There was a problem hiding this comment.
It looks great, so I feel like I must have just missed a design discussion!
There was a problem hiding this comment.
i believe so! this was discussed Design Team in this thread
| <Wrapper newChatbotLanding={process.env['GATSBY_ENABLE_DARK_MODE'] !== 'true' && useChatbot}> | ||
| {process.env['GATSBY_ENABLE_DARK_MODE'] !== 'true' && useChatbot && ( | ||
| <ChatbotUi template={pageContext?.template} /> | ||
| )} |
There was a problem hiding this comment.
I'm not sure I understand this. Are we only using the Chatbot when dark mode is enabled?
There was a problem hiding this comment.
the intention here was that the Chatbot would be included in the new ActionBar, not here when enable_dark_mode is enabled
| const IconStyling = css` | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const MenuStyling = css` | ||
| width: fit-content; | ||
| margin-top: ${theme.size.small}; | ||
| `; |
There was a problem hiding this comment.
nit: Our conventions are to capitalize the first letter only when they are styled components. When they are styles injected in classnames we keep the first letter lowercase.
There was a problem hiding this comment.
thanks for pointing this out! refreshed
I believe it's happening but its very subtle! Figma shows the following colors for dark/light mode: dark:
light:
which correspond to the menu colors:
|
This might be another time I'm looking at old news, but I was just referencing the light and dark mode dropdowns on the left side of the Figma |
Worked out offline. Seung is right. Matt is wrong. LG is slightly psycho. |
Stories/Links:
DOP-4713
Staging Links:
drivers site staged change with new Action Bar
docs landing with flag turned off
Notes:
GATSBY_ENABLE_DARK_MODE=truebooleanto astringtype to accommodate forsystemselection (default) case.LG/menuto our packages to use for DarkMode DropdownREADME updates