From add758d95f8e615d5fd5c3e6009a90db6500480d Mon Sep 17 00:00:00 2001 From: kojiadrianojr Date: Wed, 18 Oct 2023 13:27:20 +0800 Subject: [PATCH 1/2] Make card clickable and animation --- .../MarketplaceV2/components/Card/index.tsx | 18 +++++++++++++++--- .../MarketplaceV2/components/Card/styled.tsx | 10 ++++++++++ src/views/MarketplaceV2/styles/Marketplace.css | 12 ++++++++++++ src/views/MarketplaceV2/styles/constants.tsx | 3 ++- 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/views/MarketplaceV2/components/Card/index.tsx b/src/views/MarketplaceV2/components/Card/index.tsx index d44d103..2052db0 100644 --- a/src/views/MarketplaceV2/components/Card/index.tsx +++ b/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 ( <> - +
@@ -28,7 +40,7 @@ export default function Card(props: Props) {

${price.fiat}

- +
{modal.openModal[`buy-${name}`] && } diff --git a/src/views/MarketplaceV2/components/Card/styled.tsx b/src/views/MarketplaceV2/components/Card/styled.tsx index eb98bfa..bec54a4 100644 --- a/src/views/MarketplaceV2/components/Card/styled.tsx +++ b/src/views/MarketplaceV2/components/Card/styled.tsx @@ -6,9 +6,11 @@ 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; @@ -16,8 +18,15 @@ export const CardContainer = styled.div` ${({ 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)` diff --git a/src/views/MarketplaceV2/styles/Marketplace.css b/src/views/MarketplaceV2/styles/Marketplace.css index b8856c9..a8d3ca3 100644 --- a/src/views/MarketplaceV2/styles/Marketplace.css +++ b/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; } diff --git a/src/views/MarketplaceV2/styles/constants.tsx b/src/views/MarketplaceV2/styles/constants.tsx index 8b1f974..6282498 100644 --- a/src/views/MarketplaceV2/styles/constants.tsx +++ b/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 } From 4ab0b3fac8907681899032f80a51abc2a5f42545 Mon Sep 17 00:00:00 2001 From: Free Stack <37798015+Adrienne14@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:37:02 +0800 Subject: [PATCH 2/2] Update format.yml --- .github/workflows/format.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index 7e7238d..29b2459 100644 --- a/.github/workflows/format.yml +++ b/.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