Merge pull request #127 from nepalcodes/profile-card-final

finished profile card

nepalingo-web/src/components/header/ChangeLanguage.tsx

@@ -8,6 +8,7 @@ const ChangeLanguage: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { selectedLanguage, switchLanguage } = useLanguage();
   const dropdownRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
@@ -31,7 +32,7 @@ const ChangeLanguage: React.FC = () => {
       window.removeEventListener("keydown", handleEscape);
       document.removeEventListener("click", handleOutsideClick);
     };
-  }, [open]);
+  }, [isOpen]);
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
@@ -50,13 +51,13 @@ const ChangeLanguage: React.FC = () => {
     <div ref={dropdownRef} className="relative text-left h-full">
       <button
         type="button"
-        className="w-full bg-grayDark px-6 h-10 rounded-lg  text-sm font-medium text-gray-900 focus:outline-none"
+        className="w-48 bg-grayDark px-4 h-10 rounded-lg text-sm font-medium text-gray-900 focus:outline-none flex justify-between items-center"
         onClick={toggleMenu}
       >
-        <span className="text-white font-primary font-black ">
+        <span className="text-white font-primary font-black">
           {selectedLanguage}
         </span>
-        <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-white " />
+        <FontAwesomeIcon icon={faChevronDown} className="text-white ml-2" />
       </button>
       <Menu isOpen={isOpen} onSelect={handleSelect} options={options} />
     </div>

nepalingo-web/src/components/header/Header.tsx

@@ -5,7 +5,7 @@ import ChangeLanguage from "@/components/header/ChangeLanguage";
 
 const Header: React.FC = () => {
   return (
-    <nav className=" border-gray-200 px-4 lg:px-6 py-1 bg-gradient-to-r from-black via-gray-900 to-black text-white flex justify-between items-center w-full h-16">
+    <nav className=" border-gray-200 px-4 lg:px-6 py-1 bg-black text-white flex justify-between items-center w-full h-16">
       <div className="flex-1">
         <a href="https://nepalingo.com">
           <img src={logo} alt="Nepalingo Logo" className="h-12" />

nepalingo-web/src/components/header/UserProfile.tsx

@@ -1,86 +1,90 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef, useEffect } from "react";
 import UserAvatar from "@/components/UserAvatar";
 import { StreakContext } from "@/hooks/StreakContext";
 import { getPhrase } from "@/components/header/StreakPhrase";
 import { useAuth } from "@/hooks/Auth";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFire } from "@fortawesome/free-solid-svg-icons";
+import fire from "@/assets/fire.svg";
 
 const UserProfile: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { user, signOut } = useAuth();
   const { currentStreak, longestStreak } = useContext(StreakContext);
   const phrase = getPhrase(currentStreak);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <div className="relative inline-block text-left">
       <button
         type="button"
-        className="inline-flex justify-center items-center w-12 h-12 rounded-full border border-gray-300 shadow-sm bg-gray-700 text-sm font-medium hover:bg-gray-600 focus:outline-none"
+        className="inline-flex justify-center items-center w-9 h-9 rounded-full border border-gray-300 shadow-sm bg-gray-700 text-sm font-medium hover:bg-gray-600 focus:outline-none"
         onClick={toggleMenu}
       >
         <div className="relative">
           <UserAvatar />
-          {currentStreak > 0 && (
-            <div className="absolute bottom-1 right-3 transform translate-x-1/2 translate-y-1/2 flex items-center justify-center">
-              <FontAwesomeIcon
-                icon={faFire}
-                className="text-yellow-600 text-2xl"
-              />
-              <span className="absolute text-sm text-white">
-                {currentStreak}
-              </span>
-            </div>
-          )}
         </div>
       </button>
       {isOpen && (
-        <div className="absolute right-0 mt-2 w-64 rounded-lg shadow-lg bg-[#2B2B2B] p-4">
+        <div
+          ref={dropdownRef}
+          className="absolute right-0 mt-2 w-64 rounded-lg shadow-lg bg-[#2B2B2B] p-4"
+        >
           <div className="flex flex-col items-center">
             <div className="w-16 h-16">
               <UserAvatar />
             </div>
-            <span className="mt-1 text-white text-lg font-bold">
+            <span className="mt-1 text-white font-primary font-black">
               {user?.user_metadata?.username}
             </span>
-            <span className="mt-0 text-gray-400 text-sm">{phrase}</span>
+            <span className="mt-0 text-gray-400 font-primary text-sm">
+              {phrase}
+            </span>
           </div>
           <div className="mt-2 p-4 bg-[#D03641] rounded-lg text-white">
             <div className="flex justify-around">
               <div className="flex flex-col items-center">
                 <div className="relative">
-                  <FontAwesomeIcon
-                    icon={faFire}
-                    className="text-yellow-500 text-6xl"
-                  />
-                  <span className="absolute inset-0 flex items-center justify-center font-bold text-2xl text-white">
+                  <img src={fire} className="text-yellow-500 text-6xl" />
+                  <span className="absolute font-black font-primary text-2xl text-white font-primary bottom-3 left-1/2 transform -translate-x-1/2">
                     {currentStreak}
                   </span>
                 </div>
-                <span className="mt-1">Current</span>
+                <span className="mt-1 font-primary">Current</span>
               </div>
               <div className="border-l border-white h-16"></div>
               <div className="flex flex-col items-center">
                 <div className="relative">
-                  <FontAwesomeIcon
-                    icon={faFire}
-                    className="text-yellow-500 text-6xl"
-                  />
-                  <span className="absolute inset-0 flex items-center justify-center font-bold text-2xl text-white">
+                  <img src={fire} className="text-yellow-500 text-6xl" />
+                  <span className="absolute font-black font-primary text-2xl text-white font-primary bottom-3 left-1/2 transform -translate-x-1/2">
                     {longestStreak}
                   </span>
                 </div>
-                <span className="mt-1">Longest</span>
+                <span className="mt-1 font-primary">Highest</span>
               </div>
             </div>
           </div>
           <button
             type="button"
-            className="mt-2 w-full py-2 rounded-lg bg-[#D03641] text-white font-bold hover:bg-[#A02C35] focus:outline-none"
+            className="mt-2 w-full py-2 rounded-lg bg-[#D03641] text-white font-primary font-black hover:bg-[#A02C35] focus:outline-none"
             onClick={signOut}
           >
             Log out