feat: close button for feature content

package.json

@@ -11,7 +11,6 @@
     "firebase": "^7.14.0",
     "normalize.css": "^8.0.1",
     "react": "^16.13.1",
-    "react-content-loader": "^5.0.4",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",

src/components/card/index.js

@@ -1,6 +1,21 @@
 import React, { useState, useContext, createContext } from 'react';
-
-import { Container, Group, Title, SubTitle, Text, Feature, Content, Meta, Entities, Item, Image } from './styles/card';
+import CancelIcon from '@material-ui/icons/Cancel';
+import {
+  Container,
+  Group,
+  Title,
+  SubTitle,
+  Text,
+  Feature,
+  FeatureTitle,
+  FeatureText,
+  Maturity,
+  Content,
+  Meta,
+  Entities,
+  Item,
+  Image,
+} from './styles/card';
 
 export const FeatureContext = createContext();
 
@@ -64,14 +79,22 @@ Card.Image = function CardImage({ ...restProps }) {
 };
 
 Card.Feature = function CardFeature({ selectionType, ...restProps }) {
-  const { showFeature, itemFeature } = useContext(FeatureContext);
+  const { showFeature, itemFeature, setShowFeature } = useContext(FeatureContext);
 
   return showFeature ? (
     <Feature src={`/images/${selectionType}/${itemFeature.genre}/${itemFeature.slug}/large.jpg`}>
-      <Content>{JSON.stringify(itemFeature)}</Content>
+      <Content>
+        <FeatureTitle>{itemFeature.title}</FeatureTitle>
+        <FeatureText>{itemFeature.description}</FeatureText>
+        <CancelIcon fontSize="large" onClick={() => setShowFeature(false)} />
+
+        <Group margin="30px 0" flexDirection="row" alignItems="center">
+          <Maturity rating={itemFeature.maturity}>{itemFeature.maturity}</Maturity>
+          <FeatureText fontWeight="bold">
+            {itemFeature.genre.charAt(0).toUpperCase() + itemFeature.genre.slice(1)}
+          </FeatureText>
+        </Group>
+      </Content>
     </Feature>
   ) : null;
 };
-
-// loading state on cards (placeholder)
-// trigger dropdown panel

src/components/card/styles/card.js

@@ -13,7 +13,9 @@ export const Container = styled.div`
 
 export const Group = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ flexDirection }) => (flexDirection === 'row' ? 'row' : 'column')};
+  ${({ alignItems }) => alignItems && `align-items: ${alignItems}`};
+  ${({ margin }) => margin && `margin: ${margin}`};
 `;
 
 export const Title = styled.p`
@@ -97,13 +99,47 @@ export const Item = styled.div`
 export const Feature = styled.div`
   display: flex;
   flex-direction: row;
-  height: 500px;
-  background: url(${(props) => props.src});
+  background: url(${({ src }) => src});
   background-size: cover;
+  position: relative;
+  height: 500px;
+`;
+
+export const FeatureTitle = styled(Title)`
+  margin-left: 0;
+`;
+
+export const FeatureText = styled.p`
+  font-size: 18px;
+  color: #999;
+  font-weight: ${({ fontWeight }) => (fontWeight === 'bold' ? 'bold' : 'normal')};
+  margin: 0;
 `;
 
 export const Content = styled.div`
   margin-left: 56px;
   margin-right: 56px;
   margin-top: 56px;
+  max-width: 500px;
+  line-height: normal;
+
+  svg {
+    color: white;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    cursor: pointer;
+  }
+`;
+
+export const Maturity = styled.div`
+  background-color: ${({ rating }) => (rating >= 15 ? 'red' : 'green')};
+  border-radius: 15px;
+  width: 20px;
+  padding: 5px;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
+  margin-right: 10px;
 `;

src/components/header/styles/header.js

@@ -4,8 +4,8 @@ import { Link as ReachRouterLink } from 'react-router-dom';
 export const Background = styled.div`
   display: flex;
   flex-direction: column;
-  background: url(${(props) => (props.src ? `../images/misc/${props.src}.jpg` : '../images/misc/home-bg.jpg')}) top left /
-    cover no-repeat;
+  background: url(${({ src }) => (src ? `../images/misc/${src}.jpg` : '../images/misc/home-bg.jpg')}) top left / cover
+    no-repeat;
 `;
 
 export const Container = styled.div`
@@ -21,7 +21,7 @@ export const Link = styled.p`
   color: #fff;
   text-decoration: none;
   margin-right: 30px;
-  font-weight: ${(props) => (props.active === 'true' ? '700' : 'normal')};
+  font-weight: ${({ active }) => (active === 'true' ? '700' : 'normal')};
   cursor: pointer;
 
   &:hover {
@@ -45,10 +45,10 @@ export const SearchInput = styled.input`
   transition: width 0.5s;
   height: 30px;
   font-size: 14px;
-  margin-left: ${(props) => (props.active === true ? '10px' : '0')};
-  padding: ${(props) => (props.active === true ? '0 10px' : '0')};
-  opacity: ${(props) => (props.active === true ? '1' : '0')};
-  width: ${(props) => (props.active === true ? '200px' : '0px')};
+  margin-left: ${({ active }) => (active === true ? '10px' : '0')};
+  padding: ${({ active }) => (active === true ? '0 10px' : '0')};
+  opacity: ${({ active }) => (active === true ? '1' : '0')};
+  width: ${({ active }) => (active === true ? '200px' : '0px')};
 `;
 
 export const Search = styled.div`
@@ -81,7 +81,7 @@ export const ButtonLink = styled(ReachRouterLink)`
 `;
 
 export const Picture = styled.button`
-  background: url(${(props) => props.src});
+  background: url(${({ src }) => src});
   background-size: contain;
   border: 0;
   width: 32px;

src/components/jumbotron/styles/jumbotron.js

@@ -11,7 +11,7 @@ export const Inner = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  flex-direction: ${(props) => props.direction};
+  flex-direction: ${({ direction }) => direction};
   max-width: 1100px;
   margin: auto;
   width: 100%;

src/pages/signup.js

@@ -5,7 +5,7 @@ import { Form } from '../components';
 import { HeaderContainer, FooterContainer } from '../containers';
 import * as ROUTES from '../constants/routes';
 
-export default function Signin() {
+export default function Signup() {
   const history = useHistory();
   const { firebase } = useContext(FirebaseContext);