Merge pull request #62 from peterpeterparker/chart-container-style

feat: style chart container
peterpeterparker · Mar 9, 2020 · 896bbea · 896bbea
2 parents fe5bb08 + e8f012a
commit 896bbea
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/src/components/charts/week/WeekCharts.module.scss b/src/components/charts/week/WeekCharts.module.scss
@@ -1,3 +1,6 @@
 .container {
- margin-bottom: 128px;
+ padding-bottom: 82px;
+ padding-top: 16px;
+
+ margin-top: 32px;
 }
diff --git a/src/components/charts/week/WeekCharts.tsx b/src/components/charts/week/WeekCharts.tsx
@@ -102,13 +102,15 @@ const WeekCharts: React.FC = () => {
  }
 
  return (
- <div ref={containerRef} className={styles.container}>
+ <>
  <h1>{t('charts.week.title')}</h1>
-
- {/*
+ <div ref={containerRef} className={styles.container + ' chart-container'}>
+  {/*
  // @ts-ignore */}
- <deckgo-bar-chart ref={chartsRef} margin-top={0} margin-bottom={0} margin-left={128} margin-right={0} y-axis-min={8}></deckgo-bar-chart>
- </div>
+ <deckgo-bar-chart ref={chartsRef} margin-top={0} margin-bottom={0} margin-left={128} margin-right={0}
+ y-axis-min={8}></deckgo-bar-chart>
+ </div>
+ </>
  )
 };
 

diff --git a/src/components/summary/Summary.tsx b/src/components/summary/Summary.tsx
@@ -24,7 +24,7 @@ const Summary: React.FC = () => {
  const summary: SummaryData | undefined = useSelector((state: RootState) => state.summary.summary);
  const settings: Settings = useSelector((state: RootState) => state.settings.settings);
 
- return (<div className="ion-padding-end">
+ return (<>
  <div className={styles.summary}>
  <IonCard className={styles.card} color="card">
  <h2 className={styles.title}>{t('today')}</h2>
@@ -42,7 +42,7 @@ const Summary: React.FC = () => {
  </IonCardHeader>
  </IonCard>
  </div>
- </div>);
+ </>);
 };
 
 export default rootConnector(Summary);
diff --git a/src/theme/charts.scss b/src/theme/charts.scss
@@ -4,9 +4,20 @@ deckgo-bar-chart {
  --deckgo-chart-axis-color: var(--ion-color-card-border);
 }
 
+div.chart-container {
+ border: 1px solid var(--ion-color-card-border);
+ border-radius: 4px;
+}
+
 body.dark {
  deckgo-bar-chart {
- --deckgo-chart-axis-color: var(--ion-color-light);
+ --deckgo-chart-fill-color-0: var(--ion-background-color);
+
+ --deckgo-chart-axis-color: var(--ion-color-card-tint);
  --deckgo-chart-text-color: white;
  }
+
+ div.chart-container {
+ background: var(--ion-color-card);
+ }
 }