style: update styles on profile page (#310)

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

packages/ui/src/lib/components/border-box.svelte

@@ -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>

packages/ui/src/lib/components/learn-more.svelte

@@ -6,12 +6,14 @@
 	export let arrow: boolean | undefined = undefined
 </script>
 
-<a class="root" {href} {target}>
+{#if href}
-	Learn more
+	<a class="root" {href} {target}>
-	{#if arrow === true}
+		Learn more
-		<ArrowRight size={12} />
+		{#if arrow === true}
-	{/if}
+			<ArrowRight size={12} />
-</a>
+		{/if}
+	</a>
+{/if}
 
 <style lang="scss">
 	.root {

packages/ui/src/lib/components/progress-circular.svelte

@@ -31,8 +31,6 @@
 
 <style>
 	.container {
-		width: 220px;
-		height: 220px;
 		display: flex;
 		justify-content: center;
 		align-items: center;

packages/ui/src/lib/components/section-title.svelte

@@ -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" />
+	{#if !noDivider}
-	<div class="wrapper">
+		<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) {

packages/ui/src/lib/components/single-column.svelte

@@ -10,6 +10,7 @@
 <style lang="scss">
 	.single-column {
 		padding: 0 var(--spacing-24);
+		width: 100%;
 		max-width: 498px;
 		margin-inline: auto;
 	}

packages/ui/src/lib/components/token-info.svelte

@@ -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>

packages/ui/src/routes/persona/[id]/pending/+page.svelte

@@ -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"

packages/ui/src/routes/persona/[id]/post/new/+page.svelte

@@ -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"

packages/ui/src/routes/persona/draft/[id]/+page.svelte

@@ -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"

packages/ui/src/routes/profile/+page.svelte

@@ -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">
+		<SingleColumn>
-			<Wallet size={192} />
+			<div class="wallet-info">
-		</div>
+				<div class="wallet-icon-wrapper">
-		<div class="pad">
+					<Wallet size={192} />
-			<Button
+				</div>
-				variant="primary"
+				<div class="pad">
-				icon={Wallet}
+					<Button
-				label="Connect wallet"
+						variant="primary"
-				on:click={adapter.signIn}
+						icon={Wallet}
-				disabled={!canConnectWallet()}
+						label="Connect wallet"
-			/>
+						on:click={adapter.signIn}
-			<span class="connect-info">
+						disabled={!canConnectWallet()}
-				{#if canConnectWallet()}
+					/>
-					Connect a wallet to access or create your account.
+					<span class="connect-info">
-				{:else}
+						{#if canConnectWallet()}
-					Please install a web3 wallet to access or create your account.
+							Connect a wallet to access or create your account.
-				{/if}
+						{:else}
-			</span>
+							Please install a web3 wallet to access or create your account.
-			{#if error !== undefined}
+						{/if}
-				<span>Failed to connect {error.message}</span>
+					</span>
-			{/if}
+					{#if error !== undefined}
-		</div>
+						<span>Failed to connect {error.message}</span>
+					{/if}
+				</div>
+			</div>
+		</SingleColumn>
 	{:else}
-		<h2>Connected wallet</h2>
+		<SingleColumn>
-		<div class="wallet-info-wrapper">
+			<div class="wallet-info">
-			{#await $profile.signer.getAddress()}
+				<h2>Wallet address</h2>
-				loading...
+				<div class="wallet-info-wrapper">
-			{:then address}
+					{#await $profile.signer.getAddress()}
-				{formatAddress(address)}
+						loading...
-			{:catch error}
+					{:then address}
-				{error.message}
+						{formatAddress(address)}
-			{/await}
+					{:catch error}
-		</div>
+						{error.message}
+					{/await}
+				</div>
+			</div>
+		</SingleColumn>
 		<Divider />
-		<h2>Cycle data</h2>
+		<SingleColumn>
-		<div>
+			<h2 class="cycle-data">Cycle data</h2>
-			<h3>Current cycle</h3>
+			<BorderBox noGap title="Current cycle">
-			<ProgressCircular progress={$tokens.timeToEpoch / $tokens.epochDuration} />
+				<ProgressCircular progress={$tokens.timeToEpoch / $tokens.epochDuration} />
-			<div>{formatEpoch($tokens.timeToEpoch)} left in this cycle</div>
+				<div class="spacing-top">{formatEpoch($tokens.timeToEpoch)} left in this cycle</div>
-			<LearnMore />
+				<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>
+			<BorderBox noGap title="Staked reputation">
-		<div>
+				<ProgressLinear progress={cycleProgress} />
-			<h2>Staked reputation</h2>
+				<p class="spacing-top">
-			<ProgressLinear progress={cycleProgress} />
+					{$tokens.repTotal - $tokens.repStaked} out of {$tokens.repTotal} REP staked until cycle ends
-			<p>
+				</p>
-				{$tokens.repTotal - $tokens.repStaked} out of {$tokens.repTotal} REP staked until cycle ends
+			</BorderBox>
-			</p>
+		</SingleColumn>
-			<LearnMore />
+		<Spacer />
-		</div>
-		<div>
-			<h2>Reputation over time</h2>
-			<Graph minX={0} maxX={100} minY={0} maxY={0} values={$tokens.repTotalHistoricalValues} />
-			<LearnMore />
-		</div>
 		<Divider />
-		<SectionTitle title="Activity">
+		<SingleColumn>
-			<svelte:fragment slot="buttons">
+			<div class="filter">
-				{#if $profile.signer !== undefined}
+				<SectionTitle title="Activity" noDivider noPad>
-					<Button
+					<svelte:fragment slot="buttons">
-						icon={sortAsc ? SortAscending : SortDescending}
+						{#if $profile.signer !== undefined}
-						on:click={() => (sortAsc = !sortAsc)}
+							<Button
-					/>
+								icon={sortAsc ? SortAscending : SortDescending}
-				{/if}
+								on:click={() => (sortAsc = !sortAsc)}
-			</svelte:fragment>
+							/>
-			{#if $profile.signer !== undefined}
+						{/if}
-				<Search bind:filterQuery />
+					</svelte:fragment>
-			{/if}
+					{#if $profile.signer !== undefined}
-		</SectionTitle>
+						<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);
+			background-color: var(--grey-150);
-			width: 100%;
+			display: block;
-			max-width: 480px;
+			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>