Merge pull request dhairyagothi#358 from Mradul-code/main

changes in mobile view
RiddhiM170904 · Oct 21, 2024 · 56834e1 · 56834e1
2 parents fd5bea1 + 1079c0f
commit 56834e1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import './Herosection.css';
 import logo from '../assets/stationsaarthi.svg';
 import navigationsvg from '../assets/svg/navigation.svg';
-// import navigation from './navigation';
 import bookingsvg from '../assets/svg/bookings.svg';
 import stationsvg from '../assets/svg/station.svg';
 import noticationsvg from '../assets/svg/notification.svg';
@@ -59,7 +58,7 @@ const Herosection = () => {
 
                 <div className='relative z-10 grid justify-items-center'>
                     <img src={logo} alt="" srcset="" style={{ height: "40vh" }} />
-                    <h1 className='text-2xl font-extrabold text-white'>Station Saarthi : Your Platform Guide</h1>
+                    <h1 className='text-2xl font-extrabold text-white text-center'>Station Saarthi : Your Platform Guide</h1>
                 </div>
                 {/* <img src={bg} alt="whitishbg" style={{ position: "absolute", bottom: 0 }} />
             <img src={bgmobile} alt="" style={{ position: "absolute", bottom: 0, zIndex: "10" }} className="md:hidden" /> */}
@@ -70,7 +69,7 @@ const Herosection = () => {
                 <button type="submit" onClick={RegisterClick} className="w-20 py-2 ml-8 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Register</button>
             </div>
 
-            <div className='grid grid-cols-3 gap-4 pb-20 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>
+            <div className='grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>
             <div 
   type="submit" 
   onClick={ContributorCLick} 
@@ -112,10 +111,12 @@ const Herosection = () => {
                 <div type="submit" onClick={NotificationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'><img src={noticationsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg " /> <button type='submit' onClick={NotificationCLick} className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Notification</h1></button></div>
 
             </div>
-
-          <Chatbot/>
-
-
+            <div  
+  className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer  right-5 -bottom-8 md:-bottom-5"
+>
+<Chatbot/>
+  <h1 className="text-xs font-bold text-black">Saarthi</h1>
+</div>
         </>
     );
 };

diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx
@@ -95,7 +95,7 @@ const BackButton = styled(FaArrowLeft)`
 
 const SearchIcon = styled(FaSearch)`
   font-size: 18px;
-  color: white;
+  color: rgb(6 25 47);
   cursor: pointer;
   transition: color 0.3s;
   &:hover {
@@ -105,7 +105,7 @@ const SearchIcon = styled(FaSearch)`
 
 const ClearIcon = styled(FaTimes)`
   font-size: 16px;
-  color: white;
+  color: rgb(6 25 47);
   cursor: pointer;
   margin-left: 5px;
   transition: color 0.3s;
@@ -123,7 +123,7 @@ const SearchContainer = styled.div`
   right: 16px;
    padding-block:6px;
   padding-inline:10px;
-  background-color: #3B82F6;
+  background-color: rgb(191 219 254);
   border-radius: 30px;
   
 `;
@@ -132,14 +132,14 @@ const SearchInput = styled.input`
   
  
   background-color: transparent;
-  color: white;
+  color: rgb(6 25 47);
   outline: none;
   width: ${({ isFocused }) => (isFocused ? "200px" : "0px")}; 
   transition: width 0.4s ease;
   opacity: ${({ show }) => (show ? 1 : 0)};
   pointer-events: ${({ show }) => (show ? "auto" : "none")};
   &::placeholder {
-    color: #C4E1F6;
+    color: rgb(6 25 47);
   }
 `;
 

diff --git a/frontend/src/components/navbar.jsx b/frontend/src/components/navbar.jsx
@@ -99,7 +99,7 @@ const Navbar = () => {
       </div>
 
       {/* Sidebar Navigation (Covers 25% on larger screens, full width on mobile) */}
-      <div className={`fixed inset-y-0 left-0 bg-white shadow-lg ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 w-full lg:w-1/4`}>
+      <div className={`fixed inset-y-0 left-0 bg-white shadow-lg ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 w-[80%] lg:w-1/4`}>
 
         {/* Close Button inside Sidebar */}
         <div className="flex justify-end p-4">
@@ -113,7 +113,7 @@ const Navbar = () => {
           {/* Profile Section */}
           <FaUser className="text-6xl" />
           <p className="mt-2 text-lg font-semibold">Yatree</p>
-          <p className="text-sm">3.9 ★</p>
+          <p className="text-sm">5.0 ★</p>
         </div>
 
         {/* Menu Items */}
@@ -137,7 +137,7 @@ const Navbar = () => {
             </li>
             <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleOpenModal}>
               <FaStar className="mr-3 text-blue-300" />
-              <span className="text-lg"> </span>
+              <span className="text-lg"> Feedback </span>
             </li>
             <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleSettingsClick}>
               <IoSettings className="mr-3 text-blue-300" />