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"