Improve add to wallet button
This commit is contained in:
parent
1eb6bea1a6
commit
d1da98a9e4
|
@ -1,18 +1,36 @@
|
||||||
interface ButtonProps {
|
interface ButtonProps {
|
||||||
text?: string,
|
text?: string,
|
||||||
icon?: string,
|
icon?: string,
|
||||||
onClick: () => void,
|
onClick?: () => void,
|
||||||
|
loading?: boolean,
|
||||||
|
type?: ButtonType,
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ButtonType {
|
||||||
|
submit = 'submit',
|
||||||
|
button = 'button',
|
||||||
}
|
}
|
||||||
|
|
||||||
function Button(props: ButtonProps): JSX.Element {
|
function Button(props: ButtonProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type={props.type}
|
||||||
onClick={props.onClick}
|
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.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}
|
{props.text}
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
|
|
|
@ -13,7 +13,7 @@ import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
|
||||||
import {PassData} from "../src/pass";
|
import {PassData} from "../src/pass";
|
||||||
import {COLORS} from "../src/colors";
|
import {COLORS} from "../src/colors";
|
||||||
import Colors from './Colors';
|
import Colors from './Colors';
|
||||||
import Button from './Button';
|
import Button, { ButtonType } from './Button';
|
||||||
|
|
||||||
function Form(): JSX.Element {
|
function Form(): JSX.Element {
|
||||||
const {t} = useTranslation(['index', 'errors', 'common']);
|
const {t} = useTranslation(['index', 'errors', 'common']);
|
||||||
|
@ -274,19 +274,8 @@ function Form(): JSX.Element {
|
||||||
</Link>.
|
</Link>.
|
||||||
</p>
|
</p>
|
||||||
</label>
|
</label>
|
||||||
<div className="flex flex-row items-center justify-start">
|
<div className="grid grid-cols-1">
|
||||||
<button id="download" type="submit"
|
<Button type={ButtonType.submit} text={t('index:addToWallet')} loading={loading} />
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}/>
|
}/>
|
||||||
|
|
|
@ -12,7 +12,7 @@ function Page(props: PageProps): JSX.Element {
|
||||||
const { t } = useTranslation('common');
|
const { t } = useTranslation('common');
|
||||||
|
|
||||||
return (
|
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>
|
<Head>
|
||||||
<title>{t('common:title')}</title>
|
<title>{t('common:title')}</title>
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
|
|
|
@ -12,7 +12,6 @@ export async function getPayloadBodyFromFile(file: File, color: COLORS): Promise
|
||||||
|
|
||||||
switch (file.type) {
|
switch (file.type) {
|
||||||
case 'application/pdf':
|
case 'application/pdf':
|
||||||
console.log('pdf')
|
|
||||||
// Read file
|
// Read file
|
||||||
const fileBuffer = await file.arrayBuffer();
|
const fileBuffer = await file.arrayBuffer();
|
||||||
imageData = await getImageDataFromPdf(fileBuffer)
|
imageData = await getImageDataFromPdf(fileBuffer)
|
||||||
|
@ -21,7 +20,6 @@ export async function getPayloadBodyFromFile(file: File, color: COLORS): Promise
|
||||||
case 'image/jpeg':
|
case 'image/jpeg':
|
||||||
case 'image/webp':
|
case 'image/webp':
|
||||||
case 'image/gif':
|
case 'image/gif':
|
||||||
console.log(`image ${file.type}`)
|
|
||||||
imageData = await getImageDataFromImage(file)
|
imageData = await getImageDataFromImage(file)
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
|
|
Loading…
Reference in New Issue