diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/404.svelte | 6 | ||||
| -rw-r--r-- | src/components/About.svelte | 25 | ||||
| -rw-r--r-- | src/components/AppHeader.svelte | 6 | ||||
| -rw-r--r-- | src/components/FaqCard.svelte | 6 | ||||
| -rw-r--r-- | src/components/Footer.svelte | 10 | ||||
| -rw-r--r-- | src/components/HowItWorksCard.svelte | 6 | ||||
| -rw-r--r-- | src/components/LandingHeader.svelte | 30 | ||||
| -rw-r--r-- | src/components/LandingHero.svelte | 12 | ||||
| -rw-r--r-- | src/components/LocaleSelector.svelte | 2 | ||||
| -rw-r--r-- | src/components/RegisterOrLogin.svelte | 18 |
10 files changed, 59 insertions, 62 deletions
diff --git a/src/components/404.svelte b/src/components/404.svelte index 4d5be76e..08323d40 100644 --- a/src/components/404.svelte +++ b/src/components/404.svelte @@ -1,6 +1,6 @@ <script> import { Icon } from '$comp'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; </script> <div class="flex justify-center items-center mt-20"> @@ -11,7 +11,7 @@ <Icon icon="question" style="mx-auto w-56" /> - <h1 class="font-bold text-5xl">{$_('404.404')}</h1> - <p>{$_('404.pageNotFound')}</p> + <h1 class="font-bold text-5xl">{$t('404.404')}</h1> + <p>{$t('404.pageNotFound')}</p> </div> </div> diff --git a/src/components/About.svelte b/src/components/About.svelte index db74fd96..257fc49c 100644 --- a/src/components/About.svelte +++ b/src/components/About.svelte @@ -1,22 +1,22 @@ <script> import { Image, Icon, LocationsMap } from '$comp'; - import { _, json } from 'svelte-i18n'; + import { t } from '$lib/translations'; </script> -<h3 class="text-5xl font-medium mb-10 text-center">{$_('about.header')}</h3> +<h3 class="text-5xl font-medium mb-10 text-center">{$t('about.header')}</h3> <div class="md:px-10 lg:px-0 block lg:flex justify-center text-secondary text-xl lg:space-x-20 mx-auto max-w-7xl relative" > <p class="w-full lg:w-5/12"> - {@html $_('about.p1')} + {@html $t('about.p1')} <br /><br /> - {@html $_('about.p2')} + {@html $t('about.p2')} <br /><br /> </p> <p class="w-full lg:w-5/12"> - {@html $_('about.p3')} + {@html $t('about.p3')} <br /><br /> - {@html $_('about.p4')} + {@html $t('about.p4')} </p> <Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" /> </div> @@ -24,17 +24,17 @@ <div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20"> <div class="space-y-5 mb-5 lg:mb-0"> <h3 class="text-5xl font-medium mb-10 text-center lg:text-right"> - {$_('about.founder.header')} + {$t('about.founder.header')} </h3> <Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" /> <div class="space-y-2"> <span class="text-2xl text-center font-semibold block lg:text-right" - >{$_('about.founder.name')}</span + >{$t('about.founder.name')}</span > <span class="text-xl text-center text-secondary block lg:text-right" - >{$_('about.founder.position')}</span + >{$t('about.founder.position')}</span > </div> @@ -57,16 +57,13 @@ <ul class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5" > - {#each Object.values($json('about.founder.qualifications')) as qualification} - <li>{qualification}</li> - {/each} </ul> </div> <div class="mt-20"> - <h3 class="text-5xl font-medium mb-5 text-center">{$_('about.locations.header')}</h3> + <h3 class="text-5xl font-medium mb-5 text-center">{$t('about.locations.header')}</h3> <p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10"> - {@html $_('about.locations.description')} + {@html $t('about.locations.description')} </p> <LocationsMap /> </div> diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 1d24cb1d..7b3987d5 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -5,7 +5,7 @@ import { user, newPayment, colorTheme } from '$lib/store'; import { goto } from '$app/navigation'; import { Icon } from '$comp'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; export let avatarPosition = 'left-[calc(50vw-48px)]'; @@ -75,7 +75,7 @@ <button class="flex justify-center items-center font-semibold text-sm" on:click={() => handleMenuItemClick(button.goto)} - ><Icon icon={button.icon} style="mr-1" /> {$_(button.stringID)} + ><Icon icon={button.icon} style="mr-1" /> {$t(button.stringID)} </button> </li> {/each} @@ -86,7 +86,7 @@ {:else} <a href="/login"> <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm" - >{$_('nav.signIn')}</button + >{$t('nav.signIn')}</button > </a> {/if} diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte index 0d3a9fa7..918e03d6 100644 --- a/src/components/FaqCard.svelte +++ b/src/components/FaqCard.svelte @@ -1,5 +1,5 @@ <script> - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; // this ID will be used to get the strings from the locale // question is at faq.[questionID].question @@ -8,8 +8,8 @@ </script> <div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5"> - <p class="text-2xl font-medium">{$_('faq.' + questionID + '.question')}</p> + <p class="text-2xl font-medium">{$t('faq.' + questionID + '.question')}</p> <p class="text-secondary text-xl font-medium"> - {$_('faq.' + questionID + '.answer')} + {$t('faq.' + questionID + '.answer')} </p> </div> diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index e2acd993..a1173f74 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -1,6 +1,6 @@ <script> import { Icon } from '$comp'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; const followLinks = [ { url: 'https://twitter.com/coinoswallet', titleID: 'twitter' }, @@ -18,21 +18,21 @@ <Icon icon="logo" style="w-48 mx-auto md:mx-0" /> <div class="text-center md:text-left"> - <p class="font-semibold">{$_('footer.followUs')}</p> + <p class="font-semibold">{$t('footer.followUs')}</p> <ul class="mt-5 text-secondary space-y-3 font-medium"> {#each followLinks as link} <li> - <a href={link.url} target="_blank" rel="noreferrer">{$_('footer.' + link.titleID)}</a> + <a href={link.url} target="_blank" rel="noreferrer">{$t('footer.' + link.titleID)}</a> </li> {/each} </ul> </div> <div class="text-center md:text-left"> - <p class="font-semibold">{$_('footer.company')}</p> + <p class="font-semibold">{$t('footer.company')}</p> <ul class="mt-5 text-secondary space-y-3"> {#each companyLinks as link} - <li><a href={link.url}>{$_('footer.' + link.titleID)}</a></li> + <li><a href={link.url}>{$t('footer.' + link.titleID)}</a></li> {/each} </ul> </div> diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte index 6f82c360..784c738d 100644 --- a/src/components/HowItWorksCard.svelte +++ b/src/components/HowItWorksCard.svelte @@ -1,14 +1,14 @@ <script> import Icon from './Icon.svelte'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; export let image; export let stepID; </script> <div class="space-y-5"> <Icon icon={image} style="mx-auto w-32 h-32" /> - <p class="text-2xl font-medium">{$_('howItWorks.' + stepID + '.header')}</p> + <p class="text-2xl font-medium">{$t('howItWorks.' + stepID + '.header')}</p> <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto"> - {$_('howItWorks.' + stepID + '.description')} + {$t('howItWorks.' + stepID + '.description')} </p> </div> diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index acc83001..372c0b98 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -3,7 +3,7 @@ import { scroll } from '$lib/utils'; import { Icon, LocaleSelector } from '$comp'; import { user } from '$lib/store'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; export let howItWorks; export let faq; @@ -28,30 +28,30 @@ <!-- desktop nav --> <div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold"> - <button on:click={() => scroll(howItWorks)}>{$_('howItWorks.header')}</button> - <button on:click={() => scroll(faq)}>{$_('faq.header')}</button> - <button on:click={() => scroll(about)}>{$_('about.header')}</button> + <button on:click={() => scroll(howItWorks)}>{$t('howItWorks.header')}</button> + <button on:click={() => scroll(faq)}>{$t('faq.header')}</button> + <button on:click={() => scroll(about)}>{$t('about.header')}</button> {#if !$user} <button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')} - >{$_('nav.startInSeconds')} + >{$t('nav.startInSeconds')} </button> <button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={() => goto('/login')} > - {$_('nav.signIn')} + {$t('nav.signIn')} </button> {:else} <button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto(`/${$user.username}/dashboard`)} - >{$_('nav.account')} + >{$t('nav.account')} </button> <button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={() => goto('/logout')} > - {$_('nav.signOut')} + {$t('nav.signOut')} </button> {/if} </div> @@ -70,35 +70,35 @@ > <div class="space-y-8 mt-24 ml-10 font-bold text-xl"> <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block" - >{$_('nav.howItWorks')}</button + >{$t('nav.howItWorks')}</button > - <button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('nav.faq')}</button> + <button on:click={() => mobileMenuButtonClick(faq)} class="block">{$t('nav.faq')}</button> <button on:click={() => mobileMenuButtonClick(about)} class="block" - >{$_('nav.about')}</button + >{$t('nav.about')}</button > {#if !$user} <button class="border rounded-full px-6 py-2 font-bold block" on:click={() => goto('/register')} - >{$_('nav.startInSeconds')} + >{$t('nav.startInSeconds')} </button> <button class="bg-black text-white border rounded-full px-6 py-2 font-bold block" on:click={() => goto('/login')} > - {$_('nav.signIn')} + {$t('nav.signIn')} </button> {:else} <button class="border rounded-full px-6 py-2 font-bold block" on:click={() => goto(`/${$user.username}/dashboard`)} - >{$_('nav.account')} + >{$t('nav.account')} </button> <button class="bg-black text-white border rounded-full px-6 py-2 font-bold block" on:click={() => goto('/logout')} > - {$_('nav.signOut')} + {$t('nav.signOut')} </button> {/if} <LocaleSelector style="py-1" /> diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte index 6553d271..1415692e 100644 --- a/src/components/LandingHero.svelte +++ b/src/components/LandingHero.svelte @@ -2,7 +2,7 @@ import { goto } from '$app/navigation'; import { Icon, Image } from '$comp'; import { user } from '$lib/store'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; </script> <div class="mt-[96.88px] md:mt-0"> @@ -10,17 +10,17 @@ <h1 class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight" > - {$_('landing.header_before_icon')} + {$t('landing.header_before_icon')} <span class="relative"> - {$_('landing.header_with_icon')} + {$t('landing.header_with_icon')} <Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" /> </span> - {$_('landing.header_after_icon')} + {$t('landing.header_after_icon')} </h1> <h2 class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium" > - {$_('landing.subheader')} + {$t('landing.subheader')} </h2> {#if !$user} <div class="flex justify-center"> @@ -28,7 +28,7 @@ class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')} > - {$_('nav.startInSeconds')} + {$t('nav.startInSeconds')} </button> </div> {/if} diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte index 2ae65986..4672a564 100644 --- a/src/components/LocaleSelector.svelte +++ b/src/components/LocaleSelector.svelte @@ -1,5 +1,5 @@ <script> - import { _, locale, locales } from 'svelte-i18n'; + import { locale, locales } from '$lib/translations'; export let style; </script> diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte index acf98523..2d1ee6a5 100644 --- a/src/components/RegisterOrLogin.svelte +++ b/src/components/RegisterOrLogin.svelte @@ -4,7 +4,7 @@ import { user, token } from '$lib/store'; import { auth } from '$lib/socket'; import { goto } from '$app/navigation'; - import { _ } from 'svelte-i18n'; + import { t } from '$lib/translations'; export let pageID; @@ -30,11 +30,11 @@ <div class="flex justify-center items-center"> <div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"> - <h1 class="text-2xl font-bold text-center">{$_('login.' + pageID)}</h1> + <h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1> <form class="space-y-5" {action} method="POST"> <div> - <label for="username" class="font-semibold">{$_('login.username')}</label> + <label for="username" class="font-semibold">{$t('login.username')}</label> <!-- svelte-ignore a11y-autofocus --> <input name="username" @@ -47,7 +47,7 @@ </div> <div class="relative"> - <label for="password" class="block font-semibold">{$_('login.password')}</label> + <label for="password" class="block font-semibold">{$t('login.password')}</label> {#if revealPassword} <input name="password" @@ -76,28 +76,28 @@ {#if pageID === 'register'} <p class="text-secondary text-sm"> - {$_('login.passwordRecommendation')} + {$t('login.passwordRecommendation')} </p> {:else} <div class="flex justify-end items-center"> <a href="/forgot" class="underline underline-offset-4 text-black text-sm" - >{$_('login.forgotPassword')}</a + >{$t('login.forgotPassword')}</a > </div> {/if} <button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold" - >{$_('login.' + pageID)} + >{$t('login.' + pageID)} </button> </form> <p class="text-secondary text-center font-medium"> - {pageID === 'register' ? $_('login.haveAccount') : $_('login.noAccount')} + {pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')} <a href={pageID === 'register' ? '/login' : '/register'} class="block md:inline text-black underline underline-offset-4" > - {pageID === 'register' ? $_('login.signIn') : $_('login.register')} + {pageID === 'register' ? $t('login.signIn') : $t('login.register')} </a> </p> </div> |
