feat: various UI improvements (#36)

* fix: content offset

When the appbar was changed to a `div` the content became offset, this fixes that.

* style: make display of cheques table more readable

* style: restyle sidebar

* fix: content overflow

* chore: split theme into separate file

* feat: show ethereum transaction link for cashout

* feat: make cashout link to etherscan transaction

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

src/App.tsx

@@ -2,12 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import './App.css';
 
-import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
 import BaseRouter from './routes/routes';
-
+import { lightTheme, darkTheme } from './theme';
 
 declare global {
   interface Window {
@@ -16,62 +15,6 @@ declare global {
   }
 }
 
-const lightTheme = createMuiTheme({
-  palette: {
-    type: "light",
-    background: {
-      default: '#fafafa',
-    },
-    primary: {
-      main: '#6a6a6a',
-    },
-    secondary: {
-      main: '#333333',
-    },
-  },
-  typography: {
-    fontFamily: [
-      'Work Sans',
-      'Montserrat',
-      'Nunito',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif'
-    ].join(','),
-  }
-});
-
-const darkTheme = createMuiTheme({
-  palette: {
-    type: "dark",
-    background: {
-      default: '#0d1117', //'#111827',
-      paper: '#161b22', //'#1f2937',
-    },
-    primary: {
-      // light: will be calculated from palette.primary.main,
-      main: '#dd7700' //'#3f51b5',
-      // dark: will be calculated from palette.primary.main,
-      // contrastText: will be calculated to contrast with palette.primary.main
-    },
-    secondary: {
-      main: '#1f2937',
-    },
-  },
-  typography: {
-    fontFamily: [
-      'Work Sans',
-      'Montserrat',
-      'Nunito',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif'
-    ].join(','),
-  }
-});
-
 
 function App() {
   const [themeMode, toggleThemeMode] = useState('light');