From d14743c396d7aa1d5240f36578c3ced835096b7b Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 11 Nov 2020 22:41:47 -0800
Subject: [PATCH] Support centered and left-justified statistic views

---
 web/pages/components/statistic.tsx | 4 +++-
 web/pages/hardware-info.tsx        | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/pages/components/statistic.tsx b/web/pages/components/statistic.tsx
index 45cca053e..64910e443 100644
--- a/web/pages/components/statistic.tsx
+++ b/web/pages/components/statistic.tsx
@@ -7,16 +7,18 @@ interface ItemProps {
   prefix: JSX.Element,
   color: string,
   progress?: boolean,
+  centered: boolean,
 };
 
 export default function StatisticItem(props: ItemProps) {
   const { title, value, prefix } = props;
   const View = props.progress ? ProgressView : StatisticView;
+  const style = props.centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {};
 
   return (
     <Col span={8}>
       <Card>
-        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+        <div style={style}>
           <View {...props} />
         </div>
       </Card>
diff --git a/web/pages/hardware-info.tsx b/web/pages/hardware-info.tsx
index 122cc0671..8ae70a5df 100644
--- a/web/pages/hardware-info.tsx
+++ b/web/pages/hardware-info.tsx
@@ -81,6 +81,7 @@ const series = [
               prefix={<LaptopOutlined style={{color: series[0].color }}/>}
               color={series[0].color}
               progress
+              centered
             />
             <StatisticItem
               title={series[1].name}
@@ -88,6 +89,7 @@ const series = [
               prefix={<BulbOutlined style={{color: series[1].color }} />}
               color={series[1].color}
               progress
+              centered
             />
             <StatisticItem
               title={series[2].name}
@@ -95,6 +97,7 @@ const series = [
               prefix={<SaveOutlined  style={{color: series[2].color }} />}
               color={series[2].color}
               progress
+              centered
             />
           </Row>