Merge pull request tokio-rs#337 from COVID19Tracking/state-page-table…

…-styles-321

Fix padding on state page tables (closes tokio-rs#321)

src/components/common/table.js

@@ -1,5 +1,7 @@
 import React from 'react'
 
-const Table = ({ children }) => <table>{children}</table>
+const Table = ({ children, className }) => (
+  <table className={className}>{children}</table>
+)
 
 export default Table

src/scss/templates/state.scss

@@ -0,0 +1,18 @@
+.state-historical {
+  th:last-child,
+  td:last-child {
+    padding-right: 0.25em;
+  }
+
+  ul {
+    color: green;
+    list-style: none;
+    display: inline list-item;
+  }
+
+  li {
+    display: inline;
+    padding: 0.8em;
+    padding-right: 0;
+  }
+}

src/templates/state.js

@@ -10,6 +10,7 @@ import DetailText from '../components/common/detail-text'
 import SummaryTable from '../components/common/summary-table'
 import { SyncInfobox } from '../components/common/infobox'
 import Table from '../components/common/table'
+import '../scss/templates/state.scss'
 
 const StateLinks = ({ name, twitter, covid19Site, dataSource }) => (
   <UnstyledList>
@@ -62,7 +63,7 @@ const Screenshots = ({ date, screenshots }) => {
 }
 
 const StateHistory = ({ history, screenshots }) => (
-  <Table>
+  <Table className="state-historical">
     <thead>
       <tr>
         <th scope="col">Date</th>