Case Contact Form Overhaul

app/assets/stylesheets/base/variables.scss

@@ -7,7 +7,20 @@ $sidebar-active: #365CF5;
 $sidebar-dark: #1A2142;
 
 :root {
-  --dark: #262d3f; 
+  --casa-red: #D50100;
+  --casa-primary-blue: #4A6CF7;
+
+  --gunmetal: #262D3F;
+  --dark-gunmetal: #212529;
+  --dark: #262d3f;
+  --dark-electric-blue: #5D657B;
   --gray: #5d657b;
+  --dark-gray: #AAAAAA;
+  --gray-80: #CCCCCC;
   --silver: #D9D9D9;
+
+  --inactive: #9AA4CA;
+
+  --input-placeholder-text: var(--gray);
+  --input-border-color: var(--gray-80);
 }

app/assets/stylesheets/pages/case_contacts.scss

@@ -1,16 +1,7 @@
-
-fieldset {
-    border: 1px double #CCC;
-}
-
 .slide-container {
     padding: 0rem 1rem;
 }
 
-legend {
-    font-size: small;
-}
-
 .slider {
     display: inline;
 }
@@ -90,7 +81,7 @@ legend {
         }
     }
  }
- 
+
 .other-expenses li {
     margin-bottom: .2rem;
 }
@@ -118,7 +109,7 @@ legend {
     display: flex;
     align-items: center;
   }
-  
+
 .dollar-sign .other-expense-amount {
     position: relative;
     padding-left: 32px;
@@ -135,7 +126,7 @@ legend {
     left: 28px;
     z-index: 100;
 }
-  
+
 .pr-7 {
     padding-right: 1.5rem !important;
     padding-left: 2.5rem !important;

app/assets/stylesheets/pages/case_contacts_form.scss

@@ -1,31 +1,151 @@
 @use "../base/breakpoints.scss" as screen-sizes;
 
-.case-contacts-form {
-  &-buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
+#case-contact-form {
+  color: var(--gunmetal);
 
-    @media only screen and (max-width: screen-sizes.$mobile) {
-      & > a, & > button {
-        flex-grow: 1;
+  & section {
+    background: var(--white, #FFFFFF);
+    border: 1px solid var(--form-element-stroke, #E5E5E5);
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px 0px #1A252F0D;
+    margin-bottom: 30px;
+    padding: 30px 20px;
+  }
+
+  & h2 {
+    font-size: 28px;
+    margin-bottom: 24px;
+  }
+
+  & h3 {
+    font-size: 16px;
+  }
+
+  & legend {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19px;
+    color: var(--dark-electric-blue);
+  }
+
+  & label {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19px;
+  }
+
+  & input,
+  textarea,
+  select {
+    border: 1px solid var(--input-border-color);
+
+    &::placeholder {
+      color: var(--input-placeholder-text);
+      opacity: 1;
+    }
+  }
+
+  & input[type="text"],
+  input[type="date"],
+  input[type="number"],
+  textarea,
+  select {
+    padding: 16px;
+  }
+
+  & .form-check {
+    margin-left: 0px;
+    padding-left: 0px;
+
+    & input {
+      width: 20px;
+      height: 20px;
+      margin-left: 0px;
+      margin-right: 3px;
+      float: none;
+
+      &:checked {
+        background-color: var(--casa-primary-blue);
+        border-color: var(--casa-primary-blue);
+      }
+
+      &[type="checkbox"] + label {
+        padding-top: 5px;
+        font-weight: 300;
       }
+
+      &[type="radio"] + label {
+        padding-top: 1px;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 25px;
+        color: var(--dark-electric-blue)
+      }
+    }
+
+    label {
+      font-size: 16px;
+      font-weight: 600;
     }
   }
 
-  &-checkbox {
-    border-color: #757575;
+  & button {
+    --bs-link-color: var(--casa-primary-blue);
+
+    &.btn-link {
+      text-decoration: none;
+      padding: 0px;
+    }
   }
 
-  &-title {
-    @media only screen and (max-width: screen-sizes.$mobile) {
-      font-size: 28px;
-    } 
+  & .row {
+    --bs-gutter-x: .5rem;
+  }
+
+  & #contact-form-types {
+    --group-width: 250px;
+
+    columns: var(--group-width);
+
+    & fieldset {
+      display: inline-block;
+      width: var(--group-width);
+      margin-bottom: .25rem;
+
+      & .form-check {
+        & label {
+          display: inline;
+          color: var(--dark);
+          font-weight: 400;
+          color: var(--dark-gunmetal);
+        }
+
+        & small {
+          display: block;
+          margin-left: 28px;
+          font-style: italic;
+          font-weight: 300;
+          color: var(--dark-electric-blue);
+        }
+      }
+    }
+  }
+
+  & .input-group-text {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  &-subtitle {
+  & #contact-form-action-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+
     @media only screen and (max-width: screen-sizes.$mobile) {
-      font-size: 24px;
-    } 
+      & > a, & > button {
+        flex-grow: 1;
+      }
+    }
   }
-}
+}
+

app/assets/stylesheets/shared/form.scss

@@ -33,9 +33,3 @@ form {
   display: initial;
 }
 
-.details__topics-label {
-  span {
-    display: initial;
-  }
-
-}

app/components/form/hour_minute_duration_component.html.erb

@@ -1,20 +1,18 @@
-<div class="d-flex flex-column flex-lg-row gap-2">
-  <div class="col input-style-1">
+<div class="row input-style-1">
+  <div class="col-12 col-md">
     <%= @form.label :duration_hours, "Hour(s)" %>
     <%= @form.number_field :duration_hours,
       min: 0,
       class: "form-control",
-      size: "10",
       style: "background:white",
       value: @hour_value,
       required: true %>
   </div>
-  <div class="col input-style-1">
+  <div class="col-12 col-md">
     <%= @form.label :duration_minutes, "Minute(s)" %>
     <%= @form.number_field :duration_minutes,
       min: 0,
       class: "form-control",
-      size: "10",
       style: "background:white",
       value: @minute_value,
       required: true %>

app/components/form/multiple_select_component.html.erb

@@ -2,6 +2,7 @@
      data-controller="multiple-select"
      data-multiple-select-options-value="<%= @options %>"
      data-multiple-select-selected-items-value="<%= @selected_items %>"
+     data-multiple-select-placeholder-term-value="<%= @placeholder_term %>"
      data-multiple-select-with-options-value="true">
 
   <template data-multiple-select-target="option">

app/components/form/multiple_select_component.rb

@@ -1,11 +1,12 @@
 # frozen_string_literal: true
 
 class Form::MultipleSelectComponent < ViewComponent::Base
-  def initialize(form:, name:, options:, selected_items:, render_option_subtext: false)
+  def initialize(form:, name:, options:, selected_items:, render_option_subtext: false, placeholder_term: nil)
     @form = form
     @name = name
     @options = options.to_json
     @selected_items = selected_items
     @render_option_subtext = render_option_subtext
+    @placeholder_term = placeholder_term
   end
 end

app/controllers/additional_expenses_controller.rb

@@ -0,0 +1,30 @@
+class AdditionalExpensesController < ApplicationController
+  before_action :force_json_format
+
+  def create
+    @additional_expense = AdditionalExpense.new(additional_expense_params)
+    authorize @additional_expense
+
+    if @additional_expense.save
+      render json: @additional_expense.as_json, status: :created
+    else
+      render json: @additional_expense.errors.as_json, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    @additional_expense = AdditionalExpense.find(params[:id])
+    authorize @additional_expense
+
+    @additional_expense.destroy!
+
+    head :no_content
+  end
+
+  private
+
+  def additional_expense_params
+    params.require(:additional_expense)
+      .permit(:case_contact_id, :other_expense_amount, :other_expenses_describe)
+  end
+end