UI changes

client/src/components/Home.js

@@ -1,5 +1,4 @@
 import Header from "./Header"
-import SuperheroName from "./SuperheroName"
 import SendFiles from "./SendFiles"
 import "../styles/button.css";
 import "../styles/containers.css";
@@ -175,7 +174,10 @@ class Home extends React.Component {
       date: sensorData.date,
     }
 
-    APIsend(clientData);
+    // Enable Spinner while we wait for the APIsend
+    this.setState({showSpinner: true})
+    setTimeout(() => {this.setState({showSpinner: false})}, 1000)
+    APIsend(clientData)
 
     // Update Upload Speed
     this.senderInterval = setInterval(() => {
@@ -250,7 +252,6 @@ class Home extends React.Component {
     return (
       <div className="App">
         {this.state.appState == "Choosing" && <Header />}
-        {this.state.appState == "Choosing" && <SuperheroName />}
 
         {(this.state.appState == "Choosing" || this.state.appState == "ReadyToSend") &&
           <SendFiles
@@ -273,7 +274,8 @@ class Home extends React.Component {
           <WaitForBumpSender 
             bumpCallback={this.senderBumpCallback}
             senderAccPermission={this.state.accPermission}
-            senderLocationArr = {this.state.locationArr} />
+            senderLocationArr = {this.state.locationArr}
+            showSpinner={this.state.showSpinner} />
         )}
 
         {this.state.appState == "Choosing" && !this.state.showSpinner && (

client/src/components/WaitForBumpReceiver.js

@@ -3,7 +3,7 @@ import '../styles/button.css'
 import '../styles/waitforbump.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import PropTypes from 'prop-types';
-import FistsBumping from '../assets/FistsBumping.png'
+import FistsBumping from '../assets/FistsBumping2.png'
 
 class WaitForBumpReceiver extends React.Component {
     componentDidMount() {

client/src/components/WaitForBumpSender.js

@@ -3,7 +3,7 @@ import '../styles/button.css'
 import '../styles/waitforbump.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import PropTypes from 'prop-types';
-import FistsBumping from '../assets/FistsBumping.png'
+import FistsBumping from '../assets/FistsBumping2.png'
 
 class WaitForBumpSender extends React.Component {
     componentDidMount() {
@@ -43,16 +43,23 @@ class WaitForBumpSender extends React.Component {
 
     render(){ return (
         <div className="App">
-            <button className = "test-button" onClick={this.bamEvent}>
-              <img src = {FistsBumping} className="fists-bumping-image-size" alt="Fist Bump Waiting Pic"/>
-            </button>
+            {
+            !this.props.showSpinner && 
+            <div>
+                <button className = "test-button" onClick={this.bamEvent}>
+                    <img src = {FistsBumping} className="fists-bumping-image-size" alt="Fist Bump Waiting Pic"/>
+                </button>
 
-            <h1 className="text-style">
-                <br/>
-                FIST BUMP THE DEVICES
-                <br/>
-                TO INITIATE TRANSFER!
-            </h1>
+                <h1 className="text-style">
+                    <br/>
+                    FIST BUMP THE DEVICES
+                    <br/>
+                    TO INITIATE TRANSFER!
+                </h1>
+            </div>
+            }
+
+
 
           </div>
     )}
@@ -63,6 +70,7 @@ WaitForBumpSender.propTypes = {
     bumpCallback: PropTypes.func,
     senderLocationArr: PropTypes.array,
     senderAccPermission: PropTypes.bool,
+    showSpinner: PropTypes.bool,
 };
 
 export default WaitForBumpSender

client/src/styles/containers.css

@@ -18,11 +18,12 @@ ul{
     padding: auto;
 }
 .fileListContainer{
-    min-height: 200px;
+    /* min-height: 200px; */
     max-height: 200px;
     margin: auto;
     margin-bottom: 1%;
     padding: auto;
+    margin-top: 5%;
 }
 .fileNameContainer{
     margin: 0;

client/src/styles/waitforbump.css

@@ -35,10 +35,10 @@
 .test-button {
   font-size: 23px;
   border: none;
+  padding-top: 3%;
   font-weight: 800;
   max-width: auto;
   min-width: auto;
-  margin-top: 8%;
   transition: transform 0.3s ease;
   background-color: rgba(153,153,255,0);
 }