Bit o stylin'

src/App.js

@@ -2,10 +2,11 @@ import React, {useState, useEffect} from "react";
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import firebase from'firebase'
 import { Provider } from "react-redux";
-import { Router, Link } from "@reach/router";
+import { Router } from "@reach/router";
 import Boxes from "./boxes/Boxes";
-import styles from "./App.module.css";
+import SignedIn from "./SignedIn/SignedIn.js";
 import setupStore from "./store/setupStore.js";
+
 const config = {
   apiKey: "AIzaSyC5krz4RBiT87RK7cEidh3n-A4H63uGcyM",
   authDomain: "retrod-7e2cd.firebaseapp.com",
@@ -33,17 +34,7 @@ function App() {
     <div>
     {isSignedIn ? (
       <>
-      <h1>You're Signed In</h1>
-      <button onClick={() => firebase.auth().signOut()}>Sign Out</button>
-      <nav>
-      <Link onClick={() => setSprint(sprint + 1)} to={`/` + sprint}>Sprint (+))</Link>
-      </nav>
-      <h3>Sprint {sprint}</h3>
-        <div className={styles.grid}>
-          <Boxes sectionName={"What Went Well"}  sprint={sprint} boxId={'1'}/>
-          <Boxes sectionName={"What Could Be Better"}  sprint={sprint} boxId={'2'}/>
-          <Boxes sectionName={"Questions"} sprint={sprint} boxId={'3'}/>
-        </div>
+        <SignedIn/>
       </>
     ) : (
       <>

src/App.module.css

@@ -1,6 +0,0 @@
-.grid{
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-column-gap: 1em;
-  margin: 1rem;
-}

src/Items/Items.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { databaseRef } from '../store/firebase.js'
+import styles from "./items.module.css";
 
 export default function Item({ item, boxId, sprint }) {
   const handleClick = e => {
@@ -16,9 +17,9 @@ export default function Item({ item, boxId, sprint }) {
     databaseRef.ref(url + item.id + `/completed`).set(item.completed === false ? true : false)
   }
   return (
-    <div style={{ textDecoration: item.completed ? "line-through" : "" }}>
-      {item.title}
-      <button onClick={handleClick}>{item.completed === false ? 'done' : 'undo'}</button>
+    <div className={styles.flexItem}>
+      <p style={{ textDecoration: item.completed ? "line-through" : "" }}>{item.title}</p>
+      <button onClick={handleClick}>{item.completed === false ? <p className={styles.checkmark}>✓</p> : <p className={styles.redx}>x</p>}</button>
     </div>
   )
 }

src/Items/items.module.css

@@ -0,0 +1,14 @@
+.flexItem{
+  display: flex;
+  justify-content: space-between;
+}
+button{
+  background: none;
+  border: none;
+}
+.checkmark{
+  color: green;
+}
+.redx{
+  color: red;
+}

src/SignedIn/SignedIn.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import firebase from'firebase'
+import { Link } from "@reach/router";
+import Boxes from "../boxes/Boxes";
+import styles from "./signedIn.module.css";
+
+export default function SignedIn() {
+  const [sprint, setSprint] = useState(1);
+  return (
+    <div>
+      <div className={styles.alignRight}>
+        <div className={styles.marginRight}>
+          <p>{firebase.auth().currentUser.displayName}</p>
+          <div>
+            <img align="right" className={styles.profilePicture} alt='user profile' src={firebase.auth().currentUser.photoURL} />
+          </div>
+          <button className={styles.signOutButton} onClick={() => firebase.auth().signOut()}>Sign Out</button>
+        </div>
+      </div>
+      <nav>
+      <Link onClick={() => setSprint(sprint + 1)} to={`/` + sprint}>Sprint (+))</Link>
+      {console.log(sprint)}
+      </nav>
+      <h3>Sprint {sprint}</h3>
+        <div className={styles.grid}>
+          <Boxes sectionName={"What Went Well"}  sprint={sprint} boxId={'1'}/>
+          <Boxes sectionName={"What Could Be Better"}  sprint={sprint} boxId={'2'}/>
+          <Boxes sectionName={"Questions"} sprint={sprint} boxId={'3'}/>
+        </div>
+    </div>
+  )
+}

src/SignedIn/signedIn.module.css

@@ -0,0 +1,31 @@
+body{
+  background: lightseagreen;
+}
+.grid{
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-column-gap: 1em;
+  margin: 1rem;
+}
+.alignRight{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.marginRight{
+  margin-right: 1rem;
+}
+.signOutButton{
+  background: none;
+  border: none;
+  text-decoration: underline;
+  cursor: pointer;
+  width: 100%;
+  text-align: right;
+  padding: 0;
+  margin-top: 1rem;
+}
+.alignRight .profilePicture{
+  max-width: 50px;
+}

src/boxes/Boxes.js

@@ -5,7 +5,6 @@ import Cards from '../cards/Cards.js'
 export default function Boxes({ sectionName, boxId, sprint }) {
   return (
     <div>
-      <h3>{sectionName}</h3>
       <div className={styles.box}>
         <Cards sectionName={sectionName} boxId={boxId} sprint={sprint}/>
       </div>

src/boxes/Boxes.module.css

@@ -1,3 +1,4 @@
 .box{
   border: .15rem solid black;
+  background: lightgrey;
 }

src/cards/Cards.js

@@ -3,12 +3,14 @@ import { databaseRef } from '../store/firebase.js'
 import Item from '../Items/Items.js';
 import NewItem from '../NewItem/NewItem.js'
 import DeleteItem from '../deleteItem/DeleteItem.js'
+import styles from "./cards.module.css";
 
-export function Cards({item, setItem, boxId, sprint}) {
+export function Cards({item, setItem, boxId, sprint, sectionName}) {
   return (
     <>
+    <h3>{sectionName}</h3>
       {item.map((i, index) => (
-                      <div key={i.id}>
+                      <div className={styles.cardBackground} key={i.id}>
                         <Item
                             item={i}
                             index={index}
@@ -23,7 +25,7 @@ export function Cards({item, setItem, boxId, sprint}) {
   )
 }
 
-export default function FirebaseWrapper({boxId, sprint}) {
+export default function FirebaseWrapper({sectionName, boxId, sprint}) {
   const [cards, setCards] = useState(null)
   let retro;
   if(boxId === "1"){
@@ -49,5 +51,5 @@ export default function FirebaseWrapper({boxId, sprint}) {
   if(!cards) {
     return <div>loading...</div>;
   };
-  return <Cards item={cards} boxId={boxId} sprint={sprint} setItem={()=> {}}/>
+  return <Cards sectionName={sectionName} item={cards} boxId={boxId} sprint={sprint} setItem={()=> {}}/>
 }

src/cards/cards.module.css

@@ -0,0 +1,5 @@
+.cardBackground{
+  background: white;
+  margin: .5em;
+  padding: 1em;
+}

src/deleteItem/DeleteItem.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { databaseRef } from '../store/firebase.js'
+import styles from "./deleteItem.module.css";
 
 export default function DeleteItem({ item, boxId, objectId, sprint }) {
   // const [value, setValue ] = useState("");
@@ -25,6 +26,6 @@ export default function DeleteItem({ item, boxId, objectId, sprint }) {
     retroRef.remove()
   }
   return (
-    <button onClick={handleClick}>x</button>
+    <button className={styles.deleteButton} onClick={handleClick}>DELETE</button>
   )
 }

src/deleteItem/deleteItem.module.css

@@ -0,0 +1,9 @@
+.deleteButton{
+  color: darkred;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  font-size: .5em;
+  font-weight: bolder;
+  letter-spacing: 1px;
+}