From d9d13dfd20d56091edfb1ed54261a6c544ad4602 Mon Sep 17 00:00:00 2001 From: Aleksei Petrov Date: Tue, 3 Feb 2026 15:17:33 +0100 Subject: [PATCH 1/5] Refactor layout styles to use Tailwind utilities and enable Tailwind CSS watch process in development. --- app/assets/stylesheets/application.css | 9 + app/assets/tailwind/application.css | 5 +- app/views/layouts/application.html.erb | 271 +------------------------ config/puma.rb | 3 + 4 files changed, 18 insertions(+), 270 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f5c4d908..dfb9ac40 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,3 +10,12 @@ * * Note: Tailwind CSS is loaded separately via stylesheet_link_tag in the layout. */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; + background-color: #f9fafb; +} diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index da1c97d5..bbd7128b 100644 --- a/app/assets/tailwind/application.css +++ b/app/assets/tailwind/application.css @@ -285,10 +285,7 @@ nav.pagy a.gap { } .content-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; - overflow-x: hidden; + @apply max-w-7xl mx-auto overflow-x-hidden px-4; } .section-spacing { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 496e1674..0c2f2ef3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -23,272 +23,17 @@ <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "animations", "data-turbo-track": "reload" %> - - <%= javascript_importmap_tags %>
-
+
<%= render "layouts/sidebar" %>
-
-
+ +
+
<%= render "shared/flash" %> <%= yield %>
@@ -297,10 +42,7 @@ diff --git a/config/puma.rb b/config/puma.rb index a248513b..eec8576e 100644 --- a/config/puma.rb +++ b/config/puma.rb @@ -39,3 +39,6 @@ # Specify the PID file. Defaults to tmp/pids/server.pid in development. # In other environments, only set the PID file if requested. pidfile ENV["PIDFILE"] if ENV["PIDFILE"] + +# `rails server` (or just puma) will run the Tailwind watch process in the background. +plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development" From 6e202ca437788988899c625ed8cc20ff3f5d2b22 Mon Sep 17 00:00:00 2001 From: Aleksei Petrov Date: Tue, 3 Feb 2026 15:25:04 +0100 Subject: [PATCH 2/5] Refactor help text styling to use a consistent `help-text` class across forms. --- app/assets/tailwind/application.css | 4 ++++ app/views/languages/_form.html.erb | 2 +- app/views/providers/_form.html.erb | 6 +++--- app/views/regions/_form.html.erb | 3 +-- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index bbd7128b..40bdc0f4 100644 --- a/app/assets/tailwind/application.css +++ b/app/assets/tailwind/application.css @@ -514,3 +514,7 @@ nav.pagy a.current { .table-container table td.actions-col { white-space: nowrap; } + +.help-text { + @apply mt-2 text-xs text-gray-500 m-0; +} diff --git a/app/views/languages/_form.html.erb b/app/views/languages/_form.html.erb index 2f1ed58d..643bc66f 100644 --- a/app/views/languages/_form.html.erb +++ b/app/views/languages/_form.html.erb @@ -10,7 +10,7 @@ <%= f.text_field :name, placeholder: "Enter language name (e.g., English, Spanish, French)", class: "input-field bg-gray-50" %> -

This will be used to identify the language throughout the system.

+

This will be used to identify the language throughout the system.

diff --git a/app/views/providers/_form.html.erb b/app/views/providers/_form.html.erb index 34e8ee77..ee97b2f2 100644 --- a/app/views/providers/_form.html.erb +++ b/app/views/providers/_form.html.erb @@ -14,7 +14,7 @@ placeholder: "Enter provider name (e.g., Johns Hopkins, Mayo Clinic)", autofocus: true, class: "input-field bg-gray-50" %> -

The official name of the healthcare provider or organization.

+

The official name of the healthcare provider or organization.

@@ -26,7 +26,7 @@ <%= form.text_field :provider_type, placeholder: "e.g., Hospital, Clinic, Health System", class: "input-field bg-gray-50" %> -

The type or category of healthcare provider.

+

The type or category of healthcare provider.

@@ -38,7 +38,7 @@ { include_hidden: false }, multiple: true, class: "input-field bg-gray-50 min-h-[120px]" %> -

Select one or more regions this provider serves. Hold Ctrl/Cmd to select multiple.

+

Select one or more regions this provider serves. Hold Ctrl/Cmd to select multiple.

diff --git a/app/views/regions/_form.html.erb b/app/views/regions/_form.html.erb index 1fd4ada2..66263498 100644 --- a/app/views/regions/_form.html.erb +++ b/app/views/regions/_form.html.erb @@ -34,11 +34,10 @@ autofocus: true, placeholder: "Enter region name (e.g., North America, Europe, Asia-Pacific)", class: "input-field" %> -

+

Provide a clear, descriptive name for the geographical region this service area covers.

- From 2ad9f79d9479d56dc77a5bd8854585b4ae73c097 Mon Sep 17 00:00:00 2001 From: Aleksei Petrov Date: Wed, 4 Feb 2026 09:33:36 +0100 Subject: [PATCH 3/5] Refactor sidebar layout and styles to use Tailwind CSS utilities and improve maintainability. --- app/assets/tailwind/application.css | 6 +- app/assets/tailwind/components/sidebar.css | 7 ++ app/helpers/application_helper.rb | 10 +- app/views/layouts/_sidebar.html.erb | 103 ++++++++------------- app/views/topics/index.html.erb | 4 +- 5 files changed, 51 insertions(+), 79 deletions(-) create mode 100644 app/assets/tailwind/components/sidebar.css diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index 40bdc0f4..3291f484 100644 --- a/app/assets/tailwind/application.css +++ b/app/assets/tailwind/application.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import "./components/sidebar.css"; /* Tom Select Tailwind Styles */ @@ -280,12 +281,11 @@ nav.pagy a.gap { /* Layout Utilities */ .page-container { - min-height: 100vh; - padding: 2rem 0; + @apply m-h-screen py-1; } .content-wrapper { - @apply max-w-7xl mx-auto overflow-x-hidden px-4; + @apply max-w-7xl mx-auto overflow-x-hidden p-4 min-h-screen; } .section-spacing { diff --git a/app/assets/tailwind/components/sidebar.css b/app/assets/tailwind/components/sidebar.css new file mode 100644 index 00000000..35334dd0 --- /dev/null +++ b/app/assets/tailwind/components/sidebar.css @@ -0,0 +1,7 @@ +.sidebar__link { + @apply hover:bg-gray-100 flex items-center px-4 py-3 gap-3 rounded-lg; +} + +.sidebar__logout-button { + @apply py-3 px-4 w-full text-white bg-red-600 hover:bg-red-700 font-medium rounded-lg flex justify-center items-center gap-2 cursor-pointer; +} \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index cfc8a987..400bb844 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -21,13 +21,7 @@ def tailwind_flash_class(level) end end - def nav_link_class(path) - base_style = "display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; border-radius: 0.5rem; transition: all 0.2s; font-weight: 500;" - - if current_page?(path) - base_style + " background-color: #dbeafe; color: #1d4ed8;" - else - base_style + " color: #374151;" - end + def active_link_class(path) + current_page?(path) ? "!bg-blue-100" : "" end end diff --git a/app/views/layouts/_sidebar.html.erb b/app/views/layouts/_sidebar.html.erb index d07d7e29..0a4528c3 100644 --- a/app/views/layouts/_sidebar.html.erb +++ b/app/views/layouts/_sidebar.html.erb @@ -1,73 +1,74 @@ -
-
-
+
+
+
- <%= link_to(root_path, class: "hover:opacity-80", style: "text-decoration: none; transition: opacity 0.2s;") do %> - <%= image_tag("skill.svg", alt: "SkillRx", style: "height: 4rem; width: auto;") %> + <%= link_to(root_path, class: "hover:opacity-80 transition-opacity duration-200 no-underline block") do %> + <%= image_tag("skill.svg", alt: "SkillRx", class: "h-16") %> <% end %>
-