polished#borderRadius JavaScript Examples

function FlipHolder({css, isZoomHovered = false, ...props}) {
  const windowHeight = use100vh()
  return (
    <Tooltip
      isOpen={isZoomHovered}
      label="Ctrl+Click to zoom"
      placement="top"
      zIndex="tooltip"
      bg="graphite.500"
    >
      <ChakraFlex
        justify="center"
        direction="column"
        position="relative"
        h={[`calc(${windowHeight}px - 290px)`, 'calc(100vh - 260px)']}
        w={['100%', 'calc((100vh - 240px) / 3)']}
        mx={['6px', '10px']}
        my={0}
        p={1}
        borderRadius={['16px', '8px']}
        border={`solid ${rem(2)} ${transparentize(
          0.95,
          theme.colors.primary2
        )}`}
        boxShadow={`0 0 ${rem(2)} 0 ${transparentize(
          0.95,
          theme.colors.primary2
        )}`}
        css={css}
        {...props}
      />
    </Tooltip>
  )
}

export function MenuItems({ref, ...props}) {
  return (
    <Box
      bg={theme.colors.white}
      py={theme.spacings.small}
      css={{
        ...borderRadius('top', '10px'),
        ...borderRadius('bottom', '10px'),
        boxShadow:
          '0 4px 6px 0 rgba(83, 86, 92, 0.24), 0 0 2px 0 rgba(83, 86, 92, 0.2)',
      }}
      w="145px"
      ref={ref}
      {...props}
    />
  )
}

export function Spinner({size = 8}) {
  const spin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`

  return (
    <>
      <Box
        display="inline-block"
        border="4px solid"
        borderColor="blackAlpha.100"
        borderLeftColor="blue.500"
        borderRadius="50%"
        w={size}
        h={size}
        animation={`${spin} 1.2s linear infinite`}
      ></Box>
    </>
  )
}

export function Avatar({
  address,
  boxSize,
  size = boxSize || ['88px', '80px'],
  ...props
}) {
  return address ? (
    <ChakraAvatar
      boxSize={size}
      src={`https://robohash.idena.io/${address?.toLowerCase()}`}
      bg="gray.50"
      borderRadius={['mobile', 'lg']}
      {...props}
    />
  ) : (
    <Box boxSize={size} bg="gray.50" rounded={['mobile', 'lg']}></Box>
  )
}

function BadFlipListItemMobile({isActive, number, ...props}) {
  return (
    <ChakraBox
      borderRadius="18px"
      border="1px solid"
      borderColor={isActive ? 'red.012' : 'transparent'}
      p="2px"
      w={12}
      {...props}
    >
      <ChakraFlex
        justify="center"
        align="center"
        borderRadius="16px"
        bg={isActive ? 'red.012' : 'gray.212'}
        h="100%"
        w="100%"
      >
        <BadFlipListItemCircle
          bg={isActive ? 'red.500' : 'gray.200'}
          color="white"
        >
          {number}
        </BadFlipListItemCircle>
      </ChakraFlex>
    </ChakraBox>
  )
}

function ThumbnailOverlay({option, isQualified, hasIrrelevantWords}) {
  return (
    <Fill
      bg={
        // eslint-disable-next-line no-nested-ternary
        isQualified
          ? hasIrrelevantWords
            ? transparentize(0.1, theme.colors.danger)
            : rgba(87, 143, 255, 0.9)
          : rgba(89, 89, 89, 0.95)
      }
      borderRadius={['16px', '12px']}
    >
      {option && <FiCheck size={rem(20)} color={theme.colors.white} />}
    </Fill>
  )
}

function FailedThumbnail() {
  return (
    <Fill
      bg={rgba(89, 89, 89, 0.95)}
      borderRadius={['16px', '12px']}
      css={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <FiXCircle size={rem(20)} color={theme.colors.white} />
    </Fill>
  )
}

function ThumbnailHolder({isCurrent, isLong, children, ...props}) {
  const currentColor = isLong ? 'gray.500' : 'xwhite.500'

  return (
    <ChakraFlex
      justify="center"
      align="center"
      border={['solid 1px', 'solid 2px']}
      borderColor={[
        isCurrent ? currentColor : 'transparent',
        isCurrent ? theme.colors.primary : 'transparent',
      ]}
      borderRadius={['18px', '12px']}
      {...props}
    >
      <ChakraBox
        position="relative"
        h={['44px', '32px']}
        w={['44px', '32px']}
        m={[0.5, 1]}
      >
        {children}
      </ChakraBox>
    </ChakraFlex>
  )
}

function BadFlipPartFrame({flipCase, ...props}) {
  const topH = useBreakpointValue(['calc(25% - 4px)', `${100 * 1 - 4}px`])
  const botH = useBreakpointValue(['calc(50% - 4px)', `${100 * 2 - 4}px`])
  const framePosition = [
    {},
    {},
    {},
    {top: topH, bottom: botH},
    {top: topH, bottom: botH},
  ]
  return (
    <ChakraBox
      position="absolute"
      borderWidth={2}
      borderColor="red.500"
      borderRadius="md"
      boxShadow="0 0 0 4px rgba(255, 102, 102, 0.25)"
      top={-1}
      left={-1}
      right={-1}
      bottom={-1}
      {...framePosition[flipCase]}
      transition="all 0.2s ease-out"
      zIndex={1}
      {...props}
    >
      <ChakraFlex
        align="center"
        justify="center"
        bg="red.500"
        borderRadius="full"
        boxSize={8}
        position="absolute"
        right={-4}
        bottom={-4}
      >
        <BlockIcon boxSize={5} />
      </ChakraFlex>
    </ChakraBox>
  )
}

export function Debug({children}) {
  return (
    <Code whiteSpace="pre" borderRadius="md" p={2}>
      {JSON.stringify(children, null, 2)}
    </Code>
  )
}

export function PasswordInput({width, ...props}) {
  const [show, setShow] = useState(false)

  return (
    <div
      style={{
        position: 'relative',
        width,
      }}
    >
      <Input
        type={show ? 'text' : 'password'}
        pr={[8, 3]}
        opacity={[0.8, 1]}
        {...props}
      />
      <Box
        mt={['5px', '-3px']}
        opacity={[0.16, 1]}
        style={{
          ...borderRadius('right', rem(6)),
          cursor: 'pointer',
          fontSize: rem(20),
          position: 'absolute',
          top: rem(0),
          height: '100%',
          right: rem(10),
          zIndex: 5,
        }}
        onClick={() => setShow(!show)}
      >
        {show ? (
          <FiEyeOff style={{transform: 'translate(0, 50%)'}} />
        ) : (
          <FiEye style={{transform: 'translate(0, 50%)'}} />
        )}
      </Box>
    </div>
  )
}

export function Thumbnail({
  flipId,
  images,
  fetched,
  decoded,
  failed,
  option,
  relevance,
  isCurrent,
  isLong,
  onPick,
}) {
  const isQualified = !!relevance
  const hasIrrelevantWords = relevance === RelevanceType.Irrelevant
  const flipPreviewSize = useBreakpointValue(['100%', 32])
  const flipPreviewBorderRadius = useBreakpointValue(['16px', '12px'])

  return (
    <ThumbnailHolder
      name={flipId}
      isCurrent={isCurrent}
      isLong={isLong}
      border={[
        `solid 1px ${
          // eslint-disable-next-line no-nested-ternary
          isCurrent
            ? // eslint-disable-next-line no-nested-ternary
              isQualified
              ? hasIrrelevantWords
                ? theme.colors.danger
                : 'white'
              : 'white'
            : 'transparent'
        }`,
        `solid 2px ${
          // eslint-disable-next-line no-nested-ternary
          isCurrent
            ? // eslint-disable-next-line no-nested-ternary
              isQualified
              ? hasIrrelevantWords
                ? theme.colors.danger
                : rgba(87, 143, 255, 0.9)
              : theme.colors.primary
            : 'transparent'
        }`,
      ]}
      onClick={onPick}
    >
      {((fetched && !decoded) || failed) && <FailedThumbnail />}
      {!fetched && !failed && <LoadingThumbnail />}
      {fetched && decoded && (
        <>
          {(option || isQualified) && (
            <ThumbnailOverlay
              option={option}
              isQualified={isQualified}
              hasIrrelevantWords={hasIrrelevantWords}
            />
          )}
          <FlipImage
            src={images[0]}
            alt={images[0]}
            height={flipPreviewSize}
            width={flipPreviewSize}
            fit="cover"
            style={{
              borderRadius: flipPreviewBorderRadius,
              border: isCurrent
                ? 'transparent'
                : 'solid 1px rgb(83 86 92 /0.16)',
            }}
          />
        </>
      )}
    </ThumbnailHolder>
  )
}

function FailedFlip() {
  const {t} = useTranslation()
  const radius = useBreakpointValue(['12px', '8px'])
  const windowHeight = use100vh()
  return (
    <FlipHolder
      css={{
        border: 'none',
        boxShadow: 'none',
        cursor: 'not-allowed',
      }}
    >
      {defaultOrder.map((_, idx) => (
        <ChakraFlex
          key={`left-${idx}`}
          justify="center"
          align="center"
          borderRadius={getFlipBorderRadius(
            idx,
            defaultOrder.length - 1,
            radius
          )}
          h={[
            `calc((${windowHeight}px - 290px) / 4)`,
            'calc((100vh - 260px) / 4)',
          ]}
          css={{
            background: transparentize(0.16, theme.colors.gray5),
            border: 'solid 1px rgba(210, 212, 217, 0.16)',
            borderBottom:
              idx !== defaultOrder.length - 1
                ? 'none'
                : 'solid 1px rgba(210, 212, 217, 0.16)',
            overflow: 'hidden',
          }}
        >
          <img
            alt={t('Failed flip')}
            src="/static/body-medium-pic-icn.svg"
            style={{
              height: rem(40),
              width: rem(40),
              opacity: 0.3,
            }}
          />
        </ChakraFlex>
      ))}
    </FlipHolder>
  )
}

export function BadFlipDialog({title, subtitle, isOpen, onClose, ...props}) {
  const {t} = useTranslation()

  const [flipCase, setFlipCase] = React.useState(0)

  const isMobile = useBreakpointValue([true, false])
  const BadFlipNotice = isMobile ? Drawer : Modal
  const BadFlipNoticeBody = isMobile ? DrawerBody : ModalContent

  const badFlipDialogHandlers = useSwipeable({
    onSwipedLeft: () => {
      if (isMobile) {
        setFlipCase(flipCase === 4 ? flipCase : flipCase + 1)
      }
    },
    onSwipedRight: () => {
      if (isMobile) {
        setFlipCase(flipCase === 0 ? flipCase : flipCase - 1)
      }
    },
    preventDefaultTouchmoveEvent: true,
    trackMouse: true,
  })

  const dirs = [
    '1-keywords-vase-coffee',
    '2-numbers',
    '3-labels',
    '4-text',
    '5-inappropriate-content',
  ]

  // eslint-disable-next-line no-shadow
  const flipUrl = (flipCase, idx) =>
    `/static/flips/${dirs[flipCase]}/${idx}.jpg`

  React.useEffect(() => {
    if (!isOpen) setFlipCase(0)
  }, [isOpen])

  const nextButtonRef = React.useRef()

  return (
    <BadFlipNotice
      isOpen={isOpen}
      isCentered
      isCloseable={false}
      initialFocusRef={nextButtonRef}
      size={['full', 664]}
      onClose={onClose}
      {...props}
    >
      <ModalOverlay display={['none', 'block']} bg="xblack.080" />
      <BadFlipNoticeBody
        className="block-swipe-nav"
        display={['flex', 'block']}
        flexDirection="column"
        bg="transparent"
        color="brandGray.500"
        fontSize="md"
        rounded={['none', 'lg']}
        w="auto"
      >
        <ChakraFlex display={['initial', 'none']} textAlign="center" w="100%">
          <Text fontSize="base" fontWeight="bold" mb={9}>
            {t('What is a bad flip?')}
          </Text>
          <Button
            position="absolute"
            top="14px"
            right={4}
            p={0}
            fontSize="base"
            fontWeight="normal"
            variant="primaryFlat"
            onClick={onClose}
          >
            {t('Done')}
          </Button>
        </ChakraFlex>
        <div
          style={{display: 'flex', flexGrow: '1'}}
          {...badFlipDialogHandlers}
        >
          <ChakraFlex
            direction={['column', 'row']}
            justify="center"
            align="center"
            flexGrow={1}
          >
            <Stack
              spacing={0}
              borderColor="brandGray.016"
              borderWidth={[0, 1]}
              flexGrow={1}
              h="100%"
              minW={['42%', 120]}
              position="relative"
            >
              <BadFlipPartFrame flipCase={flipCase} />
              <BadFlipImage src={flipUrl(flipCase, 1)} roundedTop="md" />
              <BadFlipImage src={flipUrl(flipCase, 2)} />
              <BadFlipImage src={flipUrl(flipCase, 3)} />
              <BadFlipImage src={flipUrl(flipCase, 4)} roundedBottom="md" />
            </Stack>
            <ChakraFlex
              direction="column"
              justify="space-between"
              spacing={7}
              bg="white"
              borderRadius="lg"
              ml={[0, 7]}
              p={[0, 8]}
              w={['100%', 440]}
            >
              <Stack mt={[4, 0]} spacing={[5, 4]}>
                <ChakraBox display={['none', 'block']}>
                  <Heading fontSize="lg" fontWeight={500} lineHeight="32px">
                    {title}
                  </Heading>
                  <Text color="muted">{subtitle}</Text>
                </ChakraBox>
                <List
                  as="ul"
                  id="bad-flips"
                  p={['28px', 0]}
                  borderRadius={['8px', 0]}
                  backgroundColor={['gray.50', 'transparent']}
                >
                  <BadFlipListItem
                    flipCase={0}
                    description={
                      <Trans t={t} i18nKey="badFlipKeywordsVaseCoffee">
                        Vase /{' '}
                        <Text as="span" color="red.500">
                          Coffee
                        </Text>
                        . 'Coffee' keyword can not be found on the images
                      </Trans>
                    }
                    isActive={flipCase === 0}
                    onClick={() => {
                      setFlipCase(0)
                    }}
                  >
                    {t(
                      'One of the keywords is not clearly visible in the story'
                    )}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={1}
                    isActive={flipCase === 1}
                    onClick={() => {
                      setFlipCase(1)
                    }}
                  >
                    {t('There are numbers or letters indicating the order')}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={2}
                    isActive={flipCase === 2}
                    onClick={() => {
                      setFlipCase(2)
                    }}
                  >
                    {t('There is a sequence of enumerated objects')}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={3}
                    description={t(
                      'Some of the Idena users can not not read your the text in your local language'
                    )}
                    isActive={flipCase === 3}
                    onClick={() => {
                      setFlipCase(3)
                    }}
                  >
                    {t(
                      'There is text that is necessary to read to solve the flip'
                    )}
                  </BadFlipListItem>
                  <BadFlipListItem
                    flipCase={4}
                    isActive={flipCase === 4}
                    onClick={() => {
                      setFlipCase(4)
                    }}
                  >
                    {t('There is inappropriate content')}
                  </BadFlipListItem>
                </List>
                <ChakraFlex
                  display={['flex', 'none']}
                  justify="center"
                  h={12}
                  w="100%"
                >
                  <BadFlipListItemMobile
                    isActive={flipCase === 0}
                    number={1}
                    onClick={() => {
                      setFlipCase(0)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 1}
                    number={2}
                    onClick={() => {
                      setFlipCase(1)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 2}
                    number={3}
                    onClick={() => {
                      setFlipCase(2)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 3}
                    number={4}
                    onClick={() => {
                      setFlipCase(3)
                    }}
                  />
                  <BadFlipListItemMobile
                    isActive={flipCase === 4}
                    number={5}
                    onClick={() => {
                      setFlipCase(4)
                    }}
                  />
                </ChakraFlex>
              </Stack>
              <Stack display={['none', 'flex']} isInline justify="flex-end">
                <SecondaryButton onClick={onClose}>{t('Skip')}</SecondaryButton>
                <PrimaryButton
                  ref={nextButtonRef}
                  onClick={() => {
                    if (flipCase === dirs.length - 1) onClose()
                    else setFlipCase(flipCase + 1)
                  }}
                >
                  {flipCase === dirs.length - 1
                    ? t('Ok, I understand')
                    : t('Next')}
                </PrimaryButton>
              </Stack>
            </ChakraFlex>
          </ChakraFlex>
        </div>
      </BadFlipNoticeBody>
    </BadFlipNotice>
  )
}

export function ApiStatus(props) {
  const settings = useSettingsState()
  const {t} = useTranslation()
  const epoch = useEpoch()
  const [{state: identityState}] = useIdentity()

  let bg = 'xwhite.010'
  let color = 'gray.300'
  let text = t('Loading...')
  let status = StatusLabel.None

  const undefinedOrInvite = [
    IdentityStatus.Undefined,
    IdentityStatus.Invite,
  ].includes(identityState)

  if (settings.apiKeyState === ApiKeyStates.OFFLINE) {
    bg = 'red.020'
    color = 'red.500'
    text = t('Offline')
    status = StatusLabel.Offline
  } else if (
    settings.apiKeyState === ApiKeyStates.RESTRICTED &&
    !undefinedOrInvite
  ) {
    bg = 'warning.020'
    color = 'warning.500'
    text = t('Restricted')
    status = StatusLabel.Restricted
  } else if (
    settings.apiKeyState === ApiKeyStates.ONLINE ||
    settings.apiKeyState === ApiKeyStates.EXTERNAL ||
    (settings.apiKeyState === ApiKeyStates.RESTRICTED && undefinedOrInvite)
  ) {
    bg = 'green.020'
    color = 'green.500'
    text = t('Online')
    status = StatusLabel.Online
  }

  const restrictedOrOnline = [
    StatusLabel.Restricted,
    StatusLabel.Online,
  ].includes(status)

  return (
    <Flex position={['absolute', 'initial']} {...props}>
      <Tooltip
        label={
          status === StatusLabel.Restricted
            ? t(
                'You cannot use the shared node for the upcoming validation ceremony.'
              )
            : t(
                'Access to the shared node will be expired after the validation ceremony {{date}}',
                {
                  date: epoch
                    ? new Date(epoch.nextValidation).toLocaleString()
                    : '',
                }
              )
        }
        placement="right"
        zIndex="tooltip"
        bg="graphite.500"
        width={200}
        isDisabled={!restrictedOrOnline || undefinedOrInvite}
      >
        <Flex bg={bg} borderRadius="xl" px={3} py={[1, 1 / 2]} fontSize={13}>
          {status === StatusLabel.Restricted ? (
            <Flex align="baseline">
              <TextLink
                href="/node/restricted"
                color={color}
                fontWeight={500}
                lineHeight={rem(18)}
                _hover={{
                  textDecoration: 'none',
                }}
              >
                {text}
              </TextLink>
            </Flex>
          ) : (
            <Flex align="baseline">
              <Text color={color} fontWeight={500} lineHeight={rem(18)}>
                {text}
              </Text>
            </Flex>
          )}
        </Flex>
      </Tooltip>
    </Flex>
  )
}

export function Flip({
  hash,
  images,
  orders,
  fetched,
  failed,
  decoded,
  option,
  variant,
  timerDetails,
  onChoose,
  onImageFail,
  isTrainingValidation,
}) {
  const radius = useBreakpointValue(['12px', '8px'])
  const windowHeight = use100vh()
  const isDesktop = useIsDesktop()
  const refFlipHover = useRef(null)
  const refZoomIconHover = useRef(null)
  const isFlipHovered = useHover(refFlipHover.current)
  const isZoomIconHovered = useHover(refZoomIconHover.current)
  const {
    isOpen: isOpenFlipZoom,
    onOpen: onOpenFlipZoom,
    onClose: onCloseFlipZoom,
  } = useDisclosure()

  const scrollToZoomedFlip = flipId => {
    scroller.scrollTo(`flipId-${flipId}`, {
      containerId: 'zoomedFlips',
      horizontal: false,
      offset: -80,
    })
  }

  const onFLipClick = e => {
    if (e.ctrlKey || e.metaKey) {
      onOpenFlipZoom()
    } else {
      onChoose(hash)
    }
  }

  if ((fetched && !decoded) || failed) return <FailedFlip />
  if (!fetched) return <LoadingFlip />

  return (
    <div ref={refFlipHover}>
      <FlipHolder
        isZoomHovered={isZoomIconHovered}
        css={
          // eslint-disable-next-line no-nested-ternary
          option
            ? option === variant
              ? {
                  border: `solid ${rem(2)} ${theme.colors.primary}`,
                  boxShadow: `0 0 ${rem(2)} ${rem(3)} ${transparentize(
                    0.75,
                    theme.colors.primary
                  )}`,
                  transition: 'all .3s cubic-bezier(.5, 0, .5, 1)',
                }
              : {
                  opacity: 0.3,
                  transform: 'scale(0.98)',
                  transition: 'all .3s cubic-bezier(.5, 0, .5, 1)',
                }
            : {}
        }
      >
        {reorderList(images, orders[variant - 1]).map((src, idx) => (
          <ChakraBox
            key={idx}
            h={[
              `calc((${windowHeight}px - 290px) / 4)`,
              'calc((100vh - 260px) / 4)',
            ]}
            borderRadius={getFlipBorderRadius(idx, images.length - 1, radius)}
            css={{
              // height: 'calc((100vh - 260px) / 4)',
              position: 'relative',
              overflow: 'hidden',
            }}
            onClick={
              isDesktop
                ? e => {
                    console.log('START')
                    onFLipClick(e)
                    console.log('OPENED')
                    setTimeout(() => scrollToZoomedFlip(idx), 100)
                    console.log('AFTER TIMEOUT')
                  }
                : () => onChoose(hash)
            }
          >
            {isDesktop && idx === 0 && (
              <div ref={refZoomIconHover}>
                <ChakraFlex
                  display={isFlipHovered ? 'flex' : 'none'}
                  align="center"
                  justify="center"
                  borderRadius="8px"
                  backgroundColor="rgba(17, 17, 17, 0.5)"
                  position="absolute"
                  top={1}
                  right={1}
                  h={8}
                  w={8}
                  opacity={0.5}
                  _hover={{opacity: 1}}
                  zIndex={2}
                  onClick={e => {
                    e.stopPropagation()
                    onOpenFlipZoom()
                  }}
                >
                  <ZoomFlipIcon h={5} w={5} />
                </ChakraFlex>
              </div>
            )}
            <FlipBlur src={src} />
            <FlipImage
              src={src}
              alt="current-flip"
              height="100%"
              width="100%"
              style={{
                ...borderRadius('top', idx === 0 ? rem(8) : 'none'),
                ...borderRadius(
                  'bottom',
                  idx === images.length - 1 ? rem(8) : 'none'
                ),
                position: 'relative',
                zIndex: 1,
              }}
              onError={onImageFail}
            />
          </ChakraBox>
        ))}

        <Modal size="xl" isOpen={isOpenFlipZoom} onClose={onCloseFlipZoom}>
          <ModalOverlay />
          <ChakraFlex
            zIndex={1401}
            position="fixed"
            top={0}
            left={0}
            right={0}
            h={20}
            justify="space-between"
            align="center"
            backgroundColor="gray.980"
          >
            <ChakraBox />
            <ChakraFlex zIndex={2} justify="center">
              <ValidationTimer
                key={
                  isShortSession(timerDetails.state)
                    ? 'short-timer'
                    : 'long-timer'
                }
                validationStart={timerDetails.validationStart}
                duration={
                  timerDetails.shortSessionDuration -
                  (isTrainingValidation ? 0 : 10) +
                  (isShortSession(timerDetails.state)
                    ? 0
                    : timerDetails.longSessionDuration)
                }
                color="white"
              />
            </ChakraFlex>
            <CrossSmallIcon
              color="white"
              boxSize={8}
              mr={10}
              onClick={onCloseFlipZoom}
            />
          </ChakraFlex>
          <ModalContent
            mt={20}
            bg="transparent"
            border="none"
            boxShadow="none"
            containerProps={{id: 'zoomedFlips'}}
          >
            <ModalBody py={0}>
              <ChakraFlex h="100%" w="100%" direction="column" align="center">
                <ChakraBox w="100%">
                  {reorderList(images, orders[variant - 1]).map((src, idx) => (
                    <ElementFlipImage
                      name={`flipId-${idx}`}
                      ratio={4 / 3}
                      bg="gray.50"
                    >
                      {src ? (
                        <ChakraBox position="relative">
                          <ChakraBox
                            style={{
                              background: `center center / cover no-repeat url(${src})`,
                              filter: `blur(${rem(24)})`,
                              ...cover(),
                              zIndex: 1,
                            }}
                          />
                          <FlipImage
                            src={src}
                            alt="current-flip"
                            height="100%"
                            width="100%"
                            style={{
                              position: 'relative',
                              zIndex: 1,
                            }}
                            onError={onImageFail}
                          />
                        </ChakraBox>
                      ) : (
                        <EmptyFlipImage />
                      )}
                    </ElementFlipImage>
                  ))}
                </ChakraBox>
              </ChakraFlex>
            </ModalBody>
          </ModalContent>
        </Modal>
      </FlipHolder>
    </div>
  )
}

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>
    )
  )
}