Visual redesign & style refactoring

[pixup1]

Description

This PR refactors all the style code from Tailwind to pure CSS classes, and redesigns the whole frontend using the new graphic charter. I also fixed like 10 other design-related issues.

Checklist

• I have tested the changes locally and they work as expected.
• I have tested the responsiveness of the changes and they work as expected.
• I have assigned the pull request to the appropriate reviewer(s).
• I have added labels to the pull request, if necessary.

Refactored files (zero Tailwind classes) :

• src/App.vue
• src/assets/XLogo.vue
• src/components/AdminPizza/PizzaModal.vue
• src/components/Content.vue
• src/components/Footer.vue
• src/components/FormField.vue
• src/components/Hero.vue
• src/components/LoginForm.vue
• src/components/Map.vue
• src/components/Modal.vue
• src/components/NameConfirmationModal.vue
• src/components/Navigation.vue
• src/components/Notification.vue
• src/components/PartnerCard.vue
• src/components/Partners.vue
• src/components/PasswordInput.vue
• src/components/PasswordResetForm.vue
• src/components/PaymenStatusIcon.vue
• src/components/PaymentStatusIcon.vue
• src/components/PizzaCard.vue
• src/components/Planning.vue
• src/components/ProgressBar.vue
• src/components/RegisterForm.vue
• src/components/StringListInput.vue
• src/components/Tournament/Admin/AdminBracket.vue (318 lines)
• src/components/Tournament/Admin/AdminGroups.vue (340 lines)
• src/components/Tournament/Admin/AdminGroupsMatchs.vue (231 lines)
• src/components/Tournament/Admin/AdminSwiss.vue (383 lines)
• src/components/Tournament/Admin/TournamentAdminStages.vue (950 lines)
• src/components/Tournament/Admin/TournamentAdminTeams.vue (149 lines)
• src/components/Tournament/Bracket.vue (215 lines)
• src/components/Tournament/GroupDetail.vue (51 lines)
• src/components/Tournament/GroupTable.vue (361 lines)
• src/components/Tournament/MatchCard.vue (367 lines)
• src/components/Tournament/PrivateTournamentCard.vue
• src/components/Tournament/SeatingPlan.vue (325 lines)
• src/components/Tournament/SwissRoundTable.vue (88 lines)
• src/components/Tournament/TeamCard.vue
• src/components/Tournament/TournamentBrackets.vue (236 lines)
• src/components/Tournament/TournamentCard.vue
• src/components/Tournament/TournamentGroups.vue (104 lines)
• src/components/Tournament/TournamentInfo.vue (216 lines)
• src/components/Tournament/TournamentPlanning.vue
• src/components/Tournament/TournamentRules.vue
• src/components/Tournament/TournamentSeating.vue
• src/components/Tournament/TournamentStages.vue (161 lines)
• src/components/Tournament/TournamentSwiss.vue (20 lines)
• src/components/Tournament/TournamentTeams.vue (131 lines)
• src/components/Tournament/TravelFormModal.vue
• src/components/TournamentMeCard.vue
• src/views/AdminPizza/AdminPizza.vue (781 lines)
• src/views/AdminPizza/AdminPizzaExportList.vue (262 lines)
• src/views/AdminPizza/AdminPizzaList.vue (212 lines)
• src/views/AdminPizza/PizzaListEl.vue
• src/views/AdminPizza/PizzaModal.vue
• src/views/Archives.vue
• src/views/Association.vue
• src/views/Cart.vue
• src/views/Eat.vue
• src/views/EmailVerif.vue
• src/views/Home.vue
• src/views/Informations.vue
• src/views/Login.vue
• src/views/Logout.vue
• src/views/Me.vue
• src/views/NotFound.vue
• src/views/Register.vue
• src/views/ResetPassword.vue
• src/views/ReturnPayment.vue
• src/views/ScanQrCode.vue
• src/views/Schedule.vue
• src/views/TeamDetail.vue
• src/views/Tournament/Tournament.vue
• src/views/Tournament/TournamentDetail.vue
• src/views/Tournament/TournamentRegister.vue
• src/stores/content.store.ts

Final checks:

• Removed all instances of layer="override" (used to redefine tailwind classes)
• Checked that everything looks fine without Tailwind
• Removed Tailwind dependency
• Made sure all icon buttons are accessible (wrapped in <button type="button"> tag with a title attribute) and made all clickable elements buttons (check all c-btn-* instances)
• [Kinda mostly] Animated modals closing

CMS changes

Here are the changes that will need to happen to the content on the production website after this is merged :

• Replace all the colored text <span style="color:#48cad9">text</span> with bold **text**;
• Adjust the content of the home page to have just the schedule in the left column and the rest of the text in the right column;
• Remove all the random <h1> tags from the home page;
• Unify and check title levels (amount of #)
• Add the Adresse content, that will appear above the map;
• Rename parti_public to partie_public;
• Add the lan file (File, not Content) which is a photo that will be in the background of the "Association" page (in webp format if possible);

Related Issues

Fix #200
Fix #124
Fix #224
Fix #225
Fix #228
Fix #226
Fix #189
Fix #147
Fix #202
Fix #49
Fix #137
Fix #220

Screenshots

NB: The "Input Text" was replaced, just couldn't be bothered to make a new screenshot

[awing-ding]

Whats the difference between style in the style.css and style directly in the file ? Like can't we put it all in the same place ?

[pixup1]

Whats the difference between style in the style.css and style directly in the file ? Like can't we put it all in the same place ?

Style directly in the files is scoped, so it doesn't affect other files. It's more logical to do this unless the class is susceptible to be used in at least a few files. So for instance, for the video player, I just want the bottom corners to be rounded, but I'm never going to use that class anywhere else. It would clutter style.css if I added that in there, and I would have to come up with more unique names and follow a stricter naming convention. So I declare it as scoped in Hero.vue.

[pixup1]

But I do wonder if I shouldn't just use the style html field for those classes. I know it's advised to not use it but idk why.

[awing-ding]

But I do wonder if I shouldn't just use the style html field for those classes. I know it's advised to not use it but idk why.

AFAIK it isn't recommanded because you put style at a lot of different places and it gets hard to maintain

[pixup1]

Yeah but is it really better to make classes I only use once

[floflo0]

If a class is only use once, it's okay to put it in the file it will be used in

[floflo0]

Also, there's several places where the text isn't really readable due to the contrasts :

• The progress bar :

• The alert link :

I don't know if we can do anything to improve those contrasts.

[pixup1]

Also, there's several places where the text isn't really readable due to the contrasts :

* The progress bar :

* The alert link :

I don't know if we can do anything to improve those contrasts.

I fixed the links but yeah for the progress bars I don't know. I looked into fixing this back when I created the ProgressBar component, but as far as I can tell there's no way to have alternate "blend modes" with just CSS (which would give us an inverted effect that would guarantee readability). I made #240 if someone wants to look at this in the future.