designed according to figma

nepalcodes · Jul 18, 2024 · 68d5ef3 · 68d5ef3
1 parent 26d2246
commit 68d5ef3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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)