welcome page styling edits

JumboCode · Dec 9, 2024 · 9e5d1c6 · 9e5d1c6
1 parent e76197d
commit 9e5d1c6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/src/components/Dropdown/LanguageDropdown.jsx b/src/components/Dropdown/LanguageDropdown.jsx
@@ -11,14 +11,14 @@ const langMapping = {
 };
 
 const LanguageDropdown = () => {
-  const [selectedLang, setSelectedLang] = useState();
+  const [selectedLang, setSelectedLang] = useState("Language"); // Default text
   const { i18n } = useTranslation();
 
   useEffect(() => {
     const savedLang = i18n.language;
     if (savedLang) {
       const langName = Object.keys(langMapping).find(key => langMapping[key] === savedLang);
-      setSelectedLang(langName);
+      setSelectedLang(langName || "Language"); // Fallback to "Language" if no match
     }
   }, [i18n.language]);
 
@@ -31,18 +31,20 @@ const LanguageDropdown = () => {
   return (
     <Dropdown
       label={
-        <div className="flex items-center space-x-1">
+        <div className="flex items-center justify-center space-x-1 w-full">
           <IoGlobeOutline size={18} className="text-black" />
-          <span>{selectedLang}</span>
+          <span className="text-center w-full">{selectedLang}</span>
         </div>
       }
-      buttonClassName="flex items-center space-x-1 text-base font-normal text-black min-w-fit pl-3 pr-4 py-2 sm:px-3 sm:py-2"
+      buttonClassName="flex items-center justify-center w-full text-base font-normal text-black min-w-fit px-4 py-2 sm:px-5 sm:py-3 rounded-lg bg-white"
     >
-      {/* drop down links */}
+      {/* Dropdown options */}
       {Object.keys(langMapping).map((lang) => (
         <button
           key={lang}
-          className={`block w-full text-left px-4 py-2 text-sm ${selectedLang === lang ? 'text-blue-500 bg-gray-50' : 'text-gray-700'
+          className={`block w-full text-center px-4 py-2 text-sm ${selectedLang === lang
+              ? 'text-blue-500 bg-gray-50'
+              : 'text-gray-700'
             } hover:bg-gray-50`}
           role="menuitem"
           onClick={() => handleSelectLang(lang)}

diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx
@@ -6,30 +6,35 @@ const Welcome = ({ onComplete }) => {
     const [, setLocation] = useLocation();
 
     return (
-        <>
-            <div className="bg-blue-200 p-4 h-full min-h-[60dvh] flex items-center justify-center">
-                <div className="text-center mb-12 mt-12 px-5">
-                    <h1 className="text-6xl font-bold mb-2">Dillar Academy</h1>
-                    <p className="mb-4">Free English education for Uyghurs around the world.</p>
-                    <div className="flex flex-col md:flex-row items-center justify-center gap-x-2 mb-2">
-                        <div className='px-2 rounded-lg transition-colors duration-300 border border-dark-blue-800 bg-white'>
-                            <LanguageDropdown />
-                        </div>
-                        <Button
-                            href="/SignUp"
-                            label={"Start Learning"}
-                            onClick={() => {
-                                onComplete()
-                                setLocation("/signup")
-                            }}
-                            isOutline={false}
-                        />
+        <div className="bg-blue-200 p-4 h-full min-h-[60vh] flex items-center justify-center">
+            <div className="text-center mb-12 mt-12 px-5">
+                <h1 className="text-6xl font-bold mb-4">Dillar Academy</h1>
+                <p className="mb-8 text-lg">Free English education for Uyghurs around the world.</p>
+                <div className="flex flex-col items-center gap-y-4 mb-6">
+                    {/* Language Dropdown with border */}
+                    <div className="w-full max-w-xs border border-dark-blue-800 rounded-lg bg-white">
+                        <LanguageDropdown className="w-full px-4 py-3 text-lg" />
                     </div>
-                    <h3 className='hover:text-blue-500 transition-colors'> <Link href="/login" onClick={onComplete}> Already have an account? </Link> </h3>
+                    {/* Start Learning Button */}
+                    <button
+                        className="w-full max-w-xs px-4 py-3 text-lg font-bold text-white bg-dark-blue-800 rounded-lg hover:bg-dark-blue-700"
+                        onClick={() => {
+                            onComplete();
+                            setLocation("/signup");
+                        }}
+                    >
+                        Start Learning
+                    </button>
                 </div>
+                {/* Login Link */}
+                <p className="text-blue-500 hover:underline">
+                    <Link href="/login" onClick={onComplete}>
+                        Already have an account?
+                    </Link>
+                </p>
             </div>
-        </>
+        </div>
     );
 };
 
-export default Welcome;
+export default Welcome;