From d1da98a9e40d7db52a9e27a66bad64a292d0f588 Mon Sep 17 00:00:00 2001
From: Marvin Sextro <marvin.sextro@gmail.com>
Date: Sat, 25 Dec 2021 23:58:45 +0100
Subject: [PATCH] Improve add to wallet button

---
 components/Button.tsx | 24 +++++++++++++++++++++---
 components/Form.tsx   | 17 +++--------------
 components/Page.tsx   |  2 +-
 src/process.ts        |  2 --
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/components/Button.tsx b/components/Button.tsx
index 2346a43..b9e53be 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,18 +1,36 @@
 interface ButtonProps {
   text?: string,
   icon?: string,
-  onClick: () => void,
+  onClick?: () => void,
+  loading?: boolean,
+  type?: ButtonType,
+}
+
+export enum ButtonType {
+    submit = 'submit',
+    button = 'button',
 }
 
 function Button(props: ButtonProps): JSX.Element {
     return (
         <button
-            type="button"
+            type={props.type}
             onClick={props.onClick}
-            className="focus:outline-none h-20 bg-gray-400 dark:bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-md items-center flex justify-center">
+            className={`${props.type == ButtonType.submit ? "bg-green-600 hover:bg-green-700" : "bg-gray-400 dark:bg-gray-600 hover:bg-gray-500"} relative focus:outline-none h-20 text-white font-semibold rounded-md items-center flex justify-center`}>
             {
                 props.icon && <img src={props.icon} className="w-12 h-12 mr-2 -ml-4" />
             }
+            {
+                props.type == ButtonType.submit &&
+                <div id="spin" className={`${props.loading ? undefined : "hidden"} absolute left-2`}>
+                    <svg className="animate-spin h-5 w-5 ml-4" viewBox="0 0 24 24">
+                        <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor"
+                                strokeWidth="4"/>
+                        <path className="opacity-80" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+                    </svg>
+                </div>
+            }
             {props.text}
         </button>
     )
diff --git a/components/Form.tsx b/components/Form.tsx
index 059c93c..40500ef 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -13,7 +13,7 @@ import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
 import {PassData} from "../src/pass";
 import {COLORS} from "../src/colors";
 import Colors from './Colors';
-import Button from './Button';
+import Button, { ButtonType } from './Button';
 
 function Form(): JSX.Element {
     const {t} = useTranslation(['index', 'errors', 'common']);
@@ -274,19 +274,8 @@ function Form(): JSX.Element {
                                 </Link>.
                             </p>
                         </label>
-                        <div className="flex flex-row items-center justify-start">
-                            <button id="download" type="submit"
-                                    className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
-                                {t('index:addToWallet')}
-                            </button>
-                            <div id="spin" className={loading ? undefined : "hidden"}>
-                                <svg className="animate-spin h-5 w-5 ml-4" viewBox="0 0 24 24">
-                                    <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor"
-                                            strokeWidth="4"/>
-                                    <path className="opacity-75" fill="currentColor"
-                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
-                                </svg>
-                            </div>
+                        <div className="grid grid-cols-1">
+                            <Button type={ButtonType.submit} text={t('index:addToWallet')} loading={loading} />
                         </div>
                     </div>
                 }/>
diff --git a/components/Page.tsx b/components/Page.tsx
index 0a62b5e..97f52e3 100644
--- a/components/Page.tsx
+++ b/components/Page.tsx
@@ -12,7 +12,7 @@ function Page(props: PageProps): JSX.Element {
     const { t } = useTranslation('common');
 
     return (
-        <div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 py-12">
+        <div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 pt-12 pb-16">
             <Head>
                 <title>{t('common:title')}</title>
                 <link rel="icon" href="/favicon.ico"/>
diff --git a/src/process.ts b/src/process.ts
index a38c61e..5388bb1 100644
--- a/src/process.ts
+++ b/src/process.ts
@@ -12,7 +12,6 @@ export async function getPayloadBodyFromFile(file: File, color: COLORS): Promise
 
     switch (file.type) {
         case 'application/pdf':
-            console.log('pdf')
             // Read file
             const fileBuffer = await file.arrayBuffer();
             imageData = await getImageDataFromPdf(fileBuffer)
@@ -21,7 +20,6 @@ export async function getPayloadBodyFromFile(file: File, color: COLORS): Promise
         case 'image/jpeg':
         case 'image/webp':
         case 'image/gif':
-            console.log(`image ${file.type}`)
             imageData = await getImageDataFromImage(file)
             break
         default: