diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/404.svelte | 4 | ||||
| -rw-r--r-- | src/components/About.svelte | 8 | ||||
| -rw-r--r-- | src/components/AppHeader.svelte | 69 | ||||
| -rw-r--r-- | src/components/Footer.svelte | 1 | ||||
| -rw-r--r-- | src/components/LandingHeader.svelte | 4 | ||||
| -rw-r--r-- | src/components/LandingHero.svelte | 4 | ||||
| -rw-r--r-- | src/components/RegisterOrLogin.svelte | 5 | ||||
| -rw-r--r-- | src/components/Toggle.svelte | 12 | ||||
| -rw-r--r-- | src/components/index.js | 1 |
9 files changed, 67 insertions, 41 deletions
diff --git a/src/components/404.svelte b/src/components/404.svelte index 503316bb..426f1f96 100644 --- a/src/components/404.svelte +++ b/src/components/404.svelte @@ -5,10 +5,10 @@ <div class="flex justify-center items-center mt-20"> <div class="space-y-5 text-center"> <a href="/"> - <Icon icon="logo" /> + <Icon icon="logo" style="mx-auto" /> </a> - <Icon icon="question" style="mx-auto w-full" /> + <Icon icon="question" style="mx-auto w-56" /> <h1 class="font-bold text-5xl">404</h1> <p>Page not found.</p> diff --git a/src/components/About.svelte b/src/components/About.svelte index 3731bf9b..84e1761b 100644 --- a/src/components/About.svelte +++ b/src/components/About.svelte @@ -2,10 +2,10 @@ import { Image, Icon } from '$comp'; const aboutAdam = [ - 'Running Bitcoin since 2011', + 'Running bitcoin since 2011', '20+ years web development experience in government and industry', - 'Early Bitcoin Vancouver meetup organizer', - 'Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver', + 'Early bitcoin Vancouver meetup organizer', + 'Founder of The bitcoin Co-op and early supporter of Decentral Vancouver', 'Yogi, permaculturist, anarchist, decentralist', 'Husband, father, brother, son' ]; @@ -21,7 +21,7 @@ as a way to provide local merchants with a convenient way to accept bitcoin payments. <br /><br /> The feature set has grown over the years to accomodate a wide variety of use cases with the goal - of making it as easy as possible for anyone to get started using Bitcoin quickly, cheaply, and securely. + of making it as easy as possible for anyone to get started using bitcoin quickly, cheaply, and securely. <br /><br /> </p> <p class="w-full lg:w-5/12"> diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 242e6924..9ebf28bf 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,14 +1,15 @@ <script> // we will want to dynamically use the users avatar on this screen if they have uploaded one - import { user } from '$lib/store'; + import OutClick from 'svelte-outclick'; + import { user, newPayment, colorTheme } from '$lib/store'; import { goto } from '$app/navigation'; import { Icon, LocaleSelector } from '$comp'; export let avatarPosition = 'left-[calc(50vw-48px)]'; const menuButtons = [ - { title: 'Customers', icon: 'customers', goto: 'customers' }, + // { title: 'Customers', icon: 'customers', goto: 'customers' }, { title: 'Dashboard', icon: 'dash', goto: 'dashboard' }, { title: 'Settings', icon: 'settings', goto: 'settings' }, { title: 'Support', icon: 'support', goto: 'support' }, @@ -21,12 +22,13 @@ if (item === 'logout') { goto('/logout'); } else { + showMenu = false; goto(`/${$user.username + '/' + item}`); } }; </script> -<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative"> +<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative"> <nav class="flex justify-end items-center space-x-4 p-5"> <LocaleSelector /> {#if $user} @@ -36,36 +38,51 @@ </button> </a> <a href={`/${$user.username}/transactions`}> - <button class="bg-white p-2 rounded-full w-12 h-12" + <button class="bg-white p-2 rounded-full w-12 h-12 relative" ><Icon icon="clock" style="mx-auto" /> + {#if $newPayment} + <span class="absolute top-0 right-0"> + <span class="flex h-3 w-3"> + <span + class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75" + /> + <span class="relative inline-flex rounded-full h-3 w-3 bg-[#F7931A]" /> + </span> + </span> + {/if} </button> </a> <a href={`/${$user.username}`}> - <button class="bg-white p-2 rounded-full w-12 h-12" + <button class="bg-white p-2 rounded-full w-12 h-12" ><Icon icon="profile" style="mx-auto" /> </button> </a> <div class="relative"> - <button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => (showMenu = !showMenu)} - ><Icon icon="menu" style="mx-auto" /> - </button> - <div - class="{showMenu - ? 'block' - : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z" - > - <ul class="space-y-5 w-32"> - {#each menuButtons as button} - <li> - <button - class="flex justify-center items-center font-semibold text-sm" - on:click={() => handleMenuItemClick(button.goto)} - ><Icon icon={button.icon} style="mr-1" /> {button.title} - </button> - </li> - {/each} - </ul> - </div> + <OutClick on:outclick={() => (showMenu = false)}> + <button + class="bg-white p-2 rounded-full w-12 h-12" + on:click={() => (showMenu = !showMenu)} + ><Icon icon="menu" style="mx-auto" /> + </button> + + <div + class="{showMenu + ? 'block' + : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z" + > + <ul class="space-y-5 w-32"> + {#each menuButtons as button} + <li> + <button + class="flex justify-center items-center font-semibold text-sm" + on:click={() => handleMenuItemClick(button.goto)} + ><Icon icon={button.icon} style="mr-1" /> {button.title} + </button> + </li> + {/each} + </ul> + </div> + </OutClick> </div> {:else} <a href="/login"> @@ -75,7 +92,7 @@ >>>>>>> master </nav> <div - class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24" + class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24" > <Icon icon="logo-symbol-white" style="mx-auto" /> </div> diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index 0c682179..f1de0173 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -9,7 +9,6 @@ const companyLinks = [ { url: 'mailto:[email protected]', title: 'Support' }, - { url: '/community', title: 'Community' }, { url: '/jobs', title: 'Jobs' } ]; </script> diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index 352b200c..9c4d43a8 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -16,9 +16,7 @@ }; </script> -<header - class="w-full lg:w-5/6 py-5 xl:pb-0 xl:pt-10 mx-auto fixed md:sticky z-10 top-0 bg-white/90" -> +<header class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"> <nav class="block xl:flex flex-wrap justify-between items-center"> <a href="/" class="hidden md:block"> <Icon icon="logo" style="mx-auto mb-5 xl:mb-0" /> diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte index 93bea8c2..750f5626 100644 --- a/src/components/LandingHero.svelte +++ b/src/components/LandingHero.svelte @@ -12,12 +12,12 @@ The <span class="relative"> easiest <Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" /> - </span> way to accept Bitcoin in your store. + </span> way to accept bitcoin in your store. </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" > - Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed Point + Grow your customer base and revenue by accepting bitcoin with an easy-to-use and managed Point of Sale. No software or hardware required. </h2> {#if !$user} diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte index 157c2821..eade96d8 100644 --- a/src/components/RegisterOrLogin.svelte +++ b/src/components/RegisterOrLogin.svelte @@ -1,7 +1,6 @@ <script> - import { toast } from '@zerodevx/svelte-toast'; import { Icon } from '$comp'; - import { post } from '$lib/utils'; + import { post, failure } from '$lib/utils'; import { user, token } from '$lib/store'; import { auth } from '$lib/socket'; import { goto } from '$app/navigation'; @@ -26,7 +25,7 @@ auth(); } catch (e) { if (!e.message) e.message = 'Login failed'; - toast.push(e.message); + failure(e.message); } }; diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte new file mode 100644 index 00000000..85fd08d5 --- /dev/null +++ b/src/components/Toggle.svelte @@ -0,0 +1,12 @@ +<script> + export let id; + export let checked; + export let value; +</script> + +<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer"> + <input type="checkbox" {value} {checked} {id} class="sr-only peer" /> + <div + class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600" + /> +</label> diff --git a/src/components/index.js b/src/components/index.js index 1d5b369d..39a4e5e7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -12,3 +12,4 @@ export { default as LoadingSplash } from './LoadingSplash.svelte'; export { default as PageNotFound } from './404.svelte'; export { default as About } from './About.svelte'; export { default as Footer } from './Footer.svelte'; +export { default as Toggle } from './Toggle.svelte'; |