Feat/login loading spinner 25

nikoescobal commented 3 months ago

Description

Added 4 different spinners to choose from for loading state after login
Spinner 1 is inspired by the dribble link you sent
Spinner 2 is similar but instead of circles, uses the logo
Spinner 3 is a fancy 3d animation spinner
Spinner 4 is a less fancy circle animation spinner (looks more 2d)
Updated Tailwind.config to include custom animations and colors

Closes #25

What change does this PR introduce?

LoginProcess.tsx was updated

Please select the relevant option(s).

[x] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[x] CI/CD (updates related to the CI/CD process)
[x] Documentation update (changes to docs/code comments)
[x] Chore (miscellaneous tasks that do not fall into the above options)

What is the proposed approach?

I wanted to provide multiple options for the spinner, so that we can choose the one that best fits the project theme

Please give a short overview/explanation on the approach taken to resolve the issue(s).

Checklist:

[x] The commit message follows our adopted guidelines
[x] Testing has been done for the change(s) added (for bug fixes/features)
[x] Relevant comments/docs have been added/updated (for bug fixes/features)

HusseinSerag commented 3 months ago

It is truly great work, but shouldn't stick with the same styling rules. I see we used tailwind for everything and just some css for a few things, so I think that maybe switching to css modules add an inconsistency. That is my only comment other than that great work!

nikoescobal commented 3 months ago

Thank you @HusseinSerag! I actually added 4 different spinners - 2 align with the brand guidelines (or at least I tried to make sure they do 😂. Have you seen the others? Also, I did my best to recreate the 3d spinner effect with only Tailwind but it is not possible unfortunately (check the 4th one). I should remove the scss.module for the 4th one as it uses just Tailwind

HusseinSerag commented 3 months ago

Yes, I checked everything out. Also @tjtanjin will have the last say. I think just refactoring the scss.module to normal css would be fine as we are using tailwind and we dont need sass, but anyways good work!

nikoescobal commented 3 months ago

Gotcha. I guess we'll just have to wait for what @tjtanjin has to say. And I'd argue the benefits of scss over CSS haha but I'm happy to adjust if this is what the team prefers. Thank you again for the kind words and feedback.

tjtanjin commented 2 months ago

Hey @nikoescobal, as discussed, let's go with the third spinner. Trouble you to update the PR 😊

nikoescobal commented 2 months ago

@tjtanjin PR is updated now - please check. I did notice though that we are still using slate-400 and slate-500. I think tailwindconfig needs cleaning up.

nikoescobal commented 1 month ago

@tjtanjin better late than never lol - I added in the changes!

hunxjunedo commented 5 days ago

@nikoescobal thanks for your contribution, great work! Your pr is being added to the main branch.

React-ChatBotify / gallery-website