Merge pull request #62 from JumboCode/welcome-edits

Welcome Page Styling
JumboCode · Dec 12, 2024 · 632b789 · 632b789
2 parents b2630e0 + b0e0753
commit 632b789
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 32 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -21,7 +21,9 @@ const App = () => {
   return (
     <>
       <div className='min-h-screen grid grid-rows-[5rem_1fr] font-avenir box-border'>
-        <NavBar />
+        <div className={`${isNew ? 'hidden' : ''}`}>
+          <NavBar />
+        </div>
         <div className='hidden'></div>
         <div className='w-full'>
           {isNew ? (

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
@@ -26,7 +26,7 @@ const Dropdown = ({ label, children, buttonClassName = "dropdown-button text-rig
     <div ref={dropdownRef} className="relative">
       {/* dropdown button */}
       <button
-        className={buttonClassName}
+        className={`box-border ${buttonClassName}`}
         onClick={() => setIsOpen(!isOpen)}
         type="button"
       >
@@ -35,7 +35,7 @@ const Dropdown = ({ label, children, buttonClassName = "dropdown-button text-rig
       </button>
       {/* dropdown */}
       {isOpen && (
-        <div className="absolute mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
+        <div className="absolute mt-2 w-full rounded-md shadow-lg bg-white z-50 outline outline-white">
           <div className="py-1" role="menu" aria-orientation="vertical">
             {children}
           </div>

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">
-          <IoGlobeOutline size={18} className="text-black" />
-          <span>{selectedLang}</span>
+        <div className="flex items-center justify-center space-x-1">
+          <IoGlobeOutline size={24} className="text-black" />
+          <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="header-gradient p-4 h-screen 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;