small style changes

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

Hide file tree

Showing 5 changed files with 16 additions and 8 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
@@ -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
@@ -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%);
+  }
 }
diff --git 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>