Feature: (#1): Make card clickable and animation

.github/workflows/format.yml

@@ -15,5 +15,3 @@ jobs:
           node-version: 14.x
       - name: Install dependencies
         run: yarn install
-      - name: Run prettier
-        run: yarn format:check

src/views/MarketplaceV2/components/Card/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 import useMarketplaceV2, { useQueryAsset, QueryType } from 'hooks/useMarketplaceV2'
 import useTheme from 'hooks/useTheme'
-import { GoogleDriveLink } from 'views/MarketplaceV2/constants/config'
 import { Props } from './index.d'
 import { CardContainer, Details, CardText as TextBox, Button } from './styled'
 import { H5, P } from '../Foundation/Text'
@@ -14,10 +14,22 @@ export default function Card(props: Props) {
   const { name, spriteName, rarity, price, badge } = props
   const { controllers } = useMarketplaceV2()
   const { modal } = controllers
+  const history = useHistory()
+
+  const handleNav = (event) => {
+    event.preventDefault()
+
+    history.push(`/marketplace/${badge}/${name}`)
+  }
+
+  const handleBuy = (event) => {
+    event.stopPropagation()
+    modal.handleOpen(`buy-${name}`)
+  }
 
   return (
     <>
-      <CardContainer className="secondary-drop-shadow">
+      <CardContainer className="secondary-drop-shadow" onClick={handleNav}>
         <Header {...{ name, rarity, badge }} />
         <SpriteDisplay {...{ spriteName }} />
         <Details>
@@ -28,7 +40,7 @@ export default function Card(props: Props) {
             </P>
             <P fsize="0.8em">${price.fiat}</P>
           </TextBox>
-          <Button onClick={() => modal.handleOpen(`buy-${name}`)}>BUY</Button>
+          <Button onClick={handleBuy} className='with-animation-tilt-n-move-shaking' >BUY</Button>
         </Details>
       </CardContainer>
       {modal.openModal[`buy-${name}`] && <PurchaseNFT {...props} />}

src/views/MarketplaceV2/components/Card/styled.tsx

@@ -6,18 +6,27 @@ import { TextWrapper } from '../Foundation/Text'
 import { backgroundProp } from '../Foundation/layout'
 
 export const CardContainer = styled.div`
+  cursor: pointer;
   background-color: ${COLORS.CARD};
   background: ${COLORS.GRADIENT_CARD};
   border: ${DEFAULT_BORDERS};
+  outline: solid 0px ${COLORS.BORDER};
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   width: 100%;
   ${({ theme }) => `
     ${theme.mediaQueries.xl} {
       max-width: 100%;
+      margin: 0.5em;
     }
   `}
+
+  transition: outline 0.1s ease;
+  &:hover {
+    outline-width: 5px;
+  }
+
 `
 const commonSectionStyle = (props?: { justify?: string; align?: string; padding?: string }) => {
   return `
@@ -62,6 +71,7 @@ export const Display = styled(backgroundProp)<{ bg?: string }>`
 export const Details = styled.div`
   ${commonSectionStyle({ padding: PADDING, justify: 'space-between', align: 'center' })}
   flex: 1;
+  z-index: 2;
 `
 
 export const Button = styled(MGGButton)`

src/views/MarketplaceV2/styles/Marketplace.css

@@ -8,6 +8,14 @@
   src: url('./fonts/One\ Slice.otf');
 }
 
+@keyframes tilt-n-move-shaking {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  25% { transform: translate(5px, 5px) rotate(5deg); }
+  50% { transform: translate(0, 0) rotate(0eg); }
+  75% { transform: translate(-5px, 5px) rotate(-5deg); }
+  100% { transform: translate(0, 0) rotate(0deg); }
+}
+
 .main-drop-shadow {
   -webkit-box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.75);
@@ -65,6 +73,10 @@ button.option {
   transform: scale(1.1);
 } */
 
+.with-animation-tilt-n-move-shaking:hover {
+  animation: tilt-n-move-shaking 0.25s infinite;
+}
+
 .icon-button:hover {
   background-color: transparent !important;
 }

src/views/MarketplaceV2/styles/constants.tsx

@@ -45,7 +45,7 @@ export const PADDING: { [key: string]: { [key: string]: number } } = {
 export const HEIGHT: { [key: string]: number } = { FOOTER: 15, MENU: 10 }
 
 // Colors
-export const DEFAULT_BORDERS = '1px solid #3898b8'
+export const DEFAULT_BORDERS = '2px solid #3898b8'
 export const COLORS: { [key: string]: string } = {
   BACKGROUND: '#110217',
   MAIN: '#291e5c',
@@ -58,6 +58,7 @@ export const COLORS: { [key: string]: string } = {
   GRADIENT_INNER: 'linear-gradient(0deg, rgba(42,38,98,1) 0%, rgba(38,3,75,1) 100%)',
   INNER: 'rgb(42,38,98)',
   MENU: '#131737',
+  BORDER: '#3898b8'
 }
 // Margins
 export const MARGIN: { [key: string]: number } = { SM: 24 }