TeamVanced · KevinX8 · Dec 15, 2020 · Dec 14, 2020 · Dec 14, 2020 · Dec 15, 2020
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslintcache
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14.13.0-alpine3.12
+FROM node:14-alpine
 LABEL maintainer="[email protected]"
 
 COPY package.json /src/package.json

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,15 +9,14 @@
 	"private": true,
 	"dependencies": {
 		"classnames": "^2.2.6",
-		"lodash": "^4.17.15",
-		"node-sass": "^4.13.1",
-		"react": "^16.13.1",
-		"react-dom": "^16.13.1",
-		"react-ga": "^2.7.0",
+		"lodash": "^4.17.20",
+		"node-sass": "^4.14.1",
+		"react": "^17.0.1",
+		"react-dom": "^17.0.1",
 		"react-gtm-module": "^2.0.11",
-		"react-icons": "^3.11.0",
-		"react-router-dom": "^5.1.2",
-		"react-scripts": "^3.4.1",
+		"react-icons": "^4.1.0",
+		"react-router-dom": "^5.2.0",
+		"react-scripts": "4.0.1",
 		"react-scroll": "^1.8.1"
 	},
 	"scripts": {

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://www.googletagmanager.com">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/App.js b/src/App.js
@@ -2,12 +2,10 @@ import React, { useRef, useEffect, useState, createContext } from "react";
 import { useLocation, Switch } from "react-router-dom";
 import AppRoute from "./utils/AppRoute";
 import ScrollReveal from "./utils/ScrollReveal";
-// import ReactGA from "react-ga";
-import TagManager from "react-gtm-module";
 
 // Layouts
 import LayoutDefault from "./layouts/LayoutDefault";
-
+import TagManager from "react-gtm-module";
 // Views
 import Home from "./views/Home";
 import ChangeLog from "./views/ChangeLog";
@@ -25,8 +23,6 @@ const tagManagerArgs = {
 	gtmId: "GTM-MXQ4LWV",
 };
 
-TagManager.initialize(tagManagerArgs);
-
 export const ChangeLogContext = createContext();
 export const ShowBraveContext = createContext();
 
@@ -86,4 +82,5 @@ const App = () => {
 	);
 };
 
+TagManager.initialize(tagManagerArgs);
 export default App;
diff --git a/src/assets/scss/core/elements/_forms.scss b/src/assets/scss/core/elements/_forms.scss
@@ -344,112 +344,6 @@ textarea.form-input {
     }
 }
 
-.invert-color {
-
-    .form-label,
-    .form-switch,
-    .form-slider {
-		color: color(label-inverse);
-	}
-
-	.form-input,
-	.form-select,
-	.form-checkbox input,
-	.form-radio input {
-		background-color: color-bg(input-inverse);
-		border-color: color-border(input-inverse);
-
-		&:hover {
-			border-color: color-border(input-hover-inverse);
-		}
-
-		&:active,
-		&:focus {
-			border-color: color-border(input-focus-inverse);
-			background-color: color-bg(input-focus-inverse);
-		}
-
-		&[disabled] {
-			background-color: color-bg(input-disabled-inverse);
-			border-color: color-border(input-disabled-inverse);
-		}
-	}
-
-	.form-input,
-	.form-select {
-	    color: color(input-inverse);
-	}
-
-	.form-input {
-
-	    &::placeholder {
-	        color: color(input-ph-inverse);
-	    }
-
-	    &::-ms-input-placeholder {
-	        color: color(input-ph-inverse);
-	    }
-	}
-
-	.form-select {
-	    background-image: inline-svg('<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 11.4L2.6 6 4 4.6l4 4 4-4L13.4 6 8 11.4z" fill="' + color-icon(select-arrow-inverse) + '" fill-rule="evenodd"/></svg>');
-    }
-
-    .form-checkbox,
-    .form-radio {
-        color: color(check-radio-inverse);
-    }
-
-	.form-checkbox,
-	.form-radio {
-
-		input {
-
-			&:checked {
-				background-color: color-bg(check-checked-inverse) !important;
-				border-color: color-bg(check-checked-inverse) !important;
-			}
-		}
-	}
-
-	.form-switch {
-
-		.form-switch-icon {
-			background: color-bg(switch-inverse);
-
-		}
-
-		input:checked {
-
-			+ .form-switch-icon {
-				background: color-bg(switch-checked-inverse);
-			}
-		}
-    }
-
-    .form-slider {
-
-        input[type=range] {
-            background: color-bg(range-track-inverse);
-
-            &::-webkit-slider-thumb {
-                background-color: color-bg(range-thumb-inverse);
-                background-image: inline-svg('<svg width="12" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8 .5v7L12 4zM0 4l4 3.5v-7z" fill="' + color-icon(range-inverse) + '" fill-rule="nonzero"/></svg>');
-            }
-
-            &::-moz-range-thumb {
-                background-color: color-bg(range-thumb-inverse);
-                background-image: inline-svg('<svg width="12" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8 .5v7L12 4zM0 4l4 3.5v-7z" fill="' + color-icon(range-inverse) + '" fill-rule="nonzero"/></svg>');
-            }
-
-            &::-ms-thumb {
-                background-color: color-bg(range-thumb-inverse);
-                background-image: inline-svg('<svg width="12" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8 .5v7L12 4zM0 4l4 3.5v-7z" fill="' + color-icon(range-inverse) + '" fill-rule="nonzero"/></svg>');
-            }           
-        }
-    }    
-}
-
 .form-group {
 	display: flex;
 

diff --git a/src/components/layout/partials/Logo.js b/src/components/layout/partials/Logo.js
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import Image from '../../elements/Image';
+import LogoImg from "./../../../assets/images/logo.svg";
 
 const Logo = ({
   className,
@@ -21,7 +22,7 @@ const Logo = ({
       <h1 className="m-0">
         <Link to="/">
           <Image
-            src={require('./../../../assets/images/logo.svg')}
+            src={LogoImg}
             alt="Open"
             width={32}
             height={32} />

diff --git a/src/components/sections/Hero.js b/src/components/sections/Hero.js
@@ -7,6 +7,7 @@ import Button from "../elements/Button";
 // import Modal from "../elements/Modal";
 import getRandomQuotes from "../../utils/getRandomQuotes";
 import Image from "../elements/Image";
+import DownloadImg from "./../../assets/images/download.svg";
 import { ChangeLogContext, ShowBraveContext } from "../../App";
 
 import { SiBrave, SiAdguard } from "react-icons/si";
@@ -88,7 +89,7 @@ const Hero = ({
 									>
 										Vanced Manager (v{vancedManager?.version})
 										<Image
-											src={require("./../../assets/images/download.svg")}
+											src={DownloadImg}
 											alt="Features tile icon 01"
 											width={64}
 										/>

diff --git a/src/index.js b/src/index.js
@@ -21,4 +21,4 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register();
diff --git a/src/utils/defSectionSplitProps.js b/src/utils/defSectionSplitProps.js
@@ -0,0 +1 @@
+export { SectionSplitProps as default } from "./SectionProps";
diff --git a/src/views/Home.js b/src/views/Home.js
@@ -1,14 +1,14 @@
-import React from "react";
+import React, {lazy, Suspense} from "react";
 // import sections
 import Hero from "../components/sections/Hero";
 import FeaturesTiles from "../components/sections/FeaturesTiles";
 import FeaturesSplit from "../components/sections/FeaturesSplit";
+//const FeaturesSplit = lazy(() => import("../components/sections/FeaturesSplit"));
 // import Testimonial from "../components/sections/Testimonial";
 // import Cta from "../components/sections/Cta";
-
 const Home = () => {
 	return (
-		<>
+		<Suspense fallback={<div>Loading..</div>}>
 			<Hero className="illustration-section-01" />
 			<FeaturesTiles />
 			<FeaturesSplit
@@ -20,7 +20,8 @@ const Home = () => {
 			/>
 			{/* <Testimonial topDivider /> */}
 			{/* <Cta split /> */}
-		</>
+		</Suspense>
+
 	);
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { SectionSplitProps as default } from "./SectionProps";