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

Merge branch '4.x-master' into 4.x-adds-unit-tests-for-repository-component

Browse Source
This commit is contained in:
Juan Picado @jotadeveloper 2019-07-28 00:03:42 +02:00 committed by GitHub
commit dd54aaaf94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 538 additions and 537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.stylelintrc
View File

@ -26,6 +26,7 @@
"no-descending-specificity": [true, { "severity": "warning" }], "no-descending-specificity": [true, { "severity": "warning" }],
"no-duplicate-at-import-rules": true, "no-duplicate-at-import-rules": true,
"no-duplicate-selectors": true, "no-duplicate-selectors": true,
"no-empty-source": null,
"no-extra-semicolons": true, "no-extra-semicolons": true,
"no-invalid-double-slash-comments": true, "no-invalid-double-slash-comments": true,
"property-no-unknown": true, "property-no-unknown": true,

16
src/App/styles.ts
View File

@ -1,15 +1,15 @@
import { css } from 'emotion'; import { css } from 'emotion';
import colors from '../utils/styles/colors'; import colors from '../utils/styles/colors';
export const alertError = css` export const alertError = css({
background-color: ${colors.red} !important; backgroundColor: `${colors.red} !important`,
min-width: inherit !important; minWidth: 'inherit !important',
`; });
export const alertErrorMsg = css` export const alertErrorMsg = css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
`; });
export const alertIcon = css({ export const alertIcon = css({
opacity: 0.9, opacity: 0.9,

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

@ -4,18 +4,18 @@ import ListItem from '@material-ui/core/ListItem';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const ActionListItem = styled(ListItem)` export const ActionListItem = styled(ListItem)({
&& { '&&': {
padding-top: 0; paddingTop: 0,
padding-left: 0; paddingLeft: 0,
padding-right: 0; paddingRight: 0,
} },
`; });
export const Fab = styled(MuiFab)` export const Fab = styled(MuiFab)({
&& { '&&': {
background-color: ${colors.primary}; backgroundColor: colors.primary,
color: ${colors.white}; color: colors.white,
margin-right: 10px; marginRight: '10px',
} },
`; });

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

@ -2,15 +2,15 @@ import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const AuthorListItem = styled(ListItem)` export const AuthorListItem = styled(ListItem)({
&& { '&&': {
padding-left: 0; paddingLeft: 0,
padding-right: 0; paddingRight: 0,
} },
`; });

28
src/components/AutoComplete/styles.tsx
View File

@ -8,14 +8,14 @@ export interface InputFieldProps {
color: string; color: string;
} }
export const Wrapper = styled('div')` export const Wrapper = styled('div')({
&& { '&&': {
width: 100%; width: '100%',
height: 32px; height: '32px',
position: relative; position: 'relative',
z-index: 1; zIndex: 1,
} },
`; });
export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => ( export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
<TextField <TextField
@ -51,9 +51,9 @@ export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
/> />
); );
export const SuggestionContainer = styled(Paper)` export const SuggestionContainer = styled(Paper)({
&& { '&&': {
max-height: 500px; maxHeight: '500px',
overflow-y: auto; overflowY: 'auto',
} },
`; });

42
src/components/CopyToClipBoard/styles.ts
View File

@ -1,26 +1,26 @@
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import styled from 'react-emotion'; import styled from 'react-emotion';
export const ClipBoardCopy = styled('div')` export const ClipBoardCopy = styled('div')({
&& { '&&': {
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
justify-content: space-between; justifyContent: 'space-between',
} },
`; });
export const ClipBoardCopyText = styled('span')` export const ClipBoardCopyText = styled('span')({
&& { '&&': {
display: inline-block; display: 'inline-block',
text-overflow: ellipsis; textOverflow: 'ellipsis',
overflow: hidden; overflow: 'hidden',
white-space: nowrap; whiteSpace: 'nowrap',
height: 21px; height: '21px',
} },
`; });
export const CopyIcon = styled(IconButton)` export const CopyIcon = styled(IconButton)({
&& { '&&': {
margin: 0 0 0 10px; margin: '0 0 0 10px',
} },
`; });

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

@ -3,30 +3,30 @@ import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Chip from '@material-ui/core/Chip'; import Chip from '@material-ui/core/Chip';
export const CardWrap = styled(Card)` export const CardWrap = styled(Card)({
&& { '&&': {
margin: 0 0 16px; margin: '0 0 16px',
} },
`; });
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const Tags = styled('div')` export const Tags = styled('div')({
&& { '&&': {
display: flex; display: 'flex',
justify-content: start; justifyContent: 'start',
flex-wrap: wrap; flexWrap: 'wrap',
margin: 0 -5px; margin: '0 -5px',
} },
`; });
export const Tag = styled(Chip)` export const Tag = styled(Chip)({
&& { '&&': {
margin: 5px; margin: '5px',
} },
`; });

10
src/components/DetailContainer/styles.ts
View File

@ -1,7 +1,7 @@
import styled from 'react-emotion'; import styled from 'react-emotion';
export const Content = styled('div')` export const Content = styled('div')({
&& { '&&': {
padding: 15px; padding: '15px',
} },
`; });

42
src/components/DetailSidebar/styles.ts
View File

@ -5,26 +5,26 @@ import ListItemText from '@material-ui/core/ListItemText';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const TitleListItem = styled(ListItem)` export const TitleListItem = styled(ListItem)({
&& { '&&': {
padding-left: 0; paddingLeft: 0,
padding-right: 0; paddingRight: 0,
padding-bottom: 0; paddingBottom: 0,
} },
`; });
export const TitleListItemText = styled(ListItemText)` export const TitleListItemText = styled(ListItemText)({
&& { '&&': {
padding-left: 0; paddingLeft: 0,
padding-right: 0; paddingRight: 0,
padding-top: 8px; paddingTop: '8px',
} },
`; });
export const TitleAvatar = styled(Avatar)` export const TitleAvatar = styled(Avatar)({
&& { '&&': {
color: ${colors.greySuperLight}; color: colors.greySuperLight,
background-color: ${colors.primary}; backgroundColor: colors.primary,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });

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

@ -3,32 +3,32 @@ import Typography from '@material-ui/core/Typography';
import { default as MuiFab } from '@material-ui/core/Fab'; import { default as MuiFab } from '@material-ui/core/Fab';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const Details = styled('span')` export const Details = styled('span')({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
align-items: center; alignItems: 'center',
`; });
export const Content = styled('div')` export const Content = styled('div')({
margin: 10px 0 10px 0; margin: '10px 0 10px 0',
display: flex; display: 'flex',
flex-wrap: wrap; flexWrap: 'wrap',
> * { '> *': {
margin: 5px; margin: '5px',
} },
`; });
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
margin-bottom: 10px; marginBottom: '10px',
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const Fab = styled(MuiFab)` export const Fab = styled(MuiFab)({
&& { '&&': {
background-color: ${colors.primary}; backgroundColor: colors.primary,
color: ${colors.white}; color: colors.white,
} },
`; });

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

@ -6,30 +6,30 @@ import Typography from '@material-ui/core/Typography';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const DistListItem = styled(ListItem)` export const DistListItem = styled(ListItem)({
&& { '&&': {
padding-left: 0; paddingLeft: 0,
padding-right: 0; paddingRight: 0,
} },
`; });
export const DistChips = styled(Chip)` export const DistChips = styled(Chip)({
&& { '&&': {
margin-right: 5px; marginRight: '5px',
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const DownloadButton = styled(MuiFab)` export const DownloadButton = styled(MuiFab)({
&& { '&&': {
background-color: ${colors.primary}; backgroundColor: colors.primary,
color: ${colors.white}; color: colors.white,
} },
`; });

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

@ -2,15 +2,15 @@ import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const EngineListItem = styled(ListItem)` export const EngineListItem = styled(ListItem)({
&& { '&&': {
padding-left: 0; paddingLeft: 0,
} },
`; });

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

@ -3,15 +3,15 @@ import mq from '../../utils/styles/media';
import Icon from '../Icon/Icon'; import Icon from '../Icon/Icon';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const Wrapper = styled('div')` export const Wrapper = styled('div')({
&& { '&&': {
background: ${colors.snow}; background: colors.snow,
border-top: 1px solid ${colors.greyGainsboro}; borderTop: `1px solid ${colors.greyGainsboro}`,
color: ${colors.nobel01}; color: colors.nobel01,
font-size: 14px; fontSize: '14px',
padding: 20px; padding: '20px',
} },
`; });
export const Inner = styled('div')` export const Inner = styled('div')`
&& { && {
@ -50,24 +50,24 @@ export const Left = styled('div')`
} }
`; `;
export const Right = styled(Left)` export const Right = styled(Left)({
&& { '&&': {
display: flex; display: 'flex',
} },
`; });
export const ToolTip = styled('span')` export const ToolTip = styled('span')({
&& { '&&': {
position: relative; position: 'relative',
height: 18px; height: '18px',
} },
`; });
export const Earth = styled(Icon)` export const Earth = styled(Icon)({
&& { '&&': {
padding: 0 10px; padding: '0 10px',
} },
`; });
export const Flags = styled('span')` export const Flags = styled('span')`
&& { && {
@ -96,17 +96,17 @@ export const Flags = styled('span')`
} }
`; `;
export const Love = styled('span')` export const Love = styled('span')({
&& { '&&': {
color: ${colors.love}; color: colors.love,
padding: 0 5px; padding: '0 5px',
} },
`; });
export const Flag = styled(Icon)` export const Flag = styled(Icon)({
&& { '&&': {
padding: 0 5px; padding: '0 5px',
} },
`; });
export const Logo = Flag; export const Logo = Flag;

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

@ -6,67 +6,67 @@ import IconButton from '@material-ui/core/IconButton';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
import mq from '../../utils/styles/media'; import mq from '../../utils/styles/media';
export const InnerNavBar = styled(Toolbar)` export const InnerNavBar = styled(Toolbar)({
&& { '&&': {
justify-content: space-between; justifyContent: 'space-between',
align-items: center; alignItems: 'center',
padding: 0 15px; padding: '0 15px',
} },
`; });
export const Greetings = styled('span')` export const Greetings = styled('span')({
&& { '&&': {
margin: 0 5px 0 0; margin: '0 5px 0 0',
} },
`; });
export const RightSide = styled(Toolbar)` export const RightSide = styled(Toolbar)({
&& { '&&': {
display: flex; display: 'flex',
padding: 0; padding: 0,
} },
`; });
export const LeftSide = styled(RightSide)` export const LeftSide = styled(RightSide)({
&& { '&&': {
flex: 1; flex: 1,
} },
`; });
export const MobileNavBar = styled('div')` export const MobileNavBar = styled('div')({
&& { '&&': {
align-items: center; alignItems: 'center',
display: flex; display: 'flex',
border-bottom: 1px solid ${colors.greyLight}; borderBottom: `1px solid ${colors.greyLight}`,
padding: 8px; padding: '8px',
position: relative; position: 'relative',
} },
`; });
export const InnerMobileNavBar = styled('div')` export const InnerMobileNavBar = styled('div')({
&& { '&&': {
border-radius: 4px; borderRadius: '4px',
background-color: ${colors.greyLight}; backgroundColor: colors.greyLight,
color: ${colors.white}; color: colors.white,
width: 100%; width: '100%',
padding: 0px 5px; padding: '0px 5px',
margin: 0 10px 0 0; margin: '0 10px 0 0',
} },
`; });
export const IconSearchButton = styled(IconButton)` export const IconSearchButton = styled(IconButton)({
&& { '&&': {
display: block; display: 'block',
} },
`; });
export const SearchWrapper = styled('div')` export const SearchWrapper = styled('div')({
&& { '&&': {
display: none; display: 'none',
max-width: 393px; maxWidth: '393px',
width: 100%; width: '100%',
} },
`; });
export const NavBar = styled(AppBar)` export const NavBar = styled(AppBar)`
&& { && {

22
src/components/Help/styles.ts
View File

@ -2,15 +2,15 @@ import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion'; import styled from 'react-emotion';
export const CardStyled = styled(Card)` export const CardStyled = styled(Card)({
&& { '&&': {
width: 600px; width: '600px',
margin: auto; margin: 'auto',
} },
`; });
export const HelpTitle = styled(Typography)` export const HelpTitle = styled(Typography)({
&& { '&&': {
margin-bottom: 20px; marginBottom: '20px',
} },
`; });

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

@ -48,9 +48,9 @@ export const ImgWrapper: StyledOtherComponent<
} }
`; `;
export const Img = styled('img')` export const Img = styled('img')({
&& { '&&': {
width: 100%; width: '100%',
height: auto; height: 'auto',
} },
`; });

32
src/components/Install/styles.ts
View File

@ -3,21 +3,21 @@ import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion'; import styled from 'react-emotion';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const InstallItem = styled(ListItem)` export const InstallItem = styled(ListItem)({
&& { '&&': {
padding: 0; padding: 0,
} },
`; });
export const PackageMangerAvatar = styled(Avatar)` export const PackageMangerAvatar = styled(Avatar)({
&& { '&&': {
border-radius: 0px; borderRadius: '0px',
} },
`; });

18
src/components/Layout/Layout.tsx
View File

@ -1,14 +1,14 @@
import styled, { css } from 'react-emotion'; import styled, { css } from 'react-emotion';
export const Content = styled('div')` export const Content = styled('div')({
&& { '&&': {
background-color: #ffffff; backgroundColor: '#ffffff',
flex: 1; flex: 1,
display: flex; display: 'flex',
position: relative; position: 'relative',
flex-direction: column; flexDirection: 'column',
} },
`; });
export const Container = styled('div')` export const Container = styled('div')`
&& { && {

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

@ -5,16 +5,16 @@ export const loginDialog = css({
minWidth: '300px', minWidth: '300px',
}); });
export const loginError = css` export const loginError = css({
background-color: ${colors.red} !important; backgroundColor: `${colors.red} !important`,
min-width: inherit !important; minWidth: 'inherit !important',
margin-bottom: 10px !important; marginBottom: '10px !important',
`; });
export const loginErrorMsg = css` export const loginErrorMsg = css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
`; });
export const loginIcon = css({ export const loginIcon = css({
opacity: 0.9, opacity: 0.9,

62
src/components/NotFound/styles.ts
View File

@ -3,39 +3,39 @@ import { default as MuiList } from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion'; import styled from 'react-emotion';
export const Wrapper = styled('div')` export const Wrapper = styled('div')({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
flex-direction: column; flexDirection: 'column',
justify-content: center; justifyContent: 'center',
flex: 1; flex: 1,
padding: 16px; padding: '16px',
`; });
export const Inner = styled('div')` export const Inner = styled('div')({
max-width: 650px; maxWidth: '650px',
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
`; });
export const EmptyPackage = styled('img')` export const EmptyPackage = styled('img')({
width: 150px; width: '150px',
margin: 0 auto; margin: '0 auto',
`; });
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
color: #4b5e40; color: '#4b5e40',
} },
`; });
export const List = styled(MuiList)` export const List = styled(MuiList)({
&& { '&&': {
padding: 0; padding: 0,
color: #4b5e40; color: '#4b5e40',
} },
`; });
export const Card = styled(MuiCard)` export const Card = styled(MuiCard)({
margin-top: 24px; marginTop: '24px',
`; });

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

@ -34,57 +34,57 @@ export const OverviewItem = styled('span')`
} }
`; `;
export const Icon = styled(Ico)` export const Icon = styled(Ico)({
&& { '&&': {
margin: 2px 10px 0px 0; margin: '2px 10px 0px 0',
fill: ${colors.greyLight2}; fill: colors.greyLight2,
} },
`; });
export const Published = styled('span')` export const Published = styled('span')({
&& { '&&': {
color: ${colors.greyLight2}; color: colors.greyLight2,
margin: 0px 5px 0px 0px; margin: '0px 5px 0px 0px',
} },
`; });
// @ts-ignore // @ts-ignore
export const Text = styled(Label)` export const Text = styled(Label)({
&& { '&&': {
font-size: 12px; fontSize: '12px',
font-weight: 500; fontWeight: 500,
color: ${colors.greyLight2}; color: colors.greyLight2,
} },
`; });
export const Details = styled('span')` export const Details = styled('span')({
&& { '&&': {
margin-left: 5px; marginLeft: '5px',
line-height: 1.5; lineHeight: 1.5,
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
} },
`; });
export const Author = styled('div')` export const Author = styled('div')({
&& { '&&': {
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
} },
`; });
export const Avatar = styled(Photo)` export const Avatar = styled(Photo)({
&& { '&&': {
width: 20px; width: '20px',
height: 20px; height: '20px',
} },
`; });
export const WrapperLink = styled(Link)` export const WrapperLink = styled(Link)({
&& { '&&': {
text-decoration: none; textDecoration: 'none',
} },
`; });
export const PackageTitle = styled('span')` export const PackageTitle = styled('span')`
&& { && {
@ -106,31 +106,31 @@ export const PackageTitle = styled('span')`
} }
`; `;
export const GridRightAligned = styled(Grid)` export const GridRightAligned = styled(Grid)({
&& { '&&': {
text-align: right; textAlign: 'right',
} },
`; });
export const PackageList = styled(List)` export const PackageList = styled(List)({
&& { '&&': {
padding: 12px 0 12px 0; padding: '12px 0 12px 0',
&:hover { '&:hover': {
background-color: ${colors.greyLight3}; backgroundColor: colors.greyLight3,
} },
} },
`; });
export const IconButton = styled(MuiIconButton)` export const IconButton = styled(MuiIconButton)({
&& { '&&': {
padding: 6px; padding: '6px',
svg { svg: {
font-size: 16px; fontSize: '16px',
} },
} },
`; });
export const TagContainer = styled('span')` export const TagContainer = styled('span')`
&& { && {
@ -143,20 +143,20 @@ export const TagContainer = styled('span')`
} }
`; `;
export const PackageListItem = styled(ListItem)` export const PackageListItem = styled(ListItem)({
&& { '&&': {
padding-top: 0; paddingTop: 0,
} },
`; });
export const PackageListItemText = styled(ListItemText)` export const PackageListItemText = styled(ListItemText)({
&& { '&&': {
padding-right: 0; paddingRight: 0,
} },
`; });
export const Description = styled(Typography)` export const Description = styled(Typography)({
color: ${colors.greyDark2}; color: colors.greyDark2,
font-size: 14px; fontSize: '14px',
padding-right: 0; paddingRight: 0,
`; });

10
src/components/RegistryInfoContent/styles.ts
View File

@ -1,7 +1,7 @@
import styled from 'react-emotion'; import styled from 'react-emotion';
export const CommandContainer = styled('div')` export const CommandContainer = styled('div')({
&& { '&&': {
padding-top: 20px; paddingTop: '20px',
} },
`; });

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

@ -4,16 +4,16 @@ import DialogContent from '@material-ui/core/DialogContent';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
import { fontSize } from '../../utils/styles/sizes'; import { fontSize } from '../../utils/styles/sizes';
export const Title = styled(DialogTitle)` export const Title = styled(DialogTitle)({
&& { '&&': {
background-color: ${colors.primary}; backgroundColor: colors.primary,
color: ${colors.white}; color: colors.white,
font-size: ${fontSize.lg}; fontSize: fontSize.lg,
} },
`; });
export const Content = styled(DialogContent)` export const Content = styled(DialogContent)({
&& { '&&': {
padding: 0 24px; padding: '0 24px',
} },
`; });

58
src/components/Repository/styles.ts
View File

@ -6,36 +6,36 @@ import Typography from '@material-ui/core/Typography';
import Github from '../../icons/GitHub'; import Github from '../../icons/GitHub';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
text-transform: capitalize; textTransform: 'capitalize',
} },
`; });
export const GridRepo = styled(Grid)` export const GridRepo = styled(Grid)({
&& { '&&': {
align-items: center; alignItems: 'center',
} },
`; });
export const GithubLink = styled('a')` export const GithubLink = styled('a')({
&& { '&&': {
color: ${colors.primary}; color: colors.primary,
} },
`; });
export const GithubLogo = styled(Github)` export const GithubLogo = styled(Github)({
&& { '&&': {
font-size: 40px; fontSize: '40px',
color: ${colors.primary}; color: colors.primary,
background-color: ${colors.greySuperLight}; backgroundColor: colors.greySuperLight,
} },
`; });
export const RepositoryListItem = styled(ListItem)` export const RepositoryListItem = styled(ListItem)({
&& { '&&': {
padding-left: 0; paddingLeft: 0,
padding-right: 0; paddingRight: 0,
} },
`; });

10
src/components/Spinner/styles.ts
View File

@ -20,8 +20,8 @@ export const Wrapper = styled('div')`
} }
`; `;
export const Circular = styled(CircularProgress)` export const Circular = styled(CircularProgress)({
&& { '&&': {
color: ${colors.primary}; color: colors.primary,
} },
`; });

22
src/components/Tag/styles.ts
View File

@ -1,13 +1,13 @@
import styled from 'react-emotion'; import styled from 'react-emotion';
export const Wrapper = styled('span')` export const Wrapper = styled('span')({
&& { '&&': {
vertical-align: middle; verticalAlign: 'middle',
line-height: 22px; lineHeight: '22px',
border-radius: 2px; borderRadius: '2px',
color: #485a3e; color: '#485a3e',
background-color: #f3f4f2; backgroundColor: '#f3f4f2',
padding: 0.22rem 0.4rem; padding: '0.22rem 0.4rem',
margin: 8px 8px 0 0; margin: '8px 8px 0 0',
} },
`; });

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

@ -2,23 +2,23 @@ import styled from 'react-emotion';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { default as MuiListItemText } from '@material-ui/core/ListItemText'; import { default as MuiListItemText } from '@material-ui/core/ListItemText';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
} },
`; });
export const Spacer = styled('div')` export const Spacer = styled('div')({
flex: 1 1 auto; flex: '1 1 auto',
border-bottom: 1px dotted rgba(0, 0, 0, 0.2); borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
white-space: nowrap; whiteSpace: 'nowrap',
height: 0.5em; height: '0.5em',
`; });
export const ListItemText = styled(MuiListItemText)` export const ListItemText = styled(MuiListItemText)({
&& { '&&': {
flex: none; flex: 'none',
color: black; color: 'black',
opacity: 0.6; opacity: 0.6,
} },
`; });

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

@ -2,23 +2,23 @@ import styled from 'react-emotion';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { default as MuiListItemText } from '@material-ui/core/ListItemText'; import { default as MuiListItemText } from '@material-ui/core/ListItemText';
export const Heading = styled(Typography)` export const Heading = styled(Typography)({
&& { '&&': {
font-weight: 700; fontWeight: 700,
} },
`; });
export const Spacer = styled('div')` export const Spacer = styled('div')({
flex: 1 1 auto; flex: '1 1 auto',
border-bottom: 1px dotted rgba(0, 0, 0, 0.2); borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
white-space: nowrap; whiteSpace: 'nowrap',
height: 0.5em; height: '0.5em',
`; });
export const ListItemText = styled(MuiListItemText)` export const ListItemText = styled(MuiListItemText)({
&& { '&&': {
flex: none; flex: 'none',
color: black; color: 'black',
opacity: 0.6; opacity: 0.6,
} },
`; });

14
src/pages/version/styles.ts
View File

@ -3,10 +3,10 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
import { fontSize } from '../../utils/styles/sizes'; import { fontSize } from '../../utils/styles/sizes';
export const Title = styled(DialogTitle)` export const Title = styled(DialogTitle)({
&& { '&&': {
background-color: ${colors.primary}; backgroundColor: colors.primary,
color: ${colors.white}; color: colors.white,
font-size: ${fontSize.lg}; fontSize: fontSize.lg,
} },
`; });