From 214c9c90df06d90f7c7e10462af4252bc53b8c59 Mon Sep 17 00:00:00 2001
From: Joshua Villamarzo <jvillamarzo@gmail.com>
Date: Fri, 26 Jan 2018 10:57:26 -0800
Subject: [PATCH 1/5] Address react key warning for BoardCard

---
 src/scenes/home/team/team.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scenes/home/team/team.js b/src/scenes/home/team/team.js
index 3cef770f3..8988de47c 100644
--- a/src/scenes/home/team/team.js
+++ b/src/scenes/home/team/team.js
@@ -31,6 +31,7 @@ class Team extends Component {
 
     const boardMembers = BoardMembers.map(boardMember => (
       <BoardCard
+        key={`${Math.random()} + ${boardMember.name}`}
         name={boardMember.name}
         role={boardMember.role}
         description={boardMember.description}

From 911e4233d1d57ecbfc7980d32d978275606ae286 Mon Sep 17 00:00:00 2001
From: Joshua Villamarzo <jvillamarzo@gmail.com>
Date: Fri, 26 Jan 2018 10:58:42 -0800
Subject: [PATCH 2/5] Disable height and opacity styles for mobileish views

---
 src/shared/components/boardCard/boardCard.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/shared/components/boardCard/boardCard.css b/src/shared/components/boardCard/boardCard.css
index fa86d8065..d57c49f84 100644
--- a/src/shared/components/boardCard/boardCard.css
+++ b/src/shared/components/boardCard/boardCard.css
@@ -63,3 +63,14 @@
   align-self: left;
   padding: 1rem 0 0 0;
 }
+
+@media screen and (max-width: 850px) {
+  .boardCard {
+    max-height: 650px;
+  }
+
+  .descriptionText {
+    opacity: 1;
+    visibility: visible;
+  }
+}

From ec7a219994c2674d914ca74a02c316686c562bd8 Mon Sep 17 00:00:00 2001
From: Joshua Villamarzo <jvillamarzo@gmail.com>
Date: Sat, 27 Jan 2018 20:42:57 -0800
Subject: [PATCH 3/5] Disabling transitions on BoardCard

---
 src/shared/components/boardCard/boardCard.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/shared/components/boardCard/boardCard.css b/src/shared/components/boardCard/boardCard.css
index d57c49f84..b586a8e4e 100644
--- a/src/shared/components/boardCard/boardCard.css
+++ b/src/shared/components/boardCard/boardCard.css
@@ -67,6 +67,17 @@
 @media screen and (max-width: 850px) {
   .boardCard {
     max-height: 650px;
+    transition: none;
+  }
+
+  .boardCard:hover,
+  .boardCard:focus {
+    transition: none;
+  }
+  
+  .boardCard:hover .descriptionText,
+  .boardCard:active .descriptionText {
+    transition: none;
   }
 
   .descriptionText {

From 7f742963c665005a9ee35f6b8661e51881e504e6 Mon Sep 17 00:00:00 2001
From: Joshua Villamarzo <jvillamarzo@gmail.com>
Date: Sat, 27 Jan 2018 20:43:40 -0800
Subject: [PATCH 4/5] Disabling animations only for 450px or smaller

---
 src/shared/components/boardCard/boardCard.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/boardCard/boardCard.css b/src/shared/components/boardCard/boardCard.css
index b586a8e4e..925236a6e 100644
--- a/src/shared/components/boardCard/boardCard.css
+++ b/src/shared/components/boardCard/boardCard.css
@@ -64,7 +64,7 @@
   padding: 1rem 0 0 0;
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 450px) {
   .boardCard {
     max-height: 650px;
     transition: none;

From c28343ea94c9eefc2df127302b9e54b29a74d8eb Mon Sep 17 00:00:00 2001
From: Kyle Holmberg <inbox@kylemh.com>
Date: Tue, 30 Jan 2018 01:02:17 -0800
Subject: [PATCH 5/5] Change keys to avoid function call

---
 src/scenes/home/team/team.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scenes/home/team/team.js b/src/scenes/home/team/team.js
index 8988de47c..1f862ef71 100644
--- a/src/scenes/home/team/team.js
+++ b/src/scenes/home/team/team.js
@@ -23,7 +23,7 @@ class Team extends Component {
   render() {
     const team = this.state.members.map(member => (
       <TeamCard
-        key={`${Math.random()} + ${member.name}`}
+        key={`${member.name} + ${member.role}`}
         name={member.name}
         role={member.role}
       />
@@ -31,7 +31,7 @@ class Team extends Component {
 
     const boardMembers = BoardMembers.map(boardMember => (
       <BoardCard
-        key={`${Math.random()} + ${boardMember.name}`}
+        key={`${boardMember.name} + ${boardMember.role}`}
         name={boardMember.name}
         role={boardMember.role}
         description={boardMember.description}