feat: warning

dfinity · Sep 25, 2024 · 7d71f04 · 7d71f04
1 parent c9b1d76
commit 7d71f04
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/frontend/src/lib/components/core/Alpha.svelte b/src/frontend/src/lib/components/core/Alpha.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import IconWarning from '$lib/components/icons/IconWarning.svelte';
+	import WarningBanner from '$lib/components/ui/WarningBanner.svelte';
 	import { OISY_ALPHA_WARNING_URL } from '$lib/constants/oisy.constants';
 	import { i18n } from '$lib/stores/i18n.store';
 </script>
@@ -8,17 +8,9 @@
 	href={OISY_ALPHA_WARNING_URL}
 	rel="external noopener noreferrer"
 	target="_blank"
-	class="mx-auto inline-flex w-full items-center justify-center gap-2 px-6 py-2 text-xs font-bold no-underline sm:w-fit md:text-base"
+	class="no-underline"
 >
-	<IconWarning inline />
-	<span>{$i18n.hero.text.use_with_caution}</span>
+	<WarningBanner>
+		{$i18n.hero.text.use_with_caution}
+	</WarningBanner>
 </a>
-
-<style lang="scss">
-	a {
-		color: var(--alpha-color, var(--color-american-orange));
-		background-color: var(--alpha-bg-color, var(--color-cornsilk));
-		border: 1px solid var(--alpha-border-color, var(--color-crayola-yellow));
-		border-radius: 8px;
-	}
-</style>
diff --git a/src/frontend/src/lib/components/ui/WarningBanner.svelte b/src/frontend/src/lib/components/ui/WarningBanner.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import IconWarning from '$lib/components/icons/IconWarning.svelte';
+</script>
+
+<div
+	class="mx-auto inline-flex w-full items-center justify-center gap-2 px-6 py-2 text-xs font-bold sm:w-fit md:text-base text-american-orange bg-cornsilk border border-crayola-yellow rounded-lg"
+>
+	<IconWarning inline />
+	<span><slot /></span>
+</div>
diff --git a/src/frontend/src/routes/(sign)/sign/+layout.svelte b/src/frontend/src/routes/(sign)/sign/+layout.svelte
@@ -3,13 +3,19 @@
 	import LoadersGuard from '$lib/components/core/LoadersGuard.svelte';
 	import Modals from '$lib/components/core/Modals.svelte';
 	import OisyWalletLogoLink from '$lib/components/core/OisyWalletLogoLink.svelte';
+	import WarningBanner from '$lib/components/ui/WarningBanner.svelte';
 </script>
 
 <Background />
 
 <main class="pt-10 flex flex-col gap-y-8">
 	<div class="flex justify-center"><OisyWalletLogoLink /></div>
 
+	<WarningBanner>
+		This feature is unreviewed. DO NOT USE until it has undergone proper code and security
+		assessment!
+	</WarningBanner>
+
 	<LoadersGuard>
 		<slot />
 	</LoadersGuard>