Refactor pages and fix content to its intended use (?)

imports/ui/components/Content/Content.js

@@ -3,17 +3,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
 import media from '../../stylesheets/style-utils';
 
 const Content = ({ className, content }) => (
- <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
+ <div className={className}>
+ <ReactMarkdown source={content} />
+ </div>
 );
 
 const StyledContent = styled(Content)`
  max-width: 700px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 22px;
+ overflow: scroll;
 
  h1,
  h2,

imports/ui/components/VerifyEmailAlert/VerifyEmailAlert.js

@@ -15,7 +15,9 @@ const handleResendVerificationEmail = (emailAddress) => {
  });
 };
 
-const VerifyEmailAlert = ({ className, userId, emailVerified, emailAddress }) => (
+const VerifyEmailAlert = ({
+ className, userId, emailVerified, emailAddress,
+}) => (
  userId && !emailVerified ? (
  <div className={className}>
  <Alert className="verify-email text-center">

imports/ui/layouts/App/App.js

@@ -8,7 +8,7 @@ import { Grid } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Roles } from 'meteor/alanning:roles';
-import { ThemeProvider } from 'styled-components'
+import styled, { ThemeProvider } from 'styled-components';
 import Navigation from '../../components/Navigation/Navigation';
 import Authenticated from '../../components/Authenticated/Authenticated';
 import Public from '../../components/Public/Public';
@@ -33,8 +33,6 @@ import VerifyEmailAlert from '../../components/VerifyEmailAlert/VerifyEmailAlert
 import getUserName from '../../../modules/get-user-name';
 import theme from '../../stylesheets/theme';
 
-import './App.scss';
-
 class App extends React.Component {
  constructor(props) {
  super(props);
@@ -52,7 +50,7 @@ class App extends React.Component {
  <ThemeProvider theme={theme}>
  <Router>
  {!props.loading ? (
- <div className="App">
+ <div className={props.className}>
  {props.authenticated ?
  <VerifyEmailAlert
  userId={props.userId}
@@ -95,6 +93,12 @@ App.defaultProps = {
  emailAddress: '',
 };
 
+const StyledApp = styled(App)`
+ > .container {
+ margin-bottom: 20px;
+ }
+`;
+
 App.propTypes = {
  loading: PropTypes.bool.isRequired,
  userId: PropTypes.string,
@@ -121,4 +125,4 @@ export default withTracker(() => {
  emailAddress,
  emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true,
  };
-})(App);
+})(StyledApp);

imports/ui/pages/Documents/Documents.js

@@ -5,12 +5,11 @@ import { Table, Alert, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Bert } from 'meteor/themeteorchef:bert';
+import styled from 'styled-components';
 import DocumentsCollection from '../../../api/Documents/Documents';
 import { timeago, monthDayYearAtTime } from '../../../modules/dates';
 import Loading from '../../components/Loading/Loading';
 
-import './Documents.scss';
-
 const handleRemove = (documentId) => {
  if (confirm('Are you sure? This is permanent!')) {
  Meteor.call('documents.remove', documentId, (error) => {
@@ -24,9 +23,9 @@ const handleRemove = (documentId) => {
 };
 
 const Documents = ({
- loading, documents, match, history,
+ className, loading, documents, match, history,
 }) => (!loading ? (
- <div className="Documents">
+ <div className={className}>
  <div className="page-header clearfix">
  <h4 className="pull-left">Documents</h4>
  <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add Document</Link>
@@ -75,7 +74,14 @@ const Documents = ({
  </div>
 ) : <Loading />);
 
+const StyledDocuments = styled(Documents)`
+ * > table > tbody > tr > td {
+ vertical-align: middle;
+ }
+`;
+
 Documents.propTypes = {
+ className: PropTypes.node.isRequired,
  loading: PropTypes.bool.isRequired,
  documents: PropTypes.arrayOf(PropTypes.object).isRequired,
  match: PropTypes.object.isRequired,
@@ -88,4 +94,4 @@ export default withTracker(() => {
  loading: !subscription.ready(),
  documents: DocumentsCollection.find().fetch(),
  };
-})(Documents);
+})(StyledDocuments);

imports/ui/pages/Index/Index.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
+import styled from 'styled-components';
+import { lighten, darken } from 'polished';
+import media from '../../stylesheets/style-utils';
 
-import './Index.scss';
-
-const Index = () => (
- <div className="Index">
+const Index = ({ className }) => (
+ <div className={className}>
  <img
  src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
  alt="Clever Beagle"
@@ -21,4 +23,78 @@ const Index = () => (
  </div>
 );
 
-export default Index;
+const StyledIndex = styled(Index)`
+ padding: 40px;
+ background: ${props => props.theme.colors.cbBlue};
+ text-align: center;
+ border-radius: 3px;
+ color: #fff;
+
+ img {
+ width: 100px;
+ height: auto;
+ }
+
+ h1 {
+ font-size: 28px;
+ }
+
+ p {
+ font-size: 18px;
+ color: ${props => lighten(0.25, props.theme.colors.cbBlue)};
+ }
+
+ > div {
+ display: inline-block;
+ margin: 10px 0 0;
+
+ .btn:first-child {
+ margin-right: 10px;
+ }
+
+ .btn {
+ border: none;
+ }
+ }
+
+ footer {
+ margin: 40px -40px -40px;
+ border-top: 1px solid ${props => darken(0.10, props.theme.colors.cbBlue)};
+ padding: 20px;
+
+ p {
+ font-size: 14px;
+ line-height: 22px;
+ color: ${props => lighten(0.35, props.theme.colors.cbBlue)};
+ margin: 0;
+ }
+
+ p a {
+ color: ${props => lighten(0.35, props.theme.colors.cbBlue)};
+ text-decoration: underline;
+ }
+ }
+
+ ${media.tablet`
+ padding: 30px;
+
+ footer {
+ margin: 30px -30px -30px;
+ }
+ `};
+
+
+ ${media.handheldLarge`
+ padding: 20px;
+
+ footer {
+ margin: 20px -20px -20px;
+ }
+ `};
+`;
+
+Index.propTypes = {
+ className: PropTypes.node.isRequired,
+};
+
+export default StyledIndex;

imports/ui/pages/Logout/Logout.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
+import styled from 'styled-components';
+import { lighten } from 'polished';
+import media from '../../stylesheets/style-utils';
 import Icon from '../../components/Icon/Icon';
 
-import './Logout.scss';
-
 class Logout extends React.Component {
  componentDidMount() {
  Meteor.logout(() => this.props.setAfterLoginPath(null));
  }
 
  render() {
  return (
- <div className="Logout">
+ <div className={this.props.className}>
  <img
  src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
  alt="Clever Beagle"
@@ -29,8 +30,62 @@ class Logout extends React.Component {
  }
 }
 
+const StyledLogout = styled(Logout)`
+ padding: 40px;
+ background: ${props => props.theme.colors.cbBlue};
+ text-align: center;
+ border-radius: 3px;
+ color: #fff;
+
+ img {
+ width: 100px;
+ height: auto;
+ }
+
+ h1 {
+ font-size: 28px;
+ }
+
+ p {
+ font-size: 18px;
+ color: ${props => lighten(0.25, props.theme.colors.cbBlue)};;
+ }
+
+ ul {
+ list-style: none;
+ display: inline-block;
+ padding: 0;
+ margin: 10px 0 0;
+ }
+
+ ul li {
+ float: left;
+ font-size: 28px;
+ line-height: 28px;
+
+ a {
+ color: #fff;
+ }
+
+ &:not(:last-child) {
+ margin-right: 15px;
+ }
+ }
+
+${media.tablet`
+ padding: 30px;
+`};
+
+
+${media.handheldLarge`
+ padding: 20px;
+`};
+`;
+
+
 Logout.propTypes = {
+ className: PropTypes.node.isRequired,
  setAfterLoginPath: PropTypes.func.isRequired,
 };
 
-export default Logout;
+export default StyledLogout;

imports/ui/pages/Page/Page.js

@@ -1,30 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import Content from '../../components/Content/Content';
 import PageHeader from '../../components/PageHeader/PageHeader';
+import media from '../../stylesheets/style-utils';
 
-import './Page.scss';
-
-const Page = ({ title, subtitle, content }) => {
+const Page = ({
+ className, title, subtitle, content,
+}) => {
  window.scrollTo(0, 0); // Force window to top of page.
  return (
- <div className="Page">
+ <div className={className}>
  <PageHeader title={title} subtitle={subtitle} />
- <div className="Content">
- <ReactMarkdown source={content} />
- </div>
+ <Content content={content} />
  </div>
  );
 };
 
+const StyledPage = styled(Page)`
+ margin-bottom: 30px;
+
+ ${media.tablet`
+ margin-bottom: 0px;
+ `};
+`;
+
 Page.defaultProps = {
  subtitle: '',
 };
 
 Page.propTypes = {
+ className: PropTypes.node.isRequired,
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  content: PropTypes.string.isRequired,
 };
 
-export default Page;
+export default StyledPage;