Merge pull request #39 from Code-the-Dream-School/get_rid_of_bootstrap

Get rid of Bootstrap

Gemfile

@@ -57,7 +57,6 @@ gem 'rolify'
 gem 'email_validator'
 
 # Styling
-gem 'bootstrap'
 gem 'sassc', '~> 2.4'
 gem 'sassc-rails', '~> 2.1.2'
 gem 'tailwindcss-rails', '~> 3.1'

Gemfile.lock

@@ -81,18 +81,13 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
-    autoprefixer-rails (10.4.19.0)
-      execjs (~> 2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     benchmark (0.4.0)
     bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
-    bootstrap (5.3.3)
-      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 2.11.8, < 3)
     builder (3.3.0)
     capybara (3.40.0)
       addressable
@@ -125,7 +120,6 @@ GEM
     email_validator (2.2.4)
       activemodel
     erubi (1.13.0)
-    execjs (2.10.0)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.4)
@@ -201,7 +195,6 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.9)
-    popper_js (2.11.8)
     psych (5.2.1)
       date
       stringio
@@ -386,7 +379,6 @@ DEPENDENCIES
   actionpack (>= 7.1.5.1)
   actiontext (>= 7.1.4.1)
   bootsnap
-  bootstrap
   capybara
   debug
   devise

README.md

@@ -8,12 +8,6 @@ The most efficient way to set up dev env is to utilize [docker and docker compos
 ### Legacy approach with manual installation
 Also, there is an old less efficient way to set up everything by [manually installing all dependencies](docs/ManualInstallation.md).
 
-### Bootstrap and TailwindCSS
-As we have both Bootstrap and TailwindCSS installed inside the project we need to split them somehow.
-> Thus, to utilize TailwindCSS make sure that you use the classes with the prefix.
-If you want to add a `p-1` class then it should be `tw-p-1` now.
-But it does not apply to the states, for example, if you want to add a `p-2` on hover, then your class should be `hover:tw-p-2`.
-
 ## Useful commands
 - In order to reinit everything run `make reinit`. It will drop all containers and recreate everything from the scratch.
 ### DB management:
@@ -69,7 +63,7 @@ while running `make` command - you [need to install](https://apple.stackexchange
 ### **High Priority**
 
 1. [ ] **Health Data Management**
-   - [ ] User Story 1: Manual input of blood test results.
+   - [x] User Story 1: Manual input of blood test results.
    - [ ] User Story 2: Import health data from PDF files.
    - [x] User Story 4: Display health data with color-coded references.
 2. [ ] **User Interface and Experience**

app/assets/stylesheets/application.scss

@@ -13,7 +13,6 @@
  *= require_tree .
  *= require_self
  */
-@import "bootstrap";
 
 .sign-out-button {
   margin-left: 0.5rem;

app/assets/stylesheets/application.tailwind.css

@@ -1,3 +1,47 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.button {
+    @apply inline-block text-center px-4 py-2 rounded;
+}
+
+.primary-button {
+    @apply inline-block text-center px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700;
+}
+
+.secondary-button {
+    @apply inline-block text-center px-4 py-2 rounded bg-gray-600 text-white hover:bg-gray-700;
+}
+
+.outline-secondary-button {
+    @apply inline-block text-center px-4 py-2 rounded border border-gray-600 text-gray-600 hover:bg-gray-100;
+}
+
+.create-button {
+    @apply inline-block text-center px-4 py-2 rounded bg-green-600 text-white hover:bg-green-700;
+}
+
+.outline-create-button {
+    @apply inline-block text-center px-4 py-2 rounded border border-green-600 text-green-600 hover:bg-green-100;
+}
+
+.edit-button {
+    @apply inline-block text-center px-4 py-2 rounded bg-yellow-500 text-white hover:bg-yellow-600;
+}
+
+.delete-button {
+    @apply mt-6 mr-6 mb-6 font-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700;
+}
+
+.outline-primary-button {
+    @apply inline-block text-center px-4 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-100;
+}
+
+.large-button {
+    @apply text-lg px-6 py-3;
+}
+
+.small-button {
+    @apply text-sm px-3 py-1;
+}

app/controllers/lab_tests_controller.rb

@@ -4,7 +4,6 @@
 class LabTestsController < ApplicationController
   before_action :set_lab_test, only: %i[show edit update destroy]
   before_action :build_lab_test, only: %i[create]
-  before_action :set_filter_by_user_id, only: %i[index]
   before_action :set_biomarkers, only: %i[index new edit create]
 
   # GET /lab_tests or /lab_tests.json
@@ -29,13 +28,7 @@ def show
   def new
     @lab_test = LabTest.new
     authorize @lab_test
-    # @biomarkers = Biomarker.all
     @users = User.all if current_user.full_access_roles_can?
-
-    respond_to do |format|
-      format.html
-      format.turbo_stream { render turbo_stream: turbo_stream.replace('lab_test_form', partial: 'form') }
-    end
   end
 
   # GET /lab_tests/1/edit

app/javascript/application.js

@@ -1,5 +1,3 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
-import "popper"
-import "bootstrap"

app/views/admin/users/_form.html.erb

@@ -1,14 +1,9 @@
 <%= form_with model: @user, url: admin_user_path(@user), method: :patch do |form| %>
   <% if @user.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
-
-      <ul>
-        <% @user.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
+    <%= render "layouts/error_flash",
+               header: "#{pluralize(@user.errors.count, "error")} prohibited this user from being saved:",
+               errors: @user.errors.full_messages
+    %>
   <% end %>
 
   <div>
@@ -27,6 +22,6 @@
   </div>
 
   <div>
-    <%= form.submit class: "tw-my-4 tw-bg-blue-500  tw-hover:bg-blue-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded" %>
+    <%= form.submit class: "my-4 edit-button" %>
   </div>
 <% end %>

app/views/admin/users/_index_table_body.html.erb

@@ -1,23 +1,23 @@
 <tbody>
     <% @users.each do |user| %>
-      <tr id="<%= dom_id user %>" class="tw-bg-white tw-border-b tw-bg-white tw-border-gray-300 tw-hover:bg-gray-700 tw-text-center">
-        <th scope="row" class="tw-px-6 tw-py-4 tw-font-medium tw-text-gray-900 tw-whitespace-nowrap tw-dark:tw-text-white">
+      <tr id="<%= dom_id user %>" class="bg-white border-b bg-white border-gray-300 hover:bg-gray-700 hover:text-white text-center">
+        <th scope="row" class="px-6 py-4 font-medium whitespace-nowrap">
           <%= user.full_name %>
         </th>
-        <td class="tw-px-2 tw-py-2">
+        <td class="px-2 py-2">
           <%= user.email %>
         </td>
-        <td class="tw-px-2 tw-py-2">
+        <td class="px-2 py-2">
           <%= user_roles_list_as_string user %>
         </td>
-        <td class="tw-px-6 tw-py-4">
+        <td class="px-6 py-4">
           <%= format_date_with_time user.created_at %>
         </td>
-        <td class="tw-px-6 tw-py-4">
+        <td class="px-6 py-4">
           <%= format_date_with_time user.updated_at %>
         </td>
-        <td class="tw-px-6 tw-py-4 tw-text-center">
-          <%= link_to "Show details", admin_user_url(user), class: "tw-font-medium tw-text-blue-600 tw-dark:tw-text-blue-500 tw-hover:tw-underline" %>
+        <td class="px-6 py-4 text-center">
+          <%= link_to "Show details", admin_user_url(user), class: "font-medium text-blue-600 dark:text-blue-500 hover:underline" %>
         </td>
       </tr>
     <% end %>

app/views/admin/users/_index_table_head.html.erb

@@ -1,23 +1,23 @@
-<thead class="tw-text-xs tw-text-gray-700 tw-uppercase tw-bg-gray-400 tw-text-center">
+<thead class="text-xs text-gray-700 uppercase bg-gray-400 text-center">
 
 <tr>
-  <th scope="col" class="tw-px-6 tw-py-3">
+  <th scope="col" class="px-6 py-3">
     User
   </th>
-  <th scope="col" class="tw-px-6 tw-py-3">
+  <th scope="col" class="px-6 py-3">
     Email
   </th>
-  <th scope="col" class="tw-px-6 tw-py-3">
+  <th scope="col" class="px-6 py-3">
     Role
   </th>
-  <th scope="col" class="tw-px-6 tw-py-3">
+  <th scope="col" class="px-6 py-3">
     Created date
   </th>
-  <th scope="col" class="tw-px-6 tw-py-3">
+  <th scope="col" class="px-6 py-3">
     Updated date
   </th>
-  <th scope="col" class="tw-px-6 tw-py-3">
-    <span class="tw-sr-only">Show</span>
+  <th scope="col" class="px-6 py-3">
+    <span class="sr-only">Show</span>
   </th>
 </tr>
 

app/views/admin/users/_user.html.erb

@@ -1,41 +1,41 @@
-<div id="<%= dom_id user %>" class="tw-border-double tw-shadow-lg tw-ring-4 tw-rounded-lg">
-  <div class="tw-m-8 tw-py-4">
+<div id="<%= dom_id user %>" class="border-double shadow-lg ring-4 rounded-lg">
+  <div class="m-8 py-4">
 
-    <p class="tw-pt-2 tw-pr-6">
+    <p class="pt-2 pr-6">
       <strong>User Name:</strong>
       <%= user.full_name %>
     </p>
 
-    <p class="tw-pt-2 tw-pr-6">
+    <p class="pt-2 pr-6">
       <strong>Email:</strong>
       <%= user.email %>
     </p>
 
-    <p class="tw-pt-2 tw-pr-6">
+    <p class="pt-2 pr-6">
       <strong>Role:</strong>
       <%= user_roles_list_as_string(user) %>
     </p>
 
     <% if current_user.full_access_roles_can? && assigned?(user) %>
-      <p class="tw-pt-2 tw-pr-6">
+      <p class="pt-2 pr-6">
         <strong>Assigned users:</strong>
         <%= assigned_user_list_as_string user %>
       </p>
     <% end %>
 
     <% if assignees? user %>
-      <p class="tw-pt-2 tw-pr-6">
+      <p class="pt-2 pr-6">
         <strong>Expert you are assigned to:</strong>
         <%= assignees_list_as_string(user) %>
       </p>
     <% end %>
 
-    <p class="tw-pt-2 tw-pr-6">
+    <p class="pt-2 pr-6">
       <strong>Created at:</strong>
       <%= format_date_with_time user.created_at %>
     </p>
 
-    <p class="tw-pt-2 tw-pr-6">
+    <p class="pt-2 pr-6">
       <strong>Updated at:</strong>
       <%= format_date_with_time user.updated_at %>
     </p>

app/views/admin/users/edit.html.erb

@@ -1,8 +1,16 @@
-<h1>Editing user</h1>
+<h1 class="text-2xl my-3">Editing user</h1>
 
 <%= render "form", user: @user %>
 
 <div>
-  <%= link_to "Show this user", admin_user_url(@user) %> |
-  <%= link_to "Back to users", admin_users_path %>
+  <%= link_to "Show this user",
+              admin_user_url(@user),
+              method: :get,
+              class: "primary-button"
+  %>
+  <%= link_to "Back to users",
+              admin_users_path,
+              method: :get,
+              class: "secondary-button"
+  %>
 </div>

app/views/admin/users/edit_assigned_users.html.erb

@@ -1,16 +1,11 @@
-<h1>Editing assigned users</h1>
+ <h1 class="text-2xl my-3">Editing assigned users</h1>
 
 <%= form_with model: @user, url: update_assigned_users_admin_user_path(@user), method: :post do |form| %>
   <% if @user.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
-
-      <ul>
-        <% @user.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
+     <%= render "layouts/error_flash",
+                header: "#{pluralize(@user.errors.count, "error")} prohibited this user from being saved:",
+                errors: @user.errors.full_messages
+     %>
   <% end %>
 
   <div>
@@ -22,12 +17,20 @@
   </div>
 
   <div>
-    <%= form.submit class: "tw-my-4 tw-bg-blue-500 tw-hover:bg-blue-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded" %>
+    <%= form.submit "Update assignment users", class: "my-4 edit-button" %>
   </div>
 <% end %>
 
 <div>
-  <%= link_to "Show this user", admin_user_url(@user) %> |
-  <%= link_to "Back to users", admin_users_path %>
+  <%= link_to "Show this user",
+              admin_user_url(@user),
+              method: :get,
+              class: "primary-button"
+  %>
+  <%= link_to "Back to users",
+              admin_users_path,
+              method: :get,
+              class: "secondary-button"
+  %>
 </div>