feat: copyright and warning text is added

src/components/App/styles.css

@@ -11,6 +11,8 @@
   width: 100%;
   height: 100vh;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .page {

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 {

src/components/PaymentPage/index.tsx

@@ -57,9 +57,13 @@ function PaymentPage(): JSX.Element {
               <img className='payment-card' src={card} alt='Credit / Debit Card' />
               Credit / Debit Card
             </MainButton>
+            <p className='payment-warining'>You will be charged only <strong>$1 for your 7-day trial</strong>. We'll email your a reminder before your trial period ends.</p>
           </>
         )}
       </section>
+      <footer className='page-footer'>
+        <p>&copy; 20223, Wit LLC, California, US</p>
+      </footer>
     </>
   )
 }

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;
+}

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 = () => {
+  const handleClick = () => asset && saveFile(asset.url, buildFilename(category))
-    asset && saveFile(asset.url, asset.asset_data.id)
-  }
 
   return (
     <section className='wallpaper-page'>
       <div className='wallpaper-image'>
         {asset ? <img src={asset.url} alt={category} /> : null}
-        {asset ? <div className='btn-download' onClick={handleDownload}></div> : null}
+        {asset ? <div className='btn-download' onClick={handleClick} /> : null}
         {isPending ? <Loader color={LoaderColor.White}/> : null}
       </div>
       <div className='wallpaper-content'>

src/components/WallpaperPage/utils.ts

@@ -1,13 +1,18 @@
-export const saveFile = (url: string, href = 'file.ext'): void => {
+export const saveFile = (url: string, filename: string): void => {
-  fetch(url, { mode: 'no-cors' })
+  fetch(url).then((response) => response.blob())
-    .then((response) => response.arrayBuffer())
+    .then((blob) => {
-    .then((buffer) => {
+      const url = URL.createObjectURL(blob)
-      const url = URL.createObjectURL(new Blob([buffer]))
       const link = document.createElement('a')
-      link.href = url
+      link.setAttribute('href', url)
-      link.setAttribute('download', href)
+      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`
+}