added button, icons and Logos, changed icons, added padding to pdf, c…

src/App.tsx

@@ -17,14 +17,24 @@ function App() {
   }
 
   return (
-    <div className="app">
-      <h1 className="center fs-45">GET PAID WITHOUT PAYING</h1>
-      <p className="center ">
+    <div className="app bg-black">
+      <h1 className="center white">GET PAID WITHOUT PAYING</h1>
+      <p
+        className="center white"
+        style={{
+          paddingLeft: '10vw',
+          paddingRight: '10vw',
+          fontSize: '16px',
+        }}
+      >
         No sign-ups. No complicated dashboards. Just edit your invoice right here, right now and
         download instantly. It’s free, open-source, and built for freelancers & small agencies who
         want less hassle and more time for their actual work.
       </p>
-      <InvoicePage data={data} onChange={onInvoiceUpdated} />
+      <div className="edit-button-container">
+        <button className="edit-button">edit template</button>
+      </div>
+      {/* <InvoicePage data={data} onChange={onInvoiceUpdated} /> */}
       <MyInvoicePage data={data} onChange={onInvoiceUpdated} />
     </div>
   )

src/components/DownloadPDF.tsx

@@ -4,6 +4,7 @@ import { Invoice, TInvoice } from '../data/types'
 import { useDebounce } from '@uidotdev/usehooks'
 import InvoicePage from './InvoicePage'
 import FileSaver from 'file-saver'
+import MyInvoicePage from './MyInvoicePage'
 
 interface Props {
   data: Invoice
@@ -48,26 +49,29 @@ const Download: FC<Props> = ({ data, setData }) => {
     <div className={'download-pdf '}>
       <PDFDownloadLink
         key="pdf"
-        document={<InvoicePage pdfMode={true} data={debounced} />}
+        document={<MyInvoicePage pdfMode={true} data={debounced} />}
         fileName={`${title}.pdf`}
         aria-label="Save PDF"
         title="Save PDF"
         className="download-pdf__pdf"
       ></PDFDownloadLink>
-      <p>Save PDF</p>
+      <p style={{ color: '#ffffff', textDecoration: 'none', fontWeight: 'bold' }}>PDF</p>
 
-      <button
+      {/* <button
         onClick={handleSaveTemplate}
         aria-label="Save Template"
         title="Save Template"
         className="download-pdf__template_download mt-40"
+        style={{
+          backgroundColor: 'black',
+        }}
       />
       <p className="text-small">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 className="text-small">Upload Template</p> */}
     </div>
   )
 }

src/components/InvoicePage.tsx

@@ -141,7 +141,7 @@ const InvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {
 
   return (
     <Document pdfMode={pdfMode}>
-      <Page className="invoice-wrapper" pdfMode={pdfMode}>
+      <Page className="invoice-wrapper " pdfMode={pdfMode}>
         {!pdfMode && <Download data={invoice} setData={(d) => setInvoice(d)} />}
 
         <View className="grid" pdfMode={pdfMode}>

src/components/MyInvoicePage.tsx

@@ -393,7 +393,7 @@ const MyInvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {
                       title="Remove Row"
                       onClick={() => handleRemove(i)}
                     >
-                      <span className="icon icon-remove bg-red"></span>
+                      <span className="icon icon-remove"></span>
                     </button>
                   )}
                 </View>
@@ -403,8 +403,7 @@ const MyInvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {
               <View className="w-50 mt-10" pdfMode={pdfMode}>
                 {!pdfMode && (
                   <button className="link" onClick={handleAdd}>
-                    <span className="icon icon-add bg-green mr-10"></span>
-                    Add Line Item
+                    <span className="icon icon-add  mr-10 cursor-pointer "></span>
                   </button>
                 )}
               </View>