Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Enhancement in Contact Us- issue no - #2393 #2419

Merged
merged 6 commits into from
Oct 29, 2024
Merged

UI Enhancement in Contact Us- issue no - #2393 #2419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0bf9707
Added box shadow in divs
Mahimatestgithub Oct 27, 2024
66aabfa
Added subscribe
Mahimatestgithub Oct 27, 2024
b4485c3
added hovering to social icons
Mahimatestgithub Oct 29, 2024
349fc6b
enhanced contact us
Mahimatestgithub Oct 29, 2024
a8f54fb
done
Mahimatestgithub Oct 29, 2024
2dce660
enhanced contact
Mahimatestgithub Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,13 +157,8 @@ export default function App() {
{/* Other user routes */}
<Route path="contributors" element={<Contributors />} />
<Route path="about-us" element={<AboutUs />} />
<<<<<<< HEAD
<Route path="help" element={<Help />} /> {/* Help page route */}
<Route path="privacy-policy" element={<Privacy />} />
=======
<Route path="help" element={<Help />} />
<Route path="privacy" element={<Privacy />} />
>>>>>>> 5eed12d9 (revert sadaf commit for category changes)
{/* Privacy policy page route */}
<Route path="cart" element={<Cart />} />
<Route
Expand Down
30 changes: 24 additions & 6 deletions src/User/components/Footer/Footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* Existing Footer Styles */
.footer {
background-color: #2e2e2e;
color: #fff;
Expand All @@ -9,13 +10,11 @@
.footer-top {
display: flex;
flex-direction: column;
/* gap: 20px; */
align-items: center;
}

.footer-top .logo img {
width: 80px;
/* Adjusted size for better visibility */
}

.footer-top .social-media {
Expand All @@ -33,7 +32,6 @@

.footer-top .social-icons a img {
width: 30px;
/* Adjusted size for consistency */
}

.footer-top .contact-info,
Expand All @@ -47,7 +45,6 @@
align-items: center;
justify-content: center;
gap: 10px;
/* Space between image and text */
margin: 5px 0;
color: #fff;
text-decoration: none;
Expand All @@ -60,7 +57,6 @@

.footer-top .address img {
width: 24px;
/* Adjusted size for better alignment */
height: 24px;
}

Expand Down Expand Up @@ -95,6 +91,28 @@
text-decoration: underline;
}

/* Social Media Icon Hover Effects */
.footer-top .social-icons a {
transition: transform 0.3s, filter 0.3s;
}

.footer-top .social-icons a:hover {
transform: scale(1.1);
}

.footer-top .social-icons a:nth-child(1):hover img {
filter: brightness(1.2) saturate(1.2);
}

.footer-top .social-icons a:nth-child(2):hover img {
filter: brightness(1.2) saturate(1.2);
}

.footer-top .social-icons a:nth-child(6):hover img {
filter: brightness(1.2) saturate(1.2);
}
Comment on lines +94 to +113
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using classes instead of nth-child selectors for better maintainability.

The current implementation has several potential improvements:

  1. Using nth-child selectors makes the code fragile if the order of social media icons changes
  2. The same filter values are duplicated across multiple selectors
  3. Some social media icons (3rd-5th) are missing hover effects

Consider refactoring to use specific classes:

- .footer-top .social-icons a:nth-child(1):hover img,
- .footer-top .social-icons a:nth-child(2):hover img,
- .footer-top .social-icons a:nth-child(6):hover img {
+ .footer-top .social-icons .social-hover:hover img {
  filter: brightness(1.2) saturate(1.2);
}

Then add appropriate classes (e.g., social-hover) to the social media links in the JSX.

Committable suggestion was skipped due to low confidence.


/* Responsive Styles */
@media (min-width: 768px) {
.footer-top {
flex-direction: row;
Expand Down Expand Up @@ -123,4 +141,4 @@
text-align: right;
justify-content: flex-end;
}
}
}
3 changes: 3 additions & 0 deletions src/User/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,9 @@ const Footer = () => {
</p>
</div>
<br />



<div className="social-media flex flex-col justify-center items-center">
<p className="text-sm text-center text-gray-400 sm:items-center underline">
SOCIALS:
Expand Down
6 changes: 6 additions & 0 deletions src/User/pages/Home/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
animation: smoothUpDown 2s infinite alternate ease-in-out;
}

.custom-shadow {
box-shadow: 0px 6px 20px rgba(60, 60, 60, 0.3); /* Dark gray, thick shadow */
border-radius: 8px;
}


@keyframes smoothUpDown {

0%,
Expand Down
37 changes: 32 additions & 5 deletions src/User/pages/Home/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,9 @@ const Home = () => {
const [suggestions, setSuggestions] = useState([]);
const navigate = useNavigate();

const [isSubscribed, setIsSubscribed] = useState(false);
const [email, setEmail] = useState("");

const handleSearch = (e) => {
const term = e.target.value;
setSearchTerm(term);
Expand All @@ -160,6 +163,17 @@ const Home = () => {
sectionRef.current.scrollIntoView({ behavior: "smooth" });
};


const handleSubscribe = (e) => {
e.preventDefault();
setIsSubscribed(true); // Show the success message
setTimeout(() => {
setIsSubscribed(false); // Hide the message
setEmail(""); // Clear the email input
}, 3000); // 3 seconds
};
Comment on lines +167 to +174
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add proper form validation and error handling.

The current implementation has several areas for improvement:

  1. Missing email validation
  2. No error handling
  3. No actual API integration
  4. Hard-coded timeout value

Consider implementing these improvements:

 const handleSubscribe = (e) => {
   e.preventDefault();
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!email || !emailRegex.test(email)) {
+    // Show error message
+    return;
+  }
+  
+  try {
+    // Add API call here
+    // await subscribeToNewsletter(email);
     setIsSubscribed(true);
     setTimeout(() => {
       setIsSubscribed(false);
       setEmail("");
-    }, 3000);
+    }, process.env.REACT_APP_SUBSCRIPTION_TIMEOUT || 3000);
+  } catch (error) {
+    // Handle error
+    console.error('Subscription failed:', error);
+  }
 };

Committable suggestion was skipped due to low confidence.



return (
<div className="bg-[#fff0e3ff]">
<main className="">
Expand Down Expand Up @@ -218,12 +232,14 @@ const Home = () => {
</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
{popularCategories.map((category, index) => (
<div key={index} className="custom-shadow">
<CategoryCard
key={index}
name={category.name}
image={category.image}
path={category.path}
/>
</div>
Comment on lines +235 to +242
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix duplicate key prop and missing CSS class definition.

Two issues need attention:

  1. The key prop is duplicated on both the wrapper div and CategoryCard
  2. The custom-shadow class is not defined in the provided code

Apply these fixes:

-<div key={index} className="custom-shadow">
-  <CategoryCard
-    key={index}
+<div className="custom-shadow">
+  <CategoryCard
+    key={index}
     name={category.name}
     image={category.image}
     path={category.path}
   />
 </div>

Also, ensure the custom-shadow class is defined in your CSS file:

.custom-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem;
}

))}
</div>
</div>
Expand All @@ -248,6 +264,13 @@ const Home = () => {
</div>
</div>
</section>







{/* App Download Section */}
<section
className="py-8 sm:py-12 md:py-16 relative mb-[-1px]"
Expand Down Expand Up @@ -286,20 +309,19 @@ const Home = () => {
Subscribe to our newsletter to receive exclusive updates,
promotions, and tips.
</p>
<form>
<form onSubmit={handleSubscribe}>
<input
type="email"
placeholder="Enter your email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
style={{
color: "black",
width: "100%",
borderRadius: "10px",
padding: "10px",
marginBottom: "10px",
border: "1px solid #ccc",
"@media (maxWidth: 780px)": {
width: "80%",
},
}}
/>
<button
Expand All @@ -313,8 +335,13 @@ const Home = () => {
cursor: "pointer",
}}>
Subscribe
</button>{" "}
</button>
</form>
{isSubscribed && (
<div className="popup-message">
<p>Subscribed successfully!</p>
</div>
)}
</div>
</section>
</div>
Expand Down