Restructured components and refactored topbar to functional

package-lock.json

@@ -1415,7 +1415,7 @@
     },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@sheerun%2fmutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
       "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw=="
     },
     "@svgr/babel-plugin-add-jsx-attribute": {
@@ -1529,7 +1529,7 @@
     },
     "@testing-library/dom": {
       "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@testing-library%2fdom/-/dom-6.16.0.tgz",
       "integrity": "sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA==",
       "requires": {
         "@babel/runtime": "^7.8.4",
@@ -1552,7 +1552,7 @@
         },
         "@jest/types": {
           "version": "25.5.0",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz",
           "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -1563,7 +1563,7 @@
         },
         "@types/yargs": {
           "version": "15.0.5",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
+          "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz",
           "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
           "requires": {
             "@types/yargs-parser": "*"
@@ -1571,7 +1571,7 @@
         },
         "ansi-styles": {
           "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz",
           "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "requires": {
             "@types/color-name": "^1.1.1",
@@ -1599,7 +1599,7 @@
         },
         "chalk": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz",
           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -1608,7 +1608,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
@@ -1616,17 +1616,17 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://npm.mlabs.pl:443/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "pretty-format": {
           "version": "25.5.0",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/pretty-format/-/pretty-format-25.5.0.tgz",
           "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
           "requires": {
             "@jest/types": "^25.5.0",
@@ -1637,7 +1637,7 @@
         },
         "supports-color": {
           "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz",
           "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
           "requires": {
             "has-flag": "^4.0.0"
@@ -1647,7 +1647,7 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@testing-library%2fjest-dom/-/jest-dom-4.2.4.tgz",
       "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
@@ -1663,7 +1663,7 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@testing-library%2freact/-/react-9.5.0.tgz",
       "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
@@ -1673,7 +1673,7 @@
     },
     "@testing-library/user-event": {
       "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@testing-library%2fuser-event/-/user-event-7.2.1.tgz",
       "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
@@ -1877,7 +1877,7 @@
     },
     "@types/testing-library__dom": {
       "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__dom/-/testing-library__dom-6.14.0.tgz",
       "integrity": "sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA==",
       "requires": {
         "pretty-format": "^24.3.0"
@@ -1885,7 +1885,7 @@
     },
     "@types/testing-library__react": {
       "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.3.tgz",
+      "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__react/-/testing-library__react-9.1.3.tgz",
       "integrity": "sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==",
       "requires": {
         "@types/react-dom": "*",
@@ -1895,7 +1895,7 @@
       "dependencies": {
         "@jest/types": {
           "version": "25.5.0",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz",
           "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -1906,7 +1906,7 @@
         },
         "@types/yargs": {
           "version": "15.0.5",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
+          "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz",
           "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
           "requires": {
             "@types/yargs-parser": "*"
@@ -1914,7 +1914,7 @@
         },
         "ansi-styles": {
           "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz",
           "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "requires": {
             "@types/color-name": "^1.1.1",
@@ -1923,7 +1923,7 @@
         },
         "chalk": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz",
           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -1932,7 +1932,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
@@ -1940,17 +1940,17 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://npm.mlabs.pl:443/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "pretty-format": {
           "version": "25.5.0",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/pretty-format/-/pretty-format-25.5.0.tgz",
           "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
           "requires": {
             "@jest/types": "^25.5.0",
@@ -1961,7 +1961,7 @@
         },
         "supports-color": {
           "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz",
           "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
           "requires": {
             "has-flag": "^4.0.0"
@@ -1982,68 +1982,46 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
       "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
     },
-    "@typescript-eslint/eslint-plugin": {
-      "version": "3.9.0",
-      "resolved": "https://npm.mlabs.pl:443/@typescript-eslint%2feslint-plugin/-/eslint-plugin-3.9.0.tgz",
-      "integrity": "sha512-UD6b4p0/hSe1xdTvRCENSx7iQ+KR6ourlZFfYuPC7FlXEzdHuLPrEmuxZ23b2zW96KJX9Z3w05GE/wNOiEzrVg==",
-      "dev": true,
-      "requires": {
-        "@typescript-eslint/experimental-utils": "3.9.0",
-        "debug": "^4.1.1",
-        "functional-red-black-tree": "^1.0.1",
-        "regexpp": "^3.0.0",
-        "semver": "^7.3.2",
-        "tsutils": "^3.17.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-          "dev": true
-        }
-      }
-    },
     "@typescript-eslint/experimental-utils": {
-      "version": "3.9.0",
+      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.1.tgz",
-      "integrity": "sha512-/vSHUDYizSOhrOJdjYxPNGfb4a3ibO8zd4nUKo/QBFOmxosT3cVUV7KIg8Dwi6TXlr667G7YPqFK9+VSZOorNA==",
+      "integrity": "sha512-lkiZ8iBBaYoyEKhCkkw4SAeatXyBq9Ece5bZXdLe1LWBUwTszGbmbiqmQbwWA8cSYDnjWXp9eDbXpf9Sn0hLAg==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/types": "3.9.0",
+        "@typescript-eslint/types": "3.9.1",
-        "@typescript-eslint/typescript-estree": "3.9.0",
+        "@typescript-eslint/typescript-estree": "3.9.1",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "3.9.0",
+      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.9.1.tgz",
-      "integrity": "sha512-rDHOKb6uW2jZkHQniUQVZkixQrfsZGUCNWWbKWep4A5hGhN5dLHMUCNAWnC4tXRlHedXkTDptIpxs6e4Pz8UfA==",
+      "integrity": "sha512-y5QvPFUn4Vl4qM40lI+pNWhTcOWtpZAJ8pOEQ21fTTW4xTJkRplMjMRje7LYTXqVKKX9GJhcyweMz2+W1J5bMg==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "3.9.0",
+        "@typescript-eslint/experimental-utils": "3.9.1",
-        "@typescript-eslint/types": "3.9.0",
+        "@typescript-eslint/types": "3.9.1",
-        "@typescript-eslint/typescript-estree": "3.9.0",
+        "@typescript-eslint/typescript-estree": "3.9.1",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "3.9.0",
+      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.9.1.tgz",
-      "integrity": "sha512-rb6LDr+dk9RVVXO/NJE8dT1pGlso3voNdEIN8ugm4CWM5w5GimbThCMiMl4da1t5u3YwPWEwOnKAULCZgBtBHg==",
+      "integrity": "sha512-15JcTlNQE1BsYy5NBhctnEhEoctjXOjOK+Q+rk8ugC+WXU9rAcS2BYhoh6X4rOaXJEpIYDl+p7ix+A5U0BqPTw==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "3.9.0",
+      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.1.tgz",
-      "integrity": "sha512-N+158NKgN4rOmWVfvKOMoMFV5n8XxAliaKkArm/sOypzQ0bUL8MSnOEBW3VFIeffb/K5ce/cAV0yYhR7U4ALAA==",
+      "integrity": "sha512-IqM0gfGxOmIKPhiHW/iyAEXwSVqMmR2wJ9uXHNdFpqVvPaQ3dWg302vW127sBpAiqM9SfHhyS40NKLsoMpN2KA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "3.9.0",
+        "@typescript-eslint/types": "3.9.1",
-        "@typescript-eslint/visitor-keys": "3.9.0",
+        "@typescript-eslint/visitor-keys": "3.9.1",
         "debug": "^4.1.1",
         "glob": "^7.1.6",
         "is-glob": "^4.0.1",
@@ -2054,16 +2032,16 @@
       "dependencies": {
         "semver": {
           "version": "7.3.2",
-          "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
           "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
           "dev": true
         }
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "3.9.0",
+      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.1.tgz",
-      "integrity": "sha512-O1qeoGqDbu0EZUC/MZ6F1WHTIzcBVhGqDj3LhTnj65WUA548RXVxUHbYhAW9bZWfb2rnX9QsbbP5nmeJ5Z4+ng==",
+      "integrity": "sha512-zxdtUjeoSh+prCpogswMwVUJfEFmCOjdzK9rpNjNBfm6EyPt99x3RrJoBOGZO23FCt0WPKUCOL5mb/9D5LjdwQ==",
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^1.1.0"
@@ -4380,7 +4358,7 @@
     },
     "css.escape": {
       "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "resolved": "https://npm.mlabs.pl:443/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
     "cssdb": {
@@ -4834,7 +4812,7 @@
     },
     "dom-accessibility-api": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
+      "resolved": "https://npm.mlabs.pl:443/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
       "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA=="
     },
     "dom-converter": {
@@ -5186,23 +5164,6 @@
         }
       }
     },
-    "eslint-config-prettier": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
-      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
-      "dev": true,
-      "requires": {
-        "get-stdin": "^6.0.0"
-      },
-      "dependencies": {
-        "get-stdin": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
-          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
-          "dev": true
-        }
-      }
-    },
     "eslint-config-react-app": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz",
@@ -5404,15 +5365,6 @@
         }
       }
     },
-    "eslint-plugin-prettier": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz",
-      "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==",
-      "dev": true,
-      "requires": {
-        "prettier-linter-helpers": "^1.0.0"
-      }
-    },
     "eslint-plugin-react": {
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz",
@@ -5450,12 +5402,6 @@
         }
       }
     },
-    "eslint-plugin-react-hooks": {
-      "version": "4.1.0",
-      "resolved": "https://npm.mlabs.pl:443/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.0.tgz",
-      "integrity": "sha512-36zilUcDwDReiORXmcmTc6rRumu9JIM3WjSvV0nclHoUQ0CNrX866EwONvLR/UqaeqFutbAnVu8PEmctdo2SRQ==",
-      "dev": true
-    },
     "eslint-scope": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
@@ -5815,12 +5761,6 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
       "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
     },
-    "fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
-    },
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@@ -9148,7 +9088,7 @@
     },
     "node-sass": {
       "version": "4.14.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "resolved": "https://npm.mlabs.pl:443/node-sass/-/node-sass-4.14.1.tgz",
       "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "requires": {
         "async-foreach": "^0.1.3",
@@ -9172,17 +9112,17 @@
       "dependencies": {
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "ansi-styles": {
           "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-2.2.1.tgz",
           "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "^2.2.1",
@@ -9194,7 +9134,7 @@
         },
         "cross-spawn": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/cross-spawn/-/cross-spawn-3.0.1.tgz",
           "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
           "requires": {
             "lru-cache": "^4.0.1",
@@ -9203,7 +9143,7 @@
         },
         "lru-cache": {
           "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "resolved": "https://npm.mlabs.pl:443/lru-cache/-/lru-cache-4.1.5.tgz",
           "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
           "requires": {
             "pseudomap": "^1.0.2",
@@ -9212,7 +9152,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "https://npm.mlabs.pl:443/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -9220,12 +9160,12 @@
         },
         "supports-color": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
         },
         "yallist": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "resolved": "https://npm.mlabs.pl:443/yallist/-/yallist-2.1.2.tgz",
           "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
         }
       }
@@ -10880,19 +10820,10 @@
     },
     "prettier": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+      "resolved": "https://npm.mlabs.pl:443/prettier/-/prettier-2.0.5.tgz",
       "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
       "dev": true
     },
-    "prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "requires": {
-        "fast-diff": "^1.1.2"
-      }
-    },
     "pretty-bytes": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
@@ -11743,7 +11674,7 @@
     },
     "redent": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "resolved": "https://npm.mlabs.pl:443/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
       "requires": {
         "indent-string": "^4.0.0",
@@ -13202,7 +13133,7 @@
     },
     "strip-indent": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "resolved": "https://npm.mlabs.pl:443/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "requires": {
         "min-indent": "^1.0.0"
@@ -14007,7 +13938,7 @@
     },
     "wait-for-expect": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz",
+      "resolved": "https://npm.mlabs.pl:443/wait-for-expect/-/wait-for-expect-3.0.2.tgz",
       "integrity": "sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag=="
     },
     "walker": {

package.json

@@ -21,11 +21,7 @@
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
     "@types/styled-components": "^5.1.2",
-    "@typescript-eslint/eslint-plugin": "^3.9.0",
+    "@typescript-eslint/parser": "^3.9.1",
-    "@typescript-eslint/parser": "^3.9.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react-hooks": "^4.1.0",
     "prettier": "^2.0.5",
     "typescript": "^3.9.7"
   },

public/manifest.json

@@ -1,13 +1,13 @@
 {
-	"short_name": "PlanNaPlan",
+  "short_name": "PlanNaPlan",
-	"name": "PlanNaPlan",
+  "name": "PlanNaPlan",
-	"icons": [
+  "icons": [
-		{
+    {
-			"src": "logo.svg"
+      "src": "logo.svg"
-		}
+    }
-	],
+  ],
-	"start_url": ".",
+  "start_url": ".",
-	"display": "standalone",
+  "display": "standalone",
-	"theme_color": "#000000",
+  "theme_color": "#000000",
-	"background_color": "#ffffff"
+  "background_color": "#ffffff"
 }

src/App.tsx

@@ -1,40 +0,0 @@
-import React, { useState, useContext } from 'react';
-import TopBar from './components/TopBar/';
-import Transfer from './components/Transfer/';
-import { Scheduler } from './components/Scheduler';
-import RightBar from './components/RightBar';
-import { CASContext } from './contexts/CASProvider';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  display: flex;
-`;
-
-export const App = () => {
-  const [isOpenTransfer, setOpenTransfer] = useState(false);
-
-  const { logout } = useContext(CASContext)!;
-
-  const handleCloseTransfer = () => {
-    setOpenTransfer(!isOpenTransfer);
-  };
-
-  const onLangChange = () => {
-    console.log('Language changed');
-  };
-
-  const onGroupMouseOver = () => {
-    console.log(`On groupmouse over`);
-  };
-
-  return (
-    <>
-      <TopBar handleTransfer={handleCloseTransfer} onLangChange={onLangChange} handleLogout={logout} />
-      <Transfer isOpen={isOpenTransfer} handleClose={handleCloseTransfer} />
-      <Wrapper>
-        <Scheduler />
-        <RightBar onGroupMouseOver={onGroupMouseOver} />
-      </Wrapper>
-    </>
-  );
-};

src/components/App.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useContext } from 'react';
+import { Topbar } from './Topbar';
+import { Transfer } from './Transfer/Transfer';
+import { Scheduler } from './Scheduler';
+import RightBar from './Rightbar';
+import { CASContext } from '../contexts/CASProvider';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+`;
+
+export const App = () => {
+  const [isOpenTransfer, setOpenTransfer] = useState(false);
+
+  const { logout } = useContext(CASContext)!;
+
+  const handleTransfer = () => {
+    setOpenTransfer(!isOpenTransfer);
+  };
+
+  return (
+    <>
+      <Topbar handleTransfer={handleTransfer} handleLogout={logout} />
+      <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
+      <Wrapper>
+        <Scheduler />
+        <RightBar />
+      </Wrapper>
+    </>
+  );
+};

src/components/CourseCard.tsx

@@ -1,25 +1,15 @@
 import React, { useContext } from 'react';
 import Collapse from '@material-ui/core/Collapse';
-import ExpandIcon from './expand.png';
+import ExpandIcon from '../assets/expand.png';
-import { Course, Group } from '../../../types/index';
+import { Course, Group } from '../types/index';
-import { coursesContext } from '../../../contexts/CoursesProvider';
+import { coursesContext } from '../contexts/CoursesProvider';
-import { group } from 'console';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 
-interface CourseCardProps {
-  onGroupMouseOver: (id: number, name: string) => void;
-  onCardClick: (e: React.MouseEvent) => void;
-  course: Course;
-  id: string;
-  isSelected: boolean;
-}
-
 interface ClassExandIconProps {
   isSelected: boolean;
 }
 
-
 const ClassStyled = styled.div`
   display: flex;
   min-height: 50px;
@@ -51,33 +41,40 @@ const ClassGroupStyled = styled.div`
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
-    margin-top: 5px;
+  margin-top: 5px;
-    width: 20px;
+  width: 20px;
-    transition: 0.2s;
+  transition: 0.2s;
-    transform: ${props => props.isSelected ? 'scaleY(-1);' : 'scaleY(1);'};
+  transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
-`
+`;
 
 const useStyles = makeStyles({
   expanded: {
-    maxHeight: "244px",
+    maxHeight: '244px',
-    overflowY: "auto",
+    overflowY: 'auto',
   },
   '@global': {
     '*::-webkit-scrollbar': {
-      width: '0.4em'
+      width: '0.4em',
     },
     '*::-webkit-scrollbar-track': {
-      '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)'
+      '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
     },
     '*::-webkit-scrollbar-thumb': {
-      borderRadius: "10px",
+      borderRadius: '10px',
       backgroundColor: '#d4b851',
-      outline: '1px solid slategrey'
+      outline: '1px solid slategrey',
-    }
+    },
-  }
+  },
 });
 
-export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) {
+interface CourseCardProps {
+  onCardClick: (e: React.MouseEvent) => void;
+  course: Course;
+  id: string;
+  isSelected: boolean;
+}
+
+export function CourseCard({ onCardClick, course, id, isSelected }: CourseCardProps) {
   const classes = useStyles();
   const { addGroup, courses } = useContext(coursesContext)!;
 
@@ -92,11 +89,7 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
         {courses.map((course, index) => (
           <>
             {course.groups.map((group, index) => (
-              <ClassGroupStyled
+              <ClassGroupStyled key={index} onClick={() => onGroupClick(group)}>
-                key={index}
-                onMouseOver={() => onGroupMouseOver(group.id, course.name)}
-                onClick={() => onGroupClick(group)}
-              >
                 <p>
                   {group.time} {group.room} <br></br> {group.lecturer}
                 </p>{' '}

src/components/Results.tsx

@@ -2,8 +2,8 @@ import React, { useState, useContext, useEffect } from 'react';
 import axios from 'axios';
 import { Input } from '@material-ui/core';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import { coursesContext } from '../../../contexts/CoursesProvider';
+import { coursesContext } from '../contexts/CoursesProvider';
-import { Course } from '../../../types';
+import { Course } from '../types';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -36,7 +36,7 @@ const Dropdown = styled.div`
 
 const useStyles = makeStyles({
   topbarInput: {
-    marginTop:"8px",
+    marginTop: '8px',
     width: '100%',
   },
 });
@@ -121,7 +121,6 @@ export const Results: React.FC = () => {
     // }
   };
 
-
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
       <div>

src/components/Rightbar.tsx

@@ -1,13 +1,9 @@
 import React, { useState, useContext } from 'react';
-import { CourseCard } from './CourseCard/index';
+import { CourseCard } from './CourseCard';
-import { coursesContext } from '../../contexts/CoursesProvider';
+import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 
-interface RightBarProps {
+const RightbarStyled = styled.div`
-  onGroupMouseOver: (id: number, name: string) => void;
-}
-
-const RightBarStyled = styled.div`
   padding-top: 10px;
   padding-left: 15px;
   padding-right: 15px;
@@ -30,11 +26,11 @@ const RightBarStyled = styled.div`
     border: 1px solid;
   }
 `;
-const RightBarTextStyled = styled.div`
+const RightbarTextStyled = styled.div`
   border-bottom: 1px solid;
 `;
 
-export default function RightBar({ onGroupMouseOver }: RightBarProps) {
+export default function Rightbar() {
   const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
 
   const { courses } = useContext(coursesContext)!;
@@ -45,21 +41,20 @@ export default function RightBar({ onGroupMouseOver }: RightBarProps) {
   };
 
   return (
-    <RightBarStyled>
+    <RightbarStyled>
-      <RightBarTextStyled>
+      <RightbarTextStyled>
         Hubert Wrzesiński<br></br>
         Semestr zimowy 2020/2021
-      </RightBarTextStyled>
+      </RightbarTextStyled>
       {courses.map((course, index) => (
         <CourseCard
           course={course}
           key={index}
           id={index.toString()}
-          onGroupMouseOver={onGroupMouseOver}
           onCardClick={onCardClick}
           isSelected={selectedCardId === index.toString()}
         />
       ))}
-    </RightBarStyled>
+    </RightbarStyled>
   );
 }

src/components/Scheduler.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { useState } from "react";
 import { SchedulerEvents } from "./SchedulerEvents";
-import { days, hours } from "../../constants/index";
+import { days, hours } from "../constants/index";
 import styled from "styled-components";
 
 const SchedulerWrapper = styled.div`

src/components/SchedulerEvents.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { SchedulerRow } from '../SchedulerRow';
+import { SchedulerRow } from './SchedulerRow';
-import { coursesContext } from '../../../contexts/CoursesProvider';
+import { coursesContext } from '../contexts/CoursesProvider';
-import { Group } from '../../../types';
+import { Group } from '../types';
 
 interface SchedulerEventsProps {
   cellTop: number;

src/components/SchedulerRow.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group } from '../../../types';
+import { Group } from '../types';
 import styled from 'styled-components';
 
 interface SchedulerEventProps {

src/components/TopBar/index.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import Transfer from './transfer.png';
-import Search from './search.svg';
-import UK from './UK.png';
-import PL from './PL.png';
-import User from './user.png';
-import CloseIcon from './close.svg';
-import { Profile } from './Profile';
-import { Results } from './Results';
-import styled from 'styled-components';
-
-interface TopBarProps {
-  handleTransfer: (e: React.MouseEvent) => void;
-  onLangChange: (lang: boolean) => void;
-  handleLogout: () => void;
-}
-
-interface TopBarState {
-  isPolish: boolean;
-  anchorEl: HTMLElement | null;
-}
-
-const TopBarTekstStyled = styled.div`
-  @media only screen and (max-width: 670px) {
-    display: none;
-  }
-`;
-
-const TopBarStyled = styled.div`
-  background-color: #ffdc61;
-  height: 80px;
-  padding: 5px;
-  font-family: comic sans MS;
-  font-size: 24px;
-  font-weight: bold;
-  display: flex;
-  justify-content: space-between;
-`;
-
-const TopBarLogoStyled = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 0.5;
-  justify-content: flex-start;
-`;
-
-const TopBarLogoImageStyled = styled.img`
-  width: 80px;
-  height: 80px;
-  @media only screen and (max-width: 670px) {
-    width: 60px;
-    height: 60px;
-  }
-`;
-
-const TopBarInputDivStyled = styled.div`
-  width: 70%;
-  display: flex;
-  flex-grow: 3;
-`;
-
-const TopBarInputFieldStyled = styled.div`
-  width: 96%;
-  margin-top: 10px;
-`;
-
-const TopBarInputIconStyled = styled.img`
-  width: 35px;
-  @media only screen and (max-width: 670px) {
-    width: 25px;
-  }
-`;
-
-const TopBarIcon = styled.img`
-  width: 50px;
-  cursor: pointer;
-  @media only screen and (max-width: 670px) {
-    width: 35px;
-  }
-`;
-
-const TopBarIconBox = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  flex-grow: 1.5;
-`;
-
-export default class TopBar extends React.Component<TopBarProps, TopBarState> {
-  constructor(props: TopBarProps) {
-    super(props);
-    this.handleProfile = this.handleProfile.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.onLangChange = this.onLangChange.bind(this);
-    this.handleTransfer = this.handleTransfer.bind(this);
-    this.state = {
-      isPolish: true,
-      anchorEl: null,
-    };
-  }
-
-  handleTransfer(e: React.MouseEvent) {
-    this.props.handleTransfer(e);
-  }
-
-  onLangChange(e: React.MouseEvent) {
-    this.setState({
-      isPolish: !this.state.isPolish,
-    });
-    this.props.onLangChange(this.state.isPolish);
-  }
-
-  handleProfile(event: React.MouseEvent<HTMLImageElement>) {
-    this.setState({
-      anchorEl: event.currentTarget,
-    });
-  }
-
-  handleClose() {
-    this.setState({
-      anchorEl: null,
-    });
-  }
-
-  render() {
-    return (
-      <TopBarStyled>
-        <TopBarLogoStyled>
-          <TopBarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
-          <TopBarTekstStyled> plan na plan </TopBarTekstStyled>
-        </TopBarLogoStyled>
-        <TopBarInputDivStyled>
-          <TopBarInputIconStyled alt="search" src={Search} />
-          <TopBarInputFieldStyled>
-            <Results />
-          </TopBarInputFieldStyled>
-          <TopBarInputIconStyled alt="close" src={CloseIcon} />
-        </TopBarInputDivStyled>
-        <TopBarIconBox>
-          <TopBarIcon alt="transfer" src={Transfer} onClick={this.handleTransfer} />
-          <TopBarIcon alt="change_language" src={this.state.isPolish ? UK : PL} onClick={this.onLangChange} />
-          <TopBarIcon alt="profile" src={User} onClick={this.handleProfile} />
-          <Profile
-            anchorEl={this.state.anchorEl}
-            handleClose={this.handleClose}
-            handleLogout={this.props.handleLogout}
-          />
-        </TopBarIconBox>
-      </TopBarStyled>
-    );
-  }
-}

src/components/Topbar.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import Transfer from '../assets/transfer.png';
+import Search from '../assets/search.svg';
+import UK from '../assets/UK.png';
+import PL from '../assets/PL.png';
+import User from '../assets/user.png';
+import CloseIcon from '../assets/close.svg';
+import { Profile } from './Profile';
+import { Results } from './Results';
+import styled from 'styled-components';
+
+const TopbarTextStyled = styled.div`
+  @media only screen and (max-width: 670px) {
+    display: none;
+  }
+`;
+
+const TopbarStyled = styled.div`
+  background-color: #ffdc61;
+  height: 80px;
+  padding: 5px;
+  font-family: comic sans MS;
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const TopbarLogoStyled = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 0.5;
+  justify-content: flex-start;
+`;
+
+const TopbarLogoImageStyled = styled.img`
+  width: 80px;
+  height: 80px;
+  @media only screen and (max-width: 670px) {
+    width: 60px;
+    height: 60px;
+  }
+`;
+
+const TopbarInputDivStyled = styled.div`
+  width: 70%;
+  display: flex;
+  flex-grow: 3;
+`;
+
+const TopbarInputFieldStyled = styled.div`
+  width: 96%;
+  margin-top: 10px;
+`;
+
+const TopbarInputIconStyled = styled.img`
+  width: 35px;
+  @media only screen and (max-width: 670px) {
+    width: 25px;
+  }
+`;
+
+const TopbarIcon = styled.img`
+  width: 50px;
+  cursor: pointer;
+  @media only screen and (max-width: 670px) {
+    width: 35px;
+  }
+`;
+
+const TopbarIconBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-grow: 1.5;
+`;
+
+interface TopbarProps {
+  handleTransfer: (e: React.MouseEvent) => void;
+  handleLogout: () => void;
+}
+
+export const Topbar = ({ handleTransfer, handleLogout }: TopbarProps) => {
+  const [isPolish, setIsPolish] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
+
+  const onLangChange = (event: React.MouseEvent) => setIsPolish(!isPolish);
+
+  const handleProfile = (event: React.MouseEvent) => setAnchorEl(event.currentTarget as HTMLImageElement);
+
+  const handleClose = () => setAnchorEl(null);
+
+  return (
+    <TopbarStyled>
+      <TopbarLogoStyled>
+        <TopbarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+        <TopbarTextStyled> plan na plan </TopbarTextStyled>
+      </TopbarLogoStyled>
+      <TopbarInputDivStyled>
+        <TopbarInputIconStyled alt="search" src={Search} />
+        <TopbarInputFieldStyled>
+          <Results />
+        </TopbarInputFieldStyled>
+        <TopbarInputIconStyled alt="close" src={CloseIcon} />
+      </TopbarInputDivStyled>
+      <TopbarIconBox>
+        <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
+        <TopbarIcon alt="change_language" src={isPolish ? UK : PL} onClick={onLangChange} />
+        <TopbarIcon alt="profile" src={User} onClick={handleProfile} />
+        <Profile anchorEl={anchorEl} handleClose={handleClose} handleLogout={handleLogout} />
+      </TopbarIconBox>
+    </TopbarStyled>
+  );
+};

src/components/Transfer/Transfer.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import './index.scss';
+import Fade from '@material-ui/core/Fade';
+import Input from '@material-ui/core/Input';
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+
+interface TransferProps {
+  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isOpen: boolean;
+}
+
+const useStyles = makeStyles({
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    textAlign: 'center',
+    alignItems: 'center',
+  },
+});
+
+export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Modal
+        className={classes.wrapper}
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+      >
+        <Fade in={isOpen}>
+          <div className="transfer">
+            <div className="transfer__give">
+              <div className="transfer__text">Oddam</div>
+              <div className="transfer__input2">
+                {' '}
+                <Input
+                  placeholder="Wyszukaj..."
+                  inputProps={{ 'aria-label': 'description' }}
+                  className="top-bar__input-field"
+                />
+              </div>
+            </div>
+            <div className="transfer__receive">
+              <div className="transfer__text">Przyjmę</div>
+              <input className="transfer__input"></input>
+            </div>
+          </div>
+        </Fade>
+      </Modal>
+    </div>
+  );
+};

src/components/Transfer/index.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-import Modal from "@material-ui/core/Modal";
-import "./index.scss";
-import Fade from '@material-ui/core/Fade';
-import Input from "@material-ui/core/Input";
-import { makeStyles } from '@material-ui/core/styles';
-import styled from 'styled-components';
-
-interface TransferProps {
-  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  isOpen: boolean;
-}
-
-interface TransferState {}
-
-const useStyles = makeStyles({
-  wrapper: {
-    display: "flex",
-    justifyContent: "center",
-    textAlign: "center",
-    alignItems: "center",
-  },
-});
-
-export default class Transfer extends React.Component<
-  TransferProps,
-  TransferState
-> {
-  constructor(props: TransferProps) {
-    super(props);
-
-    this.handleClose = this.handleClose.bind(this);
-  }
-
-  handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-    this.props.handleClose(e);
-  }
-
-  render() {
-    return (
-      <div>
-        <Modal
-          className="wrapper"
-          open={this.props.isOpen}
-          onClose={this.handleClose}
-          aria-labelledby="simple-modal-title"
-          aria-describedby="simple-modal-description"
-        >
-          <Fade in={this.props.isOpen}>
-          <div className="transfer">
-              <div className="transfer__give">
-                <div className="transfer__text">Oddam</div>
-                <div className="transfer__input2">					<Input
-						placeholder="Wyszukaj..."
-						inputProps={{ "aria-label": "description" }}
-						className="top-bar__input-field"
-					/></div>
-                </div>
-              <div className="transfer__receive">
-                <div className="transfer__text">Przyjmę</div>
-                <input className="transfer__input"></input>
-              </div>
-          </div>
-          </Fade>
-        </Modal>
-        
-      </div>
-    );
-  }
-}

src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { App } from './App';
+import { App } from './components/App';
 import { CASProvider } from './contexts/CASProvider';
 import { CoursesProvider } from './contexts/CoursesProvider';
 import { GlobalStyles } from './styles/GlobalStyles';