From 808f6ebcbceb50b12daee63115f60381c346c8da Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Fri, 21 Feb 2020 12:20:05 +0100
Subject: [PATCH] resolve ids conflict

---
 src/components/Footer/Footer.js     |  2 +-
 src/components/HomeStay/HomeStay.js |  2 +-
 src/components/Mailing/Mailing.js   | 11 +++++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 00634aac..800ba4f5 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -121,7 +121,7 @@ export default function Footer() {
           <div className="footer-column">
             <Fade duration={700} distance="40px" bottom>
               <h2>Stay up to date with Skynet updates</h2>
-              <Mailing id="check2" light />
+              <Mailing id="mailing-bottom" light />
             </Fade>
           </div>
         </div>
diff --git a/src/components/HomeStay/HomeStay.js b/src/components/HomeStay/HomeStay.js
index cd3ffc49..e65a6d5e 100644
--- a/src/components/HomeStay/HomeStay.js
+++ b/src/components/HomeStay/HomeStay.js
@@ -34,7 +34,7 @@ export default class HomeStay extends Component {
               </Fade>
             </header>
             <Fade duration={700} distance="40px" bottom>
-              <Mailing id="check1" />
+              <Mailing id="mailing-top" />
             </Fade>
           </div>
 
diff --git a/src/components/Mailing/Mailing.js b/src/components/Mailing/Mailing.js
index cdc9156a..abe1ec43 100644
--- a/src/components/Mailing/Mailing.js
+++ b/src/components/Mailing/Mailing.js
@@ -9,6 +9,9 @@ const url = "https://tech.us11.list-manage.com/subscribe/post?u=5df238d9e852f980
 const CustomForm = ({ status, message, onValidated, light, id }) => {
   let email, user;
 
+  const checkboxId = `${id}-check`;
+  const submitId = `${id}-submit`;
+
   const submit = () => {
     if ((email, user, email.value.indexOf("@") > -1)) {
       onValidated({
@@ -25,13 +28,13 @@ const CustomForm = ({ status, message, onValidated, light, id }) => {
         type="email"
         placeholder="Email Address"
         validate="true"
-        aria-labelledby="newsletter-subscribe"
+        aria-labelledby={submitId}
       />
       <div className="home-form-stay-existing">
-        <input ref={node => (user = node)} type="checkbox" id={id} />
-        <label htmlFor={id}>I have previous experience using Sia</label>
+        <input ref={node => (user = node)} type="checkbox" id={checkboxId} />
+        <label htmlFor={checkboxId}>I have previous experience using Sia</label>
       </div>
-      <button className="button" onClick={submit} id="newsletter-subscribe">
+      <button className="button" onClick={submit} id={submitId}>
         Get Updates
       </button>