Add footer and message components

twhite96 · Aug 2, 2018 · bc01ae4 · bc01ae4
1 parent 8555e8b
commit bc01ae4
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -6,8 +6,8 @@
 [![Greenkeeper badge](https://badges.greenkeeper.io/twhite96/checkyoself.svg)](https://greenkeeper.io/)
 [![Twitter Follow](https://img.shields.io/twitter/follow/TiffanyW_412.svg?style=social&label=Follow)](https://twitter.com/TiffanyW_412)
 [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
-[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
 [![GitHub commits](https://img.shields.io/github/commits-since/twhite96/checkyoself/0.0.2.svg?maxAge=2592000)](https://github.com/twhite96/checkyoself)
+[![](https://img.shields.io/badge/buy%20me-a%20coffee-%2306D7D9.svg)](https://www.paypal.me/codenewb)
 
 Frustrated by Grammarly and Hemingway apps' inability to process markdown blog posts, I decided to make my own site to process markdown blog posts or other texts. I settled on [Material Design Lite](https://getmdl.io/index.html) for the UI because I like colorful things.
 

diff --git a/Untitled.js b/Untitled.js
@@ -0,0 +1,24 @@
+class MyComp extends React.Component {
+	render() {
+		return <div>{this.props.text}</div>
+	}
+}
+
+const MyFuncComp = (props) => {
+	return <div>{props.text}</div>
+}
+
+const MyDestructuredFuncComp = ({text}) => <div>{text}</div>
+
+class MyApp extends React.Component {
+	render() {
+		const someText = ['some', 'text']
+		return (
+			<div>
+				{someText.map(text => <MyComp text={text}/>)}
+				{someText.map(text => <MyFuncComp text={text}/>)}
+				{someText.map(text => MyDestructuredFuncComp({text}))}{/* another way to call the component */}
+			</div>
+		)
+	}
+}
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Hero, Title, SubTitle, Container } from 'reactbulma';
+import '../smde-editor.css';
+
+class Footer extends React.Component {
+  render() {
+    return (
+      <Hero className="change-header push-down">
+        <Hero.Foot>
+          <Container>
+            <Title className="change-text">
+              Primary title
+            </Title>
+            <SubTitle className="change-text">
+              Primary subtitle
+            </SubTitle>
+          </Container>
+        </Hero.Foot>
+      </Hero>
+    );
+  }
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Hero } from '../components';
-import { Title, SubTitle, Container } from 'reactbulma';
+import { Hero, Title, SubTitle, Container } from 'reactbulma';
 import '../smde-editor.css';
 
 

diff --git a/src/components/MessageText.js b/src/components/MessageText.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Message } from 'reactbulma';
+import '../smde-editor.css';
+
+class MessageText extends React.Component {
+  render() {
+    return (
+      <div class="fit pad-bottom">
+        <Message class="change-body body-styles">
+          <Message.Header class="fit change-header change-text header-styles" >
+            <p>You're checking out Check Yo Self</p>
+          </Message.Header>
+          <Message.Body>
+            <h2>Hey! <span role="img" aria-label="wave-emoji-brown">👋🏾</span></h2>
+            <p>This is Check Yo Self, an app to check the <span class="highlight">grammar and spelling</span> of your <span class="highlight">markdown blog posts</span>.</p>
+            <p>
+
+            </p>
+          </Message.Body>
+        </Message>
+      </div>
+    );
+  }
+}
+
+export default MessageText;
diff --git a/src/components/Text.js b/src/components/Text.js
@@ -7,7 +7,8 @@ import Popup from 'reactjs-popup';
 import BurgerIcon from '../components/BurgerIcon';
 import Menu from '../components/Menu';
 import '../smde-editor.css';
-import WriteGood from './WriteGood';
+// import WriteGood from './WriteGood';
+import Footer from '../components/Footer';
 
 // let counter = 0;
 
@@ -59,38 +60,43 @@ class Text extends React.Component {
 
   render() {
     return (
-      <div>
-        <div style={styles}>
-          <Popup
-            modal
-            overlayStyle={{ background: "rgba(255,255,255,0.98" }}
-            contentStyle={contentStyle}
-            closeOnDocumentClick={false}
-            trigger={open => <BurgerIcon open={open} />}
-          >
-            {close => <Menu close={close} />}
-          </Popup>
+      <React.Fragment>
+        <div>
+          <div style={styles}>
+            <Popup
+              modal
+              overlayStyle={{ background: "rgba(255,255,255,0.98" }}
+              contentStyle={contentStyle}
+              closeOnDocumentClick={false}
+              trigger={open => <BurgerIcon open={open} />}
+            >
+              {close => <Menu close={close} />}
+            </Popup>
 
-          {/* <button
+            {/* <button
             style={{ display: "inline-block", margin: "10px 0" }}
             onClick={this.handleTextChange}
           >
             Click me to update the textValue outside of the editor
           </button> */}
-          <SimpleMDEReact
-            className="smde-editor-styles"
-            editorStyle={editorStyle}
-            label="Markdown Editor"
-            onChange={this.handleChange1}
-            options={{
-              autofocus: true,
-              spellChecker: true,
-              // etc.
-            }}
-            value={this.state.textValue1}
-          />
+            <SimpleMDEReact
+              className="smde-editor-styles"
+              editorStyle={editorStyle}
+              label="Markdown Editor"
+              onChange={this.handleChange1}
+              options={{
+                autofocus: true,
+                spellChecker: true,
+                // etc.
+              }}
+              value={this.state.textValue1}
+            />
+          </div>
+        </div>
+        <div>
+          <Footer />
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 }

diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import React from 'react';
 import './App.css';
 import { render } from 'react-dom';
 import Header from './components/Header';
+import MessageText from './components/MessageText';
 import Popup from 'reactjs-popup';
 import BurgerIcon from './components/BurgerIcon';
 import Menu from './components/Menu';
@@ -16,6 +17,7 @@ import './index.css';
 // import { Redirect } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import NotFound from './components/NotFound';
+import Footer from './components/Footer';
 
 const styles = {
   fontFamily: 'sans-serif',
@@ -30,10 +32,14 @@ const contentStyle = {
 
 
 const Home = () => (
-  <div>
-    <h2>Hey! <span role="img">👋🏾</span></h2>
-    <p>This is Check Yo Self, an app to check the <span class="highlight">grammar and spelling</span> of your <span class="highlight">markdown blog posts</span>.</p>
-  </div>
+  <React.Fragment>
+    <div>
+      <MessageText />
+    </div>
+    <div>
+      <Footer />
+    </div>
+  </React.Fragment>
 );
 
 // const Contact = () => (

diff --git a/src/smde-editor.css b/src/smde-editor.css
@@ -2,10 +2,32 @@
   margin: 0 20rem 0 20rem;
 }
 
+/* .fit {
+  padding: 0 20rem 0 20rem;
+} */
 /* .smde-editor-styles > * {
   flex: 1 1 250px;
   margin: 10px;
 } */
+.push-down {
+  margin-top: 39rem;
+  padding: 3.9rem;
+}
+.body-styles {
+  border-bottom: rgba(6, 215, 217, 0.2);
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.pad-bottom {
+  padding-bottom: 6rem;
+}
+
+.header-styles {
+  border-top: #06D7D9;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
 
 .highlight {
   background-color: rgba(6, 215, 217, 0.5);
@@ -16,6 +38,10 @@
   background-color: #06D7D9;
 }
 
+.change-body {
+  background-color: rgba(6, 215, 217, 0.2);
+}
+
 .change-text {
   color: white;
 }