From 8c55ce6d8f72071d8ddc38aae41cc8f44cf30935 Mon Sep 17 00:00:00 2001
From: Vanam <raghavendra.gv.vanam@gmail.com>
Date: Wed, 16 Oct 2024 11:29:51 +0530
Subject: [PATCH] Fixes #30 UI addition for signup and login modal 1. Removed
 clsx and making use of classNames to handle display of conditionals for
 tailwind

---
 package-lock.json        |  9 ---------
 package.json             |  1 -
 src/components/Modal.jsx | 22 ++++++++++++++++++----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 55aee0f..72053ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "classnames": "^2.5.1",
-        "clsx": "^2.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.0"
@@ -3654,14 +3653,6 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
diff --git a/package.json b/package.json
index b1fead6..353c5a6 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0"
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 9885661..486de28 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -1,7 +1,7 @@
 import AuthForm from "./AuthForm.jsx";
 import {useState} from "react";
-import clsx from "clsx";
 import PropTypes from 'prop-types';
+import classNames from "classnames";
 
 const Modal = ({ setIsModalOpen }) => {
   const [isSignUp, setIsSignUp] = useState(true);
@@ -10,11 +10,25 @@ const Modal = ({ setIsModalOpen }) => {
     setIsSignUp(true);
     setIsLogin(false);
   }
-
   const loginState = () => {
     setIsLogin(true);
     setIsSignUp(false);
   }
+  const loginClassNames = classNames(
+      "px-20 py-2 text-lg border-r-2 border-orange-400",
+      {
+        "text-black font-semibold bg-orange-50": isSignUp,
+        "text-orange-500 font-semibold": !isSignUp
+      }
+  )
+  const signUpClassNames = classNames(
+      "px-20 py-2 text-lg",
+      {
+        "text-orange-500 font-semibold": isSignUp,
+        "text-black font-semibold bg-orange-50": !isSignUp
+      }
+  )
+
 
   return (
       <>
@@ -27,12 +41,12 @@ const Modal = ({ setIsModalOpen }) => {
             </div>
             <div className={"flex border border-orange-400 rounded-full overflow-clip"}>
               <div>
-                <button className={clsx("px-20 py-2 text-lg border-r-2 border-orange-400", isSignUp ? "text-black font-semibold bg-orange-50" : "text-orange-500 font-semibold")}
+                <button className={loginClassNames}
                         onClick={loginState}>Login
                 </button>
               </div>
               <div>
-                <button className={clsx("px-20 py-2 text-lg", isSignUp ? "text-orange-500 font-semibold" : "text-black font-semibold bg-orange-50")}
+                <button className={signUpClassNames}
                         onClick={signUpState}>Signup
                 </button>
               </div>