From f4dead26c92e2ef6be45af0eb56d12bb3a00d983 Mon Sep 17 00:00:00 2001 From: secondl1ght <85003930+secondl1ght@users.noreply.github.com> Date: Sat, 24 Sep 2022 22:20:18 -0600 Subject: lots of style updates after design review, bug fixes, and more improve --- README.md | 3 +- doc/i18n-technical.md | 2 +- doc/i18n.md | 2 +- src/components/About.svelte | 12 ++--- src/components/AppHeader.svelte | 8 ++-- src/components/LandingHero.svelte | 2 +- src/components/LocationsMap.svelte | 11 ++++- src/components/Quote.svelte | 19 ++++---- src/locales/en.json | 16 +++---- src/locales/fr.json | 12 ++--- src/routes/+layout.server.js | 8 ++-- src/routes/+layout.svelte | 2 +- src/routes/+page.svelte | 11 ++--- src/routes/[username]/+page.svelte | 48 ++++++++++--------- src/routes/[username]/dashboard/+page.svelte | 39 +++++++++++++-- src/routes/[username]/receive/+page.svelte | 4 +- src/routes/[username]/settings/+page.svelte | 14 ++++-- src/routes/[username]/settings/_account.svelte | 3 +- src/routes/[username]/settings/_security.svelte | 11 +++-- src/routes/[username]/support/+page.svelte | 2 +- .../[username]/transactions/[...page]/+page.svelte | 4 +- src/routes/invoice/[id]/+page.svelte | 13 +++-- src/routes/launch-party/+page.svelte | 2 +- src/routes/news/+page.svelte | 56 +++++++++++----------- 24 files changed, 175 insertions(+), 129 deletions(-) diff --git a/README.md b/README.md index fba6a9c4..22c4d6ff 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# coinos-ui-v2 +# coinos-ui-v2 coinos is an easy to use bitcoin point of sale application for businesses and wallet for customers, connecting the bitcoin circular economy together. @@ -28,4 +28,3 @@ This UI uses the following libraries: ### Internationalization coinos has a system for translation using [`sveltekit-i18n`](https://www.npmjs.com/package/sveltekit-i18n). For more information and instructions on how to translate coinos, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md). - diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md index 4ea2adbe..3f6a09d5 100644 --- a/doc/i18n-technical.md +++ b/doc/i18n-technical.md @@ -23,7 +23,7 @@ Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its na ```json { - "howItWorks": "How It Works", + "howItWorks": "How it works", "faq": "FAQ", "about": "About", "startInSeconds": "Start in Seconds", diff --git a/doc/i18n.md b/doc/i18n.md index 57172464..c54f6461 100644 --- a/doc/i18n.md +++ b/doc/i18n.md @@ -20,7 +20,7 @@ Each translation of coinos is stored in a special _locale file_. These files can ```JSON { - "howItWorks": "How It Works", + "howItWorks": "How it works", "faq": "FAQ", "about": "About", "startInSeconds": "Start in Seconds", diff --git a/src/components/About.svelte b/src/components/About.svelte index 9857aa92..cf45a253 100644 --- a/src/components/About.svelte +++ b/src/components/About.svelte @@ -42,22 +42,22 @@

{$t('about.header')}

{@html $t('about.p1')}

+

+ {@html $t('about.p2')} +

{@html $t('about.p3')}

-

- {@html $t('about.p4')} -

-
+

{$t('about.team.header')}

@@ -97,7 +97,7 @@
-
+

{$t('about.locations.header')}

{@html $t('about.locations.description')} diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 04426bd3..f0272fe1 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -116,20 +116,20 @@ {#if $subject?.profile}

{:else}
- +
{/if} diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte index 6fcaf075..466a6194 100644 --- a/src/components/LandingHero.svelte +++ b/src/components/LandingHero.svelte @@ -8,7 +8,7 @@

{$t('landing.header_before_icon')} diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index b1d9ce55..2227a831 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -9,7 +9,7 @@ if (browser) { const leaflet = await import('leaflet'); - map = leaflet.map(mapElement).setView([49.267265, -123.1491965], 13); + map = leaflet.map(mapElement, { attributionControl: false }).setView([0, 0], 0); const myCustomColour = 'orange'; @@ -76,6 +76,15 @@ .bindPopup(location.info) ._icon.classList.add('huechange'); }); + + map.fitBounds([ + [locations[0].lat, locations[0].long], + [locations[1].lat, locations[1].long], + [locations[2].lat, locations[2].long], + [locations[3].lat, locations[3].long], + [locations[4].lat, locations[4].long], + [locations[5].lat, locations[5].long] + ]); } }); diff --git a/src/components/Quote.svelte b/src/components/Quote.svelte index 23094325..1e099061 100644 --- a/src/components/Quote.svelte +++ b/src/components/Quote.svelte @@ -1,10 +1,11 @@ + aria-hidden="true" + class="w-10 h-10 text-gray-400 dark:text-gray-600" + viewBox="0 0 24 27" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > diff --git a/src/locales/en.json b/src/locales/en.json index 05475831..a6afe366 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -5,9 +5,9 @@ }, "about": { "header": "About", - "p1": "Coinos is an open source bitcoin payment app. Development started in Vancouver in September 2012 as a way to provide local merchants with a convenient way to accept bitcoin payments.", - "p3": "You can download the source code to run an instance and connect it to your own bitcoin and lightning nodes. We'll help you get started being a benevolent custodian and payments provider for your community.", - "p4": "Account transfers amongst users on our server are done off-chain so they're completely free, instant, and unlimited.", + "p1": "coinos is an open source bitcoin payment app. Development started in Vancouver in September 2012 as a way to provide local merchants with a convenient way to accept bitcoin payments.", + "p2": "You can download the source code to run an instance and connect it to your own bitcoin and lightning nodes. We'll help you get started being a benevolent custodian and payments provider for your community.", + "p3": "Account transfers amongst users on our server are done off-chain so they're completely free, instant, and unlimited.", "team": { "header": "The Team", "adam": { @@ -56,7 +56,7 @@ "header": "FAQ", "cost": { "question": "What does it cost?", - "answer": "Coinos is free to use. You pay nothing to register and maintain your account. You can send and receive unlimited payments over the lightning network at no cost. We charge a 0.1% conversion fee if you need to move your funds off of lightning to an on-chain bitcoin address at an external wallet or exchange." + "answer": "coinos is free to use. You pay nothing to register and maintain your account. You can send and receive unlimited payments over the lightning network at no cost. We charge a 0.1% conversion fee if you need to move your funds off of lightning to an on-chain bitcoin address at an external wallet or exchange." }, "compatibility": { "question": "Do I need any special device or software?", @@ -78,7 +78,7 @@ "news": "News" }, "howItWorks": { - "header": "How It Works", + "header": "How it works", "step1": { "header": "1. Create your account", "description": "A username and password is all you need to get started." @@ -118,7 +118,7 @@ "info2": { "title": "Simple to use", "description1": "Just enter an amount in your local currency, share the QR code and you’re done.", - "description2": "Coinos gives you free access to use our hosted bitcoin and lightning nodes, eliminating the need to understand how bitcoin or lightning works. We do all the heavy lifting so you can focus on your business.", + "description2": "coinos gives you free access to use our hosted bitcoin and lightning nodes, eliminating the need to understand how bitcoin or lightning works. We do all the heavy lifting so you can focus on your business.", "description3": "You always have the option of taking custody of your funds by withdrawing instantly at any time." }, "info3": { @@ -160,7 +160,7 @@ "scanToPayBTC": "Scan to pay with bitcoin", "dashboard": { "ACCOUNT_BALANCE": "ACCOUNT BALANCE", - "bitcoinPrice": "Bitcoin Price:", + "bitcoinPrice": "bitcoin Price:", "conversionFeeWarning": "You will be charged a 1% withdrawal fee on the amount.", "dataFromBinance": "Data from Binance.", "fetchingRate": "fetching rate...", @@ -195,7 +195,7 @@ "themeDescription": "Select from the default color themes.", "localCurrency": "Local Currency", "btcUnit": "Display bitcoin in:", - "bitcoin": "Bitcoin", + "bitcoin": "bitcoin", "satoshis": "Satoshis", "securityPIN": "Security PIN", "securityPINDescription": "Set a security pin that will be used to unlock your settings and to send outgoing payments.", diff --git a/src/locales/fr.json b/src/locales/fr.json index 69fb6e18..221679ab 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -17,7 +17,7 @@ "bitcoin": "Utilisant bitcoin depuis 2011", "webDev": "20+ ans d'experience de programmation web en gouvernement et industrie", "bitcoinVancouver": "Organisateur précoce de la rencontre bitcoin Vancouver", - "bitcoinCoop": "Fondateur de The Bitcoin Co-op et défenseur précoce de Decentral Vancouver", + "bitcoinCoop": "Fondateur de The bitcoin Co-op et défenseur précoce de Decentral Vancouver", "beliefs": "Yogi, permaculturiste, anarchiste, décentraliste", "familialRelationships": "Mari, père, frère, fils" } @@ -36,7 +36,7 @@ "header": "FAQ", "cost": { "question": "Qu'est-ce que c'est le coût?", - "answer": "coinos est gratuit à utiliser. Vous seulment payez un prix 1% quand vous convertez vos fonds entre Bitcoin, Liquid et Lightning. Comparez-ça à les frais de dossir typiques 3% des cartes credit." + "answer": "coinos est gratuit à utiliser. Vous seulment payez un prix 1% quand vous convertez vos fonds entre bitcoin, Liquid et Lightning. Comparez-ça à les frais de dossir typiques 3% des cartes credit." }, "compatibility": { "question": "Est-ce que j'ai besoin du logiciel ou appareil special?", @@ -129,11 +129,11 @@ "user": { "follow": "Suivre", "remove": "Enlève", - "scanToPayBTC": "Scanner pour payer avec Bitcoin", + "scanToPayBTC": "Scanner pour payer avec bitcoin", "dashboard": { "ACCOUNT_BALANCE": "SOLDE", - "bitcoinPrice": "Prix de Bitcoin:", - "conversionFeeWarning": "Il y a un prix de 1% pour convertir entre Bitcoin, Liquid et Lightning.", + "bitcoinPrice": "Prix de bitcoin:", + "conversionFeeWarning": "Il y a un prix de 1% pour convertir entre bitcoin, Liquid et Lightning.", "dataFromBinance": "Données de Binance.", "fetchingRate": "cherchant taut de change...", "optionalNote": "Note (optionel)", @@ -162,7 +162,7 @@ "themeDescription": "Sélectionnez des thèmes dèfauts.", "localCurrency": "Monnaie Local", "btcUnit": "Voire bitcoin en:", - "bitcoin": "Bitcoin", + "bitcoin": "bitcoin", "satoshis": "Satoshis", "securityPIN": "NIP de Sécurité", "securityPINDescription": "Choisir un NIP de sécurité qui sera necessaire pour ouvrir tes préférences et pour envoyer des paiements sortants.", diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js index b9df94c1..77ca7eaa 100644 --- a/src/routes/+layout.server.js +++ b/src/routes/+layout.server.js @@ -9,11 +9,11 @@ export async function load({ request, setHeaders, url, params }) { let { token } = cookie.parse(request.headers.get('cookie') || ''); let user; let rates; - let subject; + let subject; - if (params.username) { - subject = await get(`/users/${params.username}`); - } + if (params.username) { + subject = await get(`/users/${params.username}`); + } if (token) { try { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e260af38..bf347292 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -15,7 +15,7 @@ export let data; - $: $subject = data.subject; + $: $subject = data.subject; $: $token = data.token; $: $user = data.user; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5d00f272..09d7ff54 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -28,11 +28,12 @@

- Welcome to the new and improved coinos, focused on merchant adoption! Looking for the old coinos? Visit - classic.coinos.ioclassic.coinos.io.

@@ -72,9 +73,7 @@

{$t('howItWorks.header')}

-
+
{#each howItWorksSteps as step} {/each} diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte index de8c3a26..1bbd6e66 100644 --- a/src/routes/[username]/+page.svelte +++ b/src/routes/[username]/+page.svelte @@ -35,16 +35,18 @@ let followed = false; - + -
-
-
-

{$subject.username}

+
+
+
+

{$subject.username}

-

{$subject.address && $subject.address !== "null" ? $subject.address : ''}

+

+ {$subject.address && $subject.address !== 'null' ? $subject.address : ''} +

- -
+
-
-
copy(lightningAddress)} - id="qr" - class=" cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative" - /> +
+
copy(lightningAddress)} + id="qr" + class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative" + /> -

{$t('user.scanToPayBTC')}

+

{$t('user.scanToPayBTC')}

-
- {lightningAddress} - -
+
+ {lightningAddress} +
+
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte index 7e424819..4c0917dc 100644 --- a/src/routes/[username]/dashboard/+page.svelte +++ b/src/routes/[username]/dashboard/+page.svelte @@ -11,7 +11,8 @@ let payreq = '', payreqField, - withdrawing; + withdrawing, + loading; let toggle = async () => { payreq = ''; @@ -21,11 +22,14 @@ }; let withdraw = async () => { + loading = true; try { await post('/withdraw', { payreq }); withdrawing = false; + loading = false; } catch (e) { failure(e.message); + loading = false; } }; @@ -40,8 +44,8 @@ -
-

{user.username}

+
+

{user.username}

{user.address}
@@ -81,7 +85,7 @@ {:else}
@@ -110,8 +114,33 @@ class="{!payreq ? 'opacity-50' : 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white" - on:click={withdraw}>{$t('user.dashboard.send')} + {#if loading} + + + + + {:else} + {$t('user.dashboard.send')} + {/if} +
{/if}
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte index 6a286071..ba443ff2 100644 --- a/src/routes/[username]/receive/+page.svelte +++ b/src/routes/[username]/receive/+page.svelte @@ -87,7 +87,7 @@ {#if $user} -
+
{#if $selectedRate}
@@ -172,7 +172,7 @@
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte index dbaea87e..ff7676f4 100644 --- a/src/routes/[username]/settings/_account.svelte +++ b/src/routes/[username]/settings/_account.svelte @@ -213,6 +213,7 @@ {/if}
+ diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte index b74193cf..1b8fb125 100644 --- a/src/routes/[username]/settings/_security.svelte +++ b/src/routes/[username]/settings/_security.svelte @@ -36,7 +36,7 @@ toggleEnabling(); } } catch (e) { - failure('Failed to enable 2fa, try again'); + failure('Failed to enable 2FA, try again'); } }; @@ -50,13 +50,14 @@ toggleDisabling(); } } catch (e) { - failure('Failed to disable 2fa, try again'); + failure('Failed to disable 2FA, try again'); } }; $: otpUri = `otpauth://totp/coinos:${$user.username}?secret=${$user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`; + - +
{$t('user.settings.twofa')} diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte index acaa8d2b..663ba8a6 100644 --- a/src/routes/[username]/support/+page.svelte +++ b/src/routes/[username]/support/+page.svelte @@ -10,7 +10,7 @@ {#if $user} -
+

{$t('user.support.header')}

diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte index 2e9cb70e..0eef04fe 100644 --- a/src/routes/[username]/transactions/[...page]/+page.svelte +++ b/src/routes/[username]/transactions/[...page]/+page.svelte @@ -17,7 +17,7 @@ -
+

{$t('user.transactions.header')}

@@ -36,7 +36,7 @@
-
+

{$t('user.transactions.AMOUNT')}

{$t('user.transactions.TYPE')}

diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte index 67cd8efa..d935affb 100644 --- a/src/routes/invoice/[id]/+page.svelte +++ b/src/routes/invoice/[id]/+page.svelte @@ -181,7 +181,8 @@ > (showCustomAmount = false)} + >

{$t('invoice.addTipq')}

@@ -258,7 +259,7 @@ /> -
+