mirror of
https://github.com/acid-info/Kurate.git
synced 2025-01-12 08:54:08 +00:00
style: update styles on profile page (#310)
Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
This commit is contained in:
Barbara Gomes
GitHub
parent
fff6f1e7bb
commit
6226e7c81d
79
packages/ui/src/lib/components/border-box.svelte
Normal file
79
packages/ui/src/lib/components/border-box.svelte
Normal file
@ -0,0 +1,79 @@
|
||||
<script lang="ts">
|
||||
import LearnMore from '$lib/components/learn-more.svelte'
|
||||
|
||||
export let title: string | undefined = undefined
|
||||
export let amount: string | undefined = undefined
|
||||
export let tokenName: string | undefined = undefined
|
||||
export let explanation: string | undefined = undefined
|
||||
export let noGap: boolean | undefined = undefined
|
||||
export let link: string | undefined = undefined // FIXME: make this required when we have FAQ build
|
||||
export let error = false
|
||||
</script>
|
||||
|
||||
<div class={`box ${error ? 'error' : ''} ${noGap ? '' : 'gap'}`}>
|
||||
{#if title}
|
||||
<div class="h3">{title}</div>
|
||||
{/if}
|
||||
{#if amount}
|
||||
<div class="token-amt">{amount}</div>
|
||||
{/if}
|
||||
{#if tokenName}
|
||||
<div class="token">{tokenName}</div>
|
||||
{/if}
|
||||
{#if explanation}
|
||||
<p>{explanation}</p>
|
||||
{/if}
|
||||
<slot />
|
||||
{#if link !== undefined}
|
||||
<LearnMore href={link} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
border: 1px solid var(--grey-200);
|
||||
padding: var(--spacing-24);
|
||||
margin-top: var(--spacing-6);
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
|
||||
&.gap {
|
||||
margin-top: var(--spacing-48);
|
||||
}
|
||||
|
||||
&.first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&.last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.h3,
|
||||
:global(h3) {
|
||||
margin-bottom: var(--spacing-12);
|
||||
}
|
||||
|
||||
.token-amt {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
font-weight: var(--font-weight-sb);
|
||||
}
|
||||
|
||||
.token {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--font-weight-sb);
|
||||
margin-bottom: var(--spacing-12);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: 1px solid var(--color-red);
|
||||
background-color: rgba(var(--color-red-rgb), 0.05);
|
||||
|
||||
.token-amt,
|
||||
.token {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -6,12 +6,14 @@
|
||||
export let arrow: boolean | undefined = undefined
|
||||
</script>
|
||||
|
||||
<a class="root" {href} {target}>
|
||||
Learn more
|
||||
{#if arrow === true}
|
||||
<ArrowRight size={12} />
|
||||
{/if}
|
||||
</a>
|
||||
{#if href}
|
||||
<a class="root" {href} {target}>
|
||||
Learn more
|
||||
{#if arrow === true}
|
||||
<ArrowRight size={12} />
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
|
||||
@ -31,8 +31,6 @@
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let title: string
|
||||
import Divider from '$lib/components/divider.svelte'
|
||||
export let noDivider: boolean | undefined = undefined
|
||||
export let noPad: boolean | undefined = undefined
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Divider visible="desktop" />
|
||||
<div class="wrapper">
|
||||
{#if !noDivider}
|
||||
<Divider visible="desktop" />
|
||||
{/if}
|
||||
<div class={`wrapper ${noPad ? '' : 'pad'}`}>
|
||||
<div class="row">
|
||||
<div class="title">{title}</div>
|
||||
<div class="buttons">
|
||||
@ -20,15 +24,22 @@
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
padding: var(--spacing-24);
|
||||
padding-block: var(--spacing-24);
|
||||
transition: padding 0.2s;
|
||||
max-width: 498px;
|
||||
margin-inline: auto;
|
||||
|
||||
&.pad {
|
||||
padding-inline: var(--spacing-24);
|
||||
}
|
||||
|
||||
@media (min-width: 688px) {
|
||||
max-width: 996px;
|
||||
padding-inline: var(--spacing-48);
|
||||
padding-bottom: var(--spacing-12);
|
||||
|
||||
&.pad {
|
||||
padding-inline: var(--spacing-48);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1242px) {
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
<style lang="scss">
|
||||
.single-column {
|
||||
padding: 0 var(--spacing-24);
|
||||
width: 100%;
|
||||
max-width: 498px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
<script lang="ts">
|
||||
import LearnMore from '$lib/components/learn-more.svelte'
|
||||
|
||||
export let title: string
|
||||
export let amount: string
|
||||
export let tokenName: string
|
||||
export let explanation: string
|
||||
export let link = '' // FIXME: make this required when we have FAQ build
|
||||
export let error = false
|
||||
</script>
|
||||
|
||||
<div class={`token-info-box ${error ? 'error' : ''}`}>
|
||||
<div class="h3">{title}</div>
|
||||
<div class="token-amt">{amount}</div>
|
||||
<div class="token">{tokenName}</div>
|
||||
<p>{explanation}</p>
|
||||
<LearnMore href={link} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.token-info-box {
|
||||
border: 1px solid var(--grey-200);
|
||||
padding: var(--spacing-24);
|
||||
margin-top: var(--spacing-48);
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
|
||||
&.first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&.last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.token-amt {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
font-weight: var(--font-weight-sb);
|
||||
margin-top: var(--spacing-12);
|
||||
}
|
||||
|
||||
.token {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--font-weight-sb);
|
||||
margin-bottom: var(--spacing-12);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: 1px solid var(--color-red);
|
||||
background-color: rgba(var(--color-red-rgb), 0.05);
|
||||
|
||||
.token-amt,
|
||||
.token {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -37,7 +37,7 @@
|
||||
import { VOTE_GO_PRICE } from '$lib/constants'
|
||||
import InfoScreen from '$lib/components/info_screen.svelte'
|
||||
import LearnMore from '$lib/components/learn-more.svelte'
|
||||
import TokenInfo from '$lib/components/token-info.svelte'
|
||||
import BorderBox from '$lib/components/border-box.svelte'
|
||||
|
||||
const groupId = $page.params.id
|
||||
const persona = $personas.all.get(groupId)
|
||||
@ -90,7 +90,7 @@
|
||||
</p>
|
||||
<p><LearnMore href="/" /></p>
|
||||
</InfoBox>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
@ -124,7 +124,7 @@
|
||||
</p>
|
||||
<p><LearnMore href="/" /></p>
|
||||
</InfoBox>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
import LearnMore from '$lib/components/learn-more.svelte'
|
||||
import Button from '$lib/components/button.svelte'
|
||||
import { tokens } from '$lib/stores/tokens'
|
||||
import TokenInfo from '$lib/components/token-info.svelte'
|
||||
import BorderBox from '$lib/components/border-box.svelte'
|
||||
import Undo from '$lib/components/icons/undo.svelte'
|
||||
import adapter from '$lib/adapters'
|
||||
import { page } from '$app/stores'
|
||||
@ -69,7 +69,7 @@
|
||||
</p>
|
||||
<LearnMore href="/" />
|
||||
</div>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Available to stake"
|
||||
amount={$tokens.repTotal.toFixed()}
|
||||
tokenName="REP"
|
||||
@ -95,14 +95,14 @@
|
||||
<LearnMore href="/" />
|
||||
</div>
|
||||
<div class="side-by-side">
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Available to stake"
|
||||
amount={($tokens.repTotal - $tokens.repStaked).toFixed()}
|
||||
tokenName="REP"
|
||||
explanation={`${$tokens.repStaked} out of ${$tokens.repTotal} staked`}
|
||||
error={$tokens.repTotal - $tokens.repStaked < NEW_POST_REP_PRICE}
|
||||
/>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
@ -131,13 +131,13 @@
|
||||
<p><LearnMore href="/" /></p>
|
||||
</div>
|
||||
<div class="side-by-side">
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Available to stake"
|
||||
amount={($tokens.repTotal - $tokens.repStaked).toFixed()}
|
||||
tokenName="REP"
|
||||
explanation={`${$tokens.repStaked} out of ${$tokens.repTotal} staked`}
|
||||
/>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
import { tokens } from '$lib/stores/tokens'
|
||||
import type { Post as PostType } from '$lib/stores/post'
|
||||
import { page } from '$app/stores'
|
||||
import TokenInfo from '$lib/components/token-info.svelte'
|
||||
import BorderBox from '$lib/components/border-box.svelte'
|
||||
import adapter from '$lib/adapters'
|
||||
import { profile } from '$lib/stores/profile'
|
||||
import { goto } from '$app/navigation'
|
||||
@ -353,7 +353,7 @@
|
||||
<p>This Persona will be live, and everyone will be able to post with it.</p>
|
||||
<p><LearnMore href="/" /></p>
|
||||
</div>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
@ -370,7 +370,7 @@
|
||||
<p>You need {TOKEN_POST_COST} GO to publish a Persona.</p>
|
||||
<LearnMore href="/" />
|
||||
</div>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
import adapter from '$lib/adapters'
|
||||
import { tokens } from '$lib/stores/tokens'
|
||||
import LearnMore from '$lib/components/learn-more.svelte'
|
||||
import TokenInfo from '$lib/components/token-info.svelte'
|
||||
import BorderBox from '$lib/components/border-box.svelte'
|
||||
import SectionTitle from '$lib/components/section-title.svelte'
|
||||
import Search from '$lib/components/search.svelte'
|
||||
import { transaction } from '$lib/stores/transaction'
|
||||
@ -21,6 +21,8 @@
|
||||
import ProgressCircular from '$lib/components/progress-circular.svelte'
|
||||
import ProgressLinear from '$lib/components/progress-linear.svelte'
|
||||
import Graph from '$lib/components/graph.svelte'
|
||||
import SingleColumn from '$lib/components/single-column.svelte'
|
||||
import Spacer from '$lib/components/spacer.svelte'
|
||||
|
||||
let y: number
|
||||
|
||||
@ -47,88 +49,97 @@
|
||||
<Divider />
|
||||
<div class="content">
|
||||
{#if $profile.signer === undefined}
|
||||
<div class="wallet-icon-wrapper">
|
||||
<Wallet size={192} />
|
||||
</div>
|
||||
<div class="pad">
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Wallet}
|
||||
label="Connect wallet"
|
||||
on:click={adapter.signIn}
|
||||
disabled={!canConnectWallet()}
|
||||
/>
|
||||
<span class="connect-info">
|
||||
{#if canConnectWallet()}
|
||||
Connect a wallet to access or create your account.
|
||||
{:else}
|
||||
Please install a web3 wallet to access or create your account.
|
||||
{/if}
|
||||
</span>
|
||||
{#if error !== undefined}
|
||||
<span>Failed to connect {error.message}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<SingleColumn>
|
||||
<div class="wallet-info">
|
||||
<div class="wallet-icon-wrapper">
|
||||
<Wallet size={192} />
|
||||
</div>
|
||||
<div class="pad">
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Wallet}
|
||||
label="Connect wallet"
|
||||
on:click={adapter.signIn}
|
||||
disabled={!canConnectWallet()}
|
||||
/>
|
||||
<span class="connect-info">
|
||||
{#if canConnectWallet()}
|
||||
Connect a wallet to access or create your account.
|
||||
{:else}
|
||||
Please install a web3 wallet to access or create your account.
|
||||
{/if}
|
||||
</span>
|
||||
{#if error !== undefined}
|
||||
<span>Failed to connect {error.message}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</SingleColumn>
|
||||
{:else}
|
||||
<h2>Connected wallet</h2>
|
||||
<div class="wallet-info-wrapper">
|
||||
{#await $profile.signer.getAddress()}
|
||||
loading...
|
||||
{:then address}
|
||||
{formatAddress(address)}
|
||||
{:catch error}
|
||||
{error.message}
|
||||
{/await}
|
||||
</div>
|
||||
<SingleColumn>
|
||||
<div class="wallet-info">
|
||||
<h2>Wallet address</h2>
|
||||
<div class="wallet-info-wrapper">
|
||||
{#await $profile.signer.getAddress()}
|
||||
loading...
|
||||
{:then address}
|
||||
{formatAddress(address)}
|
||||
{:catch error}
|
||||
{error.message}
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
</SingleColumn>
|
||||
<Divider />
|
||||
<h2>Cycle data</h2>
|
||||
<div>
|
||||
<h3>Current cycle</h3>
|
||||
<ProgressCircular progress={$tokens.timeToEpoch / $tokens.epochDuration} />
|
||||
<div>{formatEpoch($tokens.timeToEpoch)} left in this cycle</div>
|
||||
<LearnMore />
|
||||
<SingleColumn>
|
||||
<h2 class="cycle-data">Cycle data</h2>
|
||||
<BorderBox noGap title="Current cycle">
|
||||
<ProgressCircular progress={$tokens.timeToEpoch / $tokens.epochDuration} />
|
||||
<div class="spacing-top">{formatEpoch($tokens.timeToEpoch)} left in this cycle</div>
|
||||
<LearnMore />
|
||||
</BorderBox>
|
||||
<div class="side-by-side">
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
noGap
|
||||
title="Total reputation"
|
||||
amount={$tokens.repTotal.toFixed()}
|
||||
tokenName="REP"
|
||||
explanation={`Including staked`}
|
||||
/>
|
||||
<TokenInfo
|
||||
<BorderBox
|
||||
noGap
|
||||
title="Currently available"
|
||||
amount={$tokens.go.toFixed()}
|
||||
tokenName="GO"
|
||||
explanation="Until new cycle begins"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Staked reputation</h2>
|
||||
<ProgressLinear progress={cycleProgress} />
|
||||
<p>
|
||||
{$tokens.repTotal - $tokens.repStaked} out of {$tokens.repTotal} REP staked until cycle ends
|
||||
</p>
|
||||
<LearnMore />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Reputation over time</h2>
|
||||
<Graph minX={0} maxX={100} minY={0} maxY={0} values={$tokens.repTotalHistoricalValues} />
|
||||
<LearnMore />
|
||||
</div>
|
||||
<BorderBox noGap title="Staked reputation">
|
||||
<ProgressLinear progress={cycleProgress} />
|
||||
<p class="spacing-top">
|
||||
{$tokens.repTotal - $tokens.repStaked} out of {$tokens.repTotal} REP staked until cycle ends
|
||||
</p>
|
||||
</BorderBox>
|
||||
</SingleColumn>
|
||||
<Spacer />
|
||||
<Divider />
|
||||
<SectionTitle title="Activity">
|
||||
<svelte:fragment slot="buttons">
|
||||
{#if $profile.signer !== undefined}
|
||||
<Button
|
||||
icon={sortAsc ? SortAscending : SortDescending}
|
||||
on:click={() => (sortAsc = !sortAsc)}
|
||||
/>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
{#if $profile.signer !== undefined}
|
||||
<Search bind:filterQuery />
|
||||
{/if}
|
||||
</SectionTitle>
|
||||
<SingleColumn>
|
||||
<div class="filter">
|
||||
<SectionTitle title="Activity" noDivider noPad>
|
||||
<svelte:fragment slot="buttons">
|
||||
{#if $profile.signer !== undefined}
|
||||
<Button
|
||||
icon={sortAsc ? SortAscending : SortDescending}
|
||||
on:click={() => (sortAsc = !sortAsc)}
|
||||
/>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
{#if $profile.signer !== undefined}
|
||||
<Search bind:filterQuery />
|
||||
{/if}
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</SingleColumn>
|
||||
{#each $transaction.transactions.sort( (a, b) => (sortAsc ? b.timestamp - a.timestamp : a.timestamp - b.timestamp), ) as t}
|
||||
<div>
|
||||
{#if t.goChange !== 0}
|
||||
@ -202,10 +213,18 @@
|
||||
margin-bottom: var(--spacing-24);
|
||||
}
|
||||
|
||||
.wallet-info {
|
||||
padding-block: var(--spacing-48);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-12);
|
||||
}
|
||||
|
||||
.wallet-info-wrapper {
|
||||
background-color: var(--grey-100);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background-color: var(--grey-150);
|
||||
display: block;
|
||||
padding: var(--spacing-12);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.connect-info {
|
||||
@ -213,4 +232,19 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-data {
|
||||
margin-top: var(--spacing-48);
|
||||
margin-bottom: var(--spacing-12);
|
||||
}
|
||||
|
||||
.filter {
|
||||
@media (min-width: 688px) {
|
||||
padding-top: var(--spacing-24);
|
||||
}
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
margin-top: var(--spacing-12);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user