I'm thinking of adding a copy link button, so we don't have to manually copy the address.

• the "copy link" button besides "<- create a wish" button
• notified "link copied" when clicked. I'm thinking of changing the button style instead of pop up alert.

Currently int the browser tab we can see the default Nextjs favicon that can be potentially replaced with a nice logo or something like a bday cake etc .

Along with wishing the person we can add a randomly generated message to display with it like : Happy Birthday ! May you have a successful and Wonderful year.

• On the index page, the header and the input field with the 'go' button will move slightly when the theme selector starts transitioning. I'm not sure if that's intentional, but it's more like a laggy bug to me. Therefore, I've wrapped the theme selector in an absolute container to prevent that.
• The cursor will now be pointer when choosing the theme
• Remove padding from the [...name] page. It causes a gap between Happy Birthday and the name input

Also, I'd like to make a discussion first, before proceeding with the following changes

• I'd like to add maybe a contrast or a dynamic color to the copy link button (Which is green at the moment regardless of the theme) I tried the css invert() but it gives a completely opposite color which doesn't suit the theme
• The border of a theme selector radio button doesn't seem to work properly on iPad Safari

on the second page (once you've clicked the go button), the words on the second page are broken up if the screen gets smaller. This happens with any of the words at the top, depending on the screen size.

someone else can take this request

.

New ErrorPopup component, replace default JS alert.

Generated files:

• ErrorPopup.js
• ErrorPopup.module.css

I'm not a graphic designer so any feedback to the design I'll welcome it with open arms jeje (:

Hi @gouravkhunger (: This is my first contribution ever to a public repository, I hope you like it.

This PR extract button logic to a generic component.

Generated files:

• Button.js component
• Button.module.css

I've added a flex container for each word. It should look better on small screen size (Minimum around 400px). It should break by word instead of individual letter. Also, row-gap should prevent animating text from overlapping.

Pheww It's truly a huge feature. Took way longer than I expected 💥

Here're what I implemented

• I noticed from the PR discussion. If we wrote a button which is a stateful component within the page component, when its state changes, it will cause the entire page to rerender (The quote change after clicking the copy button). Therefore, I extracted the button component and put it in the component folder separately
• Use flex box on the button and footer. Should be more responsive and easier to add spacing
• The button's style will change when clicked
• I've added the counter for the button to revert back to the same blue one. If the you keep clicking it, the timer will reset.
• If you come from URL other than home page (/), the copy button will not be shown.

I've got to learn a lot from this small button and I hope you like its smoothness as much as I am. Thank you so much for the opportunity!

Hey it's Phat!

I've added an animation to the happy birthday [name] text. I'm thinking of adding more and provide the advance option in the home page for the user to select. Hope you like it as much as I do.

Many thanks