cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
* ref(styles): updated dark colors

* updated snaps
This commit is contained in:
Priscila Oliveira 2020-04-05 19:34:42 +02:00 committed by GitHub
parent 1e1c088ac3
commit d29aa05cc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 92 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App/__snapshots__/App.test.tsx.snap
View File

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

10
src/components/ActionBar/ActionBarAction.tsx
View File

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

5
src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
View File

@ -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"
>

30
src/components/DetailSidebar/DetailSidebarFundButton.tsx
View File

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

18
src/components/Footer/styles.ts
View File

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

2
src/components/Header/HeaderMenu.tsx
View File

@ -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}>

2
src/components/Header/__snapshots__/Header.test.tsx.snap
View File

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

13
src/components/Header/styles.ts
View File

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

1
src/components/Icon/styles.ts
View File

@ -20,6 +20,7 @@ interface CommonStyleProps {
size: Breakpoint;
pointer?: boolean;
}
const commonStyle = ({ size = 'sm', pointer }: CommonStyleProps): object => ({
display: 'inline-block',
cursor: pointer ? 'pointer' : 'default',

27
src/components/LoginDialog/LoginDialogHeader.tsx
View File

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

20
src/components/NotFound/NotFound.tsx
View File

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

19
src/components/Package/styles.ts
View File

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

6
src/design-tokens/theme.ts
View File

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

7
src/muiComponents/MenuItem/MenuItem.tsx
View File

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