From 68d5ef3c338b28c860e28519376e6c7e42606ec2 Mon Sep 17 00:00:00 2001
From: NancyAanchal <nancyjha2006@gmail.com>
Date: Thu, 18 Jul 2024 21:13:53 +0545
Subject: [PATCH] designed according to figma

---
 .../src/components/header/ChangeLanguage.tsx          | 11 ++++-------
 nepalingo-web/src/components/header/Header.tsx        |  2 +-
 nepalingo-web/src/components/header/Menu.tsx          | 11 ++++++-----
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/nepalingo-web/src/components/header/ChangeLanguage.tsx b/nepalingo-web/src/components/header/ChangeLanguage.tsx
index 87d4c05..c0bb892 100644
--- a/nepalingo-web/src/components/header/ChangeLanguage.tsx
+++ b/nepalingo-web/src/components/header/ChangeLanguage.tsx
@@ -12,27 +12,24 @@ const ChangeLanguage: React.FC = () => {
   };
 
   const handleSelect = (option: string) => {
-    if (option === "newari") {
-      //will be handled later
-    }
     setSelectedLanguage(option);
     setIsOpen(false);
   };
 
   const options = [
     { label: "Nepal Bhasa", value: "newari" },
-    { label: "Tajpuriya", value: "comingSoon" },
-    { label: "Maithili", value: "comingSoon" },
+    { label: "Tajpuriya", value: "tajpuriya" },
+    { label: "Maithili", value: "coming soon" },
   ];
 
   return (
     <div className="relative inline-block text-left">
       <button
         type="button"
-        className="inline-flex justify-between items-center w-48 h-11 px-4 rounded-md border border-gray-300 shadow-sm bg-gray-900 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none"
+        className="inline-flex items-center justify-between w-full px-4 py-2 rounded-lg border border-gray-300 shadow-sm bg-[#E6E6E6] text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none"
         onClick={toggleMenu}
       >
-        {selectedLanguage}
+        <span>{selectedLanguage}</span>
         <FontAwesomeIcon icon={faChevronDown} className="ml-2" />
       </button>
       <Menu isOpen={isOpen} onSelect={handleSelect} options={options} />
diff --git a/nepalingo-web/src/components/header/Header.tsx b/nepalingo-web/src/components/header/Header.tsx
index 80bed5a..a54893b 100644
--- a/nepalingo-web/src/components/header/Header.tsx
+++ b/nepalingo-web/src/components/header/Header.tsx
@@ -15,7 +15,7 @@ const Header: React.FC = () => {
             <img src={logo} alt="Nepalingo Logo" className="h-12" />
           </a>
         </div>
-        <div className="absolute left-1/2 transform -translate-x-1/2 translate-x-60">
+        <div className="absolute right-20">
           <ChangeLanguage />
         </div>
         <div className="absolute right-4">
diff --git a/nepalingo-web/src/components/header/Menu.tsx b/nepalingo-web/src/components/header/Menu.tsx
index 8edf7a2..ad3a273 100644
--- a/nepalingo-web/src/components/header/Menu.tsx
+++ b/nepalingo-web/src/components/header/Menu.tsx
@@ -10,21 +10,22 @@ const Menu: React.FC<MenuProps> = ({ isOpen, onSelect, options }) => {
   if (!isOpen) return null;
 
   return (
-    <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none">
+    <div className="origin-top-right absolute left-0 mt-2 rounded-lg shadow-lg bg-[#E6E6E6] ring-1 ring-black ring-opacity-5 focus:outline-none">
       <div
-        className="py-1"
         role="menu"
         aria-orientation="vertical"
         aria-labelledby="options-menu"
       >
-        {options.map((option) => (
+        {options.map((option, index) => (
           <button
             key={option.value}
             type="button"
-            className={`w-full text-left px-4 py-2 text-sm text-white ${
+            className={`w-full text-left px-4 py-2 text-sm text-gray-900 ${
+              index === 0 ? "rounded-t-lg" : ""
+            } ${
               option.value === "comingSoon"
                 ? "text-gray-500 cursor-not-allowed"
-                : "hover:bg-gray-800"
+                : "hover:bg-[#D03641] hover:text-white"
             }`}
             onClick={() =>
               option.value !== "comingSoon" && onSelect(option.value)