Fix: Fixing search bar in responsive screens.

[DhairyaMajmudar]

GitHub Issue: #345 #355 #374
Fixes #345
Fixes #355
Fixes #374

Summary: fixed the search bar in responsive mode.

Changes Done:

1. Reduced width of the div.
2. Made div display inline in responsive mode.
3. Reduced the gap between search icon and text
4. Added the shadow for fixing issue 374
5. incorporated changes for the issue 355

Files Changed

1. components/Layout.tsx
2. pages/index.page.tsx
3. styles/globals.css

Screenshots

Before

After

Do you think resolving this issue might require an Architectural Decision Record (ADR)? (significant or noteworthy)

No

[DhairyaMajmudar]

@benjagm pls. have a look : )

[benjagm]

Nice job @DhairyaMajmudar !

It worked for all cases but one: Ipad Mini resolutions:

[benjagm]

Nice job @DhairyaMajmudar !

It worked for all cases but one: Ipad Mini resolutions:

[DhairyaMajmudar]

Thanks for testing , I will improve the iPad one and update my pr 😃

[DhairyaMajmudar]

@benjagm I have made the changes for iPad mini and also incorporated the changes from PR #358.

[benjagm]

You did amazing here incorporating all the request @DhairyaMajmudar. Congrats!!!

Now that we are fixing this section of the landing let's make the last change in the seach button to make the the lens icon appear closer to the Search text so we leave this PERFECT. Please see the image below.

What do you think about making this last change?

[DhairyaMajmudar]

Thank you for your appreciation @benjagm : )

I think the changes you are suggesting are good making icons and text close to each other is a good idea 👍🏻

[benjagm]

@Mvishal123 I am adding you as reviewer of this PR considering we are adding some of your changes for #355

[DhairyaMajmudar]

@benjagm I have made the suggested changes.

[benjagm]

I have checked the last version of code and I found something in the search button.
It seems you are centering the button content just considering the text, however what need to be centered is the block compound by the lens icon + text. See image:

[DhairyaMajmudar]

Sure will look into this 👍🏻

[DhairyaMajmudar]

@benjagm I have updated my PR with the suggested changes

[benjagm]

@benjagm I have updated my PR with the suggested changes

I was speaking about the blue button @DhairyaMajmudar !! But great you fixed that one too.
So the only 2 thing pending are:

1. fix the centering of the content of the blue button
2. I just found this when resizing the window. Can we have the 3 buttons the same width in all scenarions?

[benjagm]

Left 2 small comments in the PR discussion:
#359 (comment)

[DhairyaMajmudar]

Left 2 small comments in the PR discussion: #359 (comment)

Thankyou will fix this 👍🏻

[DhairyaMajmudar]

@benjagm I have done the suggested fixes pls. have a look

[benjagm]

Looks good to me. Thanks!!