Change to Grid of Buttons, Order buttons by selected

Author: chiemerieokorie

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea/

src/App.css

@@ -6,7 +6,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-family: 'Raleway';
+  font-family: 'Raleway', sans-serif;
 }
 
 
@@ -50,19 +50,8 @@
   }
 }
 
-.checkbox {
-  background-color: #eeeeee;
-  margin: -5px;
-  padding: 10px;
-  border-radius: 5px;
-}
-
-.checkbox:checked {
-  background-color: #88e5ff;
-}
-
-.checkbox:hover {
-  background-color: #d2f5ff;
+.county-col {
+  order: -1;
 }
 
 tspan {

src/Graph.js

@@ -11,13 +11,12 @@ import {
   ResponsiveContainer
 } from "recharts";
 import {
-  Checkbox,
-  Table,
   Grid,
   Container,
   Loader,
   Input,
-  Message
+  Message,
+  Button
 } from "semantic-ui-react";
 import queryString from "query-string";
 import { numberWithCommas } from "./utils";
@@ -198,44 +197,29 @@ export default class Graph extends PureComponent {
             </Grid.Row>
 
             <Grid.Row>
-              <Table basic="very" celled collapsing unstackable>
                 {this.state.error && (
                   <Message color="blue">{this.state.error}</Message>
                 )}
-                <Table.Header>
-                  <Table.Row>
-                    <Table.Cell>County</Table.Cell>
-                    <Table.Cell>Cases</Table.Cell>
-                    <Table.Cell>Weekly growth</Table.Cell>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
+
+                <Grid padded centered>
                   {this.getCountiesToList().map(county => (
-                    <Table.Row key={county}>
-                      <Table.Cell>
-                        <div style={{ maxWidth: 150 }}>
-                          <Checkbox
-                            className="checkbox"
-                            label={county}
-                            onChange={() => this.toggleCheckbox(county)}
-                            checked={this.isChecked(county)}
-                          />
-                        </div>
-                      </Table.Cell>
-                      <Table.Cell>
-                        <p>
-                          {numberWithCommas(this.state.countiesToCases[county])}
-                        </p>
-                      </Table.Cell>
-                      <Table.Cell>
-                        <p style={{ color: "green" }}>
-                          +{this.state.countiesToGrowth[county]}%
-                        </p>
-                      </Table.Cell>
-                    </Table.Row>
+                    <Grid.Column mobile={8} tablet={5} computer={3} key={county} className={this.isChecked(county) ? 'county-col': ''} >
+
+                        <Button compact toggle active={this.isChecked(county)} onClick={() => this.toggleCheckbox(county)}>
+                          {county}
+                          <br/>
+                          <br/>
+                          <span className='light'>
+                          {`Cases: ${numberWithCommas(this.state.countiesToCases[county])} `}
+                          <br/>
+                          {`Weekly growth: +${this.state.countiesToGrowth[county]}%`}
+</span>
+                        </Button>
+
+                    </Grid.Column>
                   ))}
-                </Table.Body>
-              </Table>
+                </Grid>
+
             </Grid.Row>
           </Grid>
         )}

yarn.lock

@@ -9232,6 +9232,15 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.11.1:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.0.tgz#8d875f66581c854d7480ac79478abb847de742f6"
+  integrity sha512-KJe8p8EUcixhPCp4cJoTYVfmgKHjnAB/Pq3fiqlmyNHvpHnOL5U4YE7iI2PYivGHp4HFocWz300906BAQX0H7g==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -10527,6 +10536,11 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10634,6 +10648,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"