From 82780ba589a70e51d71ae62f08a9ffe4e6c08f6b Mon Sep 17 00:00:00 2001
From: SuperChamp234 <leonardh@tuta.io>
Date: Sat, 15 Jan 2022 09:23:35 +0530
Subject: [PATCH] CSS changes for buttons, fixed numbers in stats

---
 src/view/App.tsx                        |  1 +
 src/view/Components/Statsview/index.tsx |  7 +++++--
 styles.css                              | 10 ++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/view/App.tsx b/src/view/App.tsx
index fdb748d..ed3e62c 100644
--- a/src/view/App.tsx
+++ b/src/view/App.tsx
@@ -34,6 +34,7 @@ class App extends React.Component<any, any> {
                 stats: {
                     hp: 0,
                     lvl: 0,
+                    gold: 0,
                 },
                 lastCron: "",
             },
diff --git a/src/view/Components/Statsview/index.tsx b/src/view/Components/Statsview/index.tsx
index 6f5fc9e..506cae4 100644
--- a/src/view/Components/Statsview/index.tsx
+++ b/src/view/Components/Statsview/index.tsx
@@ -4,9 +4,12 @@ export default function Index(props: any) {
     return(
         <div className="stats">
             {/* <div id="profile-name">{props.user_data.profile.name}</div> */}
-            <div className = "substats" id="hp">HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
+            <div className = "substats" id="hp">HP: {numberWithCommas((props.user_data.stats.hp).toFixed(0))}</div>
             <div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
-            <div className = "substats" id="gold">GOLD: {(props.user_data.stats.gp).toPrecision(3)}</div>
+            <div className = "substats" id="gold">GOLD: {numberWithCommas(props.user_data.stats.gp.toFixed(2))}</div>
         </div>
     );
+}
+function numberWithCommas(x: any) {
+    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 8bf78e5..64be137 100644
--- a/styles.css
+++ b/styles.css
@@ -67,7 +67,7 @@ p {
 }
 
 .habit-button {
-  /* background-color: #fff; */
+  background-color: var(--interactive-accent);
   border: none;
   /* color: black; */
   text-align: center;
@@ -75,6 +75,12 @@ p {
   font-size: 16px;
   display: block;
   width: 100%;
+  color: var(--text-on-accent);
+}
+/* habit-button on hover css selector */
+.habit-button:hover {
+  color: var(--text-on-accent);
+  background-color: var(--interactive-accent-hover);
 }
 
 .habit-item {
@@ -300,7 +306,7 @@ button {
   margin-bottom: 5px;
   white-space: nowrap;
   padding: 5px 5px;
-  color: var(--interactive-accent);
+  background-color: var(--interactive-accent);
   margin-right: auto;
 }