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>
 
+{#if href}
 	<a class="root" {href} {target}>
 		Learn more
 		{#if arrow === true}
 			<ArrowRight size={12} />
 		{/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">
+	{#if !noDivider}
 		<Divider visible="desktop" />
-	<div class="wrapper">
+	{/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,6 +49,8 @@
 <Divider />
 <div class="content">
 	{#if $profile.signer === undefined}
+		<SingleColumn>
+			<div class="wallet-info">
 				<div class="wallet-icon-wrapper">
 					<Wallet size={192} />
 				</div>
@@ -69,8 +73,12 @@
 						<span>Failed to connect {error.message}</span>
 					{/if}
 				</div>
+			</div>
+		</SingleColumn>
 	{:else}
-		<h2>Connected wallet</h2>
+		<SingleColumn>
+			<div class="wallet-info">
+				<h2>Wallet address</h2>
 				<div class="wallet-info-wrapper">
 					{#await $profile.signer.getAddress()}
 						loading...
@@ -80,43 +88,44 @@
 						{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} />
-			<div>{formatEpoch($tokens.timeToEpoch)} left in this cycle</div>
+				<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>
+			<BorderBox noGap title="Staked reputation">
-		<div>
-			<h2>Staked reputation</h2>
 				<ProgressLinear progress={cycleProgress} />
-			<p>
+				<p class="spacing-top">
 					{$tokens.repTotal - $tokens.repStaked} out of {$tokens.repTotal} REP staked until cycle ends
 				</p>
-			<LearnMore />
+			</BorderBox>
-		</div>
+		</SingleColumn>
-		<div>
+		<Spacer />
-			<h2>Reputation over time</h2>
-			<Graph minX={0} maxX={100} minY={0} maxY={0} values={$tokens.repTotalHistoricalValues} />
-			<LearnMore />
-		</div>
 		<Divider />
-		<SectionTitle title="Activity">
+		<SingleColumn>
+			<div class="filter">
+				<SectionTitle title="Activity" noDivider noPad>
 					<svelte:fragment slot="buttons">
 						{#if $profile.signer !== undefined}
 							<Button
@@ -129,6 +138,8 @@
 						<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>