Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-22 11:05:09 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

New style for StatCards

Browse Source
This commit is contained in:
Kalle
2022-09-14 19:32:56 +03:00
parent 13db27b512
commit 444bab65d4
2 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/routes/analyzer.tsx
View File

@@ -119,7 +119,6 @@ function StatCategory({
);
}
// xxx: cobra kai style
function StatCard({
title,
stat,
@@ -132,16 +131,24 @@ function StatCard({
return (
<div key={title} className="analyzer__stat-card">
<div>
<h4 className="analyzer__stat-card__title">{title}</h4>
{stat.value !== stat.baseValue && (
<h3 className="analyzer__stat-card__title">{title}</h3>
<div className="analyzer__stat-card-values">
<div className="analyzer__stat-card__value">
Current: {stat.value}
{suffix}
<h4 className="analyzer__stat-card__value__title">Base</h4>{" "}
<div className="analyzer__stat-card__value__number">
{stat.baseValue}
{suffix}
</div>
</div>
)}
<div className="analyzer__stat-card__value text-lighter">
Base: {stat.baseValue}
{suffix}
{stat.value !== stat.baseValue && (
<div className="analyzer__stat-card__value">
<h4 className="analyzer__stat-card__value__title">Build</h4>{" "}
<div className="analyzer__stat-card__value__number">
{stat.value}
{suffix}
</div>
</div>
)}
</div>
</div>
<div className="stack items-center">

25
app/styles/analyzer.css
View File

@@ -51,11 +51,34 @@
}
.analyzer__stat-card__title {
height: 2.75rem;
font-size: var(--fonts-xs);
text-align: center;
}
.analyzer__stat-card-values {
display: flex;
justify-content: space-evenly;
gap: var(--s-1);
}
.analyzer__stat-card__value {
font-size: var(--fonts-xs);
display: flex;
flex-direction: column;
align-items: center;
}
.analyzer__stat-card__value__title {
color: var(--text-lighter);
font-size: var(--fonts-xxs);
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.analyzer__stat-card__value__number {
font-size: var(--fonts-md);
font-weight: var(--bold);
}
.analyzer__consumption-table-container {