From 44619debc40870a8980a220d9d9f78a6809f2356 Mon Sep 17 00:00:00 2001
From: Daniel Becker <dbecker.fl@gmail.com>
Date: Fri, 17 Apr 2020 12:50:56 -0500
Subject: [PATCH] Made things  a little more mobile friendly

---
 .idea/workspace.xml                        | 134 +++++++++++----------
 package-lock.json                          |  13 ++
 package.json                               |   1 +
 src/components/App.js                      |  67 ++++++-----
 src/components/mainScreen/pages/Welcome.js |  48 +++++---
 5 files changed, 146 insertions(+), 117 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0b82fa0..b2b8f06 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,7 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="1329be04-a561-4802-8866-c40ae65b7eea" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingShoot.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingShoot.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -19,10 +23,10 @@
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingShoot.js">
+        <entry file="file://$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="214">
-              <caret line="113" selection-start-line="113" selection-end-line="113" />
+            <state relative-caret-position="331">
+              <caret line="73" selection-start-line="73" selection-end-line="73" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -31,13 +35,10 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js">
+        <entry file="file://$PROJECT_DIR$/src/components/Card.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="588">
-              <caret line="135" column="95" selection-start-line="135" selection-start-column="95" selection-end-line="135" selection-end-column="95" />
-              <folding>
-                <element signature="e#0#26#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="45">
+              <caret line="3" column="45" lean-forward="true" selection-start-line="3" selection-start-column="45" selection-end-line="3" selection-end-column="45" />
             </state>
           </provider>
         </entry>
@@ -45,8 +46,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="252">
-              <caret line="75" column="32" selection-start-line="75" selection-start-column="32" selection-end-line="75" selection-end-column="32" />
+            <state relative-caret-position="915">
+              <caret line="61" selection-start-line="61" selection-end-line="61" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -80,7 +81,7 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shooting/ShotFeed.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="193">
+            <state relative-caret-position="90">
               <caret line="13" column="26" selection-start-line="13" selection-start-column="26" selection-end-line="13" selection-end-column="26" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
@@ -92,7 +93,7 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/standard/StandardConfigure.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="603">
+            <state relative-caret-position="930">
               <caret line="68" column="36" selection-start-line="68" selection-start-column="36" selection-end-line="68" selection-end-column="104" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
@@ -123,8 +124,6 @@
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
-      <find>this.props</find>
-      <find>polygon</find>
       <find>projectorready</find>
       <find>target</find>
       <find>targetscreenmanager</find>
@@ -153,6 +152,8 @@
       <find>loadfromjson</find>
       <find>settings</find>
       <find>hr</find>
+      <find>white</find>
+      <find>youtube</find>
     </findStrings>
     <dirStrings>
       <dir>$PROJECT_DIR$/src/components</dir>
@@ -164,7 +165,6 @@
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
-        <option value="$PROJECT_DIR$/src/components/ShotFeed.js" />
         <option value="$PROJECT_DIR$/src/components/modes/standard/StandardConfigure.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/components/shooting/ShotTimer.js" />
@@ -210,15 +210,16 @@
         <option value="$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingConfigure.js" />
         <option value="$PROJECT_DIR$/src/util/TargetUtils.js" />
         <option value="$PROJECT_DIR$/src/components/mainScreen/shooting/ShotFeed.js" />
-        <option value="$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js" />
-        <option value="$PROJECT_DIR$/src/components/App.js" />
         <option value="$PROJECT_DIR$/public/manifest.json" />
         <option value="$PROJECT_DIR$/src/util/ShotDetector.js" />
         <option value="$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingShoot.js" />
+        <option value="$PROJECT_DIR$/src/components/Card.js" />
+        <option value="$PROJECT_DIR$/src/components/App.js" />
+        <option value="$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js" />
       </list>
     </option>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6" fullScreen="true">
+  <component name="ProjectFrameBounds" fullScreen="true">
     <option name="width" value="1680" />
     <option name="height" value="1050" />
   </component>
@@ -227,7 +228,6 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -357,6 +357,7 @@
           <select />
         </subPane>
       </pane>
+      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -420,12 +421,13 @@
       <workItem from="1586372809151" duration="4465000" />
       <workItem from="1586378770689" duration="917000" />
       <workItem from="1586462329385" duration="5131000" />
-      <workItem from="1586738938356" duration="4598000" />
+      <workItem from="1586738938356" duration="4790000" />
+      <workItem from="1587144760085" duration="940000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="135684000" />
+    <option name="totallyTimeSpent" value="136816000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="0" width="1680" height="1050" extended-state="0" />
@@ -475,13 +477,6 @@
     <option name="version" value="1" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/src/components/Card.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="4" column="1" selection-start-line="4" selection-start-column="1" selection-end-line="4" selection-end-column="1" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/public/assets/sounds.js" />
     <entry file="file://$PROJECT_DIR$/yarn.lock" />
     <entry file="file://$PROJECT_DIR$/public/assets/targets/uspsa.svg">
@@ -774,84 +769,91 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/standard/StandardConfigure.js">
+    <entry file="file://$PROJECT_DIR$/public/favicon.ico">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingShoot.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="603">
-          <caret line="68" column="36" selection-start-line="68" selection-start-column="36" selection-end-line="68" selection-end-column="104" />
+        <state relative-caret-position="214">
+          <caret line="113" selection-start-line="113" selection-end-line="113" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingConfigure.js">
+    <entry file="file://$PROJECT_DIR$/public/robots.txt">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/public/manifest.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="4" selection-start-line="4" selection-end-line="4" selection-end-column="63" />
+        <state relative-caret-position="195">
+          <caret line="13" column="30" selection-start-line="13" selection-start-column="30" selection-end-line="13" selection-end-column="30" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js">
+    <entry file="file://$PROJECT_DIR$/src/config.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="75">
+          <caret line="5" column="30" selection-start-line="5" selection-start-column="24" selection-end-line="5" selection-end-column="30" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shooting/ShotFeed.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="588">
-          <caret line="135" column="95" selection-start-line="135" selection-start-column="95" selection-end-line="135" selection-end-column="95" />
+        <state relative-caret-position="90">
+          <caret line="13" column="26" selection-start-line="13" selection-start-column="26" selection-end-line="13" selection-end-column="26" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/App.js">
+    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/standard/StandardConfigure.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="252">
-          <caret line="75" column="32" selection-start-line="75" selection-start-column="32" selection-end-line="75" selection-end-column="32" />
+        <state relative-caret-position="930">
+          <caret line="68" column="36" selection-start-line="68" selection-start-column="36" selection-end-line="68" selection-end-column="104" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/public/robots.txt">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/public/favicon.ico">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/config.js">
+    <entry file="file://$PROJECT_DIR$/src/util/ShotDetector.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="75">
-          <caret line="5" column="30" selection-start-line="5" selection-start-column="24" selection-end-line="5" selection-end-column="30" />
+        <state relative-caret-position="1980">
+          <caret line="132" column="27" selection-start-line="132" selection-start-column="27" selection-end-line="132" selection-end-column="27" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/public/manifest.json">
+    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingConfigure.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="195">
-          <caret line="13" column="30" selection-start-line="13" selection-start-column="30" selection-end-line="13" selection-end-column="30" />
+        <state relative-caret-position="60">
+          <caret line="4" selection-start-line="4" selection-end-line="4" selection-end-column="63" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shooting/ShotFeed.js">
+    <entry file="file://$PROJECT_DIR$/src/components/Card.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="193">
-          <caret line="13" column="26" selection-start-line="13" selection-start-column="26" selection-end-line="13" selection-end-column="26" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="45">
+          <caret line="3" column="45" lean-forward="true" selection-start-line="3" selection-start-column="45" selection-end-line="3" selection-end-column="45" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/util/ShotDetector.js">
+    <entry file="file://$PROJECT_DIR$/src/components/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1980">
-          <caret line="132" column="27" selection-start-line="132" selection-start-column="27" selection-end-line="132" selection-end-column="27" />
+        <state relative-caret-position="915">
+          <caret line="61" selection-start-line="61" selection-end-line="61" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/shootingModes/duelingTree/DuelingShoot.js">
+    <entry file="file://$PROJECT_DIR$/src/components/mainScreen/pages/Welcome.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="214">
-          <caret line="113" selection-start-line="113" selection-end-line="113" />
+        <state relative-caret-position="331">
+          <caret line="73" selection-start-line="73" selection-end-line="73" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
diff --git a/package-lock.json b/package-lock.json
index d571e8e..da3edbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10959,6 +10959,14 @@
         }
       }
     },
+    "react-device-detect": {
+      "version": "1.11.14",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.11.14.tgz",
+      "integrity": "sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==",
+      "requires": {
+        "ua-parser-js": "^0.7.20"
+      }
+    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
@@ -13054,6 +13062,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.21",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+    },
     "uncontrollable": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
diff --git a/package.json b/package.json
index 85a9ddc..1c5a3f6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.0",
     "react-cookies": "^0.1.1",
+    "react-device-detect": "^1.11.14",
     "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",
     "react-new-window": "^0.1.2",
diff --git a/src/components/App.js b/src/components/App.js
index 990f846..e3c3758 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -16,7 +16,7 @@ import {BrowserRouter,  Route, Switch} from "react-router-dom";
 import { createBrowserHistory } from "history";
 import {connect} from "react-redux";
 import GoogleAnalyticsUtils from "../util/GoogleAnalyticsUtils";
-
+import {BrowserView, isMobile} from "react-device-detect";
 
 
 window.routerHistory = createBrowserHistory();
@@ -39,24 +39,27 @@ class App extends React.Component {
     componentDidMount() {
         window.onOpenCV = () => {console.log("OpenCV Loaded");this.setState({ cvLoaded: true })};
 
-        const video = this.videoRef.current;
-        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-            .then((stream)  => {
-                video.srcObject = stream;
-                video.onplay = () => {
-                    GoogleAnalyticsUtils.set({
-                        videoWidth: video.videoWidth,
-                        videoHeight: video.videoHeight
-                    });
-                    this.setState({
-                        videoReady: true
-                    });
-                }
-                video.play();
-            })
-            .catch((err) => {
-                console.log("An error occurred! " + err);
-            });
+        if (!isMobile) {
+            const video = this.videoRef.current;
+            navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+                .then((stream)  => {
+                    video.srcObject = stream;
+                    video.onplay = () => {
+                        GoogleAnalyticsUtils.set({
+                            videoWidth: video.videoWidth,
+                            videoHeight: video.videoHeight
+                        });
+                        this.setState({
+                            videoReady: true
+                        });
+                    }
+                    video.play();
+                })
+                .catch((err) => {
+                    console.log("An error occurred! " + err);
+                });
+        }
+
     }
 
     toggleVideo() {
@@ -103,21 +106,23 @@ class App extends React.Component {
                 {this.props.launchProjector &&
                     <ProjectorScreen/>
                 }
-                <div style={{position:"absolute", bottom: 5, left: 5, border: "5px solid " + backgroundColor, minWidth: "400px"}}>
-                    <div style={{color: "white", backgroundColor: color4, width: "100%"}} className={"clearfix"}>
-                        <div className={"float-left"}>
-                            Webcam  Feed
+                <BrowserView>
+                    <div style={{position:"absolute", bottom: 5, left: 5, border: "5px solid " + backgroundColor, minWidth: "400px"}}>
+                        <div style={{color: "white", backgroundColor: color4, width: "100%"}} className={"clearfix"}>
+                            <div className={"float-left"}>
+                                Webcam  Feed
+                            </div>
+                            <div className={"float-right"}>
+                                <span style={{textDecoration: "underline", cursor:"pointer"}} onClick={() => {this.toggleVideo()}}>
+                                    {this.state.showVideo ? "Hide" : "Show"}
+                                </span>
+                            </div>
                         </div>
-                        <div className={"float-right"}>
-                            <span style={{textDecoration: "underline", cursor:"pointer"}} onClick={() => {this.toggleVideo()}}>
-                                {this.state.showVideo ? "Hide" : "Show"}
-                            </span>
+                        <div style={{display: this.state.showVideo ? "block" : "none"}}>
+                            <video ref={this.videoRef} />
                         </div>
                     </div>
-                    <div style={{display: this.state.showVideo ? "block" : "none"}}>
-                        <video ref={this.videoRef} />
-                    </div>
-                </div>
+                </BrowserView>
             </BrowserRouter>
         )
     }
diff --git a/src/components/mainScreen/pages/Welcome.js b/src/components/mainScreen/pages/Welcome.js
index f5ca653..5c24656 100644
--- a/src/components/mainScreen/pages/Welcome.js
+++ b/src/components/mainScreen/pages/Welcome.js
@@ -6,6 +6,7 @@ import GoogleAnalyticsUtils from "../../../util/GoogleAnalyticsUtils";
 import YouTube from "react-youtube";
 import {faReddit, faGithub} from "@fortawesome/free-brands-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {BrowserView, MobileView} from "react-device-detect";
 
 class Welcome extends React.Component {
     constructor(props) {
@@ -19,16 +20,21 @@ class Welcome extends React.Component {
     renderButton() {
         return (
             <>
-                <Button variant={"customPrimary"}
-                        onClick={() => {this.props.history.push("/launch")}}
-                        disabled={!(this.props.videoReady && this.props.cvReady)}>Lets Get Started!</Button>
-                { !this.props.videoReady ?
-                    <p style={{fontSize: "80%"}}>Waiting on webcam feed...</p>
-                    : !this.props.cvReady ?
-                        <p style={{fontSize: "80%"}}>Still loading...</p>
-                        :
-                        null
-                }
+                <BrowserView>
+                    <Button variant={"customPrimary"}
+                            onClick={() => {this.props.history.push("/launch")}}
+                            disabled={!(this.props.videoReady && this.props.cvReady)}>Lets Get Started!</Button>
+                    { !this.props.videoReady ?
+                        <p style={{fontSize: "80%"}}>Waiting on webcam feed...</p>
+                        : !this.props.cvReady ?
+                            <p style={{fontSize: "80%"}}>Still loading...</p>
+                            :
+                            null
+                    }
+                </BrowserView>
+                <MobileView>
+                    <p>Note: Take Aim is not compatible with mobile phones</p>
+                </MobileView>
             </>
         )
     }
@@ -63,7 +69,9 @@ class Welcome extends React.Component {
                 <Row style={{marginTop: "20px"}}>
                     <Col sm={12} className={"text-center"}>
                     <h4 style={{textDecoration: "underline"}}>Demo Video</h4>
-                    <YouTube videoId={"YH3_XY4QLIs"} />
+                    <div style={{overflowX: "scroll"}}>
+                        <YouTube videoId={"YH3_XY4QLIs"} />
+                    </div>
                     </Col>
                 </Row>
                 <Row className={"text-center"} style={{marginTop: "20px"}}>
@@ -72,20 +80,20 @@ class Welcome extends React.Component {
                     </Col>
                 </Row>
                 <Row className={"text-center"}>
-                    <Col sm={4}>
+                    <Col sm={4} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Live Shot Judgment</h5>
                             <p>Take Aim will give you immediate feedback for each shot that you fire!</p>
                         </Card>
                     </Col>
-                    <Col sm={4}>
+                    <Col sm={4} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Shot Timer</h5>
                             <p>Take Aim's shot timer will tell you how fast your shots are. Use this to measure your time
                             from draw to first shot!</p>
                         </Card>
                     </Col>
-                    <Col sm={4}>
+                    <Col sm={4} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Projected Targets</h5>
                             <p>No need to tape targets to the wall! Take Aim will project targets onto the wall for you!</p>
@@ -99,26 +107,26 @@ class Welcome extends React.Component {
                     </Col>
                 </Row>
                 <Row className={"text-center"}>
-                    <Col sm={3}>
+                    <Col sm={3} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Webcam</h5>
                             <p>External webcams work best. If you don't there are apps that let you use your smartphone
                                 as an external webcam!</p>
                         </Card>
                     </Col>
-                    <Col sm={3}>
+                    <Col sm={3} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Laser Cartridge</h5>
                             <p>Any laser cartridge or laser shooting gun should work!</p>
                         </Card>
                     </Col>
-                    <Col sm={3}>
+                    <Col sm={3} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Projector</h5>
                             <p>Any projector should be fine, although short-throw projectors are ideal!</p>
                         </Card>
                     </Col>
-                    <Col sm={3}>
+                    <Col sm={3} style={{paddingBottom: "10px"}}>
                         <Card style={{height: "100%"}}>
                             <h5>Computer</h5>
                             <p>Mac, Windows or Linux - doesn't matter since Take Aim is web based!</p>
@@ -131,14 +139,14 @@ class Welcome extends React.Component {
                     </Col>
                 </Row>
                 <Row className={"text-center"} >
-                    <Col sm={6} md={{span: 3, offset: 3}} className={"text-center"}>
+                    <Col sm={6} md={{span: 3, offset: 3}} className={"text-center"}  style={{paddingBottom: "10px"}}>
                         <Card>
                             <a href={"https://www.reddit.com/r/TakeAim"} style={{fontSize: "150%", color: "white"}}>
                                 <FontAwesomeIcon icon={faReddit} /> Reddit
                             </a>
                         </Card>
                     </Col>
-                    <Col sm={6} md={{span: 3, offset: 0}} className={"text-center"}>
+                    <Col sm={6} md={{span: 3, offset: 0}} className={"text-center"} style={{paddingBottom: "10px"}}>
                         <Card>
                             <a href={"https://www.github.com/dbecker1/take-aim"} style={{fontSize: "150%", color: "white"}}>
                                 <FontAwesomeIcon icon={faGithub} /> Github