src/assets/stylesheets/navbar.scss

@@ -220,8 +220,8 @@ $white: #fff;
 }
 
 .modal-return {
-  width: auto;
-  height: auto;
+  width: 30px;
+  height: 20px;
   align-items: center;
   justify-content: center;
   margin-left: 10px;

src/assets/stylesheets/settings.scss

@@ -66,19 +66,19 @@ $white: #fff;
   text-align: left;
 }
 
-.settings-grid,
+.settings-powerContainer,
 .settings-creditsContainer {
   width: 80%;
-  height: auto;
+  height: 100px;
   background: linear-gradient(
     -30deg,
     rgb(187 208 236) 0%,
     rgb(255 255 255 / 100%) 100%
   );
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
   border-radius: 20px;
   border: 1px solid $gray;
   margin-bottom: 5px;
@@ -89,29 +89,6 @@ $white: #fff;
   filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
-.settings-gridInner {
-  width: 100%;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 15px 0px 15px 0px;
-  background-color: transparent;
-}
-
-.settings-grid h2 {
-  width: 100%;
-  height: auto;
-  font-size: 24px;
-  font-weight: bold;
-  color: $dark-blue;
-  font-family: "Gotham Medium";
-  text-align: left;
-  padding: 20px 10px 0px 10px;
-  background-color: transparent;
-}
-
 .settings-creditsContainer {
   height: 500px;
   display: flex;
@@ -119,10 +96,10 @@ $white: #fff;
   align-items: center;
 }
 
-.settings-button {
-  width: auto;
-  height: 40px;
-  border-radius: 15px;
+.settings-powerButton {
+  width: 200px;
+  height: 50px;
+  border-radius: 20px;
   background: linear-gradient(
     15deg,
     rgb(223 223 223) 0%,
@@ -135,182 +112,78 @@ $white: #fff;
   filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
   cursor: pointer;
   text-decoration: none;
-  margin-right: 10px;
-  margin-left: 10px;
+  margin-right: 20px;
+  margin-left: 20px;
 }
 
-.settings-button span {
+.settings-powerButton span {
   width: auto;
   height: auto;
-  font-size: 16px;
+  font-size: 20px;
+  margin-top: 2px;
   color: $medium-blue;
   font-family: "Gotham Bold";
   background-color: transparent;
-  padding: 10px;
 }
 
-.settings-form {
-  width: 100%;
-  height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
+.settings-credits {
+  width: 95%;
+  height: 430px;
   background-color: transparent;
-}
-
-// text box
-#sendobject {
-  width: 90%;
-  height: 20px;
-  border-radius: 15px;
-  background-color: $white;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  transition: all 0.3s ease-in-out;
-  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
-  text-decoration: none;
-  margin-right: 10px;
-  margin-left: 10px;
-  padding: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border: 1px solid rgb(199, 199, 199);
-  text-align: left;
-}
-
-#sendobject:focus {
-  outline: none;
-}
-
-#sendobjectButton {
-  width: 10%;
-  height: 40px;
-  border-radius: 15px;
-  background: linear-gradient(
-    15deg,
-    rgb(223 223 223) 0%,
-    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%));
-  cursor: pointer;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-left: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-#creditsgrid {
-  width: 100%;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  //background-color: red;
-}
-
-.entry {
-  width: 48%;
-  height: 150px;
-  border-radius: 15px;
-  background: linear-gradient(
-    15deg,
-    rgb(223 223 223) 0%,
-    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%));
-  text-decoration: none;
-  margin: 10px 10px 10px 10px;
-}
-
-.entry-image {
-  width: auto;
-  height: auto;
-  display: flex;
-  background-color: transparent;
-}
-
-.entry-img,
-.entry-qr {
-  width: 110px;
-  height: 110px;
-  background: linear-gradient(
-    15deg,
-    rgb(223 223 223) 0%,
-    rgb(255 255 255) 100%
-  );
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 15px;
-  margin: 10px;
-  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
-  border: 1px solid $gray;
-}
-
-.entry-qr {
-  margin: 0px;
-  padding: 8px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50px;
-  background: white;
-  position: fixed;
-  bottom: 5px;
-  margin-left: 90px;
-}
-
-.entry-qr img {
-  border-radius: 0px;
-  width: auto;
-  height: auto;
-  background: red;
-}
-
-.entry-title {
-  width: 70%;
-  height: 50%;
-  margin-left: 30px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
   flex-direction: column;
-  background-color: transparent;
 }
 
-.entry-title h2,
-.entry-title h3 {
+.entry-links,
+.entry-name,
+.entry-position,
+.settings-credits-title {
   width: auto;
   height: auto;
+  text-align: left;
+  font-family: "Gotham Medium";
+  color: $light-blue;
+  font-size: 20px;
+  background-color: transparent;
+  background: transparent;
+  text-decoration: none;
+  margin-bottom: 7px;
+  margin-right: 30px;
+}
+
+.settings-credits-title {
   font-size: 24px;
   font-weight: bold;
   color: $dark-blue;
   font-family: "Gotham Medium";
-  text-align: left;
+  margin-bottom: 10px;
+}
+
+.entry {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
   background-color: transparent;
-  text-align: start;
-  margin: 0px;
-  padding: 0px;
 }
 
-.entry-title h2 {
-  margin-bottom: 5px;
+.entry-name {
+  width: auto;
+  height: auto;
+  color: $medium-blue;
 }
 
-.entry-title h3 {
-  font-size: 16px;
-  font-weight: normal;
+.entry-position {
+  width: auto;
+  height: auto;
   color: $light-blue;
 }
+
+.entry-links {
+  width: auto;
+  height: auto;
+  color: $hover-blue;
+}

src/components/SettingsComponent.js

@@ -1,114 +1,24 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
-import Modal from "react-modal";
 import "../assets/stylesheets/settings.scss";
 
-Modal.setAppElement("#root");
-
 export default class SettingsComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalOpen_quickAction: false,
-      modalOpacity: 0,
-      action: "",
-    };
-    this.openModal = this.openModal.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-  }
-
-  quickAction = (action, requirePrompt) => {
-    if (requirePrompt) {
-      this.openModal("modalOpen_quickAction", action);
-    } else {
-      this.quickActionPerform(action);
-    }
+  shutdownPower = () => {
+    console.log("Shutting down...");
+    this.props.socket.send('{"type":"shutdown","call":"request","data":{}}');
   };
 
-  quickActionPerform = (action) => {
-    switch (action) {
-      case "shutdown":
-        console.log("Shutting down...");
-        this.props.socket.send(
-          '{"type":"shutdown","call":"request","data":{}}'
-        );
-        break;
-      case "restart":
-        console.log("Restarting...");
-        this.props.socket.send('{"type":"restart","call":"request","data":{}}');
-        break;
-      case "home":
-        console.log("Homing...");
-        this.props.socket.send('{"type":"home","call":"request","data":{}}');
-        break;
-      default:
-        console.log("Invalid action");
-        break;
-    }
+  restartPower = () => {
+    console.log("Restarting...");
+    this.props.socket.send('{"type":"restart","call":"request","data":{}}');
   };
 
-  openModal = (modal, action) => {
-    this.setState({ [modal]: true }, () => {
-      setTimeout(() => this.setState({ modalOpacity: 1 }), 100);
-    });
-    this.setState({ action });
-  };
-
-  closeModal = (modal) => {
-    this.setState({ modalOpacity: 0 }, () => {
-      setTimeout(() => this.setState({ [modal]: false }), 300);
-    });
-  };
-
-  performActionCloseModal = () => {
-    console.log("Performing action: " + this.state.action);
-    this.quickActionPerform(this.state.action);
-    this.closeModal("modalOpen_quickAction");
-  };
-
-  sendObject = () => {
-    const object = document.getElementById("sendobject").value;
-    console.log("Sending object: " + object);
-    this.props.socket.send
-      ? this.props.socket.send(object)
-      : console.log("No socket connection");
+  modeMessage = () => {
+    console.log("Sending 'mode' message...");
+    this.props.socket.send('{"type":"mode","call":"request","data":{}}');
   };
 
   render() {
-    const { modalOpen_quickAction, 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: "auto",
-        height: "auto",
-        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)",
-        minWidth: "30%",
-        minHeight: "30%",
-      },
-      overlay: {
-        opacity: modalOpacity,
-        transition: "opacity 300ms ease-in-out",
-        backgroundColor: "rgba(255, 255, 255, 0.15)",
-        backdropFilter: "blur(5px)",
-      },
-    };
-
     return (
       <div className="settings">
         <div className="settings-image">
@@ -116,227 +26,94 @@ export default class SettingsComponent extends Component {
         </div>
         <div className="settings-fieldContainer">
           <h1 className="settings-title">⚙️ Settings</h1>
-          <div className="settings-grid">
-            <h2>⚡Quick Actions:</h2>
-            <div className="settings-gridInner">
-              <div
-                className="settings-button"
-                onClick={() => this.quickAction("shutdown", true)}
-              >
-                <span>🔴 Power Off</span>
-              </div>
-              <div
-                className="settings-button"
-                onClick={() => this.quickAction("restart", false)}
-              >
-                <span>🟠 Restart</span>
-              </div>
-              <div
-                className="settings-button"
-                onClick={() => this.quickAction("home", false)}
-              >
-                <span>🏠 Home Arm</span>
-              </div>
+          <div className="settings-powerContainer">
+            <div
+              className="settings-powerButton"
+              onClick={() => this.shutdownPower()}
+            >
+              <span>🔴 Power Off</span>
             </div>
+            <div
+              className="settings-powerButton"
+              onClick={() => this.modeMessage()}
+            >
+              <span>Send "mode"</span>
+            </div>
+            {/* <div
+              className="settings-powerButton"
+              onClick={() => this.restartPower()}
+            >
+              <span>🟨 Restart</span>
+            </div> */}
           </div>
-          <div className="settings-grid">
-            <h2>💻Send Object:</h2>
-            <div className="settings-gridInner">
-              <form className="settings-form">
-                <input
-                  id="sendobject"
-                  type="text"
-                  name="sendobject"
-                  placeholder={`{"type":"cable_map","call":"request","data":{}}`}
-                />
-                <div
-                  className="settings-button"
-                  id="sendobjectButton"
-                  onClick={() => this.sendObject()}
+          <div className="settings-creditsContainer">
+            <div className="settings-credits">
+              <h2 className="settings-credits-title">Credits:</h2>
+              <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">
+                  https://deck.sh
+                </a>
+              </div>
+              <div className="entry">
+                <span className="entry-name">Natorion Johnson,</span>
+                <span className="entry-position">Lead PCB assembler,</span>
+                <a
+                  className="entry-links"
+                  href="https://linkedin.com/in/NatorionJ"
                 >
-                  <span>Send</span>
-                </div>
-              </form>
-            </div>
-          </div>
-          <div className="settings-grid">
-            <h2>⚒️Credits:</h2>
-            <div id="creditsgrid" className="settings-gridInner">
-              <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_cole.jpg")}
-                    alt="Cole Deck"
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_cole.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Cole Deck</h2>
-                  <h3>Project Lead</h3>
-                </div>
+                  https://linkedin.com/in/NatorionJ
+                </a>
               </div>
-
               <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_scarlett.jpg")}
-                    alt="Scarlett Kadan"
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_scarlett.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Scarlett Kadan</h2>
-                  <h3>Lead Front-End Dev, UI/UX Designer</h3>
-                </div>
+                <span className="entry-name">Fannie Yu,</span>
+                <span className="entry-position">
+                  CAD Design, Fabrication Planner
+                </span>
+                <a
+                  className="entry-links"
+                  href="https://linkedin.com/in/fannieyu"
+                >
+                  https://linkedin.com/in/fannieyu
+                </a>
               </div>
-
               <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_natorion.jpg")}
-                    alt="Natorion Johnson"
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_natorion.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Natorion Johnson</h2>
-                  <h3>Lead PCB assembler</h3>
-                </div>
+                <span className="entry-name">Elias Frey Reschly,</span>
+                <span className="entry-position">
+                  Mechanical Design, Fabrication
+                </span>
+                <div className="entry-links"></div>
               </div>
-
               <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_fannie.jpeg")}
-                    alt="Fannie Yu"
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_fannie.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Fannie Yu</h2>
-                  <h3>CAD Design, Fabrication Planner</h3>
-                </div>
+                <span className="entry-name">Scarlett Kadan,</span>
+                <span className="entry-position">
+                  Front-End Dev, UI/UX Designer,
+                </span>
+                <a className="entry-links" href="https://kadan.live">
+                  https://kadan.live
+                </a>
               </div>
-
               <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_elias.jpg")}
-                    alt="Elias Reschly"
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_elias.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Elias Reschly</h2>
-                  <h3>Mechanical Design, Fabrication</h3>
-                </div>
+                <span className="entry-name">Lucas Ferguson,</span>
+                <span className="entry-position">Front-End Dev,</span>
+                <a
+                  className="entry-links"
+                  href="https://lucasferguson.webflow.io"
+                >
+                  https://lucasferguson.webflow.io
+                </a>
               </div>
-
               <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_lucas.jpg")}
-                    alt="Lucas Ferguson"
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_lucas.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Lucas Ferguson</h2>
-                  <h3>Front-End Dev</h3>
-                </div>
-              </div>
-
-              <div className="entry">
-                <div className="entry-image">
-                  <img
-                    className="entry-img"
-                    src={require("../assets/images/pic_dustin.jpg")}
-                    alt=""
-                  />
-                  <div className="entry-qr">
-                    <img
-                      src={require("../assets/images/qr_dustin.png")}
-                      alt="QR"
-                    />
-                  </div>
-                </div>
-                <div className="entry-title">
-                  <h2>Dustin Thomas</h2>
-                  <h3>Back-End Dev</h3>
-                </div>
+                <span className="entry-name">Dustin Thomas,</span>
+                <span className="entry-position">Back-End Dev,</span>
+                <a className="entry-links" href="https://cptlobster.dev">
+                  https://cptlobster.dev
+                </a>
               </div>
             </div>
           </div>
         </div>
-
-        <Modal
-          isOpen={modalOpen_quickAction}
-          contentLabel="show"
-          onRequestClose={() => this.closeModal("modalOpen_quickAction")}
-          style={modalStyle}
-        >
-          <div className="modal-container">
-            <div className="modal-title">
-              <span>⚠️</span>
-              <span>Warning</span>
-            </div>
-            <div className="modal-body">
-              <span>Are you sure you want to perform this quick action?</span>
-            </div>
-            <div className="modal-tray">
-              <div
-                className="modal-return"
-                onClick={() =>
-                  this.performActionCloseModal("modalOpen_quickAction")
-                }
-              >
-                <span>Continue</span>
-              </div>
-              <div
-                className="modal-return"
-                onClick={() => this.closeModal("modalOpen_quickAction")}
-              >
-                <span>Cancel</span>
-              </div>
-            </div>
-          </div>
-        </Modal>
       </div>
     );
   }