DBC22-1833: Added FontAwesome Pro license token and package

* DBC22-1833: Added FontAwesome Pro license token and package

* DBC1833: Update dockerfile and docker compose

* DBC22-1833: updated .env.example

---------

Co-authored-by: ray <ray@oxd.com>

Author: minORC

.env.example

@@ -40,6 +40,7 @@ REDIS_PORT=<6379/other port of database server>
 # Node
 NODE_ENV=<development/test/production>
 NODE_OPTIONS=<openssl-legacy-provider>
+FONTAWESOME_PACKAGE_TOKEN=<fontawesome package token>
 
 # React
 REACT_APP_API_HOST=<localhost:8000/other hostname:port or IP:port of Django server>

compose/frontend/Dockerfile

@@ -7,6 +7,8 @@ RUN chown node:root /app
 # Install dependencies
 COPY ./src/frontend/package.json /app/
 COPY ./src/frontend/package-lock.json /app/
+COPY ./src/frontend/.npmrc /app/
+ARG FONTAWESOME_PACKAGE_TOKEN
 RUN npm install
 
 # Add rest of the client code

docker-compose.yml

@@ -42,6 +42,7 @@ services:
       dockerfile: ./compose/frontend/Dockerfile
       args:
         DEBUG_BUILD: true
+        FONTAWESOME_PACKAGE_TOKEN: ${FONTAWESOME_PACKAGE_TOKEN}
     stdin_open: true
     tty: true
     ports:

src/frontend/.npmrc

@@ -0,0 +1,12 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+@awesome.me:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN}
+npmScopes:
+ fortawesome:
+   npmAlwaysAuth: true
+   npmRegistryServer: "https://npm.fontawesome.com/"
+   npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
+ awesome.me:
+   npmAlwaysAuth: true
+   npmRegistryServer: "https://npm.fontawesome.com/"
+   npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}

src/frontend/package-lock.json

@@ -4,10 +4,11 @@
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "^1.0.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/pro-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^1.9.6",
     "@tanstack/react-table": "^8.9.3",

src/frontend/package.json

@@ -80,15 +80,18 @@ export default function Filters(props) {
 
 //  const tooltipReststops = (
 //    <Tooltip id="tooltip" className="tooltip-content">
-//      <p>Locations of provincial rest stops run by the province.</p>
+//      <p>Locations of rest stops run by the province.</p>
 //    </Tooltip>
 //  );
 
 //  const tooltipWeather = (
 //    <Tooltip id="tooltip" className="tooltip-content">
-//      <p>Current weather and predictions for a region from Environment Canada.
-//         Winter forecasts for high mountain passes, also from Environment Canada.
-//         Find out how the road is at the moment and what nearby weather stations predict for it in this specific location.</p>
+//     <p>Learn about weather conditions that could affect your route including:
+//       <ul>
+//         <li>Current weather for a region from Environment Canada</li>
+//         <li>Find out how the road is at the moment at nearby weather stations in this specific location</li>
+//       </ul>
+//     </p>
 //    </Tooltip>
 //  );
 
@@ -315,7 +318,9 @@ export default function Filters(props) {
                     <span className="tooltip-info">?</span>
                   </OverlayTrigger>
                 </div>
-
+                */}
+                
+                {/* 
                 <div className={'filter-item filter-item--weather'}>
                   <span className="filter-item__icon">
                     <FontAwesomeIcon icon={faCloudSun} alt="weather" />