From e9617bf767f2adfa01c9b117e0a83f55f3e035a4 Mon Sep 17 00:00:00 2001
From: Parker Holcomb <parker.holcomb@gmail.com>
Date: Sun, 11 Apr 2021 13:46:36 -0500
Subject: [PATCH] prompt form style updates

---
 site/src/app.css                 |  4 +--
 site/src/fragments/Nav.js        |  4 +--
 site/src/fragments/PromptForm.js | 45 +++++++++++++++-----------------
 site/src/pages/About.js          |  7 +++--
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/site/src/app.css b/site/src/app.css
index a216d84..0aec290 100644
--- a/site/src/app.css
+++ b/site/src/app.css
@@ -133,8 +133,8 @@ td, th {
 
 .notification-container{
   align-items: center;
-  margin-bottom: 10px;
-  color: #D63432
+  margin-bottom: 5px;
+  font-size: 16px;
 }
 
 .hero {
diff --git a/site/src/fragments/Nav.js b/site/src/fragments/Nav.js
index f11ae71..d624120 100644
--- a/site/src/fragments/Nav.js
+++ b/site/src/fragments/Nav.js
@@ -26,9 +26,9 @@ export default function Menu() {
                         <Nav.Link href="https://tdem.maps.arcgis.com/apps/webappviewer/index.html?id=3700a84845c5470cb0dc3ddace5c376b" target="_blank">MAP</Nav.Link>
                         <Nav.Link href='/about'>ABOUT</Nav.Link>
                         {/* <Nav.Link href='/q'>SEARCH</Nav.Link> */}
-                        <a href='https://twitter.com/vaccinatetexas' target='_blank'>
+                        {/* <a href='https://twitter.com/vaccinatetexas' target='_blank'>
                                 <img src={twitterIcon} className='menuIcon' />
-                            </a>
+                            </a> */}
                         <a href='https://github.com/parquar/go-get-it-health' target='_blank'>
                             <img src={githubIcon} className='menuIcon' />
                         </a>
diff --git a/site/src/fragments/PromptForm.js b/site/src/fragments/PromptForm.js
index e5af726..da7452c 100644
--- a/site/src/fragments/PromptForm.js
+++ b/site/src/fragments/PromptForm.js
@@ -8,7 +8,7 @@ export default class PromptForm extends Component {
         super(props);
         this.state = {};
         this.state.phone = '';
-        this.state.notification = '';
+        this.state.notification = 'Updates when vaccines become avaiable in your area.';
 
         this.handleFormInput = this.handleFormInput.bind(this)
         this.handleFormSubmit = this.handleFormSubmit.bind(this)
@@ -56,33 +56,30 @@ export default class PromptForm extends Component {
     render() {
         return (
             <div className='formContainer'>
-                <div className='notification-container'>
-                    {this.state.notification}
-                </div>
+
                 <Form inline className="subscribe-form" onSubmit={this.handleFormSubmit}>
-                    <div style={{ flexDirection: "row" }}>
-                        <div style={{ border: "1px solid #ced4da", borderRight: "", borderRadius: ".25rem 0 0 .25rem", width: "60px", alignContent: 'center' }}>
-                            <img
-                                style={{ padding: "15px 10px 10px 10px", height: "50px", filter: "opacity(50%)" }}
-                                src="https://vtx-public.s3.amazonaws.com/comment-alt.svg"
+                    <div style={{ flexDirection: "column" }}>
+                        <div className='notification-container'>
+                            {this.state.notification}
+                        </div>
+                        <div style={{ flexDirection: "row" }}>
+                            <input
+                                className="form-control"
+                                style={{ borderRadius: '.25rem 0 0 .25rem', maxWidth: "300px", height: "auto" }}
+                                value={this.state.phone}
+                                type="tel"
+                                placeholder="(512) 555-5555"
+                                onChange={(e) => { this.handleFormInput('phone', e.target.value) }}
                             />
+
+                            <button
+                                className="btn"
+                                style={{ backgroundColor: '#203375', color: 'white', borderRadius: '0 .25rem .25rem 0', borderLeft: "" }}
+                            >
+                                REGISTER
+                        </button>
                         </div>
 
-                        <input
-                            className="form-control"
-                            style={{ borderRadius: '0', maxWidth: "240px", height: "auto" }}
-                            value={this.state.phone}
-                            type="tel"
-                            placeholder="(512) 555-5555"
-                            onChange={(e) => { this.handleFormInput('phone', e.target.value) }}
-                        />
-
-                        <button
-                            className="btn"
-                            style={{ backgroundColor: '#203375', color: 'white', borderRadius: '0 .25rem .25rem 0', borderLeft: "" }}
-                        >
-                            REGISTER
-                  </button>
 
                     </div>
 
diff --git a/site/src/pages/About.js b/site/src/pages/About.js
index 06eafd6..2f1f39e 100644
--- a/site/src/pages/About.js
+++ b/site/src/pages/About.js
@@ -36,14 +36,17 @@ class About extends Component {
             
                 </div>
                 <div className="tagline">
-                    
                     <span>Made with love by 
                         <a href="https://www.linkedin.com/in/parkerholcomb/" target="_blank"> Parker</a>, 
                         <a href="https://www.linkedin.com/in/dwamian/" target="_blank"> Dwamian</a>, and 
                         <a href="https://www.linkedin.com/in/scott-woolley-wynd-0299072a/" target="_blank"> Scott</a>. 
                     </span>
                 </div>
-                {/* <PromptForm /> */}
+                
+                <div style={{marginTop:"25px"}}>
+                    <PromptForm />    
+                </div>
+                
             </div>
         )
     }