package-lock.json

@@ -21,9 +21,9 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "stylelint": "^16.5.0",
+        "stylelint": "^16.3.1",
         "stylelint-config-standard-scss": "^13.0.0",
-        "stylelint-scss": "^6.3.0"
+        "stylelint-scss": "^6.2.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -6335,9 +6335,9 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.2.2",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
-      "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
+      "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
       "dev": true,
       "engines": {
         "node": ">=12 || >=16"
@@ -16181,20 +16181,20 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "16.5.0",
+      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.3.1.tgz",
-      "integrity": "sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==",
+      "integrity": "sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw==",
       "dev": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^2.6.1",
         "@csstools/css-tokenizer": "^2.2.4",
         "@csstools/media-query-list-parser": "^2.1.9",
-        "@csstools/selector-specificity": "^3.0.3",
+        "@csstools/selector-specificity": "^3.0.2",
         "@dual-bundle/import-meta-resolve": "^4.0.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^9.0.0",
-        "css-functions-list": "^3.2.2",
+        "css-functions-list": "^3.2.1",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
@@ -16223,7 +16223,7 @@
         "strip-ansi": "^7.1.0",
         "supports-hyperlinks": "^3.0.0",
         "svg-tags": "^1.0.0",
-        "table": "^6.8.2",
+        "table": "^6.8.1",
         "write-file-atomic": "^5.0.1"
       },
       "bin": {
@@ -16310,12 +16310,12 @@
       }
     },
     "node_modules/stylelint-scss": {
-      "version": "6.3.0",
+      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.2.1.tgz",
-      "integrity": "sha512-8OSpiuf1xC7f8kllJsBOFAOYp/mR/C1FXMVeOFjtJPw+AFvEmC93FaklHt7MlOqU4poxuQ1TkYMyfI0V+1SxjA==",
+      "integrity": "sha512-ZoGLbVb1keZYRVGQlhB8G6sZOoNqw61whzzzGFWp05N12ErqLFfBv3JPrXiMLZaW98sBS7K/vUQhRnvUj4vwdw==",
       "dev": true,
       "dependencies": {
-        "known-css-properties": "^0.30.0",
+        "known-css-properties": "^0.29.0",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-selector-parser": "^6.0.15",
@@ -16328,10 +16328,16 @@
         "stylelint": "^16.0.2"
       }
     },
+    "node_modules/stylelint-scss/node_modules/known-css-properties": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
+      "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
+      "dev": true
+    },
     "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
-      "version": "3.1.1",
+      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
-      "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
+      "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
       "dev": true,
       "funding": [
         {

package.json

@@ -41,9 +41,9 @@
     ]
   },
   "devDependencies": {
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-scss": "^6.3.0"
+    "stylelint-scss": "^6.2.1"
   },
   "stylelint": {
     "extends": [

src/assets/stylesheets/browse.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
   background-color: transparent;
   margin-bottom: 50px;
   animation: fadeInUp;
-  animation-duration: 0.5s;
+  animation-duration: .5s;
 }
 
 .browse-title {
@@ -71,8 +71,8 @@ $white: #fff;
   height: 150px;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   display: flex;
   align-items: center;
@@ -86,7 +86,7 @@ $white: #fff;
   cursor: pointer;
   text-decoration: none;
   background-color: transparent;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 .browse-cable-image {
@@ -97,7 +97,7 @@ $white: #fff;
   background-color: white;
   border: $gray solid 1px;
   border-radius: 10px;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   aspect-ratio: 1/1;
 }
 
@@ -146,9 +146,10 @@ $white: #fff;
   font-size: 15px;
   margin-bottom: 2px;
   color: $light-blue;
+  color: $light-blue;
   width: auto;
-  font-family: "Gotham Medium";
   height: auto;
+  font-family: "Gotham Medium";
 }
 
 .browse-search {
@@ -156,8 +157,8 @@ $white: #fff;
   height: 50px;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   display: flex;
   align-items: center;
@@ -170,7 +171,7 @@ $white: #fff;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   background-color: transparent;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 .browse-search input {

src/assets/stylesheets/cabledetail.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -49,7 +49,7 @@ $white: #fff;
   overflow: hidden;
   background-color: transparent;
   animation: fadeInUp;
-  animation-duration: 0.5s;
+  animation-duration: .5s;
 }
 
 .cable-main {
@@ -57,8 +57,8 @@ $white: #fff;
   height: 200px;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   display: flex;
   align-items: center;
@@ -71,7 +71,7 @@ $white: #fff;
   margin-top: 5px;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 .cable-actions {
@@ -96,8 +96,8 @@ $white: #fff;
   height: 100%;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   display: flex;
   align-items: center;
@@ -107,7 +107,7 @@ $white: #fff;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   cursor: pointer;
   overflow: visible;
 }
@@ -116,8 +116,8 @@ $white: #fff;
   width: auto;
   background: linear-gradient(
     -30deg,
-    rgb(187 194 236) 0%,
+    rgb(187, 194, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
 }
 
@@ -143,7 +143,7 @@ $white: #fff;
   margin-right: 25px;
   border: $gray solid 1px;
   border-radius: 10px;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 .cable-main-label {
@@ -183,6 +183,7 @@ $white: #fff;
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;
+  color: $light-blue;
   width: auto;
   height: auto;
   font-family: "Gotham Medium";
@@ -193,7 +194,8 @@ $white: #fff;
   height: auto;
   background-color: transparent;
   display: flex;
-  flex-flow: row wrap;
+  flex-wrap: wrap;
+  flex-direction: row;
   align-items: stretch;
   flex-grow: 1;
   justify-content: space-between;
@@ -227,7 +229,7 @@ $white: #fff;
   border: $light-blue solid 2px;
   border-radius: 20px;
   table-layout: fixed;
-  border-spacing: 0;
+  border-spacing: 0px;
 }
 
 .row,
@@ -337,9 +339,9 @@ th:first-child {
 
 .modal-close {
   cursor: pointer;
-  padding: 15px 35px;
+  padding: 15px 35px 15px 35px;
   border-radius: 20px;
   background-color: $gray;
-  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   transition: all 0.3s ease-in-out;
 }

src/assets/stylesheets/map.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -49,7 +49,7 @@ $white: #fff;
   overflow: visible;
   background-color: transparent;
   animation: fadeInUp;
-  animation-duration: 0.5s;
+  animation-duration: .5s;
 }
 
 .map-title {
@@ -75,13 +75,12 @@ $white: #fff;
   overflow: visible;
 }
 
-.map-box,
+.map-box, .map-details {
-.map-details {
   height: 68vh;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   display: flex;
   align-items: center;
@@ -91,7 +90,7 @@ $white: #fff;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   overflow: visible;
 }
 
@@ -116,16 +115,15 @@ $white: #fff;
   overflow: visible;
 }
 
-.map-box-circle,
+.map-box-circle, .map-box-spacer {
-.map-box-spacer {
   width: 60px;
   height: 60px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: linear-gradient(
     15deg,
-    rgb(223 223 223) 0%,
+    rgb(223, 223, 223) 0%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   margin-left: 3px;
   margin-right: 3px;
@@ -136,13 +134,13 @@ $white: #fff;
 }
 
 .map-box-circle {
-  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
   cursor: pointer;
 }
 
 .map-box-spacer {
   background-color: transparent;
-  box-shadow: 0 2px 2px rgb(0 0 0 / 0%);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
   border: 1px solid transparent;
   background: transparent;
 }
@@ -176,10 +174,11 @@ $white: #fff;
   width: auto;
   height: 35%;
   aspect-ratio: 1/1;
+  background-color: transparent;
   border: $gray solid 1px;
   border-radius: 20px;
   background-color: white;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   margin-bottom: 30px;
   margin-top: 30px;
 }
@@ -203,7 +202,7 @@ $white: #fff;
   text-align: left;
   height: auto;
   font-family: "Gotham Bold";
-  margin-bottom: 3px;
+  margin-bottom: 3px;;
 }
 
 .map-cable-shortdescription {
@@ -236,6 +235,7 @@ $white: #fff;
   font-size: 15px;
   margin-bottom: 5px;
   color: $light-blue;
+  color: $light-blue;
   width: 100%;
   text-align: left;
   height: auto;
@@ -248,8 +248,8 @@ $white: #fff;
   border-radius: 20px; 
   background: linear-gradient(
     15deg,
-    rgb(223 223 223) 0%,
+    rgb(223, 223, 223) 0%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   margin-left: 3px;
   margin-right: 3px;
@@ -257,7 +257,7 @@ $white: #fff;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease-in-out;
-  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
   cursor: pointer;
   margin-bottom: 40px;
   text-decoration: none;

src/assets/stylesheets/navbar.scss

@@ -17,7 +17,7 @@ $white: #fff;
 
 .navbar-top {
   width: 90%;
-  height: 94%;
+  height: 100%;
   display: flex;
   align-items: left;
   justify-content: flex-start;
@@ -78,8 +78,7 @@ $white: #fff;
   flex-direction: column;
 }
 
-.navbar-list-item,
+.navbar-list-item {
-.navbar-return {
   width: 100%;
   height: 50px;
   margin: 0 0 3px;
@@ -93,8 +92,7 @@ $white: #fff;
   cursor: pointer;
 }
 
-.navbar-list-item span,
+.navbar-list-item span {
-.navbar-return span {
   background-color: transparent;
   width: auto;
   height: auto;
@@ -103,101 +101,3 @@ $white: #fff;
   color: $dark-blue;
   margin-left: 10px;
 }
-
-.navbar-return {
-  width: 90%;
-  align-items: center;
-  justify-content: center;
-  background-color: $medium-blue;
-}
-
-.navbar-return span {
-  color: $white;
-  margin-left: 0;
-}
-
-.modal-container {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.modal-title,
-.modal-body,
-.modal-close,
-.modal-return {
-  width: auto;
-  height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  flex-direction: column;
-}
-
-.modal-title span {
-  width: auto;
-  height: auto;
-  font-family: "Gotham Bold";
-  font-size: 32px;
-  color: $dark-blue;
-  background-color: transparent;
-  margin-bottom: 5px;
-}
-
-.modal-body span {
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  font-family: "Gotham Medium";
-  font-size: 18px;
-  color: $medium-blue;
-  margin-top: 10px;
-  margin-bottom: 30px;
-}
-
-.modal-tray {
-  width: auto;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  margin-bottom: 30px;
-  overflow: visible;
-}
-
-.modal-close,
-.modal-return {
-  cursor: pointer;
-  padding: 15px 35px;
-  border-radius: 20px;
-  background-color: $gray;
-  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
-  transition: all 0.3s ease-in-out;
-}
-
-.modal-close span,
-.modal-return span {
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  font-family: "Gotham Medium";
-  font-size: 18px;
-  margin-top: 3px;
-  color: $dark-blue;
-}
-
-.modal-return {
-  width: 30px;
-  height: 20px;
-  align-items: center;
-  justify-content: center;
-  margin-left: 10px;
-  margin-right: 10px;
-}

src/assets/stylesheets/settings.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
   background-color: transparent;
   margin-bottom: 50px;
   animation: fadeInUp;
-  animation-duration: 0.5s;
+  animation-duration: .5s;
 }
 
 .settings-title {
@@ -66,14 +66,13 @@ $white: #fff;
   text-align: left;
 }
 
-.settings-powerContainer,
+.settings-powerContainer, .settings-creditsContainer {
-.settings-creditsContainer {
   width: 80%;
   height: 100px;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   display: flex;
   align-items: center;
@@ -86,7 +85,7 @@ $white: #fff;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   background-color: transparent;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 .settings-creditsContainer {
@@ -102,14 +101,14 @@ $white: #fff;
   border-radius: 20px; 
   background: linear-gradient(
     15deg,
-    rgb(223 223 223) 0%,
+    rgb(223, 223, 223) 0%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease-in-out;
-  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
   cursor: pointer;
   text-decoration: none;
   margin-right: 20px;
@@ -136,10 +135,7 @@ $white: #fff;
   flex-direction: column;
 }
 
-.entry-links,
+.entry-links, .entry-name, .entry-position, .settings-credits-title {
-.entry-name,
-.entry-position,
-.settings-credits-title {
   width: auto;
   height: auto;
   text-align: left;
@@ -179,11 +175,11 @@ $white: #fff;
 .entry-position {
   width: auto;
   height: auto;
-  color: $light-blue;
+  color: $light-blue
 }
 
 .entry-links {
   width: auto;
   height: auto;
-  color: $hover-blue;
+  color: $hover-blue
 }

src/assets/stylesheets/statistics.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255 255 255) 100%
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
   background-color: transparent;
   margin-bottom: 50px;
   animation: fadeInUp;
-  animation-duration: 0.5s;
+  animation-duration: .5s;
 }
 
 .statistics-title {
@@ -69,7 +69,8 @@ $white: #fff;
   width: 80%;
   height: auto;
   display: flex;
-  flex-flow: row wrap;
+  flex-direction: row;
+  flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-start;
   background-color: transparent;
@@ -83,18 +84,20 @@ $white: #fff;
   height: 300px;
   background: linear-gradient(
     -30deg,
-    rgb(187 208 236) 0%,
+    rgb(187, 208, 236) 0%,
-    rgb(255 255 255 / 100%) 100%
+    rgba(255, 255, 255, 1) 100%
   );
   margin-top: 5px;
+
   display: flex; /* Center the content */
   align-items: center; /* Center vertically */
   justify-content: center; /* Center horizontally */
+
   border-radius: 20px;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   cursor: pointer;
   overflow: visible;
 }
@@ -104,9 +107,10 @@ $white: #fff;
   height: 95%; /* Adjust the height of iframes */
   border-radius: 20px;
 
+
   // Debug Borders
-  // border-width: 5px;
+      // border-width: 5px;
-  // border-style: solid;
+      // border-style: solid;
 }
 
 // .summary-iframe {
@@ -130,6 +134,7 @@ $white: #fff;
 //   width: 25%;
 // }
 
+
 // .summary-dashboard {
 //   width: 100%;
 //   height: 900px;

src/components/CableDetailComponent.js

@@ -58,7 +58,7 @@ class Cable {
           "description",
           "application",
           "category",
-          "datasheet",
+          "datasheet"
         ].includes(key)
       ) {
         this.dynamicProps[key] = cableData[key];
@@ -120,13 +120,9 @@ export default class CableDetailComponent extends Component {
     });
 
     if (modal === "modalOpen_dispense") {
-      this.props.socket.send(
+      this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
-        `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
-      );
     } else if (modal === "modalOpen_show") {
-      this.props.socket.send(
+      this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`);
-        `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
-      );
     }
   };
 

src/components/MapComponent.js

@@ -3,7 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
 import cable from "../utils/Cable";
 import "../assets/stylesheets/map.scss";
 import { NavLink } from "react-router-dom";
-import "animate.css";
+import "animate.css"
 
 export default class MapComponent extends Component {
   constructor(props) {
@@ -258,10 +258,7 @@ export default class MapComponent extends Component {
                   {parseInt(cable.position) + 1}
                 </div>
               </div>
-              <NavLink
+              <NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
-                to={"/map/cable/" + cable.position}
-                className="map-cable-moreinfo"
-              >
                 <span>More Info</span>
               </NavLink>
             </div>

src/components/NavBar.js

@@ -1,20 +1,14 @@
 import React, { Component } from "react";
 import { NavLink } from "react-router-dom";
-import Modal from "react-modal";
 import "../assets/stylesheets/navbar.scss";
 
-Modal.setAppElement("#root");
-
 export default class NavBar extends Component {
   constructor(props) {
     super(props);
     this.state = {
       clicks: 0,
-      modalOpen_return: false,
+      timer: null,
-      modalOpacity: 0,
     };
-    this.openModal = this.openModal.bind(this);
-    this.closeModal = this.closeModal.bind(this);
   }
 
   componentDidMount() {
@@ -47,7 +41,8 @@ export default class NavBar extends Component {
     this.setState({ clicks: clicks + 1 });
 
     if (clicks + 1 === 3) {
-      window.location.replace("/settings");
+      
+      window.location.replace("/settings")
 
       clearTimeout(timer);
       this.setState({ clicks: 0, timer: null });
@@ -60,59 +55,7 @@ export default class NavBar extends Component {
     }
   }
 
-  openModal = (modal) => {
-    this.setState({ [modal]: true }, () => {
-      setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
-    });
-  };
-
-  closeModal = (modal) => {
-    this.setState({ modalOpacity: 0 }, () => {
-      setTimeout(() => this.setState({ [modal]: false }), 300);
-    });
-  };
-
-  returnCable = (tray) => {
-    this.props.socket.send(
-      `{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
-    );
-    console.log("Cable returned from tray " + tray);
-    this.closeModal("modalOpen_return");
-  };
-
   render() {
-    const { modalOpen_return, modalOpacity } = this.state;
-
-    const modalStyle = {
-      content: {
-        opacity: modalOpacity,
-        transition: "opacity 300ms ease-in-out",
-        top: "50%",
-        left: "50%",
-        right: "auto",
-        bottom: "auto",
-        marginRight: "-50%",
-        width: "30%",
-        height: "30%",
-        transform: "translate(-50%, -50%)",
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: "20px",
-        background:
-          "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
-        boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
-      },
-      overlay: {
-        opacity: modalOpacity,
-        transition: "opacity 300ms ease-in-out",
-        backgroundColor: "rgba(255, 255, 255, 0.15)",
-        backdropFilter: "blur(5px)",
-      },
-    };
-
     return (
       <div className="navbar">
         <div className="navbar-top">
@@ -137,48 +80,6 @@ export default class NavBar extends Component {
             </NavLink>
           </ol>
         </div>
-        <div
-          className="navbar-return"
-          onClick={() => this.openModal("modalOpen_return")}
-        >
-          <span id="browse-s">Return Cable</span>
-        </div>
-        <Modal
-          isOpen={modalOpen_return}
-          onRequestClose={() => this.closeModal("modalOpen_return")}
-          contentLabel="show"
-          style={modalStyle}
-        >
-          <div className="modal-container">
-            <div className="modal-title">
-              <span>♻️</span>
-              <span>Return Cable</span>
-            </div>
-            <div className="modal-body">
-              <span>Select the tray you would like to return from.</span>
-            </div>
-            <div className="modal-tray">
-              <div className="modal-return" onClick={() => this.returnCable(0)}>
-                <span>1</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(1)}>
-                <span>2</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(2)}>
-                <span>3</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(3)}>
-                <span>4</span>
-              </div>
-            </div>
-            <div
-              className="modal-close"
-              onClick={() => this.closeModal("modalOpen_return")}
-            >
-              <span>Cancel</span>
-            </div>
-          </div>
-        </Modal>
       </div>
     );
   }

src/components/SettingsComponent.js

@@ -41,64 +41,37 @@ export default class SettingsComponent extends Component {
               <div className="entry">
                 <span className="entry-name">Cole Deck,</span>
                 <span className="entry-position">Project Lead,</span>
-                <a className="entry-links" href="https://deck.sh">
+                <a className="entry-links">https://deck.sh</a>
-                  https://deck.sh
-                </a>
               </div>
               <div className="entry">
                 <span className="entry-name">Natorion Johnson,</span>
                 <span className="entry-position">Lead PCB assembler,</span>
-                <a
+                <a className="entry-links">https://linkedin.com/in/NatorionJ</a>
-                  className="entry-links"
-                  href="https://linkedin.com/in/NatorionJ"
-                >
-                  https://linkedin.com/in/NatorionJ
-                </a>
               </div>
               <div className="entry">
                 <span className="entry-name">Fannie,</span>
-                <span className="entry-position">
+                <span className="entry-position">CAD Design, Fabrication Planner</span>
-                  CAD Design, Fabrication Planner
+                <a className="entry-links">https://linkedin.com/in/fannieyu</a>
-                </span>
-                <a
-                  className="entry-links"
-                  href="https://linkedin.com/in/fannieyu"
-                >
-                  https://linkedin.com/in/fannieyu
-                </a>
               </div>
               <div className="entry">
                 <span className="entry-name">Elias Frey Reschly,</span>
-                <span className="entry-position">
+                <span className="entry-position">Mechanical Design, Fabrication</span>
-                  Mechanical Design, Fabrication
+                <a className="entry-links"></a>
-                </span>
-                <div className="entry-links"></div>
               </div>
               <div className="entry">
                 <span className="entry-name">Scarlett Deck,</span>
-                <span className="entry-position">
+                <span className="entry-position">Front-End Dev, UI/UX Designer,</span>
-                  Front-End Dev, UI/UX Designer,
+                <a className="entry-links">https://kadan.live</a>
-                </span>
-                <a className="entry-links" href="https://kadan.live">
-                  https://kadan.live
-                </a>
               </div>
               <div className="entry">
                 <span className="entry-name">Lucas Ferguson,</span>
                 <span className="entry-position">Front-End Dev,</span>
-                <a
+                <a className="entry-links">https://lucasferguson.webflow.io</a>
-                  className="entry-links"
-                  href="https://lucasferguson.webflow.io"
-                >
-                  https://lucasferguson.webflow.io
-                </a>
               </div>
               <div className="entry">
                 <span className="entry-name">Dustin Thomas,</span>
                 <span className="entry-position">Back-End Dev,</span>
-                <a className="entry-links" href="https://cptlobster.dev">
+                <a className="entry-links">https://cptlobster.dev</a>
-                  https://cptlobster.dev
-                </a>
               </div>
             </div>
           </div>

src/components/StatisticsComponent.js

@@ -13,46 +13,22 @@ export default class StatisticsComponent extends Component {
           <h1 className="statistics-title">📊 Statistics</h1>
           <div className="statistics-grid">
             <div className="statistics-grid-container">
-              <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="statistics-iframe" />
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
-                title="Belden"
-                className="statistics-iframe"
-              />
             </div>
             <div className="statistics-grid-container">
-              <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="statistics-iframe" />
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3"
-                title="Belden"
-                className="statistics-iframe"
-              />
             </div>
             <div className="statistics-grid-container">
-              <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="statistics-iframe" />
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-                title="Belden"
-                className="statistics-iframe"
-              />
             </div>
             <div className="statistics-grid-container">
-              <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="statistics-iframe" />
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6"
-                title="Belden"
-                className="statistics-iframe"
-              />
             </div>
             <div className="statistics-grid-container">
-              <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="statistics-iframe" />
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4"
-                title="Belden"
-                className="statistics-iframe"
-              />
             </div>
             <div className="statistics-grid-container">
-              <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="statistics-iframe" />
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2"
-                title="Belden"
-                className="statistics-iframe"
-              />
             </div>
           </div>
         </div>

src/index.js

@@ -21,6 +21,7 @@ socket.addEventListener("open", function (event) {
   init();
 });
 
+
 // Initialize the app
 const init = () => {
   const router = createBrowserRouter([

src/routes/BrowseRoute.js

@@ -12,7 +12,7 @@ export default class BrowseRoute extends Component {
   render() {
     return (
       <div className="container">
-        <NavBar socket={this.props.socket} />
+        <NavBar />
         <BrowseComponent socket={this.props.socket} />
       </div>
     );

src/routes/CableDetailRoute.js

@@ -12,7 +12,7 @@ export default class CableDetailRoute extends Component {
   render() {
     return (
       <div className="container">
-        <NavBar socket={this.props.socket} />
+        <NavBar />
         <CableDetailComponent socket={this.props.socket} />
       </div>
     );

src/routes/MapRoute.js

@@ -12,7 +12,7 @@ export default class MapRoute extends Component {
   render() {
     return (
       <div className="container">
-        <NavBar socket={this.props.socket} />
+        <NavBar />
         <MapComponent socket={this.props.socket} />
       </div>
     );

src/routes/SettingsRoute.js

@@ -12,7 +12,7 @@ export default class SettingsRoute extends Component {
   render() {
     return (
       <div className="container">
-        <NavBar socket={this.props.socket} />
+        <NavBar />
         <SettingsComponent socket={this.props.socket} />
       </div>
     );

src/routes/StatisticsRoute.js

@@ -12,7 +12,7 @@ export default class StatisticsRoute extends Component {
   render() {
     return (
       <div className="container">
-        <NavBar socket={this.props.socket} />
+        <NavBar />
         <StatisticsComponent socketHandler={this.props.socket} />
       </div>
     );