Tailwinds conversions #425

seanmarcia · 2025-09-13T18:10:18Z

WIP

dcollie2 · 2025-10-08T21:19:52Z

We'll want to get the tag and file management interfaces back in shape.

- Replace custom pagination with Pagy bootstrap helper and ensure search filter params persist across pages - Update search ordering to use published_at instead of created_at for topics - Fix password reset page link text expected by tests (Login) and restore test description text - Adjust Searcheable concern year/month scopes to handle blank params safely

…ect and ensure correct ordering for tests

- Ensure state filter respects enums in Searcheable#by_state - Force immediate form submission for month and state selects to avoid stale content in tests

We do not have a surver/privacy policy/terms of use and only registered users can log in, so I removed those links and the card that made it sound like anyone could sign up.

With the old design, we were filtering out archived topics by default.

Oli0li · 2025-11-10T18:17:02Z

I've resolved the conflicts/removed some unnecessary links, still need to fix:

pagination
tags
document upload interface
"Topic statistics" not aligned on Topic form
Background colour for rows on Region charts (hard to read until we hover on a row)
I think we can remove the capital letter on a purple background on the Topic list, it wasn't clear to me that this was the first letter of the Topic name, which led me to wonder if this was some kind of code

This was causing the content of the table to be displayed by default on a green background, making it hard to read.

It wasn't clear to me what it meant when I saw it. Since it is not some kind of code to help idenfity a certain category of topic, I think it is best to remove it to avoid confusion and leave more space for the title.

Red is generally displayed for destructive actions, but here we were displaying "Edit" in red and "Archive" in orange. Since we are using orange on the Edit forms elsewhere, I've used orange for the Edit button, gray for Archive, and red for Delete. But orange is also often used to indicate a mildly dangerous action, so I wonder if it should be changed to something less alarming, like blue, purple or green. But editing a Topic can indeed be slightly dangerous if the user makes a mistake, so it could also be argued that orange is appropriate.

I also removed the "Danger Zone" as I thought it was a bit confusing that it showed warnings for a Delete feature that does not exist. If the stakeholders need this feature, they will let us know and we can add it at that point.

Admins can already see that information on the form itself or by clicking on the "View Provider Details" button below.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Oli0li · 2025-12-06T17:56:50Z

I've asked Claude to help convert a lot of the repetitive inline styles into Tailwind classes, but there are still many files to cover.
On top of some of @dmitrytrager's comments I still need to address, I've also noted this should be changed:

Add spacing on Providers#show
For Providers forms, maybe use the same style we have to select several regions as we have on the User form

The password reset page was completely unstyled. I re-used the same style as we have for the "Send reset instructions" page.

I saw no difference visually or in functionality after removing this code.

The password visibility toggle was displayed far to the right of the screen instead of in the password input field because the parent div was not the password field, but also contained the label.

dmitrytrager

Let's try to keep out view clean as much as possible

dmitrytrager · 2025-12-22T22:14:12Z

app/javascript/controllers/home_controller.js

+  }
+
+  disconnect() {
+    window.removeEventListener("scroll", this.handleNavbarScroll);


Do we need to remove other listeners on disconnect?

dmitrytrager · 2025-12-22T22:16:39Z

app/views/languages/_form.html.erb

+      <%= f.text_field :name,
+          placeholder: "Enter language name (e.g., English, Spanish, French)",
+          class: "input-field bg-gray-50" %>
+      <p class="mt-2 text-xs text-gray-500 m-0">This will be used to identify the language throughout the system.</p>


I can see different sets of classes for p, div and other tags. Are they all different?

I mean this one, for example, mt-2 text-xs text-gray-500 m-0 appears multiple times.
Can we extract set into our single css class? Is it a good practice with css?

dmitrytrager · 2025-12-22T22:20:15Z

app/views/languages/index.html.erb

+                  </td>
+                  <td class="table-cell text-right">
+                    <div class="flex gap-2 justify-end">
+                      <%= link_to edit_language_path(language), class: "btn-edit" do %>


Let's extract heavy html code like this (with svg, path) into partial and just reuse it.

Also consider using gems like this for inline svg

dmitrytrager · 2025-12-22T22:21:46Z

app/views/layouts/application.html.erb

+        color: #ef4444;
+      }
+
+      .text-blue-600 {


Can we extract css out of layouts?

dmitrytrager · 2025-12-22T22:22:56Z

app/views/layouts/session.html.erb

+
+    <script>
+      // Enhanced form interactions
+      document.addEventListener('DOMContentLoaded', function() {


Can we extract scripts like this into separate js files and just load it there?

dmitrytrager · 2026-01-07T14:21:14Z

app/views/regions/index.html.erb

+        <% end %>
+      </div>
+
+      <!-- Breadcrumb -->


This is worth moving into partials. We can find a way to paramaterize breadcrumbs

dmitrytrager · 2026-01-07T14:23:19Z

app/views/regions/show.html.erb

+    </div>
+
+    <!-- Success Message -->
+    <% if notice %>


This can be moved into partial as well. I can see notices rendering inside different views

dmitrytrager · 2026-01-07T14:25:16Z

app/views/sessions/new.html.erb

+  </div>
+<% end %>
+
+<% if flash[:notice] %>


And while moving into partials, we can generalise it to working with list of notices

dmitrytrager · 2026-01-07T14:29:19Z

app/views/tags/_list.html.erb

-        <% end %>
-      </td>
-    </tr>
+  <% if @tags.any? %>


Since we use enumerator on the next line .any? may be redundant here. It makes sense when we have else condition

dmitrytrager · 2026-01-07T14:31:16Z

app/views/tags/index.html.erb

+              <div class="relative">
+                <%= f.select :order,
+                    options_for_select([
+                      ["Name", :name],


Can we hardcode these options somewhere else (not inside view file)?

seanmarcia and others added 17 commits November 10, 2025 14:42

WIP

aba8f9b

wip

f34b00d

wip

d12793d

Wip

cfcb6ab

Wip

16b2189

wip

b777c5b

wip

316e8f4

wip

5d3475c

wip

e791089

Adjust topics search ordering and filter behavior; simplify order sel…

ccbde42

…ect and ensure correct ordering for tests

Fix remaining topic search state/month test failures

adaa276

- Ensure state filter respects enums in Searcheable#by_state - Force immediate form submission for month and state selects to avoid stale content in tests

Wip

1edb1aa

Remove unnecessary links

55d37a1

We do not have a surver/privacy policy/terms of use and only registered users can log in, so I removed those links and the card that made it sound like anyone could sign up.

Fix merge conflict

76c43a0

Fix upload management specs

3795fe7

Fix search spec expectations

a6811e4

With the old design, we were filtering out archived topics by default.

Oli0li force-pushed the tailwinds_conversions branch from 850fe0c to a6811e4 Compare November 10, 2025 18:03

Remove duplicate gem

1948d05

Oli0li added 4 commits November 17, 2025 17:06

Fix pagination

1b5061c

Fix missing closing div in Regions#index view

e9c5a4c

This was causing the content of the table to be displayed by default on a green background, making it hard to read.

Remove purple letter on Topic list

572389f

It wasn't clear to me what it meant when I saw it. Since it is not some kind of code to help idenfity a certain category of topic, I think it is best to remove it to avoid confusion and leave more space for the title.

Fix alignement on Topic form

51e7536

Oli0li force-pushed the tailwinds_conversions branch from 82f5572 to 5afd19b Compare November 18, 2025 19:07

Oli0li added 4 commits November 20, 2025 22:04

Merge main

c610c22

Fix broken svgs

d18ea15

Fix Topic form loading button logic

db90cd7

Style file upload interface

e5411cf

Oli0li added 6 commits December 6, 2025 16:44

Use Tailwind classes on Topics#index

3c9b31e

Use Tailwind classes on Language#edit form

e3acda8

I also removed the "Danger Zone" as I thought it was a bit confusing that it showed warnings for a Delete feature that does not exist. If the stakeholders need this feature, they will let us know and we can add it at that point.

Use Tailwind classes on Languages#index

79a06dc

Use classes for gradient styles

c139d46

Remove unnecessary info on Providers#edit

57e46fb

Admins can already see that information on the form itself or by clicking on the "View Provider Details" button below.

Copilot AI review requested due to automatic review settings December 6, 2025 17:56

Copilot AI reviewed Dec 6, 2025

View reviewed changes

Oli0li added 15 commits December 15, 2025 16:08

Merge branch 'main' into tailwinds_conversions

9a860f9

Load animations as asset

b4e3d8e

Simplify pagination

11468a8

Extract home JS into Stimulus controller

bb2b240

Add spacing on Provider#show

d6f639d

Refactor user views to avoid inline stylings

37e159f

Refactor tag views to avoid inline stylings

62972aa

Refactor topic views to avoid inline stylings

3ff2c31

Refactor region views to avoid inline stylings

9f80220

Refactor provider views to avoid inline stylings

b82fb59

Re-add columns that were present on Providers index

196df31

Refactor language views to avoid inline stylings

62f4ef5

Refactor import report views to avoid inline stylings

08972ab

Remove redundant style and make text more readable

64557ff

Merge branch 'main' into tailwinds_conversions

f965248

Oli0li requested a review from dmitrytrager December 15, 2025 22:42

Oli0li added 4 commits December 16, 2025 22:49

Style password reset page

a844d06

The password reset page was completely unstyled. I re-used the same style as we have for the "Send reset instructions" page.

Fix flash message text alignment

5be3481

Remove redundant code

5031a86

I saw no difference visually or in functionality after removing this code.

Fix issue with password visibility toggle

afba31a

The password visibility toggle was displayed far to the right of the screen instead of in the password input field because the parent div was not the password field, but also contained the label.

dmitrytrager reviewed Jan 8, 2026

View reviewed changes

Tailwinds conversions #425

Are you sure you want to change the base?

Tailwinds conversions #425

Uh oh!

Conversation

seanmarcia commented Sep 13, 2025

Uh oh!

dcollie2 commented Oct 8, 2025

Uh oh!

Oli0li commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Oli0li commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dmitrytrager left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Oli0li commented Nov 10, 2025 •

edited

Loading

Oli0li commented Dec 6, 2025 •

edited

Loading