Feat: Add new design for search results page(no results found)

[heysolomon]

Fixes Issue

This PR closes #2175

Changes proposed

• added the new design for the search results page(no results found)

Screenshots

Note to reviewers

• made an update to the tailwind.config.js file by adding new colors that were used for building the Search page

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @rupali-codes on Vercel.

@rupali-codes first needs to authorize it.

[github-actions]

Thank you, heysolomon, for creating this pull request and contributing to LinksHub! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
linkshub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 0:00am

[rupali-codes]

hey @heysolomon, please make the following changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase side of the arrow in join discord button

Thanks for contributing :)

[heysolomon]

hey @heysolomon, please make the following changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase side of the arrow in join discord button

Thanks for contributing :)

Okay, making the fixes

[heysolomon]

hey @heysolomon, please make the following changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase side of the arrow in join discord button

Thanks for contributing :)

@rupali-codes I have made the changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase size of the arrow in join discord button

Note to reviewers

• I noticed the styles weren't taking effect when I tried reducing the vertical padding of the Button component in the className. I didn't want to change the padding in the component because I didn't know if the Button component was used elsewhere in the code. Ideally, my new styles are supposed to override the old ones. So, I added a tailwind package, tailwind-merge a utility function to merge Tailwind CSS classes efficiently in JS without style conflicts.

[Anmol-Baranwal]

hey @heysolomon, please make the following changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase side of the arrow in join discord button

Thanks for contributing :)

@rupali-codes I have made the changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase size of the arrow in join discord button

Note to reviewers

• I noticed the styles weren't taking effect when I tried reducing the vertical padding of the Button component in the className. I didn't want to change the padding in the component because I didn't know if the Button component was used elsewhere in the code. Ideally, my new styles are supposed to override the old ones. So, I added a tailwind package, tailwind-merge a utility function to merge Tailwind CSS classes efficiently in JS without style conflicts.

Yeah, tailwind merge is very useful and addition will just benefit in the longer run.

[heysolomon]

hey @heysolomon, please make the following changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase side of the arrow in join discord button

Thanks for contributing :)

@rupali-codes I have made the changes

• Remove extra space in sidebar,
• Shift the heading to left
• Reduce vertical adding in join discord button
• Increase size of the arrow in join discord button

Note to reviewers

• I noticed the styles weren't taking effect when I tried reducing the vertical padding of the Button component in the className. I didn't want to change the padding in the component because I didn't know if the Button component was used elsewhere in the code. Ideally, my new styles are supposed to override the old ones. So, I added a tailwind package, tailwind-merge a utility function to merge Tailwind CSS classes efficiently in JS without style conflicts.

Yeah, tailwind merge is very useful and addition will just benefit in the longer run.

Yeah

[aftabrehan]

Excellent PR, @heysolomon 💪 🚀 💯

It just needs minor adjustments and then we're good to go 🚀

[rupali-codes]

@heysolomon can you reduce the space between the search icon the top-heading

[heysolomon]

@heysolomon can you reduce the space between the search icon the top-heading

Sorry I don't clearly understand.

[rupali-codes]

@heysolomon i'm talking about this

• reduce size of the icon
• put some space around the icon
• make the button like earlier (voilet)

[Anmol-Baranwal]

Like this 👀

[heysolomon]

@heysolomon i'm talking about this

• reduce size of the icon
• put some space around the icon
• make the button like earlier (voilet)

Oh! okay. Working on it

[heysolomon]

@rupali-codes and @Anmol-Baranwal, I fixed the button color, icon size and spacing.

Here are screenshots of different views

Please let me know if there's any other thing I need to fix

[Anmol-Baranwal]

@rupali-codes
Please check.

[rupali-codes]

looks good to me

[aftabrehan]

Excellent PR, @heysolomon 💪 🚀 💯

[aftabrehan]

@Anmol-Baranwal and @CBID2 please help review and merge this PR. Thank you!

[CBID2]

Looks good to me too