Merge branch 'master' into fix-styling

CONTRIBUTE.md

@@ -9,6 +9,7 @@ Thank you for collaborating to our coders playlist.
 - Don't `push` to master only `pull` from git
 - Branch names: `name-of-your-feature`
 - Commit messages: Short description describing your action. Ex: `Adds new song to playlist`
+- Don't commit the `yarn.lock` file, unless you are installing dependencies to the project
 
 **IMPORTANT:** Please pull before you push
 

README.md

@@ -1,13 +1,13 @@
 # 🎵 React Playlist 👩🏻‍💻👨🏻‍💻
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/0028ccc2-0db4-4c6a-bda2-1284d20add2d/deploy-status)](https://app.netlify.com/sites/determined-mcclintock-d5c5f5/deploys)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0f963293-9a8f-4143-9fda-df218c4bf78c/deploy-status)](https://app.netlify.com/sites/swfl-coders-playlist/deploys)
 
 Helps us build our future events playlist. You can either modify this app to give it a better look or simply add a new song.
 We all have a song that keeps up going. If you have to choose one, which one will be your favorite coding song?
 
 ## 🚀 Getting started
 
-1. **Pull down this repository.**
+1. **Pull down this repository**
 
    On terminal:
    For SSH
@@ -16,7 +16,7 @@ We all have a song that keeps up going. If you have to choose one, which one wil
    For HTTP
    `git clone https://github.com/swfl-coders/react-playlist.git`
 
-2. **Start developing.**
+2. **Start developing**
 
    Navigate into project and start up.
 
@@ -27,8 +27,14 @@ We all have a song that keeps up going. If you have to choose one, which one wil
    yarn start
    ```
 
+   **NOTE:** Please don't commit the `yarn.lock` file unless you are installing dependencies. Use `git status` to check if any changes have been made after you `yarn install`. Ff you see `yarn.lock` has changes, please checkout the file with `git checkout yarn.lock`.
+
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser or might even open automatically.
 
+3. **Deployment**
+
+We are using **Netlify** for deployments. You can see the latest deploy version here: [SWFL Coders Playlist](https://swfl-coders-playlist.netlify.com/)
+
 This project created with:
 
 - [Create React App](https://github.com/facebook/create-react-app).

src/App.css

@@ -2,15 +2,16 @@
   text-align: center;
   background-color: #282c34;
   min-height: 100vh;
+  width: 100%;
 }
 
 .App-header {
-  background-color: #282c34;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
+  color: #34d3ac;
   color: white;
 }
 
@@ -19,13 +20,19 @@
 }
 
 .card {
-  padding: 2em;
+  padding: 1em;
+  border: solid 2px #34d3ac;
+  margin: 1em;
+  width: auto !important;
 }
 
 .cards-container {
-  flex-direction: row;
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  color: white;
 }
 
 h3 {

src/App.js

@@ -10,14 +10,14 @@ const App = () => {
   const opts = {
     width: '500',
     playerVars: { // https://developers.google.com/youtube/player_parameters
-      autoplay: 0
+      autoplay: 0,
     }
   }
 
     return (
       <div className="App">
         <header className="App-header">
-          <p>SWFL Coders Playlist</p>
+          <h3>SWFL Coders Playlist</h3>
         </header>
         <div className="cards-container">
           <div className="card">
@@ -52,6 +52,14 @@ const App = () => {
             />
               <h3>Added by: Fahmi</h3>
           </div>
+          <div className="card">
+            <YouTube
+              videoId="x94s6zPm1Ik"
+              opts={opts}
+              onReady={onReady}
+            />
+              <h3>Added by: Lillian Peterson</h3>
+          </div>
         </div>
       </div>
     )