Skip to content

Refactor authentication pages: replaced Bootstrap with Tailwind CSS #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

farhannadim311
Copy link

Summary

This PR updates the authentication templates to use Tailwind CSS instead of Bootstrap. It improves design consistency, responsiveness, and maintains the PyLadiesCon branding and dark theme.


🔧 Files Modified:

  • templates/account/login.html
  • templates/account/signup.html
  • templates/portal/base.html
  • templates/portal/index.html

🎨 Changes Made:

  • Replaced Bootstrap classes with Tailwind utility classes
  • Implemented consistent form styling
  • Custom styles for inputs, buttons, and containers
  • Maintained brand colors and retro/tech fonts
  • Added responsive layout and spacing
  • Semi-transparent backdrops with blur
  • Error message styling
  • Accessibility improvements (contrast, text sizes)
  • Autofill override styles for better UX

🖼️ Screenshots:

Screenshot_2025-04-06_11-38-27
Screenshot_2025-04-06_11-38-34
Screenshot_2025-04-06_11-39-06


Let me know if there are any suggested changes! Happy to make adjustments.

Copy link
Contributor

@Mr-Sunglasses Mr-Sunglasses left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @farhannadim311 Thanks for the PR, I think this can affect other pages which are using Bootstrap, which is a blocker for this PR, IMO you need to changes all the pages to use tailwind, if you are removing bootstrap from the base template.

@farhannadim311
Copy link
Author

@Mr-Sunglasses you are correct, i only have changed the classname instead of using tailwind as a cdn or doing pip- install tailwind. i apologize for my misleading description, however i wanted to work on this as a summer project for gsoc and i made changes just to the login and landing page of the website to match the theme of pycon ladies. if you think that the theme matches, i can do another pull request using tailwind as cdn or installing django-tailwind as a dependency, whatever you would like. thank you

Copy link
Author

@farhannadim311 farhannadim311 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the portal directory which contains -
base.html (switched to tailwind via cdn)
index.html (pulls from it)

for the templates directory, i created a file called base_auth.html and the login and signup pulls from that, so this should leave the rest of the file accessible by bootstrap till changes to it are made using tailwind and the login and signup should work fine as well since its more modularised now

@@ -0,0 +1,55 @@
<!DOCTYPE html>
{% load static %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The load templatetag needs to be the first line of the html file.

<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start. Is this something that can be stored in a separate css file?

</div>
</div>

<style>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to refactor and move this out to its own custom css?

@Mariatta
Copy link
Member

Mariatta commented Apr 6, 2025

It's a great start.
We should probably use django-tailwind package https://django-tailwind.readthedocs.io/
Is it possible to implement a theme that supports dark/light mode? If not, I prefer defaulting to light mode. (light background, dark text(

@farhannadim311
Copy link
Author

Hi @Mariatta, I can definitely work on the changes that you want, as for the light theme and dark theme. i would need some time on that, i should be able to do a seperate theme by this week. another change that i want to do as well, is to change the theme. although the theme looks really similar to the original pycon ladies theme, upon further inspection on the original pycon ladies gradient theme, i saw that it wasn't exactly the same. i will try to bring about the following changes. thank you
Screenshot 2025-04-06 185706

Copy link
Author

@farhannadim311 farhannadim311 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added a dark and light mode feature and changed the code structure a bit by moving a lot of the styles to auth.css

@farhannadim311 farhannadim311 requested a review from Mariatta April 18, 2025 05:25
@Mariatta
Copy link
Member

Mariatta commented May 2, 2025

Would you mind resolving the conflicts?

@farhannadim311
Copy link
Author

working on it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants