How to use the uikit/Core.applyDefaultStyles function in uikit

To help you get started, we’ve selected a few uikit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kids-first / kf-portal-ui / src / components / UserProfile / UserIntegrations / ui.js View on Github external
import X from 'react-icons/lib/fa/close';
import { Trans } from 'react-i18next';
import { compose } from 'recompose';

import { ActionButton, WhiteButton } from 'uikit/Button';
import { applyDefaultStyles, Span } from 'uikit/Core';
import StackIcon from 'icons/StackIcon';

import { withApi } from 'services/api';

/* === ConnectButton === */
const ConnectButtonWrapper = styled(ActionButton)`
  font-size: 14px;
  background: ${({ theme }) => theme.lightBlue};
`;
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);

export { ConnectButtonWrapper };

export const ConnectButton = compose(
  withApi,
  injectState,
)(({ text = 'Connect', doConnect, api, effects, ...props }) => {
  return (
    <ConnectButtonWrapper maxWidth={160} {...props}>
      <ExternalLink size={14} position="relative" right={4} /> <Trans>{text}</Trans>
      <RightArrow size={14} position="relative" left={4} />
    </ConnectButtonWrapper>
  );
});
github kids-first / kf-portal-ui / src / components / UserProfile / UserIntegrations / ui.js View on Github external
import { Trans } from 'react-i18next';
import { compose } from 'recompose';

import { ActionButton, WhiteButton } from 'uikit/Button';
import { applyDefaultStyles, Span } from 'uikit/Core';
import StackIcon from 'icons/StackIcon';

import { withApi } from 'services/api';

/* === ConnectButton === */
const ConnectButtonWrapper = styled(ActionButton)`
  font-size: 14px;
  background: ${({ theme }) => theme.lightBlue};
`;
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);

export { ConnectButtonWrapper };

export const ConnectButton = compose(
  withApi,
  injectState,
)(({ text = 'Connect', doConnect, api, effects, ...props }) => {
  return (
    <ConnectButtonWrapper maxWidth={160} {...props}>
      <ExternalLink size={14} position="relative" right={4} /> <Trans>{text}</Trans>
      <RightArrow size={14} position="relative" left={4} />
    </ConnectButtonWrapper>
  );
});

const connectedButtonCommonStyles = `
github kids-first / kf-portal-ui / src / components / UserProfile / UserIntegrations / index.js View on Github external
const ConnectButton = ({ ...props }) => {
  const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
  const RightArrow = applyDefaultStyles(RightIcon);

  return (
    <LargeTealActionButton {...props} maxWidth={160}>
      <ExternalLink size={12} position="relative" right={4} />
      Connect
      <RightArrow size={14} position="relative" left={10} />
    </LargeTealActionButton>
  );
};
github kids-first / kf-portal-ui / src / uikit / Headings.js View on Github external
const BaseFileRepoHeading = ({ theme }) => css`
  font-family: ${theme.fonts.default};
  color: ${theme.secondary};
  font-weight: 500;
  margin: 0;
  padding: 0;
`;

export const FileRepoH1 = applyDefaultStyles(styled('h1')``);

export const FileRepoH2 = applyDefaultStyles(styled('h2')`
  ${BaseFileRepoHeading};
  font-size: 18px;
`);

export const FileRepoH3 = applyDefaultStyles(styled('h3')`
  ${BaseFileRepoHeading};
  font-size: 16px;
`);

/**
 * Headings: Join/Login
 */
const BaseJoinHeading = ({ theme }) => css`
  font-family: ${theme.fonts.default};
  color: ${theme.secondary};
  font-weight: 500;
`;

export const JoinH2 = applyDefaultStyles(styled('h2')`
  ${BaseJoinHeading};
  font-size: 28px;
github kids-first / kf-portal-ui / src / uikit / Headings.js View on Github external
letter-spacing: 0.4px;
  font-family: ${theme.fonts.default};
  text-decoration: none;
`;

export const H1 = applyDefaultStyles(styled('h1')`
  ${BaseHeading};
  font-size: 28px;
`);

export const H2 = applyDefaultStyles(styled('h2')`
  ${BaseHeading};
  font-size: 22px;
`);

export const H3 = applyDefaultStyles(styled('h3')`
  ${BaseHeading};
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.3px;
`);

export const H4 = applyDefaultStyles(styled('h4')`
  font-family: ${({ theme }) => theme.fonts.details};
  font-size: 13px;
  font-style: italic;
  line-height: 1.85;
  text-align: left;
  color: ${({ theme }) => theme.greyScale9};
  margin: 0;
  padding: 0;
  font-weight: normal;
github kids-first / kf-portal-ui / src / uikit / Headings.js View on Github external
padding: 0;
  font-weight: normal;
`);

/**
 * Headings: File Repo
 */
const BaseFileRepoHeading = ({ theme }) => css`
  font-family: ${theme.fonts.default};
  color: ${theme.secondary};
  font-weight: 500;
  margin: 0;
  padding: 0;
`;

export const FileRepoH1 = applyDefaultStyles(styled('h1')``);

export const FileRepoH2 = applyDefaultStyles(styled('h2')`
  ${BaseFileRepoHeading};
  font-size: 18px;
`);

export const FileRepoH3 = applyDefaultStyles(styled('h3')`
  ${BaseFileRepoHeading};
  font-size: 16px;
`);

/**
 * Headings: Join/Login
 */
const BaseJoinHeading = ({ theme }) => css`
  font-family: ${theme.fonts.default};
github kids-first / kf-portal-ui / src / uikit / Card / CardHeader.js View on Github external
const HeaderRow = styled(Row)`
  font-size: 20px;
`;

const Heading = applyDefaultStyles(styled('h2')`
  display: inline-block;
  font-family: ${({ theme }) => theme.fonts.default};
  font-size: 100%;
  font-weight: 500;
  text-align: left;
  color: ${({ theme }) => theme.cardTitle};
  margin: 0;
`);

export const Badge = applyDefaultStyles(styled('div')`
  margin-left: 9px;
  display: inline-block;
  padding: 0;
  color: white;
  font-weight: 600;
  font-size: 60%;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  font-family: ${({ theme }) => theme.fonts.details};
  background-color: ${({ theme }) => theme.defaultBadge};
  border-radius: 50px;
  position: relative;
  height: 25px;
  min-width: 25px;
  line-height: 25px;
github kids-first / kf-portal-ui / src / uikit / Card / CardHeader.js View on Github external
import React from 'react';
import styled from 'react-emotion';
import { applyDefaultStyles } from 'uikit/Core';
import Row from 'uikit/Row';

const HeaderRow = styled(Row)`
  font-size: 20px;
`;

const Heading = applyDefaultStyles(styled('h2')`
  display: inline-block;
  font-family: ${({ theme }) => theme.fonts.default};
  font-size: 100%;
  font-weight: 500;
  text-align: left;
  color: ${({ theme }) => theme.cardTitle};
  margin: 0;
`);

export const Badge = applyDefaultStyles(styled('div')`
  margin-left: 9px;
  display: inline-block;
  padding: 0;
  color: white;
  font-weight: 600;
  font-size: 60%;
github kids-first / kf-portal-ui / src / components / UserProfile / UserIntegrations / index.js View on Github external
const ConnectButton = ({ ...props }) => {
  const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
  const RightArrow = applyDefaultStyles(RightIcon);

  return (
    <LargeTealActionButton {...props} maxWidth={160}>
      <ExternalLink size={12} position="relative" right={4} />
      Connect
      <RightArrow size={14} position="relative" left={10} />
    </LargeTealActionButton>
  );
};
github kids-first / kf-portal-ui / src / components / Header / ui.js View on Github external
color: ${({ theme }) => theme.greyScale2};
  text-decoration: none;
  padding: 10px 20px;
  border-top: ${({ theme, separated }) => (separated ? `1px solid ${theme.borderGrey}` : 'none')};
  border-left: solid 2px ${({ theme }) => theme.white};
  &:hover {
    color: ${({ theme }) => theme.hover};
    border-left: solid 2px ${({ theme }) => theme.hover};

    svg {
      fill: ${({ theme }) => theme.hover};
    }
  }
`;

export const DropdownExternalLink = applyDefaultStyles(
  styled(ExternalLink)`
    color: ${({ theme }) => theme.greyScale2};
    text-decoration: none;
    padding: 10px 20px;
    border-top: ${({ theme, separated }) => (separated ? `1px solid ${theme.borderGrey}` : 'none')};
    border-left: solid 2px ${({ theme, borderColor }) => (borderColor ? borderColor : theme.white)};
    &:hover {
      color: ${({ theme }) => theme.hover};
      border-left: solid 2px ${({ theme }) => theme.hover};

      svg {
        fill: ${({ theme }) => theme.hover};
      }
    }
  `,
  {