Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// eslint-disable-next-line no-console
console.log('Mouse leave - Index:', i, 'Event:', e);
}
}}
/>
);
};
Participants.propTypes = {
topic: PropTypes.instanceOf(TopicModel).isRequired,
likes: PropTypes.number,
};
const StyledParticipants = styled.figure`
flex: 1;
`;
export default Participants;
// Load illustrations
const requireTest = require.context(
'../styles/img/illustrations',
true,
/\/\d+\.svg$/
);
console.log(requireTest.keys());
const illustrations = requireTest.keys().map(requireTest);
const Caption = styled.figcaption`
color: var(--gray-dark);
font-weight: 300;
`;
const Figure = styled.figure`
text-align: center;
`;
const EmptyView = ({ caption, imageSrc, className }) => {
return (
<figure>
{imageSrc && <img src="{imageSrc}">}
{caption}
</figure>
);
};
EmptyView.propTypes = {
caption: PropTypes.string,
)}
/>
);
const HeaderWrapper = styled.header`
background-color: ${props => props.theme.color.primary};
padding-top: 96px;
@media (max-width: ${props => props.theme.screen.md}) {
padding-top: 128px;
}
`;
const Art = styled.figure`
width: 100%;
margin: 0;
> div {
width: 120%;
margin-bottom: -4.5%;
@media (max-width: ${props => props.theme.screen.md}) {
width: 100%;
}
}
`;
const Grid = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
transform-style: preserve-3d;
will-change: transform;
`;
const Moon = styled.div`
position: absolute;
width: ${props => props.size}px;
height: ${props => props.size}px;
top: 0;
left: 0;
right: 0;
margin: auto;
transform-style: preserve-3d;
`;
const Side = styled.figure`
position: absolute;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
background: white;
`;
const Top = styled(Side)`
transform: rotateY(0deg) translateZ(${p => p.radius}px);
background: ${props => props.color};
`;
const Bottom = styled(Side)`
transform: rotateX(180deg) translateZ(${p => p.radius}px);
background: ${props => props.color};
`;
align-items: center;
background: white;
font-size: 20px;
padding: 16px 0;
height: 100%;
transition: .5s ease;
position: relative;
overflow: hidden;
`;
export const AppFigureWrapper = styled.div`
width: 50vw;
height: 190px;
`;
export const AppFigure = styled.figure`
border-radius: 50%;
padding: 3px;
display: flex;
justify-content: center;
flex: 0 0 auto;
height: 100%;
background-color: #fff;
`;
export const AppIcon = styled.img`
width: 50%;
object-fit: scale-down;
padding: 2px;
flex: 0 0 75%;
`;
import React from 'react';
import PropTypes from 'prop-types';
import Colors from '../../styles/Colors';
import Text from '../../components/Text';
import styled from 'styled-components';
const TopicDescription = props => (
);
const StyledTopicDescription = styled.figure`
flex: 2;
`;
TopicDescription.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
};
export default TopicDescription;
`;
export const HandleContainer = styled.div`
margin-right: 16px;
${mediaQueries.MOBILE_SMALL} {
display: inline;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 75px;
margin-right: 8px;
}
`;
export const UserAvatarFigure = styled.figure`
background-color: ${colors.accent.CIVIL_TEAL};
border: 2px solid ${colors.basic.WHITE};
border-radius: 50%;
height: 36px;
margin: 0 8px 0 0;
width: 36px;
`;
export const UserAvatar = styled.img`
border-radius: 50%;
height: 36px;
margin: 0 8px 0 0;
width: 36px;
`;
export const Arrow = styled.div`
import { Snippet } from '@atoms'
const StyledExample = styled.article`
background: ${p => p.theme.colour.example};
color: white;
padding: ${p => 4 * p.theme.spacing}px 0 0;
`
const Title = styled.h2`
font-size: 20px;
font-weight: normal;
margin: 0 0 ${p => 3 * p.theme.spacing}px;
`
const Snippets = styled.figure`
align-items: stretch;
display: flex;
flex-flow: row wrap;
margin: ${p => 4 * p.theme.spacing}px 0 0;
`
const StyledSnippet = styled(Snippet)`
flex-grow: 1;
width: 30%;
`
class Example extends PureComponent {
static propTypes = {
children: PropTypes.node.isRequired,
snippets: PropTypes.arrayOf(PropTypes.string).isRequired,
title: PropTypes.string.isRequired,
&:last-child {
margin-bottom: 24px;
}
${props =>
props.inverse &&
`
${Art} {
order: 2;
}
`};
}
`;
const Art = styled.figure`
margin: 0;
max-width: 380px;
width: 100%;
`;
export default Join;
background: ${colors.primary.BLACK};
display: flex;
justify-content: center;
`;
export const StyledListingDetailHeader = styled.div`
color: ${colors.basic.WHITE};
font-family: ${fonts.SANS_SERIF};
padding: 24px 0 62px;
${mediaQueries.MOBILE} {
padding: 30px 20px 42px;
}
`;
export const StyledNewsroomIcon = styled.figure`
margin: 0 30px 0 0;
min-width: 130px;
padding-top: 50px;
${mediaQueries.MOBILE} {
margin: 45px auto;
padding: 0;
}
`;
export const StyledNewsroomLogo = styled.span`
img {
height: 130px;
min-width: 130px;
min-height: 130px;
object-fit: contain;