Re-organized website

.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
     'no-bitwise': 'off',
     'react/no-array-index-key': 'off',
     'nonblock-statement-body-position': 'off',
-    'react/button-has-type': 'off'
+    'react/button-has-type': 'off',
+    'no-unused-vars': 'warn',
   },
 };

src/components/App.css

@@ -26,12 +26,6 @@ body {
   width: 100%;
   height: 100%;
   background: var(--main);
-  background: linear-gradient(
-    165deg,
-    rgba(87, 35, 117, 1) 0%,
-    rgba(148, 62, 197, 1) 40%,
-    rgba(169, 100, 208, 1) 100%
-  );
   z-index: -1;
 }
 
@@ -58,7 +52,7 @@ b {
 
 .tableWrap {
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 table {
@@ -118,7 +112,7 @@ input[type="checkbox"] {
   display: block;
   background-color: var(--main);
   color: #fff;
-  border-radius: 6px;
+  border-radius: 4px;
   box-sizing: border-box;
   text-align: center;
   width: 100%;
@@ -136,7 +130,7 @@ input[type="checkbox"] {
 
 .boxWrap {
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 4px;
   padding: 10px;
 }
 

src/components/Blocks.css

@@ -1,7 +1,7 @@
 .contentBlock {
   color: var(--text);
   background-color: #fff;
-  border-radius: 6px;
+  border-radius: 4px;
   box-sizing: border-box;
   padding: 20px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

src/components/Blocks.js

@@ -43,7 +43,6 @@ const Blocks = () => {
 
   return (
     <>
-      {initialData && delayedData && frameData && workerData ? (
       <DataContext.Provider
         value={{
           initialData,
@@ -64,12 +63,12 @@ const Blocks = () => {
           <DataBlock title="navigator.userAgent" type="userAgent" />
         </div>
         <div className="centerBlockInner">
-            <DataBlock title="new Date().toString()" type="dateString" />
-            <DataBlock title="new Date().toLocaleString()" type="dateLocale" />
           <DataBlock
             title="new Date().getTimezoneOffset()"
             type="timezoneOffset"
           />
+          <DataBlock title="new Date().toLocaleString()" type="dateLocale" />
+          <DataBlock title="new Date().toString()" type="dateString" />
           <GeolocationBlock />
         </div>
         <div className="centerBlockMobile">
@@ -91,11 +90,6 @@ const Blocks = () => {
           <GeolocationBlock />
         </div>
       </DataContext.Provider>
-      ) : (
-        <div className="contentBlock loadBlock">
-          <center>Loading...</center>
-        </div>
-      )}
     </>
   );
 };

src/components/DataBlock.js

@@ -4,7 +4,18 @@ import Block from './Block';
 import TableRow from './TableRow';
 
 const DataBlock = ({ title, type }) => {
-  const { initialData, delayedData, frameData, workerData } = useContext(DataContext);
+  const { initialData, delayedData, frameData, workerData } =
+    useContext(DataContext);
+
+  // const test = !workerData || !window.Worker.length;
+
+  const isWorkerValid = workerData && window.Worker.length;
+
+  // if(workerData && window.Worker.length) {
+  //   isWorkerValid = true
+  // }
+
+  // console.log(isWorkerValid);
 
   return (
     <Block>
@@ -12,17 +23,33 @@ const DataBlock = ({ title, type }) => {
       <div className="tableWrap">
         <table>
           <tbody>
-            <TableRow title="Initial" value={initialData[type].value} issues={initialData[type].issues} />
+            <TableRow
-            <TableRow title="Delayed" value={delayedData[type].value} issues={delayedData[type].issues} />
+              title="Initial"
-            <TableRow title="Frame" value={frameData[type].value} issues={frameData[type].issues} />
+              value={initialData ? initialData[type].value : ''}
-            <TableRow title="Web worker" value={window.Worker.length ? workerData[type].value : null} issues={window.Worker.length ? workerData[type].issues : ['Web workers blocked']} />
+              issues={initialData ? initialData[type].issues : []}
+            />
+            <TableRow
+              title="Delayed"
+              value={delayedData ? delayedData[type].value : ''}
+              issues={delayedData ? delayedData[type].issues : []}
+            />
+            <TableRow
+              title="Frame"
+              value={frameData ? frameData[type].value : ''}
+              issues={frameData ? frameData[type].issues : []}
+            />
+            <TableRow
+              title="Web worker"
+              value={isWorkerValid ? workerData[type].value : ''}
+              issues={
+                isWorkerValid
+                  ? workerData[type].issues
+                  : ['Web workers blocked']
+              }
+            />
           </tbody>
         </table>
       </div>
-      <p>
-        Date and language data can be used to identify your
-        location. Changing the settings on your computer can prevent this.
-      </p>
     </Block>
   );
 };

src/components/GeolocationBlock.js

@@ -17,9 +17,6 @@ const GeolocationBlock = () => {
             </div>
           ) : (
             <>
-              <p style={{ marginBottom: '10px' }}>
-                This data is not included in location prediction
-              </p>
               <div className="tableWrap">
                 <table>
                   <tbody>
@@ -48,11 +45,6 @@ const GeolocationBlock = () => {
           value={buttonValue}
         />
       )}
-      <p>
-        HTML Geolocation API is used to get the geographical position of a user.
-        Since this can compromise privacy, its not available unless the user
-        approves it.
-      </p>
     </Block>
   );
 };

src/components/HeaderBar.js

@@ -1,5 +1,7 @@
-import './Logo.css';
+// import './HeaderBar.css';
 import { ReactComponent as LogoImg } from '../images/logo.svg';
+import chromeImage from '../images/chrome.png';
+import githubImage from '../images/github.png';
 
 const HeaderBar = () => (
   <div
@@ -8,19 +10,74 @@ const HeaderBar = () => (
       alignItems: 'center',
       justifyContent: 'space-between',
       width: '1024px',
+      margin: '18px 0',
     }}
   >
     <a
       href="."
       style={{
-        width: '180px',
+        width: '206px',
-        margin: '18px 0',
       }}
       alt="LocateJS logo"
     >
       <LogoImg />
     </a>
-    <div>Download</div>
+
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        height: '50px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: '#fff',
+          height: '50px',
+          borderRadius: '4px',
+          padding: '0 18px',
+          boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px',
+          margin: '0 24px 0 0',
+          fontSize: '15px',
+        }}
+      >
+        <img
+          src={chromeImage}
+          alt="Chrome logo"
+          height="28"
+          width="28"
+          style={{
+            marginRight: '8px',
+          }}
+        />
+        Download Extension
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: '#fff',
+          height: '50px',
+          borderRadius: '4px',
+          padding: '0 18px',
+          boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px',
+          fontSize: '15px',
+        }}
+      >
+        <img
+          src={githubImage}
+          alt="Github logo"
+          height="28"
+          width="28"
+          style={{
+            marginRight: '8px',
+          }}
+        />
+        Source Code
+      </div>
+    </div>
   </div>
 );
 

src/components/PredictionBlock.css

@@ -1,6 +1,6 @@
 .mapImg {
   width: 100%;
-  border-radius: 6px;
+  border-radius: 4px;
   border: 1px solid var(--border);
   box-sizing: border-box;
   display: block;

src/components/TableRow.js

@@ -15,7 +15,7 @@ const modalStyles = {
     transform: 'translate(-50%, -50%)',
     padding: '18px',
     border: '1px solid var(--border)',
-    borderRadius: '6px',
+    borderRadius: '4px',
   },
 };