Add FamDone Brand component
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
<script lang="ts">
|
||||
let { title, subtitle, children }: {
|
||||
import FamDone from './FamDone.svelte';
|
||||
|
||||
let {
|
||||
title,
|
||||
subtitle,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children?: any;
|
||||
@@ -7,7 +13,7 @@
|
||||
</script>
|
||||
|
||||
<main class="auth">
|
||||
<a class="brand" href="/">FamChore</a>
|
||||
<a class="brand" href="/"><FamDone /></a>
|
||||
<div class="card">
|
||||
<h1>{title}</h1>
|
||||
{#if subtitle}
|
||||
@@ -26,7 +32,10 @@
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: #1f2937;
|
||||
}
|
||||
.brand {
|
||||
@@ -56,6 +65,8 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.card { padding: 1.5rem; }
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
let { tag = 'span' }: { tag?: 'span' | 'h1' | 'h2' | 'h3' | 'a' | 'strong' | 'p' } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:element this={tag} class="fam-done">
|
||||
FamDone<svg
|
||||
class="fam-done-check"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#10b981"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg
|
||||
></svelte:element
|
||||
>
|
||||
|
||||
<style>
|
||||
.fam-done {
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.fam-done-check {
|
||||
vertical-align: super;
|
||||
position: relative;
|
||||
top: -0.3em;
|
||||
margin-left: 1px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,9 @@
|
||||
<script lang="ts">
|
||||
import FamDone from './FamDone.svelte';
|
||||
</script>
|
||||
|
||||
<footer class="app-footer">
|
||||
<span class="footer-text">FamChore</span>
|
||||
<span class="footer-text"><FamDone /></span>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
logoutIcon,
|
||||
prefsIcon
|
||||
} from './icons';
|
||||
import FamDone from './FamDone.svelte';
|
||||
|
||||
let { famName = '', session = null, isParent = false, role = 'child' } = $props();
|
||||
|
||||
@@ -53,7 +54,7 @@
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<span class="app-icon">✦</span>
|
||||
<span class="app-name">FamChore</span>
|
||||
<span class="app-name"><FamDone /></span>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export { default as Sidebar } from './Sidebar.svelte';
|
||||
export { default as FamDone } from './FamDone.svelte';
|
||||
export { default as TopNav } from './TopNav.svelte';
|
||||
export { default as Footer } from './Footer.svelte';
|
||||
export { default as ViewHeader } from './ViewHeader.svelte';
|
||||
|
||||
Reference in New Issue
Block a user