From 4fa2576dd389f936e47268f8451eeb116e45fbe9 Mon Sep 17 00:00:00 2001
From: MigBash <20924663+migbash@users.noreply.github.com>
Date: Fri, 15 Dec 2023 18:37:08 +0100
Subject: [PATCH] fix(invest-box): checkbox; units;

Corrections regarding terms and conditions. Update value units.

fix #1864
---
 .../page/profile/assets/checkbox.svg          |  3 +
 .../profile/investor/Main-InvestBox.svelte    | 56 +++++++++++++-----
 static/app.css                                | 58 +++++++++++++++++++
 3 files changed, 102 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/page/profile/assets/checkbox.svg

diff --git a/src/lib/components/page/profile/assets/checkbox.svg b/src/lib/components/page/profile/assets/checkbox.svg
new file mode 100644
index 000000000..e4a69c623
--- /dev/null
+++ b/src/lib/components/page/profile/assets/checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.5L4.68421 7L11 1" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/src/lib/components/page/profile/investor/Main-InvestBox.svelte b/src/lib/components/page/profile/investor/Main-InvestBox.svelte
index 4c9b4b67c..b7a2dd66f 100644
--- a/src/lib/components/page/profile/investor/Main-InvestBox.svelte
+++ b/src/lib/components/page/profile/investor/Main-InvestBox.svelte
@@ -40,6 +40,7 @@
   import { passByValue } from '@betarena/scores-lib/dist/functions/func.common.js';
   import { tryCatchAsync } from '@betarena/scores-lib/dist/util/util.common.js';
 
+  import icon_checkbox from '../assets/checkbox.svg';
   import icon_arrow_down_dark from '../assets/common/arrow-down-dark.svg';
   import icon_arrow_down from '../assets/common/arrow-down.svg';
   import icon_arrow_right_dark from '../assets/common/arrow-right-dark.svg';
@@ -1153,23 +1154,48 @@
       "
     >
 
+      <!-- [🐞] -->
+      <!-- {agreeTermsAndConditions} -->
+
       <!--
       ▓ NOTE:
       ▓ > Terms & Conditions INPUT.
       -->
-      <input
-        id=""
-        name=""
-        type="checkbox"
-        class=
-        "
-        v-1
-        m-r-12
-        cursor-pointer
-        "
-        required
-        bind:value={agreeTermsAndConditions}
-      />
+      <label
+        class="container"
+      >
+        <input
+          id=""
+          name=""
+          type="checkbox"
+          class=
+          "
+          v-1
+          m-r-12
+          cursor-pointer
+          "
+          required
+          bind:checked={agreeTermsAndConditions}
+        />
+
+        <span
+          class="checkmark"
+        >
+          {#if agreeTermsAndConditions}
+            <img
+              id=''
+              class=
+              "
+              box-center
+              "
+              src={icon_checkbox}
+              alt=''
+              title=''
+              loading='lazy'
+            />
+          {/if}
+        </span>
+      </label>
 
       <!--
       ▓ NOTE:
@@ -1344,7 +1370,7 @@
           >
             <!-- ▓ [🐞] -->
             <!-- {console.log(cryptoPrices?.data?.['USDC']?.quote?.USD?.price)} -->
-            {depositAmount ?? 0} {cryptoDepositOptionSelect?.name} ≈ {cryptoPrice} $
+            {depositAmount ?? 0} {cryptoDepositOptionSelect?.name} ≈ {cryptoPrice} USD
           </p>
 
         </div>
@@ -1512,7 +1538,7 @@
             m-t-5
             "
           >
-            {1 - (tierDiscountObject.discount / 100)} {cryptoDepositOptionSelect?.name} ≈ 1.00 BTA
+            {toDecimalFix(1 - (tierDiscountObject.discount / 100))} {cryptoDepositOptionSelect?.name} ≈ 1.00 BTA
           </p>
 
         </div>
diff --git a/static/app.css b/static/app.css
index 23c492b31..e3833e9b3 100644
--- a/static/app.css
+++ b/static/app.css
@@ -1304,6 +1304,64 @@ img.google-aspect-ratio
   transition: all 0.15s ease;
 }
 
+/* The container */
+.container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 1px;
+  width: 1px;
+}
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: transparent;
+  border: 1.5px solid #A9B8AE;
+  border-radius: 3.25px;
+}
+/* On mouse-over */
+/* .container:hover input ~ .checkmark {
+  background-color: #ccc;
+} */
+/* When the checkbox is checked */
+.container input:checked ~ .checkmark {
+  background-color: var(--primary);
+}
+
+/*
+╭──────────────────────────────────────────────────────────────────╮
+│ 📌 POSITIONS                                                     │
+╰──────────────────────────────────────────────────────────────────╯
+*/
+
+.box-center
+{
+  /* 📌 position */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin: auto;
+}
+
 /* #endregion ➤ [MAIN] [OTHER STYLES] Website Layout */
 
 /* #region ➤ [MAIN] [DARK MODE (OVERRIDES) STYLES] Website Layout */