Style and dinamic URL for the form done

public/css_styles/styles.css

@@ -349,6 +349,8 @@
   justify-content: space-around;
   padding: 5vh 0px;
   background-color: #1FAB89;
+  cursor: pointer;
+  transition: 0.4s ease-in-out;
 }
 .identify-container .identify .options-container .option h2 {
   font-family: "Raleway", sans-serif;
@@ -358,6 +360,10 @@
   user-select: none;
   color: #ffffff;
 }
+.identify-container .identify .options-container .active-option {
+  cursor: initial;
+  background-color: #15745c;
+}
 .identify-container .identify .form-container {
   display: flex;
   justify-content: center;

public/css_styles/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPGF;;;AQ3Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;;AQvBC;ERhBZ;EACA;EAQA;EACA;EACA;EQSgB;;AAKZ;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ARDpB;EACI;EACA;;;AAGJ;EACI;EACA,kBA1Be","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH5CE;;;AGqDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN2BU;;AMzBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPIF;;;AQ5Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;EQvBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRUM;;AQNd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ARTpB;EACI;EACA;;;AAGJ;EACI;EACA,kBA3Be","file":"styles.css"}

public/sass_styles/_identify.scss

@@ -17,6 +17,10 @@
                 padding: 5vh 0px;
                 background-color: $second-color;
 
+                cursor: pointer;
+
+                transition: 0.4s ease-in-out;
+
                 h2 {
                     @include titleFont();
                     @include normalizeTitle();
@@ -24,6 +28,11 @@
                     color: #ffffff;
                 }
             }
+
+            .active-option {
+                cursor: initial;
+                background-color: $second-color-darker;
+            }
         }
 
         .form-container {

public/sass_styles/styles.scss

@@ -41,6 +41,7 @@ $border-color: #969696;
 
 $main-color: #62D2A2;
 $second-color: #1FAB89;
+$second-color-darker: #15745c;
 $light-color: #9DF3C4;
 $lightest-color: #D7FBE8;
 

src/components/Identify Childrens/LoginForm.jsx

@@ -5,7 +5,7 @@ const LoginForm = () => {
         <form>
             <input type="email" placeholder="Email"></input>
             <input type="password" placeholder="Password"></input>
-            <input type="submit"></input>
+            <input type="submit" value="Login"></input>
         </form>
     )
 }

src/components/Identify Childrens/RegisterForm.jsx

@@ -6,7 +6,7 @@ const RegisterForm = () => {
             <input type="email" placeholder="Email"></input>
             <input type="password" placeholder="Password"></input>
             <input type="password" placeholder="Confirm Password"></input>
-            <input type="submit"></input>
+            <input type="submit" value="Register"></input>
         </form>
     )
 }

src/components/Identify.jsx

@@ -6,6 +6,30 @@ import RegisterForm from './Identify Childrens/RegisterForm'
 const Identify = () => {
     const [act, setAct] = useState('register')
 
+    const defineLogin = () => {
+        if (act !== 'login') {
+            setAct('login')
+        }
+    }
+
+    const defineRegister = () => {
+        if (act !== 'register') {
+            setAct('register')
+        }
+    }
+    
+    React.useEffect( () => {
+        const urlInfo = new URLSearchParams(window.location.search)
+        const action = urlInfo.get('act')
+        
+        if (action === 'r') {
+            setAct('register')
+        } else {
+            setAct('login')
+        }
+    }, [])
+
+
     return (
         <div className="identify-container">
             
@@ -13,11 +37,31 @@ const Identify = () => {
 
                 <nav className="options-container">
 
-                    <div className="option">
+                    <div
+
+                    className={
+                        act === 'login' ? 'option active-option': 'option'
+                    }
+
+                    onClick={() => {
+                        defineLogin()
+                    }}
+
+                    >
                         <h2>LOGIN</h2>
                     </div>
 
-                    <div className="option">
+                    <div
+
+                    className={
+                        act === 'register' ? 'option active-option': 'option'
+                    }
+                    
+                    onClick={() => {
+                        defineRegister()
+                    }}
+                    
+                    >
                         <h2>REGISTER</h2>
                     </div>
 
@@ -25,10 +69,10 @@ const Identify = () => {
 
                 <div className="form-container">
                 {
-                    act === 'login' ? <LoginForm /> : null    
+                    act === 'login' ? <LoginForm action={act}/> : null    
                 }
                 {
-                    act === 'register' ? <RegisterForm /> : null
+                    act === 'register' ? <RegisterForm action={act}/> : null
                 }
                 </div>
             </div>