diff --git a/.eslintrc.js b/.eslintrc.js
index 6067a09..81fb2d0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,42 +1,31 @@
module.exports = {
- extends: [
- 'airbnb-typescript',
- 'airbnb/hooks',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:jest/recommended',
- 'prettier',
- 'prettier/react',
- 'prettier/@typescript-eslint',
- 'plugin:prettier/recommended',
- ],
- plugins: ['react', '@typescript-eslint', 'jest'],
- env: {
- browser: true,
- es6: true,
- jest: true,
- },
- globals: {
- Atomics: 'readonly',
- SharedArrayBuffer: 'readonly',
- },
- root: true,
- parser: '@typescript-eslint/parser',
- parserOptions: {
- ecmaFeatures: {
- jsx: true,
+ parser: '@typescript-eslint/parser', // Specifies the ESLint parserx
+ plugins: ['react-hooks', 'prettier'],
+ settings: {
+ react: {
+ version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
- ecmaVersion: 2018,
- sourceType: 'module',
- project: './tsconfig.json',
},
+ extends: [
+ 'plugin:react/recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:prettier/recommended', // Make sure this is always the last configuration in the extends array.
+ 'plugin:jest/recommended',
+ ],
rules: {
- 'linebreak-style': 'off',
+ // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+ // Consider turning on eventually... lots of warnings though.
+ 'max-len': ['error', 100],
+ '@typescript-eslint/explicit-module-boundary-types': 'off',
+ 'react/react-in-jsx-scope': 'off',
+ // This rule is redundent when using arrow functions and we should only use arrow functions
'react/prop-types': 'off',
- 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'prettier/prettier': [
'error',
{
- endOfLine: 'auto',
+ trailingComma: 'all',
+ arrowParens: 'always',
+ printWidth: 100,
},
],
},
diff --git a/package.json b/package.json
index 8582df8..dbf09ac 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,14 @@
"i18next": "^17.0.4",
"i18next-browser-languagedetector": "^3.0.1",
"lodash": "^4.17.20",
+ "luxon": "^1.26.0",
"match-sorter": "^6.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-i18next": "^10.11.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
+ "react-svg": "^12.1.0",
"react-use": "^15.3.8",
"web-vitals": "^1.0.1"
},
@@ -50,6 +52,7 @@
"@testing-library/react": "^11.2.3",
"@types/jest": "^26.0.20",
"@types/lodash": "^4.14.167",
+ "@types/luxon": "^1.26.2",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.1.7",
@@ -57,15 +60,10 @@
"@typescript-eslint/parser": "^4.12.0",
"axios-mock-adapter": "^1.19.0",
"eslint": "7.2.0",
- "eslint-config-airbnb": "18.2.1",
- "eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.1.0",
- "eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
- "eslint-plugin-react": "^7.21.5",
- "eslint-plugin-react-hooks": "4.0.0",
"husky": "^3.0.5",
"jest": "^26.6.3",
"prettier": "^2.2.1",
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..e65f203 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a..c98e888 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
index a4e47a6..1f4911a 100644
Binary files a/public/logo512.png and b/public/logo512.png differ
diff --git a/src/App.scss b/src/App.scss
index 054fad8..9f9d869 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -46,6 +46,18 @@
}
.header {
+ .logo {
+ height: 40px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 10px;
+
+ & svg {
+ height: 100%;
+ width: auto;
+ }
+ }
+
.title-desktop {
@media all and (max-width: 820px) {
display: none;
@@ -74,7 +86,17 @@
}
}
+@media all and (min-width: 800px) {
+ .mobile {
+ display: none !important;
+ }
+}
+
@media all and (max-width: 800px) {
+ .desktop {
+ display: none !important;
+ }
+
.report-problem-container {
font-size: 12px;
padding: 10px;
diff --git a/src/App.tsx b/src/App.tsx
index 661cc83..e3fb7bf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,12 +13,47 @@ import Footer from './components/Footer';
const theme = createMuiTheme({
palette: {
primary: {
- main: '#3F51B5',
+ main: '#00B5E2',
+ contrastText: '#ffffff',
},
secondary: {
- main: '#009688',
+ main: '#212322',
},
},
+ typography: {
+ h1: {
+ fontWeight: 600,
+ },
+ h2: {
+ fontWeight: 600,
+ },
+ h3: {
+ fontWeight: 600,
+ },
+ h4: {
+ fontWeight: 600,
+ },
+ h5: {
+ fontWeight: 600,
+ },
+ h6: {
+ fontWeight: 600,
+ },
+ fontFamily: [
+ 'Open Sans',
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ 'Segoe UI',
+ 'Roboto',
+ 'Oxygen',
+ 'Ubuntu',
+ 'Cantarell',
+ 'Fira Sans',
+ 'Droid Sans',
+ 'Helvetica Neue',
+ ,
+ ].join(','),
+ },
});
const App: FunctionComponent = () => {
@@ -30,7 +65,7 @@ const App: FunctionComponent = () => {
-
+
diff --git a/src/components/Header.test.tsx b/src/components/Header/Header.test.tsx
similarity index 98%
rename from src/components/Header.test.tsx
rename to src/components/Header/Header.test.tsx
index c50e4ad..3a046ce 100644
--- a/src/components/Header.test.tsx
+++ b/src/components/Header/Header.test.tsx
@@ -5,7 +5,7 @@
import React from 'react';
import { fireEvent, render, RenderResult, waitFor } from '@testing-library/react';
-import Header from './Header';
+import Header from '.';
const mockChangeLanguage = jest.fn();
diff --git a/src/components/Header.tsx b/src/components/Header/index.tsx
similarity index 87%
rename from src/components/Header.tsx
rename to src/components/Header/index.tsx
index 73311de..3c42541 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header/index.tsx
@@ -11,9 +11,11 @@ import {
Typography,
} from '@material-ui/core';
import { useTranslation } from 'react-i18next';
+import { ReactSVG } from 'react-svg';
-import locales from '../locales';
-import '../App.scss';
+import logo from '../../images/logo-white.svg';
+import locales from '../../locales';
+import '../../App.scss';
const Header: FunctionComponent = () => {
const { t, i18n } = useTranslation();
@@ -32,8 +34,10 @@ const Header: FunctionComponent = () => {
return (
- {t('tr-title')}
- {t('tr-title')}
+
+
+ {t('tr-title')}
+