From d29aa05cc6ef31cb871e79de10c1b1ddd74f023e Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 5 Apr 2020 19:34:42 +0200 Subject: [PATCH] fix(styles): Updated dark colors (#455) * ref(styles): updated dark colors * updated snaps --- src/App/__snapshots__/App.test.tsx.snap | 2 ++ src/components/ActionBar/ActionBarAction.tsx | 10 +++++-- .../__snapshots__/ActionBar.test.tsx.snap | 5 ++++ .../DetailSidebar/DetailSidebarFundButton.tsx | 30 +++++++++---------- src/components/Footer/styles.ts | 18 +++++------ src/components/Header/HeaderMenu.tsx | 2 +- .../Header/__snapshots__/Header.test.tsx.snap | 2 ++ src/components/Header/styles.ts | 13 ++++---- src/components/Icon/styles.ts | 1 + .../LoginDialog/LoginDialogHeader.tsx | 27 ++++++++--------- src/components/NotFound/NotFound.tsx | 20 ++++++------- src/components/Package/styles.ts | 19 ++++++------ src/design-tokens/theme.ts | 6 ++-- src/muiComponents/MenuItem/MenuItem.tsx | 7 ++++- 14 files changed, 92 insertions(+), 70 deletions(-) diff --git a/src/App/__snapshots__/App.test.tsx.snap b/src/App/__snapshots__/App.test.tsx.snap index b76b1c4..cc240d3 100644 --- a/src/App/__snapshots__/App.test.tsx.snap +++ b/src/App/__snapshots__/App.test.tsx.snap @@ -7,6 +7,7 @@ exports[` should display the Header component 1`] = ` .emotion-24 { background-color: #4b5e40; + color: #fff; min-height: 60px; display: -webkit-box; display: -webkit-flex; @@ -731,6 +732,7 @@ exports[` should display the Loading component at the beginning 1`] = ` .emotion-24 { background-color: #4b5e40; + color: #fff; min-height: 60px; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/ActionBar/ActionBarAction.tsx b/src/components/ActionBar/ActionBarAction.tsx index 6f46b63..b441b37 100644 --- a/src/components/ActionBar/ActionBarAction.tsx +++ b/src/components/ActionBar/ActionBarAction.tsx @@ -12,10 +12,14 @@ import { Theme } from '../../design-tokens/theme'; import downloadTarball from './download-tarball'; -export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ - backgroundColor: props.theme && props.theme.palette.primary.main, - color: props.theme && props.theme.palette.white, +export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({ + backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue, + color: theme?.palette.white, marginRight: 10, + ':hover': { + color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue, + background: theme?.palette.white, + }, })); type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL'; diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap index d840e10..ba2e2c2 100644 --- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap @@ -7,6 +7,11 @@ exports[` component should render the component in default state 1` margin-right: 10px; } +.emotion-0:hover { + color: #4b5e40; + background: #fff; +} +
diff --git a/src/components/DetailSidebar/DetailSidebarFundButton.tsx b/src/components/DetailSidebar/DetailSidebarFundButton.tsx index fb1e87f..2c32ed8 100644 --- a/src/components/DetailSidebar/DetailSidebarFundButton.tsx +++ b/src/components/DetailSidebar/DetailSidebarFundButton.tsx @@ -9,21 +9,6 @@ import { isURL } from '../../utils/url'; import { Theme } from '../../design-tokens/theme'; import { DetailContext } from '../../pages/Version'; -const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({ - marginTop: theme && theme.spacing(1), - marginBottom: theme && theme.spacing(1), - textDecoration: 'none', - display: 'block', -})); - -const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({ - color: theme && theme.palette.orange, -})); - -const StyledFundStrong = styled('strong')({ - marginRight: 3, -}); - /* eslint-disable react/jsx-no-bind */ const DetailSidebarFundButton: React.FC = () => { const detailContext = useContext(DetailContext); @@ -46,3 +31,18 @@ const DetailSidebarFundButton: React.FC = () => { }; export default DetailSidebarFundButton; + +const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({ + marginTop: theme?.spacing(1), + marginBottom: theme?.spacing(1), + textDecoration: 'none', + display: 'block', +})); + +const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({ + color: theme?.palette.orange, +})); + +const StyledFundStrong = styled('strong')({ + marginRight: 3, +}); diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts index 13c956f..3ea4570 100644 --- a/src/components/Footer/styles.ts +++ b/src/components/Footer/styles.ts @@ -4,7 +4,7 @@ import Icon from '../Icon/Icon'; import { Theme } from '../../design-tokens/theme'; export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({ - background: theme?.palette.type === 'dark' ? theme?.palette.primary.main : theme?.palette.snow, + background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue, borderTop: `1px solid ${theme?.palette.greyGainsboro}`, color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01, fontSize: '14px', @@ -16,13 +16,13 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({ alignItems: 'center', justifyContent: 'flex-end', width: '100%', - [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: { + [`@media (min-width: ${theme?.breakPoints.medium}px)`]: { minWidth: 400, maxWidth: 800, margin: 'auto', justifyContent: 'space-between', }, - [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: { + [`@media (min-width: ${theme?.breakPoints.large}px)`]: { maxWidth: 1240, }, })); @@ -30,7 +30,7 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({ export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({ alignItems: 'center', display: 'none', - [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: { + [`@media (min-width: ${theme?.breakPoints.medium}px)`]: { display: 'flex', }, })); @@ -43,9 +43,9 @@ export const Earth = styled(Icon)({ padding: '0 10px', }); -export const Flags = styled('span')<{ theme?: Theme }>(props => ({ +export const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({ position: 'absolute', - background: props.theme && props.theme.palette.greyAthens, + background: theme?.palette.greyAthens, padding: '1px 4px', borderRadius: 3, height: 20, @@ -60,7 +60,7 @@ export const Flags = styled('span')<{ theme?: Theme }>(props => ({ left: -4, marginLeft: -5, border: '5px solid', - borderColor: `${props.theme && props.theme.palette.greyAthens} transparent transparent transparent`, + borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`, transform: 'rotate(90deg)', }, })); @@ -75,8 +75,8 @@ export const ToolTip = styled('span')({ }, }); -export const Love = styled('span')<{ theme?: Theme }>(props => ({ - color: props.theme && props.theme.palette.love, +export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({ + color: theme?.palette.love, padding: '0 5px', })); diff --git a/src/components/Header/HeaderMenu.tsx b/src/components/Header/HeaderMenu.tsx index 7d1d190..a78b9e5 100644 --- a/src/components/Header/HeaderMenu.tsx +++ b/src/components/Header/HeaderMenu.tsx @@ -47,7 +47,7 @@ const HeaderMenu: React.FC = ({ vertical: 'top', horizontal: 'right', }}> - + diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap index 6ee0104..c47f34a 100644 --- a/src/components/Header/__snapshots__/Header.test.tsx.snap +++ b/src/components/Header/__snapshots__/Header.test.tsx.snap @@ -3,6 +3,7 @@ exports[`
component with logged in state should load the component in logged in state 1`] = ` .emotion-24 { background-color: #4b5e40; + color: #fff; min-height: 60px; display: -webkit-box; display: -webkit-flex; @@ -360,6 +361,7 @@ exports[`
component with logged in state should load the component in exports[`
component with logged in state should load the component in logged out state 1`] = ` .emotion-24 { background-color: #4b5e40; + color: #fff; min-height: 60px; display: -webkit-box; display: -webkit-flex; diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index d80c950..b208644 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -54,11 +54,12 @@ export const SearchWrapper = styled('div')({ }); export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({ - backgroundColor: theme && theme.palette.primary.main, + backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue, + color: theme?.palette.white, minHeight: 60, display: 'flex', justifyContent: 'center', - [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css` + [`@media (min-width: ${theme?.breakPoints.medium}px)`]: css` ${SearchWrapper} { display: flex; } @@ -69,12 +70,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({ display: none; } `, - [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css` + [`@media (min-width: ${theme?.breakPoints.large}px)`]: css` ${InnerNavBar} { padding: 0 20px; } `, - [`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css` + [`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css` ${InnerNavBar} { max-width: 1240px; width: 100%; @@ -83,6 +84,6 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({ `, })); -export const StyledLink = styled(Link)<{ theme?: Theme }>(props => ({ - color: props.theme && props.theme.palette.white, +export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({ + color: theme?.palette.white, })); diff --git a/src/components/Icon/styles.ts b/src/components/Icon/styles.ts index 917e6c6..81f46ee 100644 --- a/src/components/Icon/styles.ts +++ b/src/components/Icon/styles.ts @@ -20,6 +20,7 @@ interface CommonStyleProps { size: Breakpoint; pointer?: boolean; } + const commonStyle = ({ size = 'sm', pointer }: CommonStyleProps): object => ({ display: 'inline-block', cursor: pointer ? 'pointer' : 'default', diff --git a/src/components/LoginDialog/LoginDialogHeader.tsx b/src/components/LoginDialog/LoginDialogHeader.tsx index dcfd22e..3ece681 100644 --- a/src/components/LoginDialog/LoginDialogHeader.tsx +++ b/src/components/LoginDialog/LoginDialogHeader.tsx @@ -9,20 +9,6 @@ import Avatar from '../../muiComponents/Avatar'; import Box from '../../muiComponents/Box'; import IconButton from '../../muiComponents/IconButton'; import { Theme } from '../../design-tokens/theme'; - -const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({ - margin: theme.spacing(1), - backgroundColor: theme.palette.primary.main, - color: theme.palette.white, -})); - -const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({ - position: 'absolute', - right: theme.spacing() / 2, - top: theme.spacing() / 2, - color: theme.palette.grey[500], -})); - interface Props { onClose?: () => void; } @@ -46,3 +32,16 @@ const LoginDialogHeader: React.FC = ({ onClose }) => { }; export default LoginDialogHeader; + +const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({ + margin: theme?.spacing(1), + backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue, + color: theme?.palette.white, +})); + +const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({ + position: 'absolute', + right: theme?.spacing() / 2, + top: theme?.spacing() / 2, + color: theme?.palette.grey[500], +})); diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx index cb74068..76c5f13 100644 --- a/src/components/NotFound/NotFound.tsx +++ b/src/components/NotFound/NotFound.tsx @@ -10,16 +10,6 @@ import { Theme } from '../../design-tokens/theme'; import PackageImg from './img/package.svg'; -const EmptyPackage = styled('img')({ - width: '150px', - margin: '0 auto', -}); - -const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({ - color: props.theme && props.theme.palette.primary.main, - marginBottom: 16, -})); - const NotFound: React.FC = () => { const history = useHistory(); const { t } = useTranslation(); @@ -49,3 +39,13 @@ const NotFound: React.FC = () => { }; export default NotFound; + +const EmptyPackage = styled('img')({ + width: '150px', + margin: '0 auto', +}); + +const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({ + color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white, + marginBottom: 16, +})); diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index aec0a71..aaf5adb 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -15,7 +15,7 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({ display: 'flex', alignItems: 'center', margin: '0 0 0 16px', - color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue, + color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white, fontSize: 12, [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: { ':nth-of-type(3)': { @@ -31,18 +31,18 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({ export const Icon = styled(Ico)<{ theme?: Theme }>(({ theme }) => ({ margin: '2px 10px 0 0', - fill: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue, + fill: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white, })); export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({ - color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue, + color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white, margin: '0 5px 0 0', })); export const Text = styled(Label)<{ theme?: Theme }>(({ theme }) => ({ fontSize: '12px', fontWeight: theme?.fontWeight.semiBold, - color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue, + color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white, })); export const Details = styled('span')({ @@ -71,7 +71,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({ fontSize: 20, display: 'block', marginBottom: 12, - color: theme?.palette.type == 'dark' ? theme?.palette.white : theme?.palette.eclipse, + color: theme?.palette.type == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse, cursor: 'pointer', [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: { fontSize: 14, @@ -86,7 +86,7 @@ export const GridRightAligned = styled(Grid)({ export const PackageList = styled(List)<{ theme?: Theme }>(({ theme }) => ({ padding: '12px 0 12px 0', ':hover': { - backgroundColor: theme?.palette?.type == 'dark' ? theme?.palette?.primary.main : theme?.palette?.greyLight3, + backgroundColor: theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3, }, '> :last-child': { paddingTop: 0, @@ -104,7 +104,8 @@ export const IconButton = styled(MuiIconButton)({ export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({ marginTop: 8, marginBottom: 12, - display: 'block', + display: 'flex', + flexWrap: 'wrap', [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: { display: 'none', }, @@ -114,8 +115,8 @@ export const PackageListItemText = styled(ListItemText)({ paddingRight: 0, }); -export const Description = styled(Typography)<{ theme?: Theme }>(props => ({ - color: props.theme && props.theme.palette.greyDark2, +export const Description = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({ + color: theme?.palette.type === 'light' ? theme?.palette.greyDark2 : theme?.palette.white, fontSize: '14px', paddingRight: 0, })); diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts index b9d73e5..05a90b6 100644 --- a/src/design-tokens/theme.ts +++ b/src/design-tokens/theme.ts @@ -25,6 +25,7 @@ const colors = { secondary: '#20232a', background: '#fff', dodgerBlue: '#1ba1f2', + cyanBlue: '#253341', }; const themeModes = { @@ -33,8 +34,8 @@ const themeModes = { }, dark: { ...colors, - primary: '#253341', - secondary: '#20232a', + primary: '#fff', + secondary: '#424242', background: '#1A202C', }, }; @@ -132,6 +133,7 @@ declare module '@material-ui/core/styles/createPalette' { nobel02: string; background: string; dodgerBlue: string; + cyanBlue: string; } /* eslint-disable-next-line @typescript-eslint/no-empty-interface */ diff --git a/src/muiComponents/MenuItem/MenuItem.tsx b/src/muiComponents/MenuItem/MenuItem.tsx index 18e8587..b548a13 100644 --- a/src/muiComponents/MenuItem/MenuItem.tsx +++ b/src/muiComponents/MenuItem/MenuItem.tsx @@ -1,4 +1,5 @@ import React, { forwardRef } from 'react'; +import styled from '@emotion/styled'; import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem'; type HTMLElementTagName = keyof HTMLElementTagNameMap; @@ -11,7 +12,7 @@ interface Props extends Omit { const MenuItem = forwardRef(function MenuItem({ button, ...props }, ref) { // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971 // eslint-disable-next-line @typescript-eslint/no-explicit-any - return ; + return ; }); MenuItem.defaultProps = { @@ -19,3 +20,7 @@ MenuItem.defaultProps = { }; export default MenuItem; + +const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({ + outline: 'none', +});