diff --git a/src/components/App/styles.css b/src/components/App/styles.css index 3e1902c..f8cdbb6 100644 --- a/src/components/App/styles.css +++ b/src/components/App/styles.css @@ -11,6 +11,8 @@ width: 100%; height: 100vh; position: relative; + display: flex; + flex-direction: column; } .page { diff --git a/src/components/Navbar/styles.css b/src/components/Navbar/styles.css index 35b8b60..436b636 100644 --- a/src/components/Navbar/styles.css +++ b/src/components/Navbar/styles.css @@ -26,8 +26,6 @@ transform: translateX(-100%); transition: transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); background-color: rgb(255, 255, 255); - box-shadow: rgba(0, 0, 0, 0.14) 0px 16px 24px 2px; - } .navbar__nav > a { diff --git a/src/components/PaymentPage/index.tsx b/src/components/PaymentPage/index.tsx index fef493d..15dea30 100644 --- a/src/components/PaymentPage/index.tsx +++ b/src/components/PaymentPage/index.tsx @@ -57,9 +57,13 @@ function PaymentPage(): JSX.Element { Credit / Debit Card Credit / Debit Card +

You will be charged only $1 for your 7-day trial. We'll email your a reminder before your trial period ends.

)} + ) } diff --git a/src/components/PaymentPage/styles.css b/src/components/PaymentPage/styles.css index 31513a9..c0ad961 100644 --- a/src/components/PaymentPage/styles.css +++ b/src/components/PaymentPage/styles.css @@ -30,3 +30,19 @@ .payment-btn { height: 25px; } + +.payment-warining { + margin-top: 28px; + max-width: 400px; + line-height: 1.5; + font-size: 15px; +} + +.page-footer { + font-size: 14px; + font-weight: 400; + line-height: 2; + padding: 10px 0; + color: #8e8e93; + text-align: center; +} diff --git a/src/components/WallpaperPage/index.tsx b/src/components/WallpaperPage/index.tsx index a471d80..d794006 100644 --- a/src/components/WallpaperPage/index.tsx +++ b/src/components/WallpaperPage/index.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' import { useApi, useApiCall, Assets, DailyForecasts } from '../../api' import { useAuth } from '../../auth' -import { saveFile } from './utils' +import { saveFile, buildFilename } from './utils' import Loader, { LoaderColor } from '../Loader' import './styles.css' @@ -30,15 +30,13 @@ function WallpaperPage(): JSX.Element { const { assets, forecasts } = data const asset = assets?.at(0) - const handleDownload = () => { - asset && saveFile(asset.url, asset.asset_data.id) - } + const handleClick = () => asset && saveFile(asset.url, buildFilename(category)) return (
{asset ? {category} : null} - {asset ?
: null} + {asset ?
: null} {isPending ? : null}
diff --git a/src/components/WallpaperPage/utils.ts b/src/components/WallpaperPage/utils.ts index bd421e3..3b7577b 100644 --- a/src/components/WallpaperPage/utils.ts +++ b/src/components/WallpaperPage/utils.ts @@ -1,13 +1,18 @@ -export const saveFile = (url: string, href = 'file.ext'): void => { - fetch(url, { mode: 'no-cors' }) - .then((response) => response.arrayBuffer()) - .then((buffer) => { - const url = URL.createObjectURL(new Blob([buffer])) +export const saveFile = (url: string, filename: string): void => { + fetch(url).then((response) => response.blob()) + .then((blob) => { + const url = URL.createObjectURL(blob) const link = document.createElement('a') - link.href = url - link.setAttribute('download', href) + link.setAttribute('href', url) + link.setAttribute('download', filename) document.body.appendChild(link) link.click() document.body.removeChild(link) + URL.revokeObjectURL(url) }) } + +export const buildFilename = (prefix: string): string => { + const date = new Date().toISOString().slice(0, 10) + return `${prefix}-${date}.jpg` +}