chore: updates

src/routes/sendMagicLink/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import { useState, useEffect } from "react";
 // import { useDispatch } from "react-redux";
-// import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import BASE_URL from "../../app/config";
 import StyledWrapper from "./styled";
@@ -17,7 +17,7 @@ export default function SendMagicLinkPage() {
     { isSuccess, isLoading, error },
   ] = useSendMagicLinkMutation();
 
-  // const navigateTo = useNavigate();
+  const navigateTo = useNavigate();
   // const dispatch = useDispatch();
   const [email, setEmail] = useState("");
   useEffect(() => {
@@ -48,6 +48,9 @@ export default function SendMagicLinkPage() {
     }
   }, [error]);
 
+  const handlePwdPath = () => {
+    navigateTo("/login");
+  };
   const handleLogin = (evt) => {
     evt.preventDefault();
     sendMagicLink(email);
@@ -94,6 +97,8 @@ export default function SendMagicLinkPage() {
                 {isLoading ? "Sending" : `Continue with Email`}
               </Button>
             </form>
+            <hr className="or" />
+            <Button onClick={handlePwdPath}>Sign in with Password</Button>
           </>
         )}
       </div>

src/routes/sendMagicLink/styled.js

@@ -43,6 +43,28 @@ const StyledWrapper = styled.div`
       gap: 20px;
       width: 360px;
     }
+    .or {
+      border: none;
+      position: relative;
+      height: 1px;
+      background-color: #e4e7ec;
+      margin: 26px 0;
+      &:after {
+        padding: 4px;
+        background-color: #fff;
+        content: "OR";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        font-size: 14px;
+        line-height: 20px;
+        color: #667085;
+      }
+    }
+    button {
+      width: 100%;
+    }
   }
 `;