import React from "react";
import { Card, CardTitle } from "material-ui";

const HelpCard = () => (
  <Card>
    <CardTitle
      title={<span style={{ color: "#e00122" }}>Need Help?</span>}
      style={{
        borderBottomWidth: 1,
        borderBottomStyle: "solid",
        borderBottomColor: "#E0E0E0"
      }}
    />
    <div style={{ padding: 20 }}>
      <ul>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="http://www.uc.edu/catalyst/tips-tricks.html"
          >
            Catalyst tips and tricks
          </a>{" "}
          provide how-to videos and step-by-step instructions to help you
          navigate Catalyst.
        </li>
        <li>
          <strong>Catalyst tutorials</strong> (
          <em>see Quick Links on the left</em>) contain helpful videos.
        </li>
      </ul>
    </div>
  </Card>
);

export default HelpCard;