aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/404.svelte6
-rw-r--r--src/components/About.svelte25
-rw-r--r--src/components/AppHeader.svelte6
-rw-r--r--src/components/FaqCard.svelte6
-rw-r--r--src/components/Footer.svelte10
-rw-r--r--src/components/HowItWorksCard.svelte6
-rw-r--r--src/components/LandingHeader.svelte30
-rw-r--r--src/components/LandingHero.svelte12
-rw-r--r--src/components/LocaleSelector.svelte2
-rw-r--r--src/components/RegisterOrLogin.svelte18
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>