bug fix

src/assets/stylesheets/statistics.scss

@@ -62,7 +62,7 @@ $white: #fff;
   font-family: "Gotham Medium";
   margin: 10px;
   background-color: transparent;
-  margin-bottom: 20px;
+  margin-bottom: 25px;
 }
 
 .statistics-grid {
@@ -70,26 +70,23 @@ $white: #fff;
   height: auto;
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: flex-start;
   background-color: transparent;
   overflow: visible;
-  // add row gap
-  gap: 20px;
 }
 
 .statistics-grid-container {
-  width: 32%;
+  width: calc(((100% / 3)) - (12px));
-  height: 300px;
+  height: 270px;
   background: linear-gradient(
     -30deg,
     rgb(187 208 236) 0%,
     rgb(255 255 255 / 100%) 100%
   );
-  margin-top: 5px;
+  display: flex;
-  display: flex; /* Center the content */
+  align-items: center;
-  align-items: center; /* Center vertically */
+  justify-content: center;
-  justify-content: center; /* Center horizontally */
   border-radius: 20px;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
@@ -97,51 +94,19 @@ $white: #fff;
   filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   cursor: pointer;
   overflow: visible;
+  margin-bottom: 15px;
+}
+
+.statistics-grid-container:nth-child(3n + 1) {
+  margin-right: 15px;
+}
+
+.statistics-grid-container:nth-child(3n) {
+  margin-left: 15px;
 }
 
 .statistics-iframe {
-  width: 95%; /* Ensure iframes take up full width of their grid cell */
+  width: 95%;
-  height: 95%; /* Adjust the height of iframes */
+  height: 95%;
   border-radius: 20px;
-
-  // Debug Borders
-  // border-width: 5px;
-  // border-style: solid;
 }
-
-// .summary-iframe {
-//   width: 400px;
-//   height: 400px;
-//   min-height: 1px;
-//   background: transparent;
-//   margin: 10px;
-//   display: block;
-// }
-
-// .summary-fieldContainer-pp {
-//   width: 25%;
-//   height: 300px;
-//   border-radius: 20px;
-//   text-align: center;
-//   padding: 10px;
-// }
-
-// .summary-fieldContainer-graph {
-//   width: 25%;
-// }
-
-// .summary-dashboard {
-//   width: 100%;
-//   height: 900px;
-//   border-radius: 20px;
-//   text-align: center;
-//   padding: 10px;
-// }
-
-// .summary-fieldContainer-dashboard {
-//   width: 100%;
-//   height: 300px;
-//   border-radius: 20px;
-//   text-align: center;
-//   padding: 10px;
-// }

src/components/MapComponent.js

@@ -50,9 +50,13 @@ export default class MapComponent extends Component {
     for (let i = 0; i < 54; i++) {
       let cable = cableList[i];
       if (cable === undefined) {
-        document.getElementById("inner-" + i).style.border =
+        try {
-          "#bdbdbd 4px solid";
+          document.getElementById("inner-" + i).style.border =
-        document.getElementById("text-" + i).style.color = "#bdbdbd";
+            "#bdbdbd 4px solid";
+          document.getElementById("text-" + i).style.color = "#bdbdbd";
+        } catch (error) {
+          console.error("Error updating selection:", error);
+        }
       }
     }
   }
@@ -116,12 +120,16 @@ export default class MapComponent extends Component {
     }
 
     let { selected } = this.state;
-    document.getElementById("inner-" + selected).style.border =
+    try {
-      "#004990 4px solid";
+      document.getElementById("inner-" + selected).style.border =
-    document.getElementById("text-" + selected).style.color = "#004990";
+        "#004990 4px solid";
-    this.setState({ selected: id });
+      document.getElementById("text-" + selected).style.color = "#004990";
-    document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
+      this.setState({ selected: id });
-    document.getElementById("text-" + id).style.color = "#007cbe";
+      document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
+      document.getElementById("text-" + id).style.color = "#007cbe";
+    } catch (error) {
+      console.error("Error selecting cable:", error);
+    }
 
     let cab = this.state.cableList[id];
     this.setState({ cable: cab });

src/components/SettingsComponent.js

@@ -56,7 +56,7 @@ export default class SettingsComponent extends Component {
                 </a>
               </div>
               <div className="entry">
-                <span className="entry-name">Fannie,</span>
+                <span className="entry-name">Fannie Yu,</span>
                 <span className="entry-position">
                   CAD Design, Fabrication Planner
                 </span>
@@ -75,7 +75,7 @@ export default class SettingsComponent extends Component {
                 <div className="entry-links"></div>
               </div>
               <div className="entry">
-                <span className="entry-name">Scarlett Deck,</span>
+                <span className="entry-name">Scarlett Kadan,</span>
                 <span className="entry-position">
                   Front-End Dev, UI/UX Designer,
                 </span>