fix(styles): Updated dark colors (#455)

* ref(styles): updated dark colors

* updated snaps

src/App/__snapshots__/App.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`<App /> 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[`<App /> 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;

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';

src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap

@@ -7,6 +7,11 @@ exports[`<ActionBar /> component should render the component in default state 1`
   margin-right: 10px;
 }
 
+.emotion-0:hover {
+  color: #4b5e40;
+  background: #fff;
+}
+
 <div
   class="MuiBox-root MuiBox-root-2"
 >

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,
+});

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',
 }));
 

src/components/Header/HeaderMenu.tsx

@@ -47,7 +47,7 @@ const HeaderMenu: React.FC<Props> = ({
           vertical: 'top',
           horizontal: 'right',
         }}>
-        <MenuItem disabled={true}>
+        <MenuItem>
           <HeaderGreetings username={username} />
         </MenuItem>
         <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<Header /> 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[`<Header /> component with logged in state should load the component in
 exports[`<Header /> 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;

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,
 }));

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',

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<Props> = ({ 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],
+}));

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,
+}));

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,
 }));

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 */

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<MenuItemProps, 'component'> {
 const MenuItem = forwardRef<MenuItemRef, Props>(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 <MaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
+  return <StyledMaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
 });
 
 MenuItem.defaultProps = {
@@ -19,3 +20,7 @@ MenuItem.defaultProps = {
 };
 
 export default MenuItem;
+
+const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({
+  outline: 'none',
+});