refac & feat: now there is only one item details view instead of two, also design adjusted

Gemfile

@@ -1,6 +1,8 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
+gem "font-awesome-sass", "~> 6.2.1"
+
 ruby "2.7.4"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"

Gemfile.lock

@@ -133,6 +133,8 @@ GEM
     ffi (1.15.5)
     flag-icons-rails (3.4.6.1)
       sass-rails
+    font-awesome-sass (6.2.1)
+      sassc (~> 2.0)
     globalid (1.0.0)
       activesupport (>= 5.0)
     hashie (5.0.0)
@@ -420,6 +422,7 @@ DEPENDENCIES
   devise-i18n-bootstrap
   factory_bot_rails
   flag-icons-rails
+  font-awesome-sass (~> 6.2.1)
   importmap-rails
   jbuilder
   jquery-rails

app/assets/stylesheets/application.scss

@@ -33,7 +33,7 @@ $warning: $hpi-orange;
 $danger: $hpi-red;
 $light: #BDBDBD;
 $dark: black;
-$lightGrey: rgb(211, 211, 211);
+$lightGrey: #eee;
 
 $btn-border-radius: 5px;
 $btn-font-weight: 600; // semibold
@@ -52,6 +52,8 @@ $mobileDeviceCutoff: 992px;
 
 @import "flag-icon";
 
+@import "font-awesome";
+
 @media (max-width: $mobileDeviceCutoff) {
   .navbar-collapse {
     position: fixed;
@@ -111,4 +113,4 @@ footer {
 #navbarToggle {
   width: auto;
   padding-right: 30px;
-}
+}

app/assets/stylesheets/item-show.scss

@@ -16,8 +16,7 @@
   }
 }
 
-.item-action-button
-{
+.item-action-button {
   position: fixed;
   margin-top: auto;
   bottom: 0px;
@@ -27,6 +26,82 @@
   border-radius: 0px;
   height: 4rem;
 }
-.button-blocker{
+.button-blocker {
   height: 4rem;
+}
+
+body {
+  background-color: #000;
+}
+.card {
+  border: none;
+}
+.product {
+  background-color: $lightGrey;
+}
+.brand {
+  font-size: 13px;
+}
+.act-price {
+  color: $primary;
+  font-weight: 700;
+}
+.dis-price {
+  text-decoration: line-through;
+}
+.about {
+  font-size: 14px;
+}
+.color {
+  margin-bottom: 10px;
+}
+label.radio {
+  cursor: pointer;
+}
+label.radio input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+label.radio span {
+  padding: 2px 9px;
+  border: 2px solid $primary;
+  display: inline-block;
+  color: $primary;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+label.radio input:checked + span {
+  border-color: $primary;
+  background-color: $primary;
+  color: #fff;
+}
+.btn-danger {
+  background-color: $primary !important;
+  border-color: $primary !important;
+}
+.btn-danger:hover {
+  background-color: $primary !important;
+  border-color: $primary !important;
+}
+.btn-danger:focus {
+  box-shadow: none;
+}
+.cart i {
+  margin-right: 10px;
+}
+
+.btn-group-stretch {
+  width: 100%;
+  display: flex;
+  justify-content: space-between
+}
+
+.btn-center {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

app/components/infobox_component.html.erb

@@ -1,4 +1,4 @@
-<div class="<%= "alert border border-2 #{@bootstrap_classes}" %>" style="text-align: center">
+<div class="<%= "alert border border-2 #{@bootstrap_classes}" %> m-0" style="text-align: center">
     <h6 class='alert-heading mb-1'>
         <%= @heading %>
     </h6>

app/components/infobox_component.rb

@@ -2,7 +2,7 @@
 
 class InfoboxComponent < ViewComponent::Base
   def initialize(heading:, body:, bootstrap_classes:)
-    super()
+    super
     @heading = heading
     @body = body
     @bootstrap_classes = bootstrap_classes

app/components/item_availability_badge_component.rb

@@ -2,7 +2,7 @@
 
 class ItemAvailabilityBadgeComponent < ViewComponent::Base
   def initialize(item:, user:)
-    super()
+    super
     @item = item
     @user = user
   end

app/components/item_borrow_button.rb

@@ -1,6 +1,6 @@
 class ItemBorrowButton < ViewComponent::Base
   def initialize(text:, action:, bootstrap_classes:)
-    super()
+    super
     @text = text
     @action = action
     @bootstrap_classes = bootstrap_classes

app/views/items/_owner_component.html.erb → app/components/owner_component.html.erb

@@ -3,6 +3,6 @@
     <% owner_groups = Group.owner_groups(@item.id) %>
     <p class="card-text">
         <%= I18n.t("items.card_text.owner") %>
-        <span class="text-primary"><%=owner_groups.map{|owner| owner.name}.join(", ").html_safe%></span>
+        <span class="text-primary"><%=owner_groups.map(&:name).join(", ").html_safe%></span>
     </p>
 </div>

app/components/owner_component.rb

@@ -0,0 +1,6 @@
+class OwnerComponent < ViewComponent::Base
+  def initialize(item:)
+    super
+    @item = item
+  end
+end

app/models/item.rb

@@ -4,7 +4,7 @@ class Item < ApplicationRecord
 
   validates :name, presence: true
   validates :max_reservation_days, numericality: { greater_than_or_equal_to: 0, less_than_or_equal_to: 365 }
-  validates :max_borrowing_days, numericality: { greater_than_or_equal_to: 0 }
+  validates :max_borrowing_days, numericality: { greater_than: 0 }
 
   validates :number_of_pages, numericality: { greater_than_or_equal_to: 0 }, allow_nil: true