From 8495349955a5395e4c742ad8815b6cec38620809 Mon Sep 17 00:00:00 2001
From: "Lucian I. Last" <li@last.nl>
Date: Fri, 24 May 2024 10:35:49 +0200
Subject: [PATCH 1/2] Fix download button render

---
 package.json                   |  1 -
 src/components/DownloadPDF.tsx | 42 ++++++++++++++++++++++------------
 src/scss/_app.scss             |  8 +++----
 yarn.lock                      |  5 ----
 4 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index f179c7d..4654aec 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^3.4.2",
-    "@uidotdev/usehooks": "^2.4.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "date-fns": "^3.6.0",
     "file-saver": "^2.0.5",
diff --git a/src/components/DownloadPDF.tsx b/src/components/DownloadPDF.tsx
index 5f3dbd0..85b9acc 100644
--- a/src/components/DownloadPDF.tsx
+++ b/src/components/DownloadPDF.tsx
@@ -1,7 +1,6 @@
-import React, { FC } from 'react'
+import { ChangeEvent, FC, useEffect, useState } from 'react'
 import { PDFDownloadLink } from '@react-pdf/renderer'
 import { Invoice, TInvoice } from '../data/types'
-import { useDebounce } from '@uidotdev/usehooks'
 import InvoicePage from './InvoicePage'
 import FileSaver from 'file-saver'
 
@@ -11,9 +10,20 @@ interface Props {
 }
 
 const Download: FC<Props> = ({ data, setData }) => {
-  const debounced = useDebounce(data, 500)
+  const [showDoc, setShowDoc] = useState(true)
+  const [t, setT] = useState<null | number>(null)
 
-  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
+  useEffect(() => {
+    setShowDoc(false)
+    if (t) clearTimeout(t)
+    setT(
+      setTimeout(() => {
+        setShowDoc(true)
+      }, 500) as any,
+    )
+  }, [data])
+
+  function handleInput(e: ChangeEvent<HTMLInputElement>) {
     if (!e.target.files?.length) return
 
     const file = e.target.files[0]
@@ -37,7 +47,7 @@ const Download: FC<Props> = ({ data, setData }) => {
   }
 
   function handleSaveTemplate() {
-    const blob = new Blob([JSON.stringify(debounced)], {
+    const blob = new Blob([JSON.stringify(data)], {
       type: 'text/plain;charset=utf-8',
     })
     FileSaver(blob, title + '.template')
@@ -45,15 +55,19 @@ const Download: FC<Props> = ({ data, setData }) => {
 
   const title = data.invoiceTitle ? data.invoiceTitle.toLowerCase() : 'invoice'
   return (
-    <div className={'download-pdf '}>
-      <PDFDownloadLink
-        key="pdf"
-        document={<InvoicePage pdfMode={true} data={debounced} />}
-        fileName={`${title}.pdf`}
-        aria-label="Save PDF"
-        title="Save PDF"
-        className="download-pdf__pdf"
-      ></PDFDownloadLink>
+    <div className="download-pdf">
+      {showDoc ? (
+        <PDFDownloadLink
+          key="pdf"
+          document={<InvoicePage pdfMode={true} data={data} />}
+          fileName={`${title}.pdf`}
+          aria-label="Save PDF"
+          title="Save PDF"
+          className="download-pdf__pdf"
+        ></PDFDownloadLink>
+      ) : (
+        <button type="button" className="download-pdf__pdf loading" />
+      )}
       <p>Save PDF</p>
 
       <button
diff --git a/src/scss/_app.scss b/src/scss/_app.scss
index 96ab153..2b15544 100644
--- a/src/scss/_app.scss
+++ b/src/scss/_app.scss
@@ -50,13 +50,13 @@
   height: 40px;
   transition: opacity 0.2s ease-in-out;
 
-  &.loading {
-    opacity: 0.3;
-  }
-
   button {
     border: none;
   }
+  > .loading {
+    opacity: 0.3;
+    cursor: wait;
+  }
 
   a,
   label,
diff --git a/yarn.lock b/yarn.lock
index 7cce5a5..7714129 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -525,11 +525,6 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@uidotdev/usehooks@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@uidotdev/usehooks/-/usehooks-2.4.1.tgz#4b733eaeae09a7be143c6c9ca158b56cc1ea75bf"
-  integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==
-
 "@vitejs/plugin-react-swc@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.6.0.tgz#dc9cd1363baf3780f3ad3e0a12a46a3ffe0c7526"

From 699e7f07158e5f798fa94158a9625bd19c636f21 Mon Sep 17 00:00:00 2001
From: "Lucian I. Last" <li@last.nl>
Date: Fri, 24 May 2024 12:04:31 +0200
Subject: [PATCH 2/2] mobile support

---
 src/App.tsx                      |  2 +-
 src/components/DownloadPDF.tsx   |  9 ++--
 src/images/template_download.svg |  6 +--
 src/scss/_app.scss               | 80 +++++++++++++++++++++++---------
 4 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0688919..58b35be 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,7 @@ function App() {
 
   return (
     <div className="app">
-      <h1 className="center fs-30">React Invoice Generator</h1>
+      <h1 className="app__title fs-30">React Invoice Generator</h1>
       <InvoicePage data={data} onChange={onInvoiceUpdated} />
     </div>
   )
diff --git a/src/components/DownloadPDF.tsx b/src/components/DownloadPDF.tsx
index 85b9acc..a05c30b 100644
--- a/src/components/DownloadPDF.tsx
+++ b/src/components/DownloadPDF.tsx
@@ -68,20 +68,19 @@ const Download: FC<Props> = ({ data, setData }) => {
       ) : (
         <button type="button" className="download-pdf__pdf loading" />
       )}
-      <p>Save PDF</p>
-
+      <p>Save&nbsp;PDF</p>
       <button
         onClick={handleSaveTemplate}
         aria-label="Save Template"
         title="Save Template"
-        className="download-pdf__template_download mt-40"
+        className="download-pdf__template_download"
       />
-      <p className="text-small">Save Template</p>
+      <p>Save Template</p>
 
       <label className="download-pdf__template_upload">
         <input type="file" accept=".json,.template" onChange={handleInput} />
       </label>
-      <p className="text-small">Upload Template</p>
+      <p>Upload Template</p>
     </div>
   )
 }
diff --git a/src/images/template_download.svg b/src/images/template_download.svg
index f747796..1a19017 100644
--- a/src/images/template_download.svg
+++ b/src/images/template_download.svg
@@ -5,12 +5,12 @@
 	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
 <g>
 	<g>
-		<polygon style="fill:#EFEBDE;" points="46.5,14 32.5,0 1.5,0 1.5,58 46.5,58 		"/>
+		<polygon style="fill:#EFEBDE;" points="46.5,14 32.5,0 1.5,0 1.5,58 46.5,58"/>
 	
-		<polygon style="fill:#D5D0BB;" points="32.5,0 32.5,14 46.5,14 		"/>
+		<polygon style="fill:#D5D0BB;" points="32.5,0 32.5,14 46.5,14"/>
 	</g>
 	<g>
-		<rect x="34.5" y="36" style="fill:#21AE5E;" width="22" height="22"/>
+		<rect x="34.5" y="36" style="fill:#7c96e6;" width="22" height="22"/>
 		<rect x="44.5" y="37.586" style="fill:#FFFFFF;" width="2" height="16"/>
 		<polygon style="fill:#FFFFFF;" points="45.5,55 38.5,48.293 39.976,46.879 45.5,52.172 51.024,46.879 52.5,48.293 		"/>
 	</g>
diff --git a/src/scss/_app.scss b/src/scss/_app.scss
index 2b15544..5a82b8c 100644
--- a/src/scss/_app.scss
+++ b/src/scss/_app.scss
@@ -1,6 +1,16 @@
 .app {
-  margin: 30px auto 50px auto;
+  margin: 30px auto 50px;
   width: 700px;
+
+  &__title {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    @media only screen and (max-width: 920px) {
+      margin-left: 4px;
+      text-align: start;
+    }
+  }
 }
 
 .input,
@@ -43,47 +53,75 @@
 }
 
 .download-pdf {
-  position: fixed;
-  top: 100px;
-  margin-left: -110px;
-  width: 40px;
-  height: 40px;
+  overflow: hidden;
+  position: absolute;
+  top: 2px;
+  left: -82px;
   transition: opacity 0.2s ease-in-out;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  gap: 4px 0;
+  grid-template-columns: 60px;
+  text-align: center;
+
+  @media only screen and (max-width: 920px) {
+    top: -82px;
+    right: 4px;
+    left: auto;
+    grid-template-rows: 40px 20px;
+    grid-auto-flow: column;
+    gap: 0 10px;
+  }
 
   button {
     border: none;
   }
   > .loading {
     opacity: 0.3;
-    cursor: wait;
+    cursor: wait !important;
   }
 
-  a,
-  label,
-  button {
+  .download-pdf__pdf,
+  .download-pdf__template_download,
+  .download-pdf__template_upload {
     display: block;
     background-repeat: no-repeat;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    background-position: center;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    border-radius: 5px;
+    outline: #fff solid 2px;
+    &:hover {
+      outline-offset: 2px;
+      ~ p {
+        opacity: 1;
+      }
+    }
+
+    @media only screen and (min-width: 921px) {
+      margin-top: 12px;
+    }
+  }
+  button {
+    background-color: transparent;
   }
   .download-pdf__pdf {
-    background: url('../images/download.svg');
+    background-image: url('../images/download.svg');
   }
   .download-pdf__template_download {
-    width: 30px;
-    height: 30px;
-    background: url('../images/template_download.svg');
+    background-image: url('../images/template_download.svg');
   }
   .download-pdf__template_upload {
-    width: 30px;
-    height: 30px;
-    background: url('../images/template_upload.svg');
+    background-image: url('../images/template_upload.svg');
   }
   input[type='file'] {
     visibility: hidden;
   }
+  p {
+    margin: 0;
+  }
 }
 
 .image {