From 57345d8775107a5b213a9deaea6c5d94da6c929e Mon Sep 17 00:00:00 2001
From: Dustin Wells <dustinwells@Dustins-MacBook-Pro.local>
Date: Fri, 21 Apr 2017 14:10:11 -0500
Subject: [PATCH] Created components and styled components

---
 package.json                   |   3 +-
 public/index.html              |   1 +
 src/components/FollowWho.js    |  37 ++++++
 src/components/Header.js       |   9 +-
 src/components/HeaderIcons.js  |  13 +++
 src/components/HeaderLogo.js   |  10 ++
 src/components/HeaderSearch.js |  11 ++
 src/components/LeftColumn.js   |  13 +++
 src/components/LiveVideo.js    |  11 ++
 src/components/Main.js         |  10 +-
 src/components/MidColumn.js    |  12 ++
 src/components/NewTweet.js     |  18 +++
 src/components/RightColumn.js  |  13 +++
 src/components/Timeline.js     |  33 ++++++
 src/components/Trends.js       |  33 ++++++
 src/components/UserInfo.js     |  41 +++++++
 src/index.css                  | 206 ++++++++++++++++++++++++++++++++-
 yarn.lock                      |  14 +--
 18 files changed, 473 insertions(+), 15 deletions(-)
 create mode 100644 src/components/FollowWho.js
 create mode 100644 src/components/HeaderIcons.js
 create mode 100644 src/components/HeaderLogo.js
 create mode 100644 src/components/HeaderSearch.js
 create mode 100644 src/components/LeftColumn.js
 create mode 100644 src/components/LiveVideo.js
 create mode 100644 src/components/MidColumn.js
 create mode 100644 src/components/NewTweet.js
 create mode 100644 src/components/RightColumn.js
 create mode 100644 src/components/Timeline.js
 create mode 100644 src/components/Trends.js
 create mode 100644 src/components/UserInfo.js

diff --git a/package.json b/package.json
index 4dafb04..ba4a902 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^3.3.7",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
@@ -15,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index aab5e3b..ad3aa08 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <script src="https://use.fontawesome.com/a6bc283128.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/components/FollowWho.js b/src/components/FollowWho.js
new file mode 100644
index 0000000..c20e470
--- /dev/null
+++ b/src/components/FollowWho.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+
+function FollowWho(){
+   return (
+    <div id="followwho">
+      <div className="twitter-account">
+        <div className="twitter-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="twitter-username">
+          <p>@Bacon4Life</p>
+          <p className ="twitter-username-discription">Casual Bacon Eater</p>
+        </div>
+      </div>
+      <div className="twitter-account">
+        <div className="twitter-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="twitter-username">
+          <p>@Bacon4Life</p>
+          <p className ="twitter-username-discription">Casual Bacon Eater</p>
+        </div>
+      </div>
+      <div className="twitter-account">
+        <div className="twitter-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="twitter-username">
+          <p>@Bacon4Life</p>
+          <p className ="twitter-username-discription">Casual Bacon Eater</p>
+        </div>
+      </div>
+    </div>);
+}
+
+export default FollowWho;
diff --git a/src/components/Header.js b/src/components/Header.js
index 5ca67f4..0891336 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,10 +1,15 @@
 import React from 'react';
+import HeaderIcons from './HeaderIcons.js';
+import HeaderLogo from './HeaderLogo.js';
+import HeaderSearch from './HeaderSearch.js';
 
 function Header(){
    return (
     <div id="header">
-    I am the header
+    <HeaderIcons />
+    <HeaderLogo />
+    <HeaderSearch />
   </div>);
 }
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/HeaderIcons.js b/src/components/HeaderIcons.js
new file mode 100644
index 0000000..2ae8cfe
--- /dev/null
+++ b/src/components/HeaderIcons.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+function HeaderIcons(){
+   return (
+    <div id="headericons">
+      <a href='#'><i className="fa fa-twitter">Home</i></a>
+      <a href='#'><i className="fa fa-bolt">Moments</i></a>
+      <a href='#'><i className="fa fa-bell">Notifications</i></a>
+      <a href='#'><i className="fa fa-envelope">Messages</i></a>
+    </div>);
+}
+
+export default HeaderIcons;
diff --git a/src/components/HeaderLogo.js b/src/components/HeaderLogo.js
new file mode 100644
index 0000000..585bde7
--- /dev/null
+++ b/src/components/HeaderLogo.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function HeaderLogo(){
+   return (
+    <div id="headerlogo">
+      <i className="fa fa-twitter fa-lg blue-text"></i>
+    </div>);
+}
+
+export default HeaderLogo;
diff --git a/src/components/HeaderSearch.js b/src/components/HeaderSearch.js
new file mode 100644
index 0000000..6e790f0
--- /dev/null
+++ b/src/components/HeaderSearch.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function HeaderSearch(){
+   return (
+     <div id="headersearch">
+         <span className="icon"><i className="fa fa-search"></i></span>
+         <input type="search" id="searchBar" placeholder="Search" />
+       </div>);
+}
+
+export default HeaderSearch;
diff --git a/src/components/LeftColumn.js b/src/components/LeftColumn.js
new file mode 100644
index 0000000..a65266c
--- /dev/null
+++ b/src/components/LeftColumn.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import UserInfo from './UserInfo.js';
+import Trends from './Trends.js';
+function LeftColumn(){
+   return (
+    <div id="leftcolumn">
+
+      <UserInfo />
+      <Trends />
+    </div>);
+}
+
+export default LeftColumn;
diff --git a/src/components/LiveVideo.js b/src/components/LiveVideo.js
new file mode 100644
index 0000000..09204d8
--- /dev/null
+++ b/src/components/LiveVideo.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+
+function LiveVideo(){
+   return (
+    <div id="livevideo">
+      There is a really awesome video right here.
+    </div>);
+}
+
+export default LiveVideo;
diff --git a/src/components/Main.js b/src/components/Main.js
index ece0b5b..018b843 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,10 +1,16 @@
 import React from 'react';
+import LeftColumn from './LeftColumn.js';
+import MidColumn from './MidColumn.js';
+import RightColumn from './RightColumn.js';
 
 function Main(){
   return (
     <div id="main">
-    main
+    <LeftColumn />
+    <MidColumn />
+    <RightColumn />
+
     </div>
     );
 }
-export default Main;
\ No newline at end of file
+export default Main;
diff --git a/src/components/MidColumn.js b/src/components/MidColumn.js
new file mode 100644
index 0000000..4212778
--- /dev/null
+++ b/src/components/MidColumn.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import NewTweet from './NewTweet.js';
+import Timeline from './Timeline.js';
+function MidColumn(){
+   return (
+    <div id="midcolumn">
+      <NewTweet />
+      <Timeline />
+    </div>);
+}
+
+export default MidColumn;
diff --git a/src/components/NewTweet.js b/src/components/NewTweet.js
new file mode 100644
index 0000000..b6af6ea
--- /dev/null
+++ b/src/components/NewTweet.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+function NewTweet(){
+   return (
+    <div id="newtweet">
+      <div id="newtweet-avatar">
+        <img src='https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg' className='mini-photo'></img>
+      </div>
+      <div id='newtweet-textarea'>
+        <textarea className='newtweet-textarea' placeholder="What's on your mind?"></textarea>
+      </div>
+      <div>
+        <button className='blue-text newtweet-submit'>Submit Tweet </button>
+      </div>
+    </div>);
+}
+
+export default NewTweet;
diff --git a/src/components/RightColumn.js b/src/components/RightColumn.js
new file mode 100644
index 0000000..88bd884
--- /dev/null
+++ b/src/components/RightColumn.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import FollowWho from './FollowWho.js';
+import LiveVideo from './LiveVideo.js';
+
+function RightColumn(){
+   return (
+    <div id="rightcolumn">
+      <FollowWho />
+      <LiveVideo />
+    </div>);
+}
+
+export default RightColumn;
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
new file mode 100644
index 0000000..0f6a964
--- /dev/null
+++ b/src/components/Timeline.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+function Timeline(){
+   return (
+    <div id="timeline">
+      <div className="tweet">
+        <div className="tweet-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="tweet-content">
+          Bacon ipsum dolor amet drumstick tri-tip venison t-bone, pig pancetta tongue bacon tail jerky fatback. Frankfurter chicken sausage, landjaeger rump turducken strip steak. Beef andouille bresaola, turducken tri-tip meatball frankfurter shankle tongue ham cupim. Ham sausage beef ribs jerky pork loin pastrami. Chuck tenderloin ribeye frankfurter prosciutto pancetta.
+        </div>
+      </div>
+      <div className="tweet">
+        <div className="tweet-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="tweet-content">
+          Shoulder ribeye chuck rump shank. Frankfurter t-bone turkey, sausage brisket tri-tip hamburger boudin biltong. T-bone beef ham venison alcatra rump. Bresaola tenderloin chicken andouille shankle porchetta tri-tip short loin ground round cupim venison shoulder t-bone boudin. Alcatra salami t-bone pig, biltong pork loin spare ribs corned beef venison tenderloin shoulder. Frankfurter pancetta shankle drumstick.
+        </div>
+      </div>
+      <div className="tweet">
+        <div className="tweet-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="tweet-content">
+          Kevin kielbasa pork belly, shankle bresaola hamburger turkey tongue short loin sirloin sausage prosciutto. Fatback pancetta turducken prosciutto beef ribs turkey flank, ham bresaola ball tip landjaeger picanha spare ribs drumstick short loin. Picanha rump boudin shank, shankle pork bacon pork loin fatback alcatra tongue cupim salami.
+        </div>
+      </div>
+    </div>);
+}
+
+export default Timeline;
diff --git a/src/components/Trends.js b/src/components/Trends.js
new file mode 100644
index 0000000..aaf5173
--- /dev/null
+++ b/src/components/Trends.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+function Trends(){
+   return (
+    <div id="trends">
+      <div className = "trends-header">
+        <h3> Trends </h3>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>#Bucks</h3>
+        <p className = 'trends-tweets'> 3620 Tweets </p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>#UFC</h3>
+        <p className = 'trends-tweets'> 1320 Tweets </p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>Berkely</h3>
+        <p className = 'trends-tweets'>Sounds like Broccoli </p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>Paul George</h3>
+        <p className = 'trends-tweets'>48.7 k Tweets</p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>#ACA</h3>
+        <p className = 'trends-tweets'>Coding is Awesome!</p>
+      </div>
+
+    </div>);
+}
+
+export default Trends;
diff --git a/src/components/UserInfo.js b/src/components/UserInfo.js
new file mode 100644
index 0000000..e227701
--- /dev/null
+++ b/src/components/UserInfo.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+
+function UserInfo(){
+   return (
+    <div id="userinfo">
+      <div id="userinfo-user">
+        <div id="photo">
+          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg' id='user-photo'></img>
+
+        </div>
+        <div id="username">
+          <p> <strong>John Doe</strong> </p>
+          <p> @JDoe50 </p>
+        </div>
+    </div>
+
+      <div id="tweetinfo">
+          <div className = "tweetinfo">
+            <h3> Tweets </h3>
+            <p className = "blue-text"> 128</p>
+          </div>
+          <div className = "tweetinfo">
+            <h3> Following </h3>
+            <p className = "blue-text"> 193</p>
+          </div>
+          <div className = "tweetinfo">
+            <h3> Followers </h3>
+            <p className = "blue-text"> 26</p>
+          </div>
+      </div>
+
+      <div id="gain-text">
+        <h1> Gain more followers! </h1>
+        <p> Promote your account and discovered by more people on twitter! </p>
+        <a href='#'>Preview it first below</a>
+      </div>
+    </div>);
+}
+
+export default UserInfo;
diff --git a/src/index.css b/src/index.css
index 21d2424..7908d26 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,212 @@
 body {
   margin: 0;
   padding: 0;
+  height: 100%;
   font-family: sans-serif;
 }
 /* Styles go here */
 #header{
-  border: 1px solid black;
+
+  height: 50px;
+  padding-top: 30px;
+  border-bottom: 1px solid rgb(220,220,220);
 }
 #main{
-  border: 1px solid black;
-}
\ No newline at end of file
+  height: 900px;
+}
+
+#leftcolumn{
+  float: left;
+  width: 33%;
+  height: 100%;
+
+}
+#midcolumn{
+  float: left;
+  width: 33%;
+  height: 900px;
+
+
+}
+#rightcolumn{
+  float: left;
+  width: 33%;
+  height: 900px;
+
+}
+#userinfo{
+  background-color: rgb(245,245,245);
+  background-size: 50%;
+  height: 400px;
+  margin-bottom: 100px;
+}
+
+#userinfo-user{
+  width: 100%;
+  height: 100px;
+  background-color: #00aced;
+
+}
+
+#photo{
+  width: 36.25%;
+  float: left;
+  height: 40%;
+  margin-top: 75px;
+  margin-left: 70px;
+}
+
+#photo #user-photo{
+  width: 100px;
+  height: 100px;
+  border: 2px solid #fff;
+}
+
+
+#username {
+  float: left;
+  font-size: 1.2em;
+  margin-top: 140px;
+
+}
+
+#username p{
+  margin-top: -20px;
+
+}
+
+#tweetinfo{
+  width: 100%;
+  height: 100px;
+  float: left;
+  text-align: center;
+  margin-top: -50px;
+}
+
+.tweetinfo{
+  margin-top: 59px;
+  float: left;
+  width: 33%;
+  font-size: 0.9em;
+
+}
+
+.blue-text{
+  color: #00aced;
+}
+#gain-text{
+  margin-top: 50px;
+  padding-left: 50px;
+  float:left;
+  width: 90%;
+  height: 200px;
+  background-color: rgb(220,220,220);
+}
+#gain-text h1{
+  font-size: 1.5em;
+}
+
+#trends{
+  height: 400px;
+  margin-left: 50px;
+}
+#trends p{
+  margin-top: -20px;
+}
+
+#headericons{
+  width: 45%;
+  float: left;
+  padding-left: 20px;
+}
+#headericons i{
+  padding-left: 20px;
+  color: #0084b4;
+}
+
+#headerlogo{
+  width: 10%;
+  float: left;
+}
+#headersearch{
+  width: 43%;
+  float: left;
+  text-align: center;
+}
+
+#searchBar{
+  height: 90px;
+}
+#newtweet{
+  padding-top: 50px;
+  padding-left: 50px;
+}
+.mini-photo{
+  width: 60px;
+  height: 60px;
+}
+
+#newtweet-avatar{
+  float: left;
+}
+
+#newtweet-textarea{
+  float: left;
+  margin-left: 10px;
+}
+
+.newtweet-textarea{
+  width: 300px;
+  height: 45px;
+  resize: none;
+}
+
+.newtweet-submit{
+  margin-left: 225px;
+}
+.tweet{
+  margin-top: 40px;
+  padding-left: 40px;
+  margin-bottom: 40px;
+  width: 100%;
+  display: inline-block;
+}
+
+.tweet-avatar{
+  float: left;
+  margin-top: 20px;
+  width: 18%;
+}
+.tweet-content{
+  float: left;
+  width: 60%;
+  margin-top: 20px;
+}
+
+.twitter-avatar{
+  float: left;
+  margin-top: 20px;
+  width: 18%;
+}
+.twitter-username{
+  float: left;
+  width: 60%;
+  margin-top: 20px;
+}
+
+.twitter-account{
+
+  padding-left: 40px;
+
+  width: 100%;
+  display: inline-block;
+}
+.twitter-username-discription{
+  margin-top: -15px;
+}
+
+#livevideo{
+  margin-top: 100px;
+  height: 200px;
+  border: 1px solid blue;
+}
diff --git a/yarn.lock b/yarn.lock
index 83ee67c..9661663 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -927,6 +927,10 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
+bootstrap@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+
 brace-expansion@^1.0.0:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.7.tgz#3effc3c50e000531fb720eaff80f0ae8ef23cf59"
@@ -2454,14 +2458,10 @@ https-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-iconv-lite@0.4.13:
+iconv-lite@0.4.13, iconv-lite@~0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
-iconv-lite@~0.4.13:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
-
 icss-replace-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
@@ -4145,7 +4145,7 @@ react-dev-utils@^0.5.2:
     sockjs-client "1.0.1"
     strip-ansi "3.0.1"
 
-react-dom@15.5.4:
+react-dom@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
   dependencies:
@@ -4199,7 +4199,7 @@ react-scripts@0.9.5:
   optionalDependencies:
     fsevents "1.0.17"
 
-react@15.5.4:
+react@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
   dependencies: