diff --git a/frontend/package.json b/frontend/package.json
index 5f24c63..acf0bcc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
"html-react-parser": "^1.2.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
+ "react-github-btn": "^1.2.1",
"react-modal": "^3.14.3",
"react-scripts": "4.0.3",
"react-webworker": "^2.1.0",
diff --git a/frontend/src/components/Github.js b/frontend/src/components/Github.js
index cc521b7..7557f28 100644
--- a/frontend/src/components/Github.js
+++ b/frontend/src/components/Github.js
@@ -1,15 +1,15 @@
-import { ReactComponent as GithubImg } from '../images/github.svg';
+import GitHubButton from 'react-github-btn';
const Github = () => (
-
-
-
+
+
+ Star
+
+
);
export default Github;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 703d4c5..3a7b834 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -15,10 +15,10 @@ import FiltersBlock from './FiltersBlock';
const ScanBlocks = () => (
<>
-
+
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index 1bcef8a..007ba86 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -1,6 +1,6 @@
import ScanBlock from './ScanBlock';
import Table from './Table';
-import { getScreen } from './main';
+import getScreen from '../utils/screen';
const ScreenBlock = () => (
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 2de55a1..d727c65 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -6,8 +6,6 @@ export {
getNavigator,
checkNavigatorProperties,
checkWebWorker,
- getScreen,
- checkScreenProperties,
detectTor,
getIntl,
};
@@ -142,93 +140,6 @@ const getAppVersion = () => ({
],
});
-const getProductSub = () => ({
- key: 'productSub',
- value: navigator.productSub,
- issues: [
- checkNavigatorProperties('productSub'),
- checkNavigatorValue('productSub'),
- checkNavigatorPrototype('productSub'),
- ],
-});
-
-const getWidth = () => ({
- key: 'width',
- value: window.screen.width,
- issues: [
- checkScreenProperties('width'),
- checkScreenValue('width'),
- checkScreenPrototype('width'),
- checkWidth(),
- ],
-});
-
-const getOuterWidth = () => ({
- key: 'outerWidth',
- value: window.outerWidth,
- // issues: checkWindowProperties('outerWidth'),
- issues: [],
-});
-
-const getAvailWidth = () => ({
- key: 'availWidth',
- value: window.screen.availWidth,
- issues: [
- checkScreenProperties('availWidth'),
- checkScreenValue('availWidth'),
- checkScreenPrototype('availWidth'),
- checkWidth(),
- ],
-});
-
-const getHeight = () => ({
- key: 'height',
- value: window.screen.height,
- issues: [
- checkScreenProperties('height'),
- checkScreenValue('height'),
- checkScreenPrototype('height'),
- ],
-});
-
-const getOuterHeight = () => ({
- key: 'outerHeight',
- value: window.outerHeight,
- // issues: checkWindowProperties('outerHeight'),
- issues: [],
-});
-
-const getAvailHeight = () => ({
- key: 'availHeight',
- value: window.screen.availHeight,
- issues: [
- checkScreenProperties('availHeight'),
- checkScreenValue('availHeight'),
- checkScreenPrototype('availHeight'),
- checkHeight(),
- ],
-});
-
-const getPixelDepth = () => ({
- key: 'pixelDepth',
- value: window.screen.pixelDepth,
- issues: [
- checkScreenProperties('pixelDepth'),
- checkScreenValue('pixelDepth'),
- checkScreenPrototype('pixelDepth'),
- ],
-});
-
-const getColorDepth = () => ({
- key: 'colorDepth',
- value: window.screen.colorDepth,
- issues: [
- checkScreenProperties('colorDepth'),
- checkScreenValue('colorDepth'),
- checkScreenPrototype('colorDepth'),
- ],
-});
-
const getNavigator = () => [
getDeviceMemory(),
getHardwareConcurrency(),
@@ -243,18 +154,6 @@ const getNavigator = () => [
getPlugins(),
getVendor(),
getAppVersion(),
- getProductSub(),
-];
-
-const getScreen = () => [
- getWidth(),
- getAvailWidth(),
- getOuterWidth(),
- getHeight(),
- getAvailHeight(),
- getOuterHeight(),
- getPixelDepth(),
- getColorDepth(),
];
// const getDateNow = () => ({
@@ -276,18 +175,6 @@ const getTimezone = () => ({
issues: [],
});
-// const getHourCycle = () => ({
-// key: 'hourCycle',
-// value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
-// issues: [],
-// });
-
-// const getCalendar = () => ({
-// key: 'calendar',
-// value: Intl.DateTimeFormat().resolvedOptions().calendar,
-// issues: [],
-// });
-
const getIntl = () => [getLocale(), getTimezone()];
const detectTor = () => {
@@ -305,7 +192,6 @@ const detectTor = () => {
// const getTimezoneOffset = () => ({
// key: 'timezoneOffset',
-// title: 'Timezone offset',
// value: new Date().getTimezoneOffset(),
// issues: [],
// });
@@ -374,48 +260,6 @@ const checkNavigatorPrototype = (key) => {
return null;
};
-const checkScreenProperties = (key) => {
- if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
- return 'Failed undefined properties';
- }
- return null;
-};
-
-const checkScreenValue = (key) => {
- if (
- Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
- ) {
- return 'Failed descriptor.value undefined';
- }
- return null;
-};
-
-const checkScreenPrototype = (key) => {
- try {
- // eslint-disable-next-line no-unused-vars
- const check = Screen.prototype[key];
- return 'Failed Navigator.prototype';
- } catch (err) {
- // eslint-disable-next-line no-unused-vars
- const check = '';
- }
- return null;
-};
-
-const checkWidth = () => {
- if (window.screen.availWidth > window.screen.width) {
- return 'Avail width is wider then width';
- }
- return null;
-};
-
-const checkHeight = () => {
- if (window.screen.availHeight > window.screen.height) {
- return 'Avail height is wider then height';
- }
- return null;
-};
-
const checkWebWorker = (key, setWorkerData) => {
let w;
if (typeof w === 'undefined') {
diff --git a/frontend/src/images/github.svg b/frontend/src/images/github.svg
deleted file mode 100644
index bc1ce35..0000000
--- a/frontend/src/images/github.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 5b7d00c..a702a74 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -29,8 +29,7 @@
z-index: -1;
}
-.github {
- width: 36px;
+.gitHubButton {
position: fixed;
top: 12px;
right: 12px;
@@ -40,11 +39,11 @@
display: flex;
align-items: center;
justify-content: center;
- margin: 13px 0;
+ margin: 20px 0;
}
.logo {
- width: 270px;
+ width: 250px;
}
.centerBlockOuter {
@@ -54,7 +53,7 @@
}
.centerBlockInner {
- width: 450px;
+ width: 500px;
}
.contentBlock {
diff --git a/frontend/src/utils/screen.js b/frontend/src/utils/screen.js
new file mode 100644
index 0000000..7426bd0
--- /dev/null
+++ b/frontend/src/utils/screen.js
@@ -0,0 +1,131 @@
+const getWidth = () => ({
+ key: 'width',
+ value: window.screen.width,
+ issues: [
+ checkScreenProperties('width'),
+ checkScreenValue('width'),
+ checkScreenPrototype('width'),
+ checkWidth(),
+ ],
+});
+
+const getOuterWidth = () => ({
+ key: 'outerWidth',
+ value: window.outerWidth,
+ // issues: checkWindowProperties('outerWidth'),
+ issues: [],
+});
+
+const getAvailWidth = () => ({
+ key: 'availWidth',
+ value: window.screen.availWidth,
+ issues: [
+ checkScreenProperties('availWidth'),
+ checkScreenValue('availWidth'),
+ checkScreenPrototype('availWidth'),
+ checkWidth(),
+ ],
+});
+
+const getHeight = () => ({
+ key: 'height',
+ value: window.screen.height,
+ issues: [
+ checkScreenProperties('height'),
+ checkScreenValue('height'),
+ checkScreenPrototype('height'),
+ ],
+});
+
+const getOuterHeight = () => ({
+ key: 'outerHeight',
+ value: window.outerHeight,
+ // issues: checkWindowProperties('outerHeight'),
+ issues: [],
+});
+
+const getAvailHeight = () => ({
+ key: 'availHeight',
+ value: window.screen.availHeight,
+ issues: [
+ checkScreenProperties('availHeight'),
+ checkScreenValue('availHeight'),
+ checkScreenPrototype('availHeight'),
+ checkHeight(),
+ ],
+});
+
+const getPixelDepth = () => ({
+ key: 'pixelDepth',
+ value: window.screen.pixelDepth,
+ issues: [
+ checkScreenProperties('pixelDepth'),
+ checkScreenValue('pixelDepth'),
+ checkScreenPrototype('pixelDepth'),
+ ],
+});
+
+const getColorDepth = () => ({
+ key: 'colorDepth',
+ value: window.screen.colorDepth,
+ issues: [
+ checkScreenProperties('colorDepth'),
+ checkScreenValue('colorDepth'),
+ checkScreenPrototype('colorDepth'),
+ ],
+});
+
+const checkScreenValue = (key) => {
+ if (
+ Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+ ) {
+ return 'Failed descriptor.value undefined';
+ }
+ return null;
+};
+
+const checkScreenPrototype = (key) => {
+ try {
+ // eslint-disable-next-line no-unused-vars
+ const check = Screen.prototype[key];
+ return 'Failed Navigator.prototype';
+ } catch (err) {
+ // eslint-disable-next-line no-unused-vars
+ const check = '';
+ }
+ return null;
+};
+
+const checkWidth = () => {
+ if (window.screen.availWidth > window.screen.width) {
+ return 'Avail width is wider then width';
+ }
+ return null;
+};
+
+const checkHeight = () => {
+ if (window.screen.availHeight > window.screen.height) {
+ return 'Avail height is wider then height';
+ }
+ return null;
+};
+
+const checkScreenProperties = (key) => {
+ if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+ return 'Failed undefined properties';
+ }
+ return null;
+};
+
+const getScreen = () => [
+ getWidth(),
+ getAvailWidth(),
+ getOuterWidth(),
+ getHeight(),
+ getAvailHeight(),
+ getOuterHeight(),
+ getPixelDepth(),
+ getColorDepth(),
+];
+
+export default getScreen;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b4f7e82..8b910e1 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5205,6 +5205,11 @@ getpass@^0.1.1:
dependencies:
assert-plus "^1.0.0"
+github-buttons@^2.8.0:
+ version "2.19.1"
+ resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.19.1.tgz#9703755a4da1c5b229d3f1d875c2f787efa59bd5"
+ integrity sha512-us6ZC0bFYLfBq2CkZJJRpdPP5JlB6+kWFTdw8iK3E7yoMKdoLhDkqQHelJ+39UVR2zQbfXN5gNt3cVYp4fAuXA==
+
glob-parent@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz"
@@ -9039,6 +9044,13 @@ react-error-overlay@^6.0.9:
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
+react-github-btn@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.1.tgz#ece93f609a4bad5e7eb9f47ae49bfaba69466dce"
+ integrity sha512-/gXD01mHAOhW0xYuNJFDn08OGjaMXOjcg6GCKVPdHvQcWzswH4aT85DLDAAJ6Zhw/71veSIH4Kx1BTBfy69SsA==
+ dependencies:
+ github-buttons "^2.8.0"
+
react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"