From 9e5d1c61fbeec87fb463d7806220a2ab73a7cb72 Mon Sep 17 00:00:00 2001
From: lillian-tran <lilliantran17@gmail.com>
Date: Mon, 9 Dec 2024 00:25:49 -0500
Subject: [PATCH 1/2] welcome page styling edits

---
 src/components/Dropdown/LanguageDropdown.jsx | 16 ++++---
 src/pages/Welcome.jsx                        | 47 +++++++++++---------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/components/Dropdown/LanguageDropdown.jsx b/src/components/Dropdown/LanguageDropdown.jsx
index 2918a4e..e517651 100644
--- 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
index 0795a96..4d37ed6 100644
--- 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;
\ No newline at end of file

From b0e0753422650cadec745730a258d3b2fe6eb6d9 Mon Sep 17 00:00:00 2001
From: myix765 <myix765@gmail.com>
Date: Wed, 11 Dec 2024 18:58:54 -0500
Subject: [PATCH 2/2] small style changes

---
 src/App.jsx                                  | 4 +++-
 src/components/Dropdown/Dropdown.jsx         | 4 ++--
 src/components/Dropdown/LanguageDropdown.jsx | 8 ++++----
 src/index.css                                | 6 ++++++
 src/pages/Welcome.jsx                        | 2 +-
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f87a46d..1294122 100644
--- 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
index 058797f..cde490d 100644
--- 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
index e517651..5522a2d 100644
--- a/src/components/Dropdown/LanguageDropdown.jsx
+++ b/src/components/Dropdown/LanguageDropdown.jsx
@@ -31,8 +31,8 @@ const LanguageDropdown = () => {
   return (
     <Dropdown
       label={
-        <div className="flex items-center justify-center space-x-1 w-full">
-          <IoGlobeOutline size={18} className="text-black" />
+        <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>
       }
@@ -43,8 +43,8 @@ const LanguageDropdown = () => {
         <button
           key={lang}
           className={`block w-full text-center px-4 py-2 text-sm ${selectedLang === lang
-              ? 'text-blue-500 bg-gray-50'
-              : 'text-gray-700'
+            ? 'text-blue-500 bg-gray-50'
+            : 'text-gray-700'
             } hover:bg-gray-50`}
           role="menuitem"
           onClick={() => handleSelectLang(lang)}
diff --git a/src/index.css b/src/index.css
index 39b50c8..be9bdfb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,4 +20,10 @@
 @font-face {
     font-family: 'Avenir';
     src: url('./assets/fonts/AvenirLTStd-Heavy.otf') format('opentype');
+}
+
+@layer components {
+  .header-gradient {
+    background: radial-gradient(120% 177.59% at -20% 100%, rgba(255, 255, 255, 0.80) 0%, rgba(211, 237, 252, 0.80) 35.46%, rgba(178, 224, 250, 0.80) 57.09%, rgba(138, 199, 244, 0.80) 76.71%, rgba(63, 150, 234, 0.80) 100%);
+  }
 }
\ No newline at end of file
diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx
index 4d37ed6..ef77768 100644
--- a/src/pages/Welcome.jsx
+++ b/src/pages/Welcome.jsx
@@ -6,7 +6,7 @@ const Welcome = ({ onComplete }) => {
     const [, setLocation] = useLocation();
 
     return (
-        <div className="bg-blue-200 p-4 h-full min-h-[60vh] flex items-center justify-center">
+        <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>