Progressively modernize

Signed-off-by: Daniel Krook <krook@linux.com>

Author: krook

src/components/Banner.js

@@ -7,13 +7,13 @@ const Banner = () => {
 
   return (
     <section className="landing__banner">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col col__banner__title">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col col__banner__title">
             <h1 className="BannerTitle">Pyrrha</h1>
             <h2 className="BannerSubtitle_Responsive">{t("bannerMission")}</h2>
           </div>
-          <div className="bx--col col__banner__subtitle">
+          <div className="cds--col col__banner__subtitle">
             {" "}
             <h2 className="BannerSubtitle">{t("bannerMission")}</h2>
           </div>

src/components/Sensors.js src/components/Devices.jssrc/components/Sensors.js renamed to src/components/Devices.js

@@ -11,7 +11,7 @@ import marco from "../content/assets/Marco-Emilio-Rodriguez-Serrano.jpeg";
 import joan from "../content/assets/Joan-Herrera.jpeg";
 import artur from "../content/assets/Artur-Alvarez.jpeg";
 
-const SensorInfo = () => {
+const DeviceInfo = () => {
   const { t } = useContext(AppContext);
 
   return (
@@ -29,9 +29,9 @@ const SensorInfo = () => {
           <Column lg={4}></Column>
           <Column lg={6}>
             <img
-              className="sensor-image"
+              className="device-image"
               src={board}
-              alt="A 3D printed sensor"
+              alt="A 3D printed device"
             ></img>
           </Column>
         </Row>
@@ -215,4 +215,4 @@ const NetworkInfo = () => {
   );
 };
 
-export { SensorInfo, DashboardInfo, NetworkInfo };
+export { DeviceInfo, DashboardInfo, NetworkInfo };

src/content/en.json

@@ -10,7 +10,7 @@
   "architectureTitle": "Pyrrha in a nutshell",
   "architectureDescription": "A two-way system that collects toxin readings, analyzes them, and sends actionable data back to the team.",
   "architectureDescription1": "1. The firefighter logs into the ruggedized Samsung smartphone via IBM App ID. Devices are paired through Bluetooth.",
-  "architectureDescription2": "2. The device sensors capture toxin levels. The device sends stored readings to the phone at regular intervals.",
+  "architectureDescription2": "2. The device captures toxin levels. The device sends stored readings to the phone at regular intervals.",
   "architectureDescription3": "3. The mobile application relays data to the IBM IoT platform.",
   "architectureDescription4": "4. The MQTT client service listens for incoming messages from the IBM IoT platform.",
   "architectureDescription5": "5. The MQTT client stores the data in the MariaDB relational database.",

src/pages/Landing.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Header from "../components/Header";
-import { SensorInfo, DashboardInfo, NetworkInfo } from "../components/Sensors";
+import { DeviceInfo, DashboardInfo, NetworkInfo } from "../components/Devices";
 import Banner from "../components/Banner";
 import WhoWeAre from "../components/WhoWeAre";
 import Footer from "../components/Footer";
@@ -12,7 +12,7 @@ const Landing = () => {
       <main>
         <Banner />
         <WhoWeAre />
-        <SensorInfo />
+        <DeviceInfo />
         <DashboardInfo />
         <NetworkInfo />
       </main>

src/styles/Landing.scss

@@ -2,12 +2,12 @@
 // https://www.carbondesignsystem.com/guidelines/typography/productive
 
 // Header
-.bx--header .bx--header__name {
+.cds--header .cds--header__name {
   @include carbon--type-style("expressive-heading-04");
   font-size: 1rem;
 }
 
-.bx--header__nav {
+.cds--header__nav {
   display: block;
   position: absolute;
   right: 95px;
@@ -174,40 +174,40 @@
     margin-bottom: 4rem;
     float: left;
 
-    .bx--btn--primary {
+    .cds--btn--primary {
       background-color: #cc3d3d;
       max-width: 14rem;
     }
 
     @media screen and (max-width: 778px) {
       flex-direction: column;
 
-      .bx--btn,
-      .bx--btn--primary {
+      .cds--btn,
+      .cds--btn--primary {
         max-width: none;
         margin: 1rem 0;
       }
     }
 
-    .bx--btn--primary:hover {
+    .cds--btn--primary:hover {
       background-color: #5f6163;
     }
   }
 }
 
-// Sensor information section.
+// Device information section.
 .info-section {
   margin-bottom: 10vw;
 
   .info-text {
     padding-top: 40px;
     border-top: 1px solid #cc3d3d;
-    div[class^="bx--col"] {
+    div[class^="cds--col"] {
       margin-top: 10px;
     }
   }
 
-  .sensor-image {
+  .device-image {
     margin-top: 2vw;
     margin-bottom: 1.5vw;
     width: 100%;