Add Flo on credits & contacts

src/css/Components/footer.css

@@ -25,6 +25,37 @@
         border-radius: 1.8vw;
     }
 
+    #baptOrFlo{
+        display:flex;
+        justify-content: center;
+        align-items:center;
+    }
+
+    #bapt{
+        color:white;
+        background:#0036C1;
+        cursor: pointer;
+        padding:0.3vw 0.7vw 0.3vw 0.7vw;
+        border: 0.2vw solid black;
+        border-radius: 1.8vw;
+        margin: 0vw 1vw 0vw 1vw;
+    }
+
+    #ou{
+        color:white;
+        margin: 0vw 0.5vw 0vw 0.5vw;
+    }
+
+    #flo{
+        color:white;
+        background:#0036C1;
+        cursor: pointer;
+        padding:0.3vw 0.7vw 0.3vw 0.7vw;
+        border: 0.2vw solid black;
+        border-radius: 1.8vw;
+        margin: 0vw 1vw 0vw 1vw;
+    }
+
 #copyright{
     color:white;
     font-size:1vw;

src/js/Components/Footer.js

@@ -5,7 +5,9 @@ class Footer extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            onMeans:false
+            onMeans:false,
+            onBapt:false,
+            onFlo:false
         }
     }
 
@@ -14,7 +16,15 @@ class Footer extends React.Component {
     }
     
     handleNormal = () => {
-        this.setState({onMeans:false})
+        this.setState({onMeans:false,onFlo:false,onBapt:false})
+    }
+
+    handleBapt = () => {
+        this.setState({onBapt:true,onFlo:false})
+    }
+
+    handleFlo = () => {
+        this.setState({onFlo:true,onBapt:false})
     }
 
     render() {
@@ -22,17 +32,39 @@ class Footer extends React.Component {
         return (
             <div className="footer">
                 <div id="contactAndMeans">
+                
                 {this.state.onMeans ?
+                <>
+                {this.state.onBapt ?
                     <div id="means" onMouseLeave={this.handleNormal}>
                         {/* eslint-disable-next-line */}
                         <a  href="https://m.me/100008584754501" target="_blank"><img id="mess" src='img\logo_messenger.png' alt='bonjour'/></a>
                         {/* eslint-disable-next-line */}
                         <a href="https://mail.google.com/mail/?view=cm&fs=1&to=baptiste1296@gmail.com&su=Proximo" target="_blank"><img id="gmail" src='img\logo_gmail.png' alt='bonjour'/></a>
                     </div>
+                    : null
+                     }
+                     {this.state.onFlo ?
+                    <div id="means" onMouseLeave={this.handleNormal}>
+                        {/* eslint-disable-next-line */}
+                        <a  href="https://m.me/100004930386235" target="_blank"><img id="mess" src='img\logo_messenger.png' alt='bonjour'/></a>
+                        {/* eslint-disable-next-line */}
+                        <a href="https://mail.google.com/mail/?view=cm&fs=1&to=floehr31@gmail.com&su=Proximo" target="_blank"><img id="gmail" src='img\logo_gmail.png' alt='bonjour'/></a>
+                    </div>
+                    : null
+                     }
+                     {!this.state.onBapt && !this.state.onFlo ?
+                        <div id="baptOrFlo">
+                            <div id="bapt" onClick={this.handleBapt}>Bapt</div>
+                            <div id="ou">ou</div>
+                            <div id="flo" onClick={this.handleFlo}>Flo</div>
+                        </div> : null }
+                
+                </>
                  : <div onClick={this.handleDisplayMeans} id="contact">Contacter le développeur</div>
                 }
                 </div>
-                <div id="copyright">Copyright © {date.getFullYear()} Baptiste MARTY. Tous droits réservés</div>
+                <div id="copyright">Copyright © {date.getFullYear()} Baptiste MARTY & Florian EHR. Tous droits réservés</div>
                 <div id="proxiBlock">
                     <div id="proxiLogoBlock">
                         <img id="proxiLogo" src='img\logo_proximo.png' alt="bonjour"/>