Skip to content

Commit 0b1524c

Browse files
compwroncompwron
authored
Merge pull request #6048 from thejonroberts/contact-form-refactor
Case Contact Form Overhaul
2 parents 55ca1c4 + 027f3a6 commit 0b1524c

File tree

69 files changed

+3480
-2177
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+3480
-2177
lines changed

‎app/assets/stylesheets/base/variables.scss‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,20 @@ $sidebar-active: #365CF5;
77
$sidebar-dark: #1A2142;
88

99
:root {
10-
--dark: #262d3f;
10+
--casa-red: #D50100;
11+
--casa-primary-blue: #4A6CF7;
12+
13+
--gunmetal: #262D3F;
14+
--dark-gunmetal: #212529;
15+
--dark: #262d3f;
16+
--dark-electric-blue: #5D657B;
1117
--gray: #5d657b;
18+
--dark-gray: #AAAAAA;
19+
--gray-80: #CCCCCC;
1220
--silver: #D9D9D9;
21+
22+
--inactive: #9AA4CA;
23+
24+
--input-placeholder-text: var(--gray);
25+
--input-border-color: var(--gray-80);
1326
}

‎app/assets/stylesheets/pages/case_contacts.scss‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
2-
fieldset {
3-
border: 1px double #CCC;
4-
}
5-
61
.slide-container {
72
padding: 0rem 1rem;
83
}
94

10-
legend {
11-
font-size: small;
12-
}
13-
145
.slider {
156
display: inline;
167
}
@@ -90,7 +81,7 @@ legend {
9081
}
9182
}
9283
}
93-
84+
9485
.other-expenses li {
9586
margin-bottom: .2rem;
9687
}
@@ -118,7 +109,7 @@ legend {
118109
display: flex;
119110
align-items: center;
120111
}
121-
112+
122113
.dollar-sign .other-expense-amount {
123114
position: relative;
124115
padding-left: 32px;
@@ -135,7 +126,7 @@ legend {
135126
left: 28px;
136127
z-index: 100;
137128
}
138-
129+
139130
.pr-7 {
140131
padding-right: 1.5rem !important;
141132
padding-left: 2.5rem !important;

‎app/assets/stylesheets/pages/case_contacts_form.scss‎

Lines changed: 138 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,151 @@
11
@use "../base/breakpoints.scss" as screen-sizes;
22

3-
.case-contacts-form {
4-
&-buttons {
5-
display: flex;
6-
justify-content: flex-end;
7-
gap: 10px;
3+
#case-contact-form {
4+
color: var(--gunmetal);
85

9-
@media only screen and (max-width: screen-sizes.$mobile) {
10-
& > a, & > button {
11-
flex-grow: 1;
6+
& section {
7+
background: var(--white, #FFFFFF);
8+
border: 1px solid var(--form-element-stroke, #E5E5E5);
9+
border-radius: 10px;
10+
box-shadow: 0px 0px 5px 0px #1A252F0D;
11+
margin-bottom: 30px;
12+
padding: 30px 20px;
13+
}
14+
15+
& h2 {
16+
font-size: 28px;
17+
margin-bottom: 24px;
18+
}
19+
20+
& h3 {
21+
font-size: 16px;
22+
}
23+
24+
& legend {
25+
font-size: 16px;
26+
font-weight: 400;
27+
line-height: 19px;
28+
color: var(--dark-electric-blue);
29+
}
30+
31+
& label {
32+
font-size: 16px;
33+
font-weight: 500;
34+
line-height: 19px;
35+
}
36+
37+
& input,
38+
textarea,
39+
select {
40+
border: 1px solid var(--input-border-color);
41+
42+
&::placeholder {
43+
color: var(--input-placeholder-text);
44+
opacity: 1;
45+
}
46+
}
47+
48+
& input[type="text"],
49+
input[type="date"],
50+
input[type="number"],
51+
textarea,
52+
select {
53+
padding: 16px;
54+
}
55+
56+
& .form-check {
57+
margin-left: 0px;
58+
padding-left: 0px;
59+
60+
& input {
61+
width: 20px;
62+
height: 20px;
63+
margin-left: 0px;
64+
margin-right: 3px;
65+
float: none;
66+
67+
&:checked {
68+
background-color: var(--casa-primary-blue);
69+
border-color: var(--casa-primary-blue);
70+
}
71+
72+
&[type="checkbox"] + label {
73+
padding-top: 5px;
74+
font-weight: 300;
1275
}
76+
77+
&[type="radio"] + label {
78+
padding-top: 1px;
79+
font-size: 16px;
80+
font-weight: 300;
81+
line-height: 25px;
82+
color: var(--dark-electric-blue)
83+
}
84+
}
85+
86+
label {
87+
font-size: 16px;
88+
font-weight: 600;
1389
}
1490
}
1591

16-
&-checkbox {
17-
border-color: #757575;
92+
& button {
93+
--bs-link-color: var(--casa-primary-blue);
94+
95+
&.btn-link {
96+
text-decoration: none;
97+
padding: 0px;
98+
}
1899
}
19100

20-
&-title {
21-
@media only screen and (max-width: screen-sizes.$mobile) {
22-
font-size: 28px;
23-
}
101+
& .row {
102+
--bs-gutter-x: .5rem;
103+
}
104+
105+
& #contact-form-types {
106+
--group-width: 250px;
107+
108+
columns: var(--group-width);
109+
110+
& fieldset {
111+
display: inline-block;
112+
width: var(--group-width);
113+
margin-bottom: .25rem;
114+
115+
& .form-check {
116+
& label {
117+
display: inline;
118+
color: var(--dark);
119+
font-weight: 400;
120+
color: var(--dark-gunmetal);
121+
}
122+
123+
& small {
124+
display: block;
125+
margin-left: 28px;
126+
font-style: italic;
127+
font-weight: 300;
128+
color: var(--dark-electric-blue);
129+
}
130+
}
131+
}
132+
}
133+
134+
& .input-group-text {
135+
border-top-right-radius: 0;
136+
border-bottom-right-radius: 0;
24137
}
25138

26-
&-subtitle {
139+
& #contact-form-action-buttons {
140+
display: flex;
141+
justify-content: flex-end;
142+
gap: 10px;
143+
27144
@media only screen and (max-width: screen-sizes.$mobile) {
28-
font-size: 24px;
29-
}
145+
& > a, & > button {
146+
flex-grow: 1;
147+
}
148+
}
30149
}
31-
}
150+
}
151+

‎app/assets/stylesheets/shared/form.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,3 @@ form {
3333
display: initial;
3434
}
3535

36-
.details__topics-label {
37-
span {
38-
display: initial;
39-
}
40-
41-
}

‎app/components/form/hour_minute_duration_component.html.erb‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
<div class="d-flex flex-column flex-lg-row gap-2">
2-
<div class="col input-style-1">
1+
<div class="row input-style-1">
2+
<div class="col-12 col-md">
33
<%= @form.label :duration_hours, "Hour(s)" %>
44
<%= @form.number_field :duration_hours,
55
min: 0,
66
class: "form-control",
7-
size: "10",
87
style: "background:white",
98
value: @hour_value,
109
required: true %>
1110
</div>
12-
<div class="col input-style-1">
11+
<div class="col-12 col-md">
1312
<%= @form.label :duration_minutes, "Minute(s)" %>
1413
<%= @form.number_field :duration_minutes,
1514
min: 0,
1615
class: "form-control",
17-
size: "10",
1816
style: "background:white",
1917
value: @minute_value,
2018
required: true %>

‎app/components/form/multiple_select_component.html.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
data-controller="multiple-select"
33
data-multiple-select-options-value="<%= @options %>"
44
data-multiple-select-selected-items-value="<%= @selected_items %>"
5+
data-multiple-select-placeholder-term-value="<%= @placeholder_term %>"
56
data-multiple-select-with-options-value="true">
67

78
<template data-multiple-select-target="option">

‎app/components/form/multiple_select_component.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
# frozen_string_literal: true
22

33
class Form::MultipleSelectComponent < ViewComponent::Base
4-
def initialize(form:, name:, options:, selected_items:, render_option_subtext: false)
4+
def initialize(form:, name:, options:, selected_items:, render_option_subtext: false, placeholder_term: nil)
55
@form = form
66
@name = name
77
@options = options.to_json
88
@selected_items = selected_items
99
@render_option_subtext = render_option_subtext
10+
@placeholder_term = placeholder_term
1011
end
1112
end

‎app/components/form/submit_button_component.html.erb‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎app/components/form/submit_button_component.rb‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎app/components/form/title_component.html.erb‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

0 commit comments

Comments
 (0)