diff options
| author | secondl1ght <[email protected]> | 2022-08-02 20:23:00 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-08-02 20:23:00 -0600 |
| commit | 1281f173cd5f109799ef5974ed6f57165c9d2791 (patch) | |
| tree | 7f6bb492bdfc8fd7b71fcd2d4f6e080222c23bbc /src/components | |
| parent | fe130806aea8ba9e0b16a9f8c2ec4adcfe12a821 (diff) | |
| download | coinos-ui-1281f173cd5f109799ef5974ed6f57165c9d2791.tar.gz coinos-ui-1281f173cd5f109799ef5974ed6f57165c9d2791.zip | |
add settings screen
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppHeader.svelte | 19 | ||||
| -rw-r--r-- | src/components/Toggle.svelte | 12 | ||||
| -rw-r--r-- | src/components/index.js | 1 |
3 files changed, 27 insertions, 5 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index cc147b0d..ff8ede70 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -2,7 +2,7 @@ // we will want to dynamically use the users avatar on this screen if they have uploaded one import OutClick from 'svelte-outclick'; - import { user } from '$lib/store'; + import { user, newPayment, colorTheme } from '$lib/store'; import { goto } from '$app/navigation'; import { Icon } from '$comp'; @@ -28,7 +28,7 @@ }; </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"> {#if $user} <a href={`/${$user.username}/receive`}> @@ -37,12 +37,21 @@ </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-[8px] right-[8px]"> + <span class="flex h-8 w-8"> + <span + class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75" + /> + </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> @@ -80,7 +89,7 @@ {/if} </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/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 dade4c2c..1003a1b0 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -11,3 +11,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'; |