From e65533167c0ddf6214af6c4ef241a8989392060c Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 18 Aug 2024 17:36:50 +0200
Subject: [PATCH] style: design

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>
---
 .../AnalyticsPerformanceMetrics.svelte        | 158 ++++++++++--------
 1 file changed, 85 insertions(+), 73 deletions(-)

diff --git a/src/frontend/src/lib/components/analytics/AnalyticsPerformanceMetrics.svelte b/src/frontend/src/lib/components/analytics/AnalyticsPerformanceMetrics.svelte
index 3b603d1b2..8bd8ef774 100644
--- a/src/frontend/src/lib/components/analytics/AnalyticsPerformanceMetrics.svelte
+++ b/src/frontend/src/lib/components/analytics/AnalyticsPerformanceMetrics.svelte
@@ -1,62 +1,68 @@
 <script lang="ts">
 	import { i18n } from '$lib/stores/i18n.store';
 	import type { AnalyticsWebVitalsPerformanceMetrics } from '$declarations/orbiter/orbiter.did';
-    import {formatNumber} from "$lib/utils/number.utils";
+	import { formatNumber } from '$lib/utils/number.utils';
 
 	export let performanceMetrics: AnalyticsWebVitalsPerformanceMetrics;
 
-    let cls: number;
-    let fcp: number;
-    let inp: number;
-    let lcp: number;
-    let ttfb: number;
-
-    $: ({cls, fcp, inp, lcp, ttfb} = performanceMetrics);
-
-    type Rating = 'good' | 'needs_improvement' | 'poor';
-
-    // https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/lib/bindReporter.ts#L19
-    const getRating = ({value, thresholds: [improve, poor]}: {value: number, thresholds: [number, number]}): Rating => {
-        if (value > poor) {
-            return 'poor';
-        }
-        if (value > improve) {
-            return 'needs_improvement';
-        }
-        return 'good';
-    }
-
-    // https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onCLS.ts#L28
-    // https://web.dev/articles/cls#what_is_a_good_cls_score
-    let clsRating: Rating;
-    $: clsRating = getRating({value: cls, thresholds: [0.1, 0.25]});
-
-    // https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onFCP.ts#L28
-    // https://web.dev/articles/fcp#what_is_a_good_fcp_score
-    let fcpRating: Rating;
-    $: fcpRating = getRating({value: fcp, thresholds: [1800, 3000]});
-
-    // https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onINP.ts#L35C55-L35C63
-    // https://web.dev/articles/inp#what_is_a_good_inp_score
-    let inpRating: Rating;
-    $: inpRating = getRating({value: inp, thresholds: [200, 500]});
-
-    // https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onLCP.ts#L31
-    // https://web.dev/articles/lcp#what_is_a_good_lcp_score
-    let lcpRating: Rating;
-    $: lcpRating = getRating({value: lcp, thresholds: [2500, 4000]});
-
-    // https://web.dev/articles/ttfb#what_is_a_good_ttfb_score
-    // https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onTTFB.ts#L26C56-L26C65
-    let ttfbRating: Rating;
-    $: ttfbRating = getRating({value: ttfb, thresholds: [800, 1800]});
+	let cls: number;
+	let fcp: number;
+	let inp: number;
+	let lcp: number;
+	let ttfb: number;
+
+	$: ({ cls, fcp, inp, lcp, ttfb } = performanceMetrics);
+
+	type Rating = 'good' | 'needs_improvement' | 'poor';
+
+	// https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/lib/bindReporter.ts#L19
+	const getRating = ({
+		value,
+		thresholds: [improve, poor]
+	}: {
+		value: number;
+		thresholds: [number, number];
+	}): Rating => {
+		if (value > poor) {
+			return 'poor';
+		}
+		if (value > improve) {
+			return 'needs_improvement';
+		}
+		return 'good';
+	};
+
+	// https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onCLS.ts#L28
+	// https://web.dev/articles/cls#what_is_a_good_cls_score
+	let clsRating: Rating;
+	$: clsRating = getRating({ value: cls, thresholds: [0.1, 0.25] });
+
+	// https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onFCP.ts#L28
+	// https://web.dev/articles/fcp#what_is_a_good_fcp_score
+	let fcpRating: Rating;
+	$: fcpRating = getRating({ value: fcp, thresholds: [1800, 3000] });
+
+	// https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onINP.ts#L35C55-L35C63
+	// https://web.dev/articles/inp#what_is_a_good_inp_score
+	let inpRating: Rating;
+	$: inpRating = getRating({ value: inp, thresholds: [200, 500] });
+
+	// https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onLCP.ts#L31
+	// https://web.dev/articles/lcp#what_is_a_good_lcp_score
+	let lcpRating: Rating;
+	$: lcpRating = getRating({ value: lcp, thresholds: [2500, 4000] });
+
+	// https://web.dev/articles/ttfb#what_is_a_good_ttfb_score
+	// https://github.com/GoogleChrome/web-vitals/blob/9b932519b16f72328c6d8e9814b811f1bc1a0bb5/src/onTTFB.ts#L26C56-L26C65
+	let ttfbRating: Rating;
+	$: ttfbRating = getRating({ value: ttfb, thresholds: [800, 1800] });
 </script>
 
 <div class="table-container">
 	<table>
 		<thead>
 			<tr>
-				<th> {$i18n.analytics.web_vitals} </th>
+				<th class="description"> {$i18n.analytics.web_vitals} </th>
 				<th class="score"> {$i18n.analytics.score} </th>
 				<th> {$i18n.analytics.rating} </th>
 			</tr>
@@ -65,33 +71,33 @@
 		<tbody>
 			<tr>
 				<td>{@html $i18n.analytics.ttfb}</td>
-				<td>{formatNumber(ttfb)}</td>
-                <td>{$i18n.analytics[ttfbRating]}</td>
+				<td class="score">{formatNumber(ttfb)}</td>
+				<td>{$i18n.analytics[ttfbRating]}</td>
+			</tr>
+
+			<tr>
+				<td>{@html $i18n.analytics.fcp}</td>
+				<td class="score">{formatNumber(fcp)}</td>
+				<td>{$i18n.analytics[fcpRating]}</td>
+			</tr>
+
+			<tr>
+				<td>{@html $i18n.analytics.lcp}</td>
+				<td class="score">{formatNumber(lcp)}</td>
+				<td>{$i18n.analytics[lcpRating]}</td>
 			</tr>
 
-            <tr>
-                <td>{@html $i18n.analytics.fcp}</td>
-                <td>{formatNumber(fcp)}</td>
-                <td>{$i18n.analytics[fcpRating]}</td>
-            </tr>
-
-            <tr>
-                <td>{@html $i18n.analytics.lcp}</td>
-                <td>{formatNumber(lcp)}</td>
-                <td>{$i18n.analytics[lcpRating]}</td>
-            </tr>
-
-            <tr>
-                <td>{@html $i18n.analytics.cls}</td>
-                <td>{formatNumber(cls)}</td>
-                <td>{$i18n.analytics[clsRating]}</td>
-            </tr>
-
-            <tr>
-                <td>{@html $i18n.analytics.inp}</td>
-                <td>{formatNumber(inp)}</td>
-                <td>{$i18n.analytics[inpRating]}</td>
-            </tr>
+			<tr>
+				<td>{@html $i18n.analytics.cls}</td>
+				<td class="score">{formatNumber(cls)}</td>
+				<td>{$i18n.analytics[clsRating]}</td>
+			</tr>
+
+			<tr>
+				<td>{@html $i18n.analytics.inp}</td>
+				<td class="score">{formatNumber(inp)}</td>
+				<td>{$i18n.analytics[inpRating]}</td>
+			</tr>
 		</tbody>
 	</table>
 </div>
@@ -99,9 +105,15 @@
 <style lang="scss">
 	@use '../../styles/mixins/media';
 
-	.status {
+	.description {
+		width: 50%;
+	}
+
+	.score {
 		display: none;
 
+		width: 20%;
+
 		@include media.min-width(medium) {
 			display: table-cell;
 			vertical-align: middle;