prompt form style updates

parkerholcomb · Apr 11, 2021 · e9617bf · e9617bf
1 parent 21f40ee
commit e9617bf
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
         )
     }