Added change color logic

app/assets/stylesheets/pages/calculator.scss

@@ -16,6 +16,20 @@
   font-style: normal;
   transition: transform 0.5s ease-in-out;
   max-width: 300px;
+  @include transition(all 0.5s ease-in-out);
+
+  &:hover {
+    background-color: $matte_lime_green;
+  }
+}
+
+.btn-nonito {
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-family: "Nunito", sans-serif;
+  font-style: normal;
 }
 
 #calc {

app/assets/stylesheets/pages/feature_flags.scss

@@ -41,19 +41,13 @@
 }
 
 input[type="submit"] {
-  background-color: $success;
   border: none;
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
   padding: 10px;
   min-width: 110px;
-  @include transition(all 0.5s ease-in-out);
-
-  &:hover {
-    background-color: $matte_lime_green;
-  }
 }
 
 .btn-grey {

app/views/calculators/partials/_calculation_results.html.erb

@@ -1,11 +1,17 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>
+
+<%# TODO: Delete this and use user provided value%>
+<% formula_image = "money_to_spent_2.png" %>
+
 <div class="calculation-results rounded jumbotron jumbotron-fluid position-relative">
-  <h2 class="pt-6 text-2xl font-semibold text-center text-success">Calculation Results</h2>
+  <h2 class="pt-6 text-2xl font-semibold text-center text-<%= color %>">Calculation Results</h2>
   <div class="jumbotron calculation-results result main-result-container result-container">
     <% results.each do |result| %>
       <div>
-          <%= image_tag "money_to_spent_2.png", class: "img-margin", alt: "icon" %>
-          <p><%= result[:result] %></p>
-          <p class="text-2xl"><%= result[:en_unit] %></p>
+          <%= image_tag "#{formula_image}", class: "img-margin", alt: "icon" %>
+          <p class="text-<%= color %>"><%= result[:result] %></p>
+          <p class="text-2xl text-<%= color %>"><%= result[:en_unit] %></p>
           <p class="diapers-font-text"><%= result[:label] %></p>
       </div>
     <% end %>

app/views/calculators/partials/show/_constructor_calculator_description.erb

@@ -0,0 +1,21 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>
+
+<section class="description-section">
+  <div class="description-block">
+    <div class="description-content-box">
+      <p data-type="description_block_html" class="description-text">
+        <%# TODO: Change description text and links %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus arcu iaculis placerat euismod. Pellentesque nibh arcu, varius ac arcu a, eleifend semper leo. Aliquam ultricies lacus at mi ornare, sit amet vestibulum est fermentum. Praesent sed dapibus elit. Curabitur congue ante non metus posuere porttitor. Etiam non lacus imperdiet turpis pellentesque viverra. Nulla in velit mi. Suspendisse molestie tempor ornare. 
+        <%= link_to_external(text: "Calculate Method", url: t("layouts.description_block.method_link"), class: "text-#{color}") %> or 
+        <%= link_to_external(text: "Contact Us", url: t("layouts.description_block.contact_link"), class: "text-#{color}") %>
+      </p>
+    </div>
+    <div class="description-btn-box">
+      <%# TODO: Change link here %>
+      <%= link_to_external(text: t('layouts.description_block.use_less'), 
+                           url: t("layouts.description_block.use_less_link"), 
+                           class: "action-button rounded bg-#{color} text-white") %>
+    </div> 
+  </div>
+</section>

app/views/calculators/show.html.erb

@@ -1,5 +1,11 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>
+
+<%# TODO: Delete this and use user provided value %>
+<% calculator_image = "scales.png" %>
+
 <div class="rounded jumbotron jumbotron-fluid position-relative">
-  <h1 class="pt-6 text-2xl font-semibold text-center text-success">Calculator <%= @calculator.name %> <%= @text %></h1>
+  <h1 class="pt-6 text-2xl font-semibold text-center font-sans text-<%= color %>">Calculator <%= @calculator.name %> <%= @text %></h1>
   <div class="flex-wrap d-flex justify-content-around calculator_wrap ms-5">
 
   <%= form_with html: { class: "simple_form_calculator"}, url: calculate_calculator_path(@calculator) do |form| %>
@@ -15,19 +21,19 @@
           </div>
         <% else %>
           <%= form.select "inputs[#{field.var_name}]", 
-                           options_from_collection_for_select(field.categories, :price, :name),
+                          options_from_collection_for_select(field.categories, :price, :name),
                           {},
                           class: "flex-row rounded flex-item w-100 form_fild calculator-field" %>
         <% end %>
     <% end %>
-    <%= form.submit "Calculate", class: "calculate-btn result-btn" %>
+    <%= form.submit "Calculate", class: "btn-nonito result-btn bg-#{color}" %>
     </div>
   <% end %>
-  <%= image_tag "scales.png", class: "scales_img", alt: "Scales" %>
+  <%= image_tag "#{calculator_image}", class: "scales_img", alt: "Scales" %>
 
   </div>
 </div>
 
 <%= turbo_frame_tag "calc-results" %>
 
-<%= render "layouts/description_block" %>
+<%= render "calculators/partials/show/constructor_calculator_description" %>

config/tailwind.config.js

@@ -7,6 +7,14 @@ module.exports = {
     './app/javascript/**/*.js',
     './app/views/**/*.erb'
   ],
+  safelist: [
+    {
+      pattern: /bg-.*/,
+    },
+    {
+      pattern: /text-.*/,
+    },
+  ],
   theme: {
     extend: {
       fontFamily: {

spec/helpers/calculators/calculation_service_helper_spec.rb

@@ -3,43 +3,42 @@
 require "rails_helper"
 
 RSpec.describe Calculators::CalculationService, type: :helper do
-    let(:calculator) { instance_double("Calculator", formulas: formulas) }
-    let(:formulas) do
-      [
-        instance_double("Formula", expression: "x + y", en_label: "Addition", en_unit: "units", uk_label: "Додавання", uk_unit: "одиниці"),
-        instance_double("Formula", expression: "x * y", en_label: "Multiplication", en_unit: "units", uk_label: "Множення", uk_unit: "одиниці")
-      ]
-    end
-    let(:inputs) { ActionController::Parameters.new({ x: 5, y: 3 }) }
-
-    before do
-      allow_any_instance_of(ApplicationHelper).to receive(:current_locale?).with(:en).and_return(locale_en)
-    end
-
-    describe "#perform" do
-      subject { described_class.new(calculator, inputs).perform }
-
-      context "when locale is English" do
-        let(:locale_en) { true }
-
-        it "returns results with English labels and units" do
-          expect(subject).to eq([
-            { label: "Addition", result: 8, en_unit: "units" },
-            { label: "Multiplication", result: 15, en_unit: "units" }
-          ])
-        end
+  let(:calculator) { instance_double("Calculator", formulas: formulas) }
+  let(:formulas) do
+    [
+      instance_double("Formula", expression: "x + y", en_label: "Addition", en_unit: "units", uk_label: "Додавання", uk_unit: "одиниці"),
+      instance_double("Formula", expression: "x * y", en_label: "Multiplication", en_unit: "units", uk_label: "Множення", uk_unit: "одиниці")
+    ]
+  end
+  let(:inputs) { ActionController::Parameters.new({ x: 5, y: 3 }) }
+
+  before do
+    allow_any_instance_of(ApplicationHelper).to receive(:current_locale?).with(:en).and_return(locale_en)
+  end
+
+  describe "#perform" do
+    subject { described_class.new(calculator, inputs).perform }
+
+    context "when locale is English" do
+      let(:locale_en) { true }
+
+      it "returns results with English labels and units" do
+        expect(subject).to eq([
+          { label: "Addition", result: 8, en_unit: "units" },
+          { label: "Multiplication", result: 15, en_unit: "units" }
+        ])
       end
-
-      context "when locale is Ukrainian" do
-        let(:locale_en) { false }
-
-        it "returns results with Ukrainian labels and units" do
-          expect(subject).to eq([
-            { label: "Додавання", result: 8, en_unit: "одиниці" },
-            { label: "Множення", result: 15, en_unit: "одиниці" }
-          ])
-        end
+    end
+
+    context "when locale is Ukrainian" do
+      let(:locale_en) { false }
+
+      it "returns results with Ukrainian labels and units" do
+        expect(subject).to eq([
+          { label: "Додавання", result: 8, en_unit: "одиниці" },
+          { label: "Множення", result: 15, en_unit: "одиниці" }
+        ])
       end
     end
   end
-  
+end