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

Refactor: move styles utils to theme (#363)

Browse Source
This commit is contained in:
Priscila Oliveira
2019-12-12 12:10:27 -03:00
committed by GitHub
parent 172e470780
commit fd99be6818
25 changed files with 130 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Author/styles.ts
View File

@@ -1,14 +1,14 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import ListItemText from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const AuthorListItem = styled(ListItem)({
padding: 0,

9
src/components/AutoComplete/AutoComplete.tsx
View File

@@ -4,13 +4,13 @@ import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } fro
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import { fontWeight } from '../../utils/styles/sizes';
import MenuItem from '../../muiComponents/MenuItem';
import { Theme } from '../../design-tokens/theme';
import { Wrapper, InputField, SuggestionContainer } from './styles';
const StyledAnchor = styled('a')<{ fw: number }>(props => ({
fontWeight: props.fw,
const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>(props => ({
fontWeight: props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
}));
const StyledMenuItem = styled(MenuItem)({
@@ -64,9 +64,8 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
<StyledMenuItem component="div" selected={isHighlighted}>
<div>
{parts.map((part, index) => {
const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
return (
<StyledAnchor fw={fw} key={String(index)}>
<StyledAnchor highlight={part.highlight} key={String(index)}>
{part.text}
</StyledAnchor>
);

8
src/components/Dependencies/styles.ts
View File

@@ -1,18 +1,18 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import Card from '../../muiComponents/Card';
import Chip from '../../muiComponents/Chip';
import { Theme } from '../../design-tokens/theme';
export const CardWrap = styled(Card)({
margin: '0 0 16px',
});
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const Tags = styled('div')({
display: 'flex',

7
src/components/Developers/styles.ts
View File

@@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import { Theme } from '../../design-tokens/theme';
@@ -20,11 +19,11 @@ export const Content = styled('div')({
},
});
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
marginBottom: '10px',
textTransform: 'capitalize',
});
}));
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,

9
src/components/Dist/styles.ts
View File

@@ -1,16 +1,15 @@
import styled from '@emotion/styled';
import { Theme } from '../../design-tokens/theme';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import Chip from '../../muiComponents/Chip';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const DistListItem = styled(ListItem)({
paddingLeft: 0,

8
src/components/Engines/styles.ts
View File

@@ -1,13 +1,13 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const EngineListItem = styled(ListItem)({
paddingLeft: 0,

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

@@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { breakpoints } from '../../utils/styles/media';
import Icon from '../Icon/Icon';
import { Theme } from '../../design-tokens/theme';
@@ -12,29 +11,29 @@ export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
padding: '20px',
}));
export const Inner = styled('div')({
export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: '100%',
[`@media (min-width: ${breakpoints.medium}px)`]: {
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
minWidth: 400,
maxWidth: 800,
margin: 'auto',
justifyContent: 'space-between',
},
[`@media (min-width: ${breakpoints.large}px)`]: {
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
maxWidth: 1240,
},
});
}));
export const Left = styled('div')({
export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
alignItems: 'center',
display: 'none',
[`@media (min-width: ${breakpoints.medium}px)`]: {
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
display: 'flex',
},
});
}));
export const Right = styled(Left)({
display: 'flex',

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

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Theme } from '../../design-tokens/theme';
import { breakpoints } from '../../utils/styles/media';
import IconButton from '../../muiComponents/IconButton';
import AppBar from '../../muiComponents/AppBar';
import Toolbar from '../../muiComponents/Toolbar';
@@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
width: '100%',
});
export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
backgroundColor: theme && theme.palette.primary.main,
minHeight: 60,
display: 'flex',
justifyContent: 'center',
[`@media (min-width: ${breakpoints.medium}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
${SearchWrapper} {
display: flex;
}
@@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
display: none;
}
`,
[`@media (min-width: ${breakpoints.large}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
${InnerNavBar} {
padding: 0 20px;
}
`,
[`@media (min-width: ${breakpoints.xlarge}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
${InnerNavBar} {
max-width: 1240px;
width: 100%;

8
src/components/Install/Install.tsx
View File

@@ -2,16 +2,16 @@ import React, { useContext } from 'react';
import styled from '@emotion/styled';
import { DetailContext } from '../../pages/Version';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import List from '../../muiComponents/List';
import { Theme } from '../../design-tokens/theme';
import InstallListItem, { DependencyManager } from './InstallListItem';
const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
const Install: React.FC = () => {
const detailContext = useContext(DetailContext);

6
src/components/Label/Label.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import { Theme } from '../../design-tokens/theme';
interface Props {
text: string;
@@ -14,8 +14,8 @@ interface WrapperProps {
weight: string;
}
const Wrapper = styled('div')<WrapperProps>(props => ({
fontWeight: fontWeight[props.weight],
const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight[props.weight],
textTransform: props.capitalize ? 'capitalize' : 'none',
}));

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

@@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button';
import Heading from '../../muiComponents/Heading';
import { spacings } from '../../utils/styles/spacings';
import { Theme } from '../../design-tokens/theme';
import PackageImg from './img/package.svg';
@@ -21,7 +20,7 @@ const EmptyPackage = styled('img')({
const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main,
marginBottom: spacings.sm,
marginBottom: 16,
}));
const NotFound: React.FC = () => {

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

@@ -1,10 +1,8 @@
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { breakpoints } from '../../utils/styles/media';
import Ico from '../Icon';
import Label from '../Label';
import { fontWeight } from '../../utils/styles/sizes';
import { default as MuiIconButton } from '../../muiComponents/IconButton';
import { default as Photo } from '../../muiComponents/Avatar';
import List from '../../muiComponents/List';
@@ -13,18 +11,18 @@ import Grid from '../../muiComponents/Grid';
import ListItemText from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({
export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
display: 'flex',
alignItems: 'center',
margin: '0 0 0 16px',
color: props.theme && props.theme.palette.greyLight2,
color: theme && theme.palette.greyLight2,
fontSize: 12,
[`@media (max-width: ${breakpoints.medium}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
':nth-of-type(3)': {
display: 'none',
},
},
[`@media (max-width: ${breakpoints.small}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
':nth-of-type(4)': {
display: 'none',
},
@@ -43,7 +41,7 @@ export const Published = styled('span')<{ theme?: Theme }>(props => ({
export const Text = styled(Label)<{ theme?: Theme }>(props => ({
fontSize: '12px',
fontWeight: fontWeight.semiBold,
fontWeight: props.theme && props.theme.fontWeight.semiBold,
color: props.theme && props.theme.palette.greyLight2,
}));
@@ -68,17 +66,17 @@ export const WrapperLink = styled(Link)({
textDecoration: 'none',
});
export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({
fontWeight: 600,
export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
fontSize: 20,
display: 'block',
marginBottom: 12,
color: props.theme && props.theme.palette.eclipse,
color: theme && theme.palette.eclipse,
cursor: 'pointer',
':hover': {
color: props.theme && props.theme.palette.black,
color: theme && theme.palette.black,
},
[`@media (max-width: ${breakpoints.small}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
fontSize: 14,
marginBottom: 8,
},
@@ -105,14 +103,14 @@ export const IconButton = styled(MuiIconButton)({
},
});
export const TagContainer = styled('span')({
export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
marginTop: 8,
marginBottom: 12,
display: 'block',
[`@media (max-width: ${breakpoints.medium}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
display: 'none',
},
});
}));
export const PackageListItemText = styled(ListItemText)({
paddingRight: 0,

8
src/components/PackageList/PackageList.tsx
View File

@@ -1,4 +1,5 @@
import React, { Fragment, ReactNode } from 'react';
import styled from '@emotion/styled';
import Package from '../Package';
import Help from '../Help';
@@ -6,7 +7,10 @@ import { formatLicense } from '../../utils/package';
import { PackageInterface } from '../Package/Package';
import Divider from '../../muiComponents/Divider';
import * as classes from './styles';
const PkgContainer = styled('div')({
margin: 0,
padding: 0,
});
interface Props {
packages: PackageInterface[];
@@ -32,7 +36,7 @@ export const PackageList: React.FC<Props> = ({ packages }) => {
return (
<div className={'package-list-items'}>
<div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
<PkgContainer>{hasPackages() ? renderPackages() : <Help />}</PkgContainer>
</div>
);
};

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

@@ -1,18 +0,0 @@
import { css } from 'emotion';
import { fontWeight, fontSize } from '../../utils/styles/sizes';
export const listTitle = css({
fontWeight: fontWeight.regular,
fontSize: fontSize.xl,
margin: `0 0 10px 0`,
});
export const pkgContainer = css`
margin: 0;
padding: 0;
& .listTitle {
${listTitle}
}
`;

3
src/components/RegistryInfoDialog/styles.ts
View File

@@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { fontSize } from '../../utils/styles/sizes';
import DialogTitle from '../../muiComponents/DialogTitle';
import DialogContent from '../../muiComponents/DialogContent';
import { Theme } from '../../design-tokens/theme';
@@ -8,7 +7,7 @@ import { Theme } from '../../design-tokens/theme';
export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
color: props.theme && props.theme.palette.white,
fontSize: fontSize.lg,
fontSize: props.theme && props.theme.fontSize.lg,
}));
export const Content = styled(DialogContent)({

7
src/components/Repository/Repository.tsx
View File

@@ -10,14 +10,13 @@ import CopyToClipBoard from '../CopyToClipBoard';
import List from '../../muiComponents/List';
import { DetailContext } from '../../pages/Version';
import { Theme } from '../../design-tokens/theme';
import { fontWeight } from '../../utils/styles/sizes';
import git from './img/git.png';
const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main,

8
src/components/UpLinks/styles.ts
View File

@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { fontWeight } from '../../utils/styles/sizes';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
});
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
}));
export const Spacer = styled('div')({
flex: '1 1 auto',

8
src/components/Versions/styles.ts
View File

@@ -1,13 +1,13 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
import Link from '../Link';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
});
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
}));
export const Spacer = styled('div')({
flex: '1 1 auto',