polished#margin JavaScript Examples

// eslint-disable-next-line react/prop-types
function MyError({statusCode, hasGetInitialPropsRun, err}) {
  if (!hasGetInitialPropsRun && err) {
    // getInitialProps is not called in case of
    // https://github.com/zeit/next.js/issues/8592. As a workaround, we pass
    // err via _app.js so it can be captured
    console.error(err)
  }

  const {t} = useTranslation()

  return (
    <Layout>
      <article>
        <div>{t('Something went wrong')}</div>
        <div>
          <section>
            <h2>
              {statusCode
                ? `An error ${statusCode} occurred on server`
                : t('An error occurred on client')}
            </h2>
            <div>
              <PrimaryButton onClick={() => Router.push('/home')}>
                {t('Go to My Idena')}
              </PrimaryButton>
            </div>
          </section>
        </div>
        <style jsx>{`
          article {
            background: ${theme.colors.darkGraphite};
            color: white;
            display: flex;
            flex-direction: column;
            height: 100vh;
            max-height: 100vh;
          }
          div:first-child {
            background: rgb(255, 102, 102);
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: ${rem(20, 13)};
            padding: ${rem(12, 13)};
            position: relative;
            text-align: center;
          }
          div:nth-child(2) {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
          }
          h2 {
            font-size: ${rem(18)};
            font-weight: 500;
            margin: ${margin(0, 0, rem(40))};
            word-break: break-all;
          }
          section > div:nth-child(2) > section {
            background: rgb(255, 102, 102);
            border-radius: ${rem(9)};
            font-size: ${rem(14, 13)};
            line-height: ${rem(20, 13)};
            margin-top: ${rem(40)};
            padding: ${rem(18)} ${rem(24)};
            max-width: ${rem(480)};
          }
        `}</style>
      </article>
    </Layout>
  )
}

export function FlipWords({
  currentFlip: {words = []},
  translations = {},
  onReport = {},
  children,
  ...props
}) {
  const {t, i18n} = useTranslation()

  const wordTranslations = words.map(({id}) => translations[id])
  const hasApprovedTranslation = wordTranslations.reduce(
    (acc, curr) => !!curr && acc,
    true
  )

  const [showTranslation, setShowTranslation] = React.useState()

  const shouldShowTranslation = showTranslation && hasApprovedTranslation

  return (
    <ChakraFlex
      direction="column"
      fontSize={['base', 'md']}
      color="brandGray.500"
      ml={[0, 8]}
      mb={[10, 0]}
      w={['100%', '320px']}
      {...props}
    >
      <ChakraFlex
        display={['flex', 'none']}
        direction="row"
        align="center"
        justify="center"
      >
        <Heading fontSize="20px" fontWeight={500}>
          {t(`Is the flip correct?`)}
        </Heading>
        <IconButton
          icon={<InfoIcon />}
          bg="unset"
          fontSize="20px"
          minW={5}
          w={5}
          h={5}
          _active={{
            bg: 'unset',
          }}
          _hover={{
            bg: 'unset',
          }}
          _focus={{
            outline: 'none',
          }}
          onClick={onReport}
        />
      </ChakraFlex>
      <FlipKeywordPanelNew mb={8}>
        {words.length ? (
          <FlipKeywordTranslationSwitchNew
            keywords={{
              words,
              translations: wordTranslations.map(x => (x ? [x] : [])),
            }}
            showTranslation={shouldShowTranslation}
            locale={i18n.language}
            onSwitchLocale={() => setShowTranslation(!showTranslation)}
            isInline={false}
          />
        ) : (
          <>
            <Box
              style={{
                color: theme.colors.primary2,
                fontWeight: 500,
                lineHeight: rem(20),
              }}
            >
              {t(`Getting flip keywords...`)}
            </Box>
            {[
              t(
                'Can not load the flip keywords to moderate the story. Please wait or skip this flip.'
              ),
            ].map((word, idx) => (
              <Box
                key={`desc-${idx}`}
                style={{
                  color: theme.colors.muted,
                  lineHeight: rem(20),
                  ...margin(rem(theme.spacings.small8), 0, 0),
                }}
              >
                {word}
              </Box>
            ))}
          </>
        )}
      </FlipKeywordPanelNew>
      {children}
    </ChakraFlex>
  )
}

export function Notification({
  title,
  body,
  type = NotificationType.Info,
  action = null,
  actionName = '',
  pinned,
  bg = theme.colors.white,
  color = theme.colors.text,
  iconColor = theme.colors.primary,
  actionColor = theme.colors.primary,
  icon,
  wrap = 'normal',
  delay = NOTIFICATION_DELAY,
}) {
  const [hidden, setHidden] = useState(false)

  return (
    !hidden && (
      <Flex justify="center" mb={5} zIndex={100}>
        <Flex
          align="center"
          background={bg}
          borderRadius="8px"
          color={color}
          mx={['12px', 0]}
          mt="auto"
          mb={['46px', 'auto']}
          py={['10px', '6px']}
          pl={['16px', '8px']}
          pr="16px"
          position="relative"
          fontSize="md"
          width={['auto', '480px']}
          zIndex={10000}
          css={{
            boxShadow: `0 3px 12px 0 rgba(83, 86, 92, 0.1), 0 2px 3px 0 rgba(83, 86, 92, 0.2)`,
          }}
        >
          {icon || (
            <i
              className="icon icon--Info"
              style={{
                color:
                  type === NotificationType.Error
                    ? theme.colors.danger
                    : iconColor,
                fontSize: rem(20),
                marginRight: rem(12),
              }}
            />
          )}
          <Box style={{lineHeight: rem(20), ...wordWrap(wrap)}}>
            <Box style={{fontWeight: theme.fontWeights.medium}}>{title}</Box>
            {body && <Text color={color}>{body}</Text>}
          </Box>
          <Box
            css={{
              ...margin(0, 0, 0, 'auto'),
              ...padding(rem(6), rem(12)),
            }}
          >
            {action && (
              <FlatButton
                style={{
                  color:
                    type === NotificationType.Error
                      ? theme.colors.danger
                      : actionColor,
                  lineHeight: rem(20),
                  ...padding(0),
                }}
                onClick={() => {
                  action()
                  setHidden(true)
                }}
              >
                {actionName}
              </FlatButton>
            )}
          </Box>
          {!pinned && (
            <Box
              style={{
                background: theme.colors.gray2,
                height: rem(3),
                ...borderRadius('bottom', rem(8)),
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                animation: `escape ${delay}ms linear forwards`,
              }}
            />
          )}
        </Flex>
        <style jsx global>{`
          @keyframes escape {
            from {
              right: 0;
            }
            to {
              right: 100%;
            }
          }
        `}</style>
      </Flex>
    )
  )
}