From a07d5ffc4ca0b51c631d4a7408972d91ffd70284 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Sun, 17 Mar 2024 22:04:24 +0100
Subject: [PATCH] style

---
 src/lib/theme/global.scss                     | 23 +++-----
 .../wallet/settings/general/+page.svelte      | 59 +++++++++++++------
 2 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/lib/theme/global.scss b/src/lib/theme/global.scss
index 70d4bed..aa5010e 100644
--- a/src/lib/theme/global.scss
+++ b/src/lib/theme/global.scss
@@ -21,26 +21,17 @@ html {
 
 ::-webkit-scrollbar {
   width: 6px;
-  height: 6px;
+  height: 100%;
+  background-color: rgba(80, 80, 80, 0.11);
 }
 
-::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment  {
-  height: 30px;
-  display: block;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-track-piece  {
-  background-color: #eee;
-  -webkit-border-radius: 6px;
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 6px;
 }
 
-::-webkit-scrollbar-thumb:vertical {
-  height: 50px;
-  background-color: #999;
-  //border: 1px solid #eee;
-  -webkit-border-radius: 6px;
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
 }
 
 *,
diff --git a/src/routes/wallet/settings/general/+page.svelte b/src/routes/wallet/settings/general/+page.svelte
index 50c2de0..e078b94 100644
--- a/src/routes/wallet/settings/general/+page.svelte
+++ b/src/routes/wallet/settings/general/+page.svelte
@@ -1,46 +1,71 @@
 <script>
-  import { fiat, getCoinPriceFromAPI } from '$lib/stores/fiat.js';
+  import { fiat, getCoinPriceFromAPI } from "$lib/stores/fiat.js";
 
   const fiatList = $fiat.currencies;
 
-  //**TODO */ Style this component
-
   function pick(it) {
     $fiat.ticker = it;
-    localStorage.setItem('fiat', it);
+    localStorage.setItem("fiat", it);
     getCoinPriceFromAPI();
   }
 </script>
 
 <div class="wrapper">
-  <h2>Switch display currency</h2>
-  <br />
-  <div class="currencylist">
-    {#each fiatList.reverse() as currency}
-      <p on:click={() => pick(currency.ticker)}>{currency.coinName}</p>
-    {/each}
+  <div class="card">
+    <div class="header">
+      <h5>Select currency</h5>
+    </div>
+    <div class="body">
+      <div class="list">
+        {#each fiatList.reverse() as currency}
+          <p class:selected={$fiat.ticker === currency.ticker} on:click={() => pick(currency.ticker)}>{currency.coinName}</p>
+        {/each}
+      </div>
+    </div>
   </div>
 </div>
 
 <style lang="scss">
   .wrapper {
     width: 100%;
-    height: 100%;
-    padding: 30px;
+    height: calc(100% - 10px);
+    padding: 15px;
   }
 
   p {
     opacity: 0.8;
     cursor: pointer;
+    padding: 5px 15px;
+    margin: 0;
+    border-bottom: 1px solid var(--border-color);
+
     &:hover {
       opacity: 1;
     }
   }
 
-  .currencylist {
-    overflow: scroll;
-    height: 60%;
-    width: 100%;
-    overflow-x: hidden;
+  .card {
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    height: 200px;
+
+    .header {
+      padding: 15px;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .body {
+      overflow: hidden;
+      height: 100%;
+
+      .list {
+        overflow: scroll;
+        height: calc(100% - 45.5px);
+      }
+
+      .selected {
+        color: var(--primary-color)
+      }
+    }
   }
 </style>