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] 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>