diff --git a/src/components/Billboard/index.tsx b/src/components/Billboard/index.tsx index e91b95a3a5..3f36121ef6 100644 --- a/src/components/Billboard/index.tsx +++ b/src/components/Billboard/index.tsx @@ -7,7 +7,6 @@ import { BillboardDialog, BillboardExposureTracker, Icon, - Spinner, TextIcon, } from '~/components' @@ -34,7 +33,7 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => { cacheTime: 60_000, }) - if (!id || isError || !data || !data.contentURI) { + if (!id || isError || isLoading || !data || !data.contentURI) { return null } @@ -43,43 +42,40 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => { {({ openDialog: openBillboardDialog }) => { return (
- {isLoading && } - {!isLoading && ( - <> - - analytics.trackEvent('click_billboard', { - id, - type, - target: data.redirectURI, - }) - } - > - ad - - - - - )} + + analytics.trackEvent('click_billboard', { + id, + type, + target: data.redirectURI, + }) + } + > + ad + + + + +
) }} diff --git a/src/components/Billboard/styles.module.css b/src/components/Billboard/styles.module.css index d81e91d866..69a2447310 100644 --- a/src/components/Billboard/styles.module.css +++ b/src/components/Billboard/styles.module.css @@ -1,20 +1,34 @@ .billboard { - display: block; - max-width: 21.4375rem; + max-width: 100%; + + @media (--sm-up) { + max-width: 50%; + } + + @media (--md-up) { + max-width: 100%; + } & a { @mixin flex-center-all; - line-height: 0; + position: relative; + + &::after { + display: block; + padding-bottom: 56.06%; + content: ''; + } & img { - width: 100%; - max-height: 10.5rem; + @mixin object-fit-cover; + border-radius: 1.25rem; } } & .button { + margin-top: var(--sp8); color: var(--color-grey); } }