Merge pull request #25 from asapzacy/app/add-emotion

feat: convert scss/css moduels to CSS-in-JS emotion styled component

.babelrc

@@ -15,6 +15,7 @@
   ],
   "ignore": ["node_modules"],
   "plugins": [
+    "emotion",
     "react-hot-loader/babel",
     "transform-react-stateless-component-name",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],

.eslintrc

@@ -25,7 +25,6 @@
     "no-console": [2, { "allow": ["warn", "error"] }],
     "semi": [2, "never"],
     "no-extra-semi": 2,
-    "jsx-quotes": [2, "prefer-single"],
     "space-before-function-paren": ["error", "never"],
     "react/jsx-boolean-value": [2, "always"],
     "react/jsx-curly-spacing": [2, "never", { "allowMultiline": false }],

.gitignore

@@ -1,13 +1,11 @@
 .env
 .DS_Store
 
-.ssl/
 .vscode/
 
 yarn-error.log
 node_modules/
 
 dist/index.html
-dist/stats/
 dist/assets/build/
-extra_stuff/
+extra/

.ssl/local.api.uxscoreboard.cert

@@ -0,0 +1,23 @@
+-----BEGIN CERTIFICATE-----
+MIIDyzCCArOgAwIBAgIJAO/aHkUKHjPwMA0GCSqGSIb3DQEBCwUAMHwxCzAJBgNV
+BAYTAlVTMQswCQYDVQQIDAJDQTEWMBQGA1UEBwwNU2FuIEZyYW5kaXNjbzENMAsG
+A1UECgwEYXNhcDESMBAGA1UEAwwJbG9jYWxob3N0MSUwIwYJKoZIhvcNAQkBFhZ6
+YWNkYXJlbGxhbm9AZ21haWwuY29tMB4XDTIwMDMwMTAwMzYzOFoXDTIwMDMzMTAw
+MzYzOFowfDELMAkGA1UEBhMCVVMxCzAJBgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4g
+RnJhbmRpc2NvMQ0wCwYDVQQKDARhc2FwMRIwEAYDVQQDDAlsb2NhbGhvc3QxJTAj
+BgkqhkiG9w0BCQEWFnphY2RhcmVsbGFub0BnbWFpbC5jb20wggEiMA0GCSqGSIb3
+DQEBAQUAA4IBDwAwggEKAoIBAQDCxJGktbSI0xcfuhjhjfTgd0jHPQaJYzHfEDke
+pqnDzVQxjB3I3hPsPqrPbr4eOeYM2OKYf+UjMEPi2imzVzSEbLRhRctugPc9Ns7f
+dx84sx7uZWKTNbYNkVcXWJ3QHsk6Mn4PopUGP5V78Yszw7zht6Rtn6/dWXxCs1on
+wr6fYT76Tw4OP4z1huPOEGMs240FXb6GA/Jv2RFNS9v0AOxYbJs+WNBtuMmViBZr
+7f+pZPZjoGVL7ph0KNJFd4q8PwsEaUPF61eC+7WxugbCZZuRMhcF0jKkOs5qJeFY
+FVoWVd1IBPsJOrJbnRZA2L8Zs9WiZfn8Tv8aLbWTUIaNUElXAgMBAAGjUDBOMB0G
+A1UdDgQWBBRg3HDhwEH1MagRk/QhBL28IRVp5zAfBgNVHSMEGDAWgBRg3HDhwEH1
+MagRk/QhBL28IRVp5zAMBgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQCh
+6tzrU9jE5VPyU0NA7LCC8fci2Muuck5CcI9ykiKT7kqICu3KTyJCR5O1JnHA2kzZ
+C8S5+DuPUubexbtL6/DDde8sb6D2hz61L1gl4ykyOkCzPCMbrrL6GeFGn0Sh1Z3T
+FImxQfnla8hUPcwlBLV5iYUgr+m/f1BLao2m2B3q+n7nfvQSj9/w31yckTvqYDv8
+ZZW74ncud64quzEgM631mqp4mnG6pbsmuo2gN+pELHqQMefapOfk+wBHFKEj6fy/
+bRKa7otF25ouzwfT5rtd81TEQu3daWPXcbqH6my81k36FUB061B52omYKI75urbL
+ZBqUGnholNkdaMS7dIiF
+-----END CERTIFICATE-----

.ssl/local.api.uxscoreboard.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDCxJGktbSI0xcf
+uhjhjfTgd0jHPQaJYzHfEDkepqnDzVQxjB3I3hPsPqrPbr4eOeYM2OKYf+UjMEPi
+2imzVzSEbLRhRctugPc9Ns7fdx84sx7uZWKTNbYNkVcXWJ3QHsk6Mn4PopUGP5V7
+8Yszw7zht6Rtn6/dWXxCs1onwr6fYT76Tw4OP4z1huPOEGMs240FXb6GA/Jv2RFN
+S9v0AOxYbJs+WNBtuMmViBZr7f+pZPZjoGVL7ph0KNJFd4q8PwsEaUPF61eC+7Wx
+ugbCZZuRMhcF0jKkOs5qJeFYFVoWVd1IBPsJOrJbnRZA2L8Zs9WiZfn8Tv8aLbWT
+UIaNUElXAgMBAAECggEAUzfuCvRgeP3IqZO4QdeHw8jz3b1jZ5xsmKSz4zbO3oyC
+5tC5gTPyS0TTcuIcdYnDk8Wvu/0ZiJl8yBbzLl+aXuKbh9xseYC9IviiF7UsL+vI
+0Y+cOM4ARXfOQHlqpJwi2qzsU/3hstPEKTshgTKnJ8JxjS1n1SoA//bmFIsPK8WA
+caO6apGyNesngP7GqZCHEZ6dbgWhY20OcfAUXFA4C6jzOaFEQQY/OG0uipMunTQ4
+Z5v3o+EmsllE/Jg0IqaFxSmnJCSgm1a/gBa/EGU+VfkXrRWBXao9lh6UPOgvTbiF
+1dW668ULVQmTkQd9c/AvYHBT36/maMd+goig61gskQKBgQDhevWfXsyMFk8qvgVH
+78NLymWqzePSmgfw4PMIIgVicafeEYPHn7JxcvKTkou7AGdoSUYeLRnCJI+fm3Cs
+y5aq02XQbCqliHwEUqwIbnGfb5sv73frPPQwN/FsavOtYgL5JJ0ATTdtgfMITk82
+fCzHqJvJaugk58K4YFPl2Xv99QKBgQDdIWcJE4Af3hb/xGFEAoAoyGIwrQkStzRp
+g+R7IyRKlWl93oP7DWAsX9VHPoR3q4rqWW4yRxFx17nlgVVIODLW+EhAhZUiiaKS
+Y85tI6k/9Iq6fXKX02nXL3FEdYLWBywKdYswM94M03nQj6U/l7dnowPDs9VYGOAg
+H0QNOH2umwKBgFB+eNkgGp2YCUMU+wWnTmzsIEdNoRs56cPQSnKI0qtGL8tTLVxC
+Yo2ln3uXQVLM3h2YqvNy3lM0giFUeHD3bR4mwZ4aP09A3iUc7lVEOEPWr+v47TKJ
+XBMqpYEy3TL0XmNa8sF8z2DEl2JLsnOc+M9+Hb9V7vHd2uG/YbQYY+9RAoGASz/4
+rjACo9WSAgu0Bc7MChTWxTW9Jq9NmLKXaAf3a6IYugqk4yQUHEWocIwnzAmGRmWU
+iGuC1jjRO/adLOxi8KChBcPvkkdAGYz5TE6cY/U12GykOGJrXBz68I8ErQzXwd9q
+NEcSQ08b3wti8pcQhKYGu+xQp6AfdQ7uu4kDzA0CgYEAn2XBlt4d2gJTYQ2N8wZx
+Im0Y7P+HWDjbcYOlFKWbJ9/PAERV2/7x1o3hgIuXhsUH8bu22QRI27fcDzLKO/Sb
+wDtLxbL+dG/WdzFCkH+bzGMf08WOiH4QjZlRbS9I6gPHQL34IarMQ+fOslh8c7Ih
+o8MbtI4LhsGkUxBown2vYWg=
+-----END PRIVATE KEY-----

.ssl/local.uxscoreboard.cert

@@ -0,0 +1,23 @@
+-----BEGIN CERTIFICATE-----
+MIIDyzCCArOgAwIBAgIJAKMIDHP9cZVaMA0GCSqGSIb3DQEBCwUAMHwxCzAJBgNV
+BAYTAlVTMQswCQYDVQQIDAJDQTEWMBQGA1UEBwwNU2FuIEZyYW5kaXNjbzENMAsG
+A1UECgwEYXNhcDESMBAGA1UEAwwJbG9jYWxob3N0MSUwIwYJKoZIhvcNAQkBFhZ6
+YWNkYXJlbGxhbm9AZ21haWwuY29tMB4XDTIwMDMwMTAwNTQ1NloXDTIwMDMzMTAw
+NTQ1NlowfDELMAkGA1UEBhMCVVMxCzAJBgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4g
+RnJhbmRpc2NvMQ0wCwYDVQQKDARhc2FwMRIwEAYDVQQDDAlsb2NhbGhvc3QxJTAj
+BgkqhkiG9w0BCQEWFnphY2RhcmVsbGFub0BnbWFpbC5jb20wggEiMA0GCSqGSIb3
+DQEBAQUAA4IBDwAwggEKAoIBAQCij34Qx9FsV9YF8R9QaAWQdGi0WFdEsudIc6TI
+sed7RISO97daZTd515OuTDzy+zb/3rG8uWysyEX2w/nVJ/ydLKKozqYjAK5wegCb
+mosRGFAkiA2IlrjjVs3NqiZkcXc2QOhE/UPD2ETX3vzJXVO7xJnEV21afW9PWcjF
+gI0Td796nEJB5ZZOYjxqBt2SYN3Df7sXaET/MX9nYTC2KOy9oPvAeZ9jWTf5Sk67
+lpDWT2fspVa5+91GE4uMuCzDWeNGp2HGh0fbw1+MacXRDbyNwBG88CaAvOp/cqO1
+JtVY3sSk3EJZmyIpiqvYxmQ2HvcW6FGgwiVNufbpddgssOwxAgMBAAGjUDBOMB0G
+A1UdDgQWBBRbebvhOiJ3iYZzbWjvaobelrvN1DAfBgNVHSMEGDAWgBRbebvhOiJ3
+iYZzbWjvaobelrvN1DAMBgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQBm
+NDktXVDeRCdV+n981uL9+2j/u9HGcTrJIP6jFc7+LgDX6jB3KS0xNkcjKTLVJWFo
+7DgI6C9GqkWbomvUMjBccMxCqYljoNo3rJgp+g0QnEuQjHQ9M7gg1ZpOfXn9aW8a
+1hR+gDIyptZQ7EhCUat1spWGl0U6+G1ClRtYXwqhFmQ7xYZLy+MRGjhk06ixglWK
+Ery4cv55fO9TRyVQ+HyijJTFkQm/UT+wMNMTw3O7rjIj3aZ3gjbJf0JXzGvXAHBo
+g///yzmb5mkGmEp5uyzcSngKBqdFE2DPJB89Er6vJaWQNpO5pynWPLF60eDz0KTP
+uel8/NRk+TdV/BfBiPRL
+-----END CERTIFICATE-----

.ssl/local.uxscoreboard.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCij34Qx9FsV9YF
+8R9QaAWQdGi0WFdEsudIc6TIsed7RISO97daZTd515OuTDzy+zb/3rG8uWysyEX2
+w/nVJ/ydLKKozqYjAK5wegCbmosRGFAkiA2IlrjjVs3NqiZkcXc2QOhE/UPD2ETX
+3vzJXVO7xJnEV21afW9PWcjFgI0Td796nEJB5ZZOYjxqBt2SYN3Df7sXaET/MX9n
+YTC2KOy9oPvAeZ9jWTf5Sk67lpDWT2fspVa5+91GE4uMuCzDWeNGp2HGh0fbw1+M
+acXRDbyNwBG88CaAvOp/cqO1JtVY3sSk3EJZmyIpiqvYxmQ2HvcW6FGgwiVNufbp
+ddgssOwxAgMBAAECggEACKCA2jcggBVxQEN5m/TJRs9Gtztw9i5gY9HvTs9SL5KF
+TmkLC/sPJKIyLi/RlDuMwat510An6kt+mwfvfEZw+45g24CMBJOGrmVrHtbmxnN5
+3VZzEWqeSUJUDbQX8YCsCO8M5IxkSkJx9Nrao30WcoKOfoL9RK4feCCVrRWTZxMA
+IUWsgAc3L2H5LUedxgq2TVg5n5fM8NeAfCsATxf3F00IY5KFHKLqGks10NPbNv6a
+zWU/hWhkfEsmgtoNjjHpQep1GhVP345TrrelHJt7NQqCE+gLgvca53ZZxhgd/FH0
+a0DJ7Xbqsf/UxjSg6fN53UAnPncG/oHlYETNdq68AQKBgQDXV+YvAJIIS9ZQNvCF
+NakTmH+qvuESPoHiZHJj3fN1qHX6E+nEIVYFw2zf0ZjEjSvmLZl3IqKgS7lZtDpi
+8ZVQbadcoqNStgSk/j5+LSPh0HHD08t6ac4l+MgahMQjbK6WmBban0RDYoi6qGA6
+x+o8WLBQYS2jPE83TEUMbqBfkQKBgQDBQHZZfy0LGGVP6pnf0k3Fv1mk5Sg1NT6a
+09zz2TgZ873yLCCDurk95freDjq9gIDag7d0OeA9ExxOjTmZhBRm/dLmCfNq/+Wm
+BCJ1suKnnmmabhDXcUZeLC+rwDf/eHwWHOAcVlIl0BiOQrJ7YmaAGX0CrMptWHRT
+ZttJNEKyoQKBgQC2WNkyvdHqsoUUwaDju++jB0Q8Cow9za5gTVxL0psg63iTPZ96
+lBvqn3QnBq3M6hndPImyRyLch6K5IhM6y4T7aQ8KMzIHjNfb+upiH8k9oytiforT
+6ppEryiKxBfuQ06HeNwJXkoIoXxUStXJkJV5akRKnC9wBVay5aOmhlrI8QKBgBZw
+n82AoQBa0tjWywtcZj+CGqy1F1gmWKCt3UhLfuI0lWfbi+L/+aagX+MND/EVTOES
+zmiml80/vNe6OmgDGENlUen4WdWg5U/DxySXow4HrQeLpFUACEXDJ73v0hDOMsp2
+i+d+doeBhHhwcj01jeVuEEARRGgyDz/n/6qecOhBAoGBAJDE7zUSVPnh6UWoINI0
+zsDAwpoRiVWxdjqhHKAYBZwhqSMgA8PeqG4MCn9J06tD2uKJqpERmqjSVhoWNELA
+w/0DZzGp38OvSXKz/BEQubYMlGKUoKsIrGB3nQCo6PmsYVygoAtzKwoZ1G0FxQAo
+97RYRCwfB9xN5g4QPL/X8ds2
+-----END PRIVATE KEY-----

README.md

@@ -11,8 +11,7 @@
 ```sh
 git clone https://github.com/asapzacy/uxscoreboard.git
 cd uxscoreboard
-yarn
-yarn start
-```
+yarn dev:fresh
 
-then --> [localhost:8080](http://localhost:8080)
+# open https://local.uxsocreboard:8888 or https://localhost:8888
+```

package.json

@@ -5,32 +5,35 @@
   "main": "server.js",
   "scripts": {
     "commit": "git-cz",
-    "dev": "env UV_THREADPOOL_SIZE=100 webpack-dev-server --progress --colors",
-    "server": "npx nodemon server.js",
-    "start": "concurrently 'yarn dev' 'yarn server' --names 'REACT,NODE' -c 'bgBlue.bold,bgMagenta.bold'",
-    "start:fresh": "yarn reset:all && yarn start",
-    "start:dirty": "yarn && yarn start",
-    "build": "yarn --production=false && NODE_ENV='production' webpack --progress --colors",
-    "build:deploy": "yarn reset:all && yarn build",
-    "reset:cache": "rm -rf dist/**/*/bundle.* && rm -f dist/index.html",
-    "reset:npm": "rm -rf node_modules && yarn --production=false",
-    "reset:all": "yarn reset:npm && yarn reset:cache",
-    "lint": "eslint src/.; exit 0",
-    "lint:fix": "eslint --fix src/.; exit 0",
+    "api": "npx nodemon server.js",
+    "www": "env UV_THREADPOOL_SIZE=100 webpack-dev-server --progress --colors",
+    "dev": "NODE_ENV=development concurrently --kill-others 'yarn www' 'yarn api' --names ' www , api ' -c 'bgGreen.black,bgBlue.black'",
+    "dev:fresh": "yarn reset && yarn dev",
+    "build": "yarn --production=false && NODE_ENV=production webpack --progress --colors",
+    "clean": "yarn clean:build && yarn clean:npm",
+    "clean:build": "rm -rf ./dist/assets/build/ && rm -f ./dist/index.html",
+    "clean:npm": "rm -rf ./node_modules/",
+    "reset": "yarn clean && yarn install --production=false",
+    "lint": "eslint ./src/.; exit 0",
+    "lint:fix": "eslint --fix ./src/.; exit 0",
     "test": "jest",
     "test:watch": "jest --watch",
-    "svg": "find dist/assets -name '*.svg' -type f -exec yarn svgo '{}' \\;",
+    "svg": "find ./dist/assets/static -name '*.svg' -type f -exec yarn svgo '{}' \\;",
     "svgo": "svgo --config='{ \"plugins\": [{ \"removeTitle\": false },{ \"removeViewBox\": false }]}'",
     "release": "standard-version"
   },
   "author": "Zac Arellano",
   "license": "MIT",
   "dependencies": {
+    "@emotion/core": "^10.0.27",
+    "@emotion/is-prop-valid": "^0.8.7",
+    "@emotion/styled": "^10.0.27",
     "@sentry/browser": "^5.10.0",
     "axios": "^0.16.2",
     "compression": "^1.6.2",
     "cors": "^2.8.3",
     "dotenv": "^6.1.0",
+    "emotion-theming": "^10.0.27",
     "express": "^4.15.3",
     "moment": "^2.17.1",
     "moment-timezone": "^0.5.11",
@@ -61,6 +64,7 @@
     "@types/react-dom": "^16.8.4",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
+    "babel-plugin-emotion": "^10.0.28",
     "babel-plugin-transform-react-stateless-component-name": "^1.1.2",
     "browser-sync": "^2.18.7",
     "browser-sync-webpack-plugin": "^1.1.4",
@@ -83,6 +87,7 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-standard": "^3.0.1",
     "html-webpack-plugin": "^4.0.0-beta.11",
+    "https": "^1.0.0",
     "husky": "^4.0.10",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",

server.js

@@ -1,22 +1,27 @@
 #!/usr/bin/env node
-const express = require('express')
+const fs = require('fs')
 const path = require('path')
+
+const express = require('express')
+const https = require('https')
 const compression = require('compression')
 const cors = require('cors')
 const responseTime = require('response-time')
 const axios = require('axios')
 const parseString = require('xml2js').parseString
+
 require('dotenv').config()
 
-const port = process.env.PORT || 9090
+const API_HOST = process.env.API_HOST || 'local.api.uxscoreboard'
+const API_PORT = process.env.API_PORT || 9999
 
 const app = express()
 
 app.use(compression())
 app.use(cors())
 app.use(responseTime())
 
-app.use(express.static('dist'))
+app.use(express.static('./dist'))
 
 const parseDate = dt => {
   const yyyy = dt.slice(0, 4)
@@ -87,11 +92,21 @@ app.get('/api/nfl/scores/week/:week', (req, res) => {
 })
 
 app.get('*', (req, res) => {
-  res.sendFile(path.resolve('dist/index.html'))
+  res.sendFile(path.resolve('./dist/index.html'))
 })
 
-app.listen(port, () => {
-  console.log(`server listening on port ${port}`)
-})
+const localApp = https.createServer(
+  {
+    key: fs.readFileSync(`./.ssl/${API_HOST}.key`),
+    cert: fs.readFileSync(`./.ssl/${API_HOST}.cert`),
+    requestCert: false,
+    rejectUnauthorized: false
+  },
+  app
+)
 
-module.exports = app
+const server = process.env.NODE_ENV === 'development' ? localApp : app
+server.listen(API_PORT, () => {
+  /* eslint-disable */
+  console.log(`server listening on port ${API_PORT}`)
+})

src/assets/icons/BasketballLight.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const BasketballLight = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path
+      fill="#e0e0e0"
+      d="M256 48C141.137 48 48 141.136 48 256s93.137 208 208 208c114.871 0 208-93.138 208-208S370.871 48 256 48zm190.664 208l-.002.145c-22.315-1.721-43.989-6.972-64.62-15.699a206.906 206.906 0 0 1-49.479-29.634 527.032 527.032 0 0 0 52.824-94.715c37.658 34.853 61.277 84.669 61.277 139.903zm-74.058-150.739c-.28.676-.55 1.354-.835 2.028-13.908 32.883-31.062 63.956-51.286 92.987a215.409 215.409 0 0 1-4.563-4.413c-19.107-19.107-34.107-41.354-44.583-66.12-8.697-20.563-13.933-42.163-15.671-64.401.111 0 .221-.004.332-.004 43.884-.001 84.347 14.911 116.606 39.923zM239.675 66.044c4.431 58.126 31.044 110.041 71.391 147.312a513.394 513.394 0 0 1-30.319 36.965c-47.554-50.032-104.815-90.746-168.767-119.132 31.636-36.456 76.853-60.814 127.695-65.145zm41.012 207.796c36.229 40.67 65.48 86.438 87.185 136.453-25.4 18.467-55.51 30.829-88.162 34.898-2.272-47.816-19.521-91.707-47.179-127.071a531.537 531.537 0 0 0 48.156-44.28zm-18.648-3.801a518.699 518.699 0 0 1-39.778 35.87c-38.737-42.885-93.831-70.706-155.45-73.635 4.07-32.646 16.432-62.75 34.896-88.146 59.195 25.688 112.445 61.947 158.332 107.833a523.63 523.63 0 0 1 9.812 10.089 524.704 524.704 0 0 1-7.812 7.989zM65.508 248.23c25.238 1.145 49.436 6.797 71.45 16.109 24.767 10.476 47.013 25.476 66.12 44.583a212.54 212.54 0 0 1 6.584 6.895c-31.414 23.915-65.427 44.049-101.708 60.182C81.322 343.205 65.336 301.437 65.336 256c0-2.604.068-5.191.172-7.77zm53.559 140.296a527.776 527.776 0 0 0 100.914-60.521 206.935 206.935 0 0 1 27.68 47.037c9.614 22.729 15.013 46.724 16.114 71.45-2.58.104-5.17.172-7.775.172-53.683 0-102.249-22.311-136.933-58.138zm261.743 11.495c-22.489-50.671-52.72-97.14-89.191-137.909a530.62 530.62 0 0 0 31.556-38.336c34.171 27.342 76.521 44.885 122.801 48.363-4.29 50.919-28.665 96.208-65.166 127.882z"
+    />
+  </svg>
+)
+
+export default BasketballLight

src/assets/icons/FootballLight.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const FootballLight = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path
+      fill="#e0e0e0"
+      d="M378.605 133.395C305.902 60.691 189.38 47.998 116.85 48c-38.926.001-65.191 3.658-65.191 3.658s-29.984 215.227 81.736 326.947C206.099 451.309 322.617 464 395.149 464c38.926 0 65.192-3.658 65.192-3.658s29.985-215.226-81.736-326.947zM65.142 65.208C76.137 64.194 94.374 63 116.856 63H117l-.068-.071c27.167 0 53.167 1.754 77.792 5.22L68.124 194.73a515.877 515.877 0 0 1-2.64-22.246c-4.586-47.435-2.086-88.228-.342-107.276zM143.9 368.102c-23.85-23.852-42.793-54.938-56.304-92.396-6.973-19.332-12.51-40.373-16.57-62.866L212.838 71.05c10.672 1.929 21.064 4.191 31.141 6.804 52.027 13.492 93.783 35.708 124.139 66.064 23.851 23.85 42.786 54.928 56.297 92.386 6.974 19.333 12.509 40.375 16.567 62.871L299.17 440.986c-10.66-1.93-21.041-4.191-31.104-6.801-52.03-13.489-93.806-35.726-124.166-66.083zm302.961 78.766c-10.994 1.012-29.23 2.275-51.71 2.275-27.192 0-53.225-1.77-77.876-5.25l126.607-126.607a516.862 516.862 0 0 1 2.638 22.233c4.588 47.437 2.086 88.298.341 107.349z"
+    />
+    <path
+      fill="#e0e0e0"
+      d="M307.304 317.847l22.625 22.632-28.654 28.652 11.315 11.314 67.881-67.881-11.314-11.314-28.721 28.721-22.625-22.631 28.716-28.717-11.313-11.313-28.715 28.714-22.633-22.638 28.702-28.702-11.313-11.314-28.7 28.7-22.626-22.631 28.697-28.697-11.314-11.313-28.694 28.695-22.631-22.637 28.687-28.687-11.313-11.313-28.685 28.685-22.624-22.63 28.682-28.682-11.313-11.313-67.883 67.882 11.314 11.314 28.693-28.694 22.624 22.63-28.691 28.691 11.313 11.313 28.689-28.689 22.63 22.637-28.678 28.679 11.313 11.313 28.677-28.677 22.626 22.631-28.674 28.674 11.314 11.313 28.671-28.671 22.633 22.638-28.66 28.66 11.314 11.314z"
+    />
+  </svg>
+)
+export default FootballLight

src/assets/icons/HockeyLight.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const HockeyLight = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 511.999 511.999"
+    width="100%"
+    height="80%"
+    {...props}
+  >
+    <path
+      fill="#e0e0e0"
+      d="M466.579 397.526H306.351l-19.928-39.112L456.505 24.612 408.2 0 256 298.708 103.801 0 55.496 24.612l170.082 333.802-19.928 39.112H102.882v15.211h56.036v15.2h-56.036v15.211h56.036v53.641H45.422c-12.91 0-23.414-10.504-23.414-23.414v-37.226c0-12.909 10.504-23.412 23.414-23.412h37.177v-15.211H45.422c-21.298 0-38.625 17.326-38.625 38.623v37.226C6.797 494.673 24.124 512 45.422 512h139.079c14.737 0 28.385-8.574 34.797-21.849l36.701-72.031 36.702 72.032c6.412 13.275 20.06 21.848 34.797 21.848h139.079c21.298 0 38.625-17.327 38.625-38.625v-37.226c.002-21.297-17.325-38.623-38.623-38.623zM414.846 20.458l21.198 10.801-158.157 310.402-4.03-7.908-9.32-18.294L414.846 20.458zM205.707 483.322l-.08.162c-3.879 8.082-12.171 13.305-21.126 13.305h-10.373v-84.053h40.841l19.144-37.57 13.351 26.202-41.757 81.954zm132.164 13.467h-10.373c-8.953 0-17.245-5.223-21.124-13.305l-41.84-82.115.001-.002-30.421-59.705-.001.001L75.956 31.259l21.198-10.801 150.31 295.002 30.421 59.706v-.001l19.144 37.572h40.841v84.052zm152.123-23.414c0 12.911-10.504 23.414-23.414 23.414H353.083v-84.053H466.58c12.91 0 23.414 10.503 23.414 23.412v37.227z"
+    />
+  </svg>
+)
+export default HockeyLight