All button working, fade in animation fixed.

angelopoole · Jan 1, 2021 · a7e7034 · a7e7034
1 parent aa22cbd
commit a7e7034
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 15 deletions.
diff --git a/frontend/src/components/ChampionCard.js b/frontend/src/components/ChampionCard.js
@@ -28,6 +28,24 @@ const TitleCard = styled.div`
   font-style: italic;
 `;
 const HoverContainer = styled(Container)`
+  animation: fadeInAnimation ease 3s;
+  animation-iteration-count: 1;
+  animation-fill-mode: left;
+  transition: var(--transition);
+
+  @keyframes fadeInAnimation {
+    0% {
+      content: '';
+      transform: translate(0px, 10px);
+      opacity: 0;
+    }
+    100% {
+      transition-delay: 250ms;
+      opacity: 1;
+      transform: translate(0px, 0px);
+    }
+  }
+
   #wholeCard {
     cursor: pointer;
     overflow: hidden;

diff --git a/frontend/src/screens/HomeScreen.js b/frontend/src/screens/HomeScreen.js
@@ -43,20 +43,13 @@ const HomeScreen = () => {
 
   const filterOutChampions = champions.filter(champ =>
     champ.name.toLowerCase().includes(filter.toLowerCase()) && tagFilter === ''
-      ? null
+      ? champ.tags
       : champ.tags.includes(tagFilter),
   );
 
   // eslint-disable-next-line no-unused-vars
-  const filterByTag = tag => {
-    // let taggedChamps = null;
+  const setFilterByTag = tag => {
     setTagFilter(tag);
-    // if (tag !== 'All') {
-    // taggedChamps = filterOutChampions.filter(champ => champ.tags.includes(tagFilter));
-    // } else {
-    // taggedChamps = filterOutChampions;
-    // }
-    // filterOutChampions = taggedChamps;
   };
 
   const displayCards = arrayOfChamps => {
@@ -95,22 +88,34 @@ const HomeScreen = () => {
           <FormControlCol>
             <FormButtonsContainer xs={7}>
               {/* <ButtonGroup aria-label="Basic example"> */}
-              <FormButtons variant="secondary" onClick={() => filterByTag('')}>
+              <FormButtons
+                variant={tagFilter === '' ? 'primary' : 'secondary'}
+                onClick={() => setFilterByTag('')}>
                 all
               </FormButtons>
-              <FormButtons variant="secondary" onClick={() => filterByTag('Assassin')}>
+              <FormButtons
+                variant={tagFilter === 'Assassin' ? 'primary' : 'secondary'}
+                onClick={() => setFilterByTag('Assassin')}>
                 assasins
               </FormButtons>
-              <FormButtons variant="secondary" onClick={() => filterByTag('Fighter')}>
+              <FormButtons
+                variant={tagFilter === 'Fighter' ? 'primary' : 'secondary'}
+                onClick={() => setFilterByTag('Fighter')}>
                 fighters
               </FormButtons>
-              <FormButtons variant="secondary" onClick={() => filterByTag('Mage')}>
+              <FormButtons
+                variant={tagFilter === 'Mage' ? 'primary' : 'secondary'}
+                onClick={() => setFilterByTag('Mage')}>
                 mage
               </FormButtons>
-              <FormButtons variant="secondary" onClick={() => filterByTag('Marksman')}>
+              <FormButtons
+                variant={tagFilter === 'Marksman' ? 'primary' : 'secondary'}
+                onClick={() => setFilterByTag('Marksman')}>
                 marksmen
               </FormButtons>
-              <FormButtons variant="secondary" onClick={() => setTagFilter('Support')}>
+              <FormButtons
+                variant={tagFilter === 'Support' ? 'primary' : 'secondary'}
+                onClick={() => setFilterByTag('Support')}>
                 support
               </FormButtons>
               {/* </ButtonGroup> */}