PolyPaw/habitica-sync
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS changes for buttons, fixed numbers in stats

Browse source
This commit is contained in:
SuperChamp234 2022-01-15 09:23:35 +05:30
parent e4d3c78a9f
commit 82780ba589
3 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/view/App.tsx
View file

@ -34,6 +34,7 @@ class App extends React.Component<any, any> {
stats: { stats: {
hp: 0, hp: 0,
lvl: 0, lvl: 0,
gold: 0,
}, },
lastCron: "", lastCron: "",
}, },

7
src/view/Components/Statsview/index.tsx
View file

@ -4,9 +4,12 @@ export default function Index(props: any) {
return( return(
<div className="stats"> <div className="stats">
{/* <div id="profile-name">{props.user_data.profile.name}</div> */} {/* <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="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> </div>
); );
}
function numberWithCommas(x: any) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
} }

10
styles.css
View file

@ -67,7 +67,7 @@ p {
} }
.habit-button { .habit-button {
/* background-color: #fff; */ background-color: var(--interactive-accent);
border: none; border: none;
/* color: black; */ /* color: black; */
text-align: center; text-align: center;
@ -75,6 +75,12 @@ p {
font-size: 16px; font-size: 16px;
display: block; display: block;
width: 100%; 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 { .habit-item {
@ -300,7 +306,7 @@ button {
margin-bottom: 5px; margin-bottom: 5px;
white-space: nowrap; white-space: nowrap;
padding: 5px 5px; padding: 5px 5px;
color: var(--interactive-accent); background-color: var(--interactive-accent);
margin-right: auto; margin-right: auto;
} }