temp broken bulma/fa commit

Author: jnms-me

Gemfile

@@ -18,17 +18,13 @@ gem "puma"
 gem "bootsnap"
 gem "listen"
 
-# Sass
-gem "sassc-rails"
-
 # Not sure why
 gem "net-imap", require: false
 gem "net-pop", require: false
 gem "net-smtp", require: false
 
-# Bulma
-gem "bulma-rails", "~> 0.9"
-gem "font-awesome-sass", "~> 5.15"
+# Rails component: Static assets.
+gem "sprockets-rails"
 
 # Add nested forms support
 gem "vanilla_nested"

Gemfile.lock

@@ -92,8 +92,6 @@ GEM
     bootsnap (1.19.0)
       msgpack (~> 1.2)
     builder (3.3.0)
-    bulma-rails (0.9.4)
-      sassc (~> 2.0)
     byebug (12.0.0)
     cancancan (3.6.1)
     capistrano (3.20.0)
@@ -163,8 +161,6 @@ GEM
     ffi (1.17.2-x86_64-darwin)
     ffi (1.17.2-x86_64-linux-gnu)
     ffi (1.17.2-x86_64-linux-musl)
-    font-awesome-sass (5.15.1)
-      sassc (>= 1.11)
     foreman (0.90.0)
       thor (~> 1.4)
     friendly_id (5.6.0)
@@ -404,14 +400,6 @@ GEM
       rubocop (~> 1.72, >= 1.72.1)
       rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     sdoc (2.6.5)
       rdoc (>= 5.0)
     securerandom (0.4.1)
@@ -452,7 +440,6 @@ GEM
     terrapin (1.1.1)
       climate_control
     thor (1.4.0)
-    tilt (2.6.1)
     timeout (0.5.0)
     tqdm (0.4.1)
     tsort (0.2.0)
@@ -494,7 +481,6 @@ DEPENDENCIES
   annotate
   bcrypt_pbkdf
   bootsnap
-  bulma-rails (~> 0.9)
   byebug
   cancancan
   capistrano
@@ -512,7 +498,6 @@ DEPENDENCIES
   factory_bot
   factory_bot_rails
   faker
-  font-awesome-sass (~> 5.15)
   foreman
   friendly_id
   httparty
@@ -535,11 +520,11 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   rubocop-rspec_rails
-  sassc-rails
   sdoc
   sentry-rails
   sentry-ruby
   spring
+  sprockets-rails
   sqlite3
   stackprof
   tqdm

Procfile.dev

@@ -1,2 +1,4 @@
 rails: env RUBY_DEBUG_OPEN=true ./bin/rails server --binding=0.0.0.0 --port=3000
+
 js: npm run watch:js
+css: npm run watch:css

app/assets/config/manifest.js

@@ -1,3 +1,2 @@
 //= link_tree ../images
-//= link application.css
 //= link_tree ../builds

app/assets/stylesheets/application.scss

@@ -1,39 +1,29 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
- */
-
 // Bulma variable overrides
-$primary: #ff7f00;
-$radius-small: 8px;
-$radius: 8px;
-$card-radius: 16px;
-$card-background-color: #fff;
-$link: $primary;
-$modal-card-head-background-color: white;
-$modal-card-head-border-bottom: 2px solid whitesmoke;
-$modal-card-foot-border-top: 2px solid whitesmoke;
 
 // Custom variables
-$logo-height: 155px;
-
-// Include Bulma SCSS
-@import "bulma";
-
-// Incluse Font Awesome SCSS
-@import "font-awesome-sprockets";
-@import "font-awesome";
+$tap-primary: #ff7f00;
+$tap-logo-height: 155px;
+
+@use "bulma/sass" with (
+    $primary: $tap-primary,
+    $radius-small: 8px,
+    $radius: 8px,
+    $card-radius: 16px,
+    $card-background-color: white,
+    $link: $tap-primary,
+    $modal-card-head-background-color: white,
+    //$modal-card-head-border-bottom: 2px solid whitesmoke,
+    //$modal-card-foot-border-top: 2px solid whitesmoke,
+);
+@use "bulma/sass" as *;
+@use "bulma/sass/utilities/mixins" as *;
+
+@use "@fortawesome/fontawesome-free/scss/variables" with (
+  $font-path: ".",
+);
+@use "@fortawesome/fontawesome-free/scss/fontawesome";
+@use "@fortawesome/fontawesome-free/scss/fa" as fa;
+@use "@fortawesome/fontawesome-free/scss/solid" as fa-solid;
 
 html {
   max-height: 100vh;
@@ -83,11 +73,9 @@ body {
 .back {
   margin-bottom: 0.5rem;
 
-  &::before {
-    content: "\f104";
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    color: $primary;
+  ::before {
+    @include fa-solid.icon(fa.$var-angle-left);
+    content: fa.fa-content(fa.$var-angle-left);
     margin-right: 0.2rem;
   }
 }
@@ -473,7 +461,7 @@ body {
       &-logo {
         display: flex;
         justify-content: center;
-        height: $logo-height;
+        height: $tap-logo-height;
       }
 
       &-title {
@@ -1049,7 +1037,7 @@ body {
 
     .modal-card-body {
       background-color: black;
-      border-color: lighten(black, 10%);
+      border-color: bulmaLighten(black, 10%);
     }
   }
 
@@ -1141,7 +1129,7 @@ body {
 
     // Better contrast between background and elements
     body {
-      background-color: darken($white, 5%);
+      background-color: bulmaDarken($white, 5%);
     }
 
     // Modal background should not be white
@@ -1173,7 +1161,7 @@ body {
       border-color: $grey;
 
       &:hover {
-        border-color: darken($grey, 20%);
+        border-color: bulmaDarken($grey, 20%);
       }
     }
 
@@ -1197,7 +1185,7 @@ body {
       @extend .theme-no-blend;
       font-size: $size-7;
       color: $grey;
-      color: darken($primary, 20%);
+      color: bulmaDarken($primary, 20%);
     }
   }
 

app/form_builders/formatted_form_builder.rb

@@ -111,7 +111,7 @@ def price_field(attribute, options = {})
     options[:step] ||= 0.01
 
     # Set the prefix icon
-    options[:prefix_icon] = "fas fa-euro-sign"
+    options[:prefix_icon] = "fa-solid fa-euro-sign"
 
     # Regular number field
     number_field(attribute, options)

app/views/layouts/application.html.erb

@@ -12,7 +12,7 @@
     <%= stylesheet_link_tag "application", media: "all", 'data-turbo-track': "reload", defer: true %>
 
     <!-- JS -->
-    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module", defer: true %>
 
     <!-- Icons -->
     <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

app/views/orders/_form.html.erb

@@ -51,7 +51,7 @@
                 session: stringify_order_session(@order_session),
               } do
             %>
-              <%= icon('fas', 'trash-alt') %>
+              <i class="fa-solid fa-trash-alt"></i>
             <% end %>
           </td>
         </tr>

app/views/orders/new.html.erb

@@ -47,7 +47,7 @@
 
         <!-- Product Select -->
         <a class="button is-primary is-large" href="#modalOrderProducts" data-turbo="false">
-          <%= icon('fas', 'list', class: "mr-3") %> Select product
+          <i class="fa-solid fa-list mr-3"></i> Select product
         </a>
 
 
@@ -59,7 +59,7 @@
 
           <div>
             <a class="button is-primary is-large" href="#modalOrderScanner" data-turbo="false" v-cloak>
-              <%= icon('fas', 'camera', class: "mr-3") %> Scan barcode
+              <i class="fa-solid fa-camera mr-3"></i> Scan barcode
             </a>
           </div>
         <% end %>

app/views/products/_form.html.erb

@@ -17,9 +17,8 @@
 
     <%= f.text_field :name %>
     <%= f.price_field :price, label: "Price" %>
-    <a href="#modalPriceCalculator" class="button is-primary" data-turbo="false">
-      <%= icon('fas', 'calculator', class: "mr-3") %>
-      Price Calculator
+    <a href="#modalPriceCalculator" class="button is-light is-primary" data-turbo="false">
+      <i class="fa-solid fa-calculator mr-3"></i> Price Calculator
     </a>
     <%= f.collection_select :category, Product.categories.keys, :to_s, :titlecase %>
     <%= f.number_field :stock %>