Example #1
0
const QuoteList = ({ items }) => {
  return (
    <Flex flexDirection="column" alignItems="center">
      {items.map((item, index) => {
        const slug = item.node.slug.slug

        return (
          <BlockquoteLink to={`/${slug}`} key={index}>
            <QuoteItem
              title={item.node.title.title}
              author={item.node.author}
            />
          </BlockquoteLink>
        )
      })}
    </Flex>
  )
}

QuoteList.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
}

const BlockquoteLink = styled(Link)`
  color: ${props => props.theme.colors.sectionText};
  text-decoration: none;
  margin-bottom: 256px;
`

export default QuoteList
Example #2
0
export const Line = styled.div`
  border-top: 1px solid gray;
  margin-bottom: 4px;
  width: 100%;
`;

export const Description = styled.p`
  white-space: pre-wrap;
`;

export const Location = styled.p`
  margin: 0;
  align-self: center;
`;

export const Info = styled.div`
  flex-grow: 1;
`;

export const Marker = styled(FontAwesomeIcon)`
  font-size: 20px;
  margin: 4px 4px 4px 0;
  align-self: center;
  color: #e37b40;
`;

export const LocationWrapper = styled.div`
  display: flex;
`;
Example #3
0
import styled from 'styled-components';
import { Panel, Table } from 'fundamental-react';

const PanelHeader = Panel.Header;
const PanelHead = Panel.Head;
const PanelActions = Panel.Actions;
const PanelBody = Panel.Body;

export const TableWrapper = styled(Panel)``;

export const TableHeader = styled(PanelHeader)`
  && {
    padding: 16px;
  }
`;

export const TableHeaderHead = styled(PanelHead)``;

export const TableHeaderActions = styled(PanelActions)``;

export const TableBody = styled(PanelBody)`
  && {
    padding: 0;
  }
`;

export const TableContent = styled(Table)`
  && {
    margin-bottom: 0;
    border: none;
    border-bottom-left-radius: 4px;
Example #4
0
import TransitionGroup from 'react-transition-group/TransitionGroup';
import AnimatedCTAText from 'react/components/Onboarding/components/Channels/components/CreateChannel/components/AnimatedCTAText';
import ChannelTitleInput from 'react/components/Onboarding/components/UI/ChannelTitleInput';
import CTAText from 'react/components/Onboarding/components/UI/CTAText';
import CTAButton from 'react/components/Onboarding/components/UI/CTAButton';
import Types from 'react/components/Block/util/Types';
import Block from 'react/components/Block';

const ANIMATION_PERIOD = 500;
const ANIMATION_DELAY = 1000;

const CreateChannelWrapper = styled.div`
  width: 100%;
`;

const FadingCTAText = styled(CTAText)`
  transition: opacity ${ANIMATION_PERIOD}ms ease-in-out;

  ${({ hasText }) =>
    hasText &&
    `
    opacity: 0.33;
  `};
`;

const FadingCTAButton = styled(CTAButton)`
  opacity: 0;
  pointer-events: none;
  transition: opacity ${ANIMATION_PERIOD}ms ease-in-out;

  ${({ hasText }) =>
    newListTitle: '',
  }

  render() {
    return (
      <Row className={this.props.className}>
        <Col span={24}>
          <Card bordered={false}>
            <Search
              placeholder="New List Title"
              onSearch={value => {
                this.props.createList(this.state.newListTitle);
                this.setState({ newListTitle: '' });
              }}
              onChange={(e) => { this.setState({ newListTitle: e.target.value })}}
              value={this.state.newListTitle}
              enterButton
            />
          </Card>
        </Col>
      </Row>
    );
  }
}

export default styled(NewListCard)`
  .anticon-search:before {
    content: '\\E6C0';
  }
`;
Example #6
0
File: 404.js Project: ryanwiemer/rw
import React from 'react'
import styled from 'styled-components'
import { Link } from 'gatsby'
import Helmet from 'react-helmet'
import SEO from '../components/general/SEO'
import Container from '../components/general/Container'

const Content = styled(Container)`
  background: #121212;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  a {
    font-size: 1.1em;
    border-bottom: 0.09em solid #414141;
    transition: 0.3s border-color;
    &:hover {
      border-color: white;
    }
    @media (hover: none) {
      border-color: #414141 !important;
    }
  }
`
  margin-bottom: 2rem;

  ${delayEffect(0.35)};
`;

export const Title = styled.h1`
  font-weight: 400;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.25rem;
  font-weight: 300;
  z-index: 2;
`;

export const Like = styled(LikeHeart)`
  margin-left: 0.5rem;
  transform: translateY(-3px);
`;

export const Description = styled.p`
  font-weight: 300;
  font-size: 1rem;
  margin-right: 3rem;
  color: rgba(255, 255, 255, 0.8);
`;

export const Stats = styled.div`
  position: relative;
  display: flex;
  width: 100%;
    font-style: italic;
    padding: 0 3em;
  }
  & pre {
    overflow: auto;
  }
`;

const NextPreviousList = styled.ul`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
`;

const Twitter = styled(Link)`
  align-items: center;
  background-color: #1b95e0;
  border: none;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  height: 20px;
  padding: 15px 10px;
  text-decoration: none;

  :hover,
  :focus {
    background-color: #0c7abf;
Example #9
0
import styled, { css } from 'styled-components';
import { Input as RebassInput } from 'rebass';
import { hexToRgba } from '@/styles/utils/color';

const Input = styled(({ primary, outline, ...restProps }) => (
  <RebassInput {...restProps} />
))`${props => css`
  background-color: #fff;
  color: ${props.theme.colors.lightText};
  padding: 0.5rem 0.75rem;
  border: 1px solid ${hexToRgba(props.theme.colors.lightText, 0.5)};
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 500;

  ${props.primary && css`
    background-color: ${props.theme.colors.primary};
    color: ${props.theme.colors.white[0]};
    border: 0;
  `}

  // works best when prepended with css``
  // see line 16
  ${props.outline && `
    background-color: ${props.theme.colors.white[0]};
    color: ${props.theme.colors.primary};
  `}
`};`

Input.defaultProps = {};
import ContextMenu from 'app/components/ContextMenu';
import MoreInfoIcon from './KebabIcon';

export const PADDING = 32;

export const Container = styled.div`
  ${fadeIn(0)};
  background-color: ${props => props.theme.background};
  overflow: hidden;
  border-radius: 2px;
  user-select: none;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
`;

export const StyledContextMenu = styled(ContextMenu)`
  padding-right: ${PADDING}px;
  box-sizing: border-box;
  opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};
`;

export const SandboxImageContainer = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 160px;

  background-color: rgba(255, 255, 255, 0.1);
`;
Example #11
0
import { Flex, IconButton, theme } from '@hackclub/design-system'
import styled from 'styled-components'
import PropTypes from 'prop-types'

export const SendForm = styled(Flex.withComponent('form'))`
  position: relative;
  z-index: 4;
  > div:first-child,
  > label:first-child {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
`
SendForm.defaultProps = {
  align: 'flex-end',
  width: 1
}

export const SendButton = styled(IconButton)`
  box-shadow: ${theme.boxShadows[0]} !important;
  transition: ${theme.transition} box-shadow;
  &:hover,
  &:focus {
    box-shadow: ${theme.boxShadows[1]} !important;
  }
`
SendButton.propTypes = {
  type: PropTypes.string,
  color: PropTypes.string,
  glyph: PropTypes.string,
  size: PropTypes.number
Example #12
0
import styled from 'styled-components'
import Slider from 'react-slick'

const Carousel = styled(Slider)`
  position: relative;
  display: block;
  width 100%;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  .slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
      outline: none;
    }

    &.dragging {
      cursor: pointer;
      cursor: hand;
    }

    &:before,
    &:after {
      content: '';
  Item,
  AlignCenter
} from '~/templates/Popmotion/LiveExamples/styled';
import { styler, value, listen, pointer, decay, transform } from 'popmotion';
import posed from 'react-pose';
import styled from 'styled-components';
import { color } from '~/styles/vars';
const { interpolate } = transform;
const props = {
  draggable: 'x',
  passive: {
    opacity: ['x', interpolate([-200, -100, 100, 200], [0, 1, 1, 0])]
  }
};

const Box = styled(posed.div(props))`
  width: 100px;
  height: 100px;
  background: ${color.blue};
  border-radius: 50%;
  transform: scaleX(0);
  transform-origin: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
`;

const code = `// Vanilla & React DOM
passive: {
Example #14
0
  border-radius: 4px;
  padding: 0.5rem 1rem;

  padding-left: 2.5rem;
  font-size: 1.125rem;

  margin-bottom: 2rem;

  box-shadow: 0 0 100px rgba(255, 255, 255, 0.3);

  &:focus {
    box-shadow: 0 0 140px rgba(255, 255, 255, 0.5);
  }
`;

const Icon = styled(SearchIcon)`
  position: absolute;
  left: 0.5rem;
  top: 0.55rem;
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 0.5);
`;

export default class SearchInput extends React.PureComponent {
  state = {
    query: '',
  };

  onChange = e => {
    this.setState({ query: e.target.value });
    this.props.searchQuery(e.target.value);
Example #15
0
`;

const sidepanelProps = {};

const itemProps = {
  closed: {
    y: 20,
    opacity: 0
  },
  open: {
    y: 0,
    opacity: 1
  }
};

const Sidepanel = styled(posed.ul(sidepanelProps))`
  width: 300px;
  padding: 20px;
`;

const Item = styled(posed.li())`
  width: 100%;
  border-radius: 5px;
  height: 35px;
  background: ${color.white};
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
Example #16
0
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { colors } from '../styledShared';

const StyledLink = styled(Link)`
  background: ${colors.blueMain};
  color: #000;
  padding: 1em;
`;

export default StyledLink;
Example #17
0
import { fontFamilyCode, truncate } from '../../../../style/variables';
import ImpactSparkline from './ImpactSparkLine';

function tpmLabel(type) {
  return type === 'request' ? 'Req. per minute' : 'Trans. per minute';
}

function avgLabel(agentName) {
  return agentName === 'js-base' ? 'Page load time' : 'Avg. resp. time';
}

function paginateItems({ items, pageIndex, pageSize }) {
  return items.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
}

const TransactionNameLink = styled(RelativeLink)`
  ${truncate('100%')};
  font-family: ${fontFamilyCode};
`;

class List extends Component {
  state = {
    page: {
      index: 0,
      size: 25
    },
    sort: {
      field: 'impactRelative',
      direction: 'desc'
    }
  };
Example #18
0
import React from 'react'
import {findDOMNode} from 'react-dom'
import styled from 'styled-components'
import {DragSource} from 'react-dnd'
import cx from 'classnames'
import {IDENT_COURSE} from '@gob/object-student'
import CourseWithModal from './with-modal'

type Props = {
	className?: string,
	style?: any,
	connectDragSource: () => any, // react-dnd
	isDragging: boolean, // react-dnd
}

const Draggable = styled(CourseWithModal)`
	&:hover {
		cursor: pointer;
	}
`

class DraggableCourse extends React.PureComponent<Props> {
	render() {
		const classSet = cx(this.props.className, {
			'is-dragging': this.props.isDragging,
		})

		return (
			<Draggable
				ref={ref => {
					// eslint-disable-next-line react/no-find-dom-node
Example #19
0
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import Box from 'v2/components/UI/Box'
import Overlay from 'v2/components/UI/Overlay'
import UserAvatar from 'v2/components/UserAvatar'
import UserDropdown from 'v2/components/UserDropdown'

const Container = styled(Box)`
  display: flex;
  align-items: center;
  cursor: pointer;

  &:hover {
    opacity: 0.5;
  }
`

export default class MyRepresentation extends PureComponent {
  static propTypes = {
    me: PropTypes.shape({
      initials: PropTypes.string.isRequired,
      avatar: PropTypes.string,
    }).isRequired,
  }

  state = {
    mode: 'resting',
  }
Example #20
0
    border: none;
    ${fontSize(18)}
    padding: ${cols(1)};
    margin-bottom: 0;
  `}
`;

const Menu = styled.ul`
  padding-left: ${cols(2)};
  ${media.large`
    display: ${({ isOpen }) => isOpen ? 'block' : 'none'};
    padding-top: ${cols(1)};
  `}
`;

const DropDownMenuIcon = styled(DropDownArrow)`
  position: absolute;
  right: ${cols(1)};
  top: 50%;
  margin-top: -5px;
  ${({ isOpen }) => isOpen && 'transform: rotate(180deg);'}

  display: none;
  ${media.large`display: block;`}
`;

const Item = ({ id, title, contentId, section }) => (
  <MenuItem isSelected={id === contentId}>
    <Link href={`/${section}/${id}`}>
      <a>{title}</a>
    </Link>
Example #21
0
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { propType } from 'graphql-anywhere'
import styled from 'styled-components'

import emptyProfileFragment from 'v2/components/ProfileEmptyMessage/fragments/indentifiable'

import Text from 'v2/components/UI/Text'
import Box from 'v2/components/UI/Box'
import Modal from 'v2/components/UI/Modal'
import { GenericButton as Button } from 'v2/components/UI/GenericButton'
import NewChannelForm from 'v2/components/NewChannelForm'

const Copy = styled(Text)`
  text-align: center;
  a {
    font-weight: bold;
  }
  a:hover {
    color: ${x => x.theme.colors.gray.base};
  }
`

export default class ProfileEmptyMessage extends Component {
  static propTypes = {
    isMine: PropTypes.bool,
    identifiable: propType(emptyProfileFragment).isRequired,
  }

  static defaultProps = {
    isMine: false,
`
export const BriefInfo = styled.div`
  color: #aaaaaa;
  margin-left: 5px;
  font-size: 1em;
  display: flex;
`
export const UserName = styled.div`
  margin-left: 5px;
  margin-bottom: 3px;
  font-size: 1.3em;
  color: #5c868b;
  display: flex;
`

export const EditIcon = styled(Img)`
  fill: tomato;
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.4;
  margin-left: 5px;
  margin-top: 4px;

  &:hover {
    opacity: 0.8;
  }
  transition: opacity 0.2s;
`

export const SocalIcon = styled(Img)`
Example #23
0
const Information = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 1em;
  font-size: ${x => x.theme.fontSizesIndexed.xs};
`

const Name = styled.a`
  display: block;
  font-weight: bold;
`

const Button = styled(GenericButton).attrs({
  f: 1,
})`
  align-self: center;
`

class PendingGroupUser extends Component {
  static propTypes = {
    data: PropTypes.shape({
      loading: PropTypes.bool.isRequired,
      user: propType(pendingGroupUserFragment),
    }).isRequired,
    onRemove: PropTypes.func.isRequired,
  }

  remove = () => {
Example #24
0
import React, { Component } from 'react';
import styled from 'styled-components';

class SectionHeading extends Component {
  render() {
    return (
      <h2 className={`${ this.props.className }`}>
        {this.props.text}
      </h2>
    );
  }
}

export default styled(SectionHeading)`
  width: 80%;
  max-width: 855px;
  font-size: 30px;
  letter-spacing: 2px;
  text-align: center;
  margin: 65px auto 45px;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
`;
Example #25
0
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  height: 100%;
`;

const HeroMediaImage = styled.img`
  object-fit: cover;
  width: 53px;
  height: 30px
  border-radius: 2px;
  border: ${applyTheme("HeroMediaSmall.border")}
`;

const StatusIcon = styled(({ isVisible, ...rest }) => <CircleIcon {...rest} />)`
  ${({ isVisible }) => (isVisible && css`color: ${colors.forestGreen300}`) || css`color: ${colors.black40}`};
`;

class TagDataTableColumn extends Component {
  static propTypes = {
    data: PropTypes.object,
    moment: PropTypes.func,
    row: PropTypes.object
  }

  render() {
    const { row } = this.props;

    const renderColumn = row.column.id;
Example #26
0
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 10%;
  border-radius: 5px;
`

export const ArticleHeader = styled.div`
  display: flex;
  justify-content: space-between;
  color: #cdd0d4;
`
export const MoreWrapper = styled.div`
  display: flex;
  cursor: pointer;
`
export const MoreIcon = styled(Img)`
  fill: #6a868a;
  width: 15px;
  height: 15px;
`
export const MoreOption = styled.div`
  visibility: hidden;
  ${MoreWrapper}:hover & {
    visibility: visible;
    cursor: pointer;
  }
`
export const LinkFrom = styled.div`
  display: flex;
`
export const RefinedLabel = styled.div`
Example #27
0
  ALGOLIA_API_KEY,
  ALGOLIA_APPLICATION_ID,
  ALGOLIA_DEFAULT_INDEX,
} from 'app/utils/config';

import './Search.css';
import Results from './Results';
import Filters from './Filters';

const Content = styled.div`
  margin-top: 5%;
  text-align: left;
  color: white;
`;

const StyledTitle = styled(Title)`
  display: inline-block;
  text-align: left;
  font-size: 2rem;
`;

const SEARCHABLE_THINGS = [
  'dependency',
  'user',
  'sandbox title',
  'sandbox tag',
  'github repository',
];

const getRandomSearch = () =>
  SEARCHABLE_THINGS[Math.floor(Math.random() * SEARCHABLE_THINGS.length)];
Example #28
0
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.Mui-focused {
    color: green;
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red;
    }
    &:hover fieldset {
      border-color: yellow;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
  }
`;

export default function GlobalClassName() {
  return (
    <NoSsr>
      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
    </NoSsr>
  );
}
Example #29
0
const sizeMap = (size) => {
  switch(size) {
    case 'xsmall':
      return 50;
    case 'small':
      return 100;
    case 'medium':
      return 150;
    case 'large':
      return 200;
    case 'xlarge':
      return 300;
    default:
      return 100;
  }
};

export const Wrapper = styled(Box)`
  width: ${props => sizeMap(props.imageSize)}px;
`;

export const ThumbnailImage = styled(Image)`
  border: solid 4px #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  height: auto;
  transition: all 200ms ease-out;
`;
Example #30
0
const share = item => {
  const title = item.title
  const twitterName = item.twitterName === null ? '' : `@${item.twitterName}`
  const pageUrl = item.pageUrl

  return (
    <ShareLink
      href={`https://twitter.com/intent/tweet?text=${title} ${twitterName} ${pageUrl}`}
      target="_blank"
      rel="noopener noreferrer"
      p={4}
    >
      Share on Twitter
    </ShareLink>
  )
}

const ShareLink = styled(Link)`
  &:hover {
    text-decoration: none;
  }
`

share.propTypes = {
  title: PropTypes.string.isRequired,
  twitterName: PropTypes.string,
  pageUrl: PropTypes.string.isRequired,
}

export default share