From e8ecec98f075f00d1b2b64acea91bddb421d6458 Mon Sep 17 00:00:00 2001
From: thomas <toma.laforge@gmail.com>
Date: Thu, 28 Mar 2024 11:00:35 +0100
Subject: [PATCH] feat: improve UX

---
 docs/src/components/GitHubStats.svelte         | 15 ++++++++++++---
 docs/src/components/github/AnswerNumber.svelte |  9 +++++++--
 docs/src/components/github/AnsweredUser.svelte |  2 +-
 docs/src/styles/custom-css.css                 |  4 ++++
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/GitHubStats.svelte b/docs/src/components/GitHubStats.svelte
index 95f454a..f834f71 100644
--- a/docs/src/components/GitHubStats.svelte
+++ b/docs/src/components/GitHubStats.svelte
@@ -31,12 +31,12 @@
 
 {#if !error && !loading}
   <div class="github">
-    <a class="category" href="https://github.com/tomalaforge/angular-challenges">
+    <a class="category star" href="https://github.com/tomalaforge/angular-challenges">
       <slot name="star"/>
       <div>{stargazersCount}</div>
     </a>
 
-    <div class="category fork">
+    <div class="category">
       <slot name="fork"/>
       <div>{forksCount}</div>
     </div>
@@ -48,7 +48,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin-left: var(--sl-nav-gap)
+    margin-left: var(--sl-nav-gap);
   }
 
   .category {
@@ -58,4 +58,13 @@
     gap: 0.25rem;
   }
 
+  .star {
+    color: var(--sl-color-text);
+    text-decoration: none;
+  }
+
+  .star:hover {
+    color: var(--sl-color-accent-high);
+  }
+
 </style>
diff --git a/docs/src/components/github/AnswerNumber.svelte b/docs/src/components/github/AnswerNumber.svelte
index bc798b7..a43e717 100644
--- a/docs/src/components/github/AnswerNumber.svelte
+++ b/docs/src/components/github/AnswerNumber.svelte
@@ -2,8 +2,8 @@
   import { isLoaded, totalCount } from './github-store';
 </script>
 
-{#if isLoaded}
-  <div class="answer-text">Answered by {$totalCount} people</div>
+{#if $isLoaded}
+  <a href="#answers" class="answer-text">Answered by {$totalCount} people</a>
 {/if}
 
 <style>
@@ -11,5 +11,10 @@
     font-size: var(--sl-text-xs);
     color: var(--sl-color-gray-3);
     width: max-content;
+    text-decoration: none;
+  }
+
+  .answer-text:hover {
+    color: var(--sl-color-accent-high);
   }
 </style>
diff --git a/docs/src/components/github/AnsweredUser.svelte b/docs/src/components/github/AnsweredUser.svelte
index 5b17567..11501c1 100644
--- a/docs/src/components/github/AnsweredUser.svelte
+++ b/docs/src/components/github/AnsweredUser.svelte
@@ -37,7 +37,7 @@
 </script>
 
 {#if $isLoaded}
-  <div class="solution-container">
+  <div class="solution-container" id="answers">
     <div>Answered by</div>
     {#each $data as { user }}
       <img
diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css
index 383c735..955bc71 100644
--- a/docs/src/styles/custom-css.css
+++ b/docs/src/styles/custom-css.css
@@ -32,6 +32,10 @@
   --color-chip-border: rgb(33, 38, 45);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 .github-success-btn {
   border: 2px solid rgba(240, 246, 252, 0.1);
   border-radius: 6px;