oysterprotocol/webinterface

import React from "react";
import styled from "styled-components";

import SlideError from "../shared/slide-error";

const BROKERS_DOWN = require("../../assets/images/icon_brokers_down.png");

const BrokersDownImage = styled.img`
  display: block;
  float: right;
  margin: 0 0 0 0;
  @media (max-width: 767px) {
    float: none;
    margin: 60px auto 0 auto;
    width: 60%;
  }
  @media (min-width: 768px) and (max-width: 991px) {
    float: none;
    margin: 0 auto;
    width: 60%;
  }
`;

const BrokersDownParagraph = styled.p`
  margin: 80px 0 0 0;
  max-width: 450px;
  font-size: 20px;
  @media (max-width: 767px) {
    margin: 60px 0 0 0;
    font-size: 15px;
  }
  @media (min-width: 768px) and (max-width: 991px) {
    margin: 80px 0 0 0;
  }
`;

const BrokersDownLinkSpan = styled.span``;

const BrokersDownLinkText = styled.a`
  font-weight: bold;
  color: #0068ea !important;
  text-decoration: none;
  ${BrokersDownLinkSpan}:hover & {
    text-decoration: none;
    color: #0068ea !important;
  }
`;

class BrokersDownSlide extends React.Component {
  render() {
    return (
      <SlideError title="Broker Nodes Offline" image={null}>
        <BrokersDownImage src={BROKERS_DOWN} alt="brokers-down" />
        <BrokersDownParagraph>
          Oyster Storage’s broker nodes are currently offline. Uploads are
          unavailable at this time.
          <br />
          <br />
          Please visit our{" "}
          <BrokersDownLinkSpan>
            <BrokersDownLinkText href="https://t.me/oysterprotocol">
              Telegram Channel
            </BrokersDownLinkText>
          </BrokersDownLinkSpan>{" "}
          for more information. We apologize for the inconvenience.
        </BrokersDownParagraph>
      </SlideError>
    );
  }
}

export default BrokersDownSlide;