gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-02 07:53:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Create account link component and style it according to design

Browse Source
This commit is contained in:
Mattias Granlund 2023-11-26 12:52:43 +01:00
parent 032386e3cb
commit 69a69788fb
2 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/ui/src/routes/[projectId]/navigation/AccountLink.svelte Normal file
View File

@ -0,0 +1,50 @@
<script lang="ts">
import { goto } from '$app/navigation';
import type { User } from '$lib/backend/cloud';
import Icon from '$lib/icons/Icon.svelte';
export let user: User | undefined;
</script>
<button class="btn" on:click={() => goto('/user/')}>
<span class="name text-base-13 text-semibold">
{#if user}
{user.name}
{:else}
Account
{/if}
</span>
{#if user?.picture}
<img class="profile-picture" src={user.picture} alt="Avatar" />
{:else}
<div class="anon-icon">
<Icon name="profile" />
</div>
{/if}
</button>
<style lang="postcss">
.btn {
display: flex;
color: var(--clr-theme-scale-ntrl-50);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-m);
align-items: center;
gap: var(--space-8);
&:hover {
background-color: var(--clr-theme-container-pale);
color: var(--clr-theme-scale-ntrl-40);
}
}
.anon-icon,
.profile-picture {
border-radius: var(--radius-m);
width: var(--space-20);
height: var(--space-20);
}
.anon-icon {
padding: var(--space-2);
background: var(--clr-theme-pop-element);
color: var(--clr-theme-pop-on-element);
}
</style>

9
packages/ui/src/routes/[projectId]/navigation/Footer.svelte
View File

@ -5,9 +5,9 @@
import Link from '$lib/components/Link.svelte'; import Link from '$lib/components/Link.svelte';
import TimeAgo from '$lib/components/TimeAgo.svelte'; import TimeAgo from '$lib/components/TimeAgo.svelte';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import Icon from '$lib/icons/Icon.svelte';
import IconSpinner from '$lib/icons/IconSpinner.svelte'; import IconSpinner from '$lib/icons/IconSpinner.svelte';
import * as events from '$lib/utils/events'; import * as events from '$lib/utils/events';
import AccountLink from './AccountLink.svelte';
export let user: User | undefined; export let user: User | undefined;
export let projectId: string | undefined; export let projectId: string | undefined;
@ -39,10 +39,5 @@
</Tooltip> </Tooltip>
{/if} {/if}
</div> </div>
<Link href="/user/"> <AccountLink {user} />
{#if user?.picture}
<img class="mr-1 inline-block h-5 w-5 rounded-full" src={user.picture} alt="Avatar" />
{/if}
{user?.name ?? 'Account'}
</Link>
</div> </div>