Skip to content

Commit 3e0b180

Browse files
cbullingercbullinger
authored
Merge pull request #54 from mongodb/docsp-56383-mdb-search-bug
DOCSP-56383: Fix MongoDB Search returning too many results for multi-word queries
2 parents 606ab89 + 4eabf95 commit 3e0b180

6 files changed

Lines changed: 460 additions & 280 deletions

File tree

‎mflix/client/app/components/SearchMovieModal/SearchMovieModal.module.css‎

Lines changed: 134 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
11
/**
22
* Search Movie Modal Styles
3-
*
3+
*
44
* CSS Module for the search movie modal component.
55
* Provides consistent styling with the rest of the application.
66
*/
77

88
.formContainer {
99
background: white;
10-
border-radius: 12px;
11-
padding: 2rem;
12-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
10+
border-radius: 16px;
11+
padding: 2.5rem;
12+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
1313
margin-bottom: 2rem;
14+
max-width: 800px;
15+
margin-left: auto;
16+
margin-right: auto;
1417
}
1518

1619
.formTitle {
17-
font-size: 1.75rem;
18-
font-weight: bold;
19-
color: #333;
20-
margin: 0 0 1.5rem 0;
20+
font-size: 1.875rem;
21+
font-weight: 700;
22+
color: #1a1a2e;
23+
margin: 0 0 0.5rem 0;
2124
text-align: center;
2225
}
2326

2427
.batchDescription {
25-
background-color: #f8f9fa;
26-
border: 1px solid #e9ecef;
27-
border-radius: 8px;
28-
padding: 1rem;
29-
margin-bottom: 1.5rem;
30-
color: #495057;
31-
font-size: 0.9rem;
32-
line-height: 1.4;
28+
background-color: transparent;
29+
border: none;
30+
padding: 0;
31+
margin-bottom: 2rem;
32+
color: #6b7280;
33+
font-size: 1rem;
34+
line-height: 1.5;
3335
text-align: center;
3436
}
3537

3638
.generalError {
37-
background-color: #f8d7da;
38-
border: 1px solid #f5c6cb;
39-
color: #721c24;
40-
padding: 0.75rem 1rem;
41-
border-radius: 8px;
42-
margin-bottom: 1rem;
39+
background-color: #fef2f2;
40+
border: 1px solid #fecaca;
41+
color: #dc2626;
42+
padding: 0.875rem 1.25rem;
43+
border-radius: 10px;
44+
margin-bottom: 1.5rem;
4345
font-size: 0.9rem;
4446
text-align: center;
4547
}
@@ -48,171 +50,227 @@
4850
width: 100%;
4951
}
5052

53+
/* Section styling for grouped fields */
54+
.fieldSection {
55+
background: #f8fafc;
56+
border-radius: 12px;
57+
padding: 1.5rem;
58+
margin-bottom: 1.5rem;
59+
}
60+
61+
.sectionTitle {
62+
font-size: 0.8rem;
63+
font-weight: 600;
64+
color: #64748b;
65+
text-transform: uppercase;
66+
letter-spacing: 0.05em;
67+
margin: 0 0 1rem 0;
68+
padding-bottom: 0.75rem;
69+
border-bottom: 1px solid #e2e8f0;
70+
}
71+
5172
.formGrid {
5273
display: grid;
53-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
54-
gap: 1.5rem;
74+
grid-template-columns: repeat(2, 1fr);
75+
gap: 1.25rem;
5576
margin-bottom: 1.5rem;
5677
}
5778

79+
.formGridThreeCol {
80+
display: grid;
81+
grid-template-columns: repeat(3, 1fr);
82+
gap: 1.25rem;
83+
}
84+
5885
.formGroup {
5986
display: flex;
6087
flex-direction: column;
61-
gap: 0.5rem;
88+
gap: 0.375rem;
89+
}
90+
91+
.formGroupFullWidth {
92+
grid-column: 1 / -1;
6293
}
6394

6495
.label {
65-
font-weight: 500;
66-
color: #333;
67-
font-size: 0.9rem;
96+
font-weight: 600;
97+
color: #374151;
98+
font-size: 0.875rem;
6899
}
69100

70101
.input,
71102
.textarea {
72-
padding: 0.75rem;
73-
border: 2px solid #e1e5e9;
74-
border-radius: 8px;
75-
font-size: 1rem;
76-
transition: border-color 0.2s ease, box-shadow 0.2s ease;
103+
padding: 0.875rem 1rem;
104+
border: 1.5px solid #e2e8f0;
105+
border-radius: 10px;
106+
font-size: 0.95rem;
107+
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
77108
background: white;
78109
}
79110

111+
.input::placeholder,
112+
.textarea::placeholder {
113+
color: #9ca3af;
114+
}
115+
116+
.input:hover:not(:disabled),
117+
.textarea:hover:not(:disabled) {
118+
border-color: #cbd5e1;
119+
}
120+
80121
.input:focus,
81122
.textarea:focus {
82123
outline: none;
83-
border-color: #0070f3;
84-
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
124+
border-color: #3b82f6;
125+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
126+
background: white;
85127
}
86128

87129
.input:disabled,
88130
.textarea:disabled {
89-
background: #f8f9fa;
90-
color: #6c757d;
131+
background: #f1f5f9;
132+
color: #94a3b8;
91133
cursor: not-allowed;
92134
}
93135

94136
.inputError {
95-
border-color: #dc2626 !important;
137+
border-color: #ef4444 !important;
96138
}
97139

98140
.inputError:focus {
99-
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
141+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
100142
}
101143

102144
.error {
103-
color: #dc2626;
104-
font-size: 0.875rem;
145+
color: #ef4444;
146+
font-size: 0.8rem;
105147
margin-top: 0.25rem;
106148
}
107149

108150
.searchOperatorDescription {
109-
color: #6c757d;
110-
font-size: 0.875rem;
151+
color: #64748b;
152+
font-size: 0.8rem;
111153
margin-top: 0.25rem;
112154
display: block;
155+
line-height: 1.4;
113156
}
114157

115158
.formActions {
116159
display: flex;
117-
gap: 1rem;
160+
gap: 0.75rem;
118161
justify-content: flex-end;
119-
padding-top: 1.5rem;
120-
border-top: 1px solid #e1e5e9;
162+
padding-top: 1.75rem;
163+
margin-top: 0.5rem;
164+
border-top: 1px solid #e2e8f0;
121165
}
122166

123167
.button {
124168
padding: 0.75rem 1.5rem;
125169
border: none;
126-
border-radius: 8px;
127-
font-size: 1rem;
128-
font-weight: 500;
170+
border-radius: 10px;
171+
font-size: 0.95rem;
172+
font-weight: 600;
129173
cursor: pointer;
130174
transition: all 0.2s ease;
131-
min-width: 120px;
175+
min-width: 100px;
132176
}
133177

134178
.button:disabled {
135-
opacity: 0.6;
179+
opacity: 0.5;
136180
cursor: not-allowed;
137181
transform: none;
138182
}
139183

140184
.saveButton {
141-
background: #0070f3;
185+
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
142186
color: white;
143-
border: 1px solid #0070f3;
187+
border: none;
188+
min-width: 140px;
144189
}
145190

146191
.saveButton:hover:not(:disabled) {
147-
background: #0051cc;
148-
border-color: #0051cc;
149-
transform: translateY(-1px);
150-
box-shadow: 0 4px 8px rgba(0, 112, 243, 0.3);
192+
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
193+
transform: translateY(-2px);
194+
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
151195
}
152196

153197
.cancelButton {
154-
background: #6c757d;
155-
color: white;
156-
border: 1px solid #6c757d;
198+
background: #f1f5f9;
199+
color: #475569;
200+
border: 1.5px solid #e2e8f0;
157201
}
158202

159203
.cancelButton:hover:not(:disabled) {
160-
background: #5a6268;
161-
border-color: #5a6268;
204+
background: #e2e8f0;
205+
border-color: #cbd5e1;
162206
transform: translateY(-1px);
163-
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
164207
}
165208

166209
.clearButton {
167-
background: #6c757d;
168-
color: white;
169-
border: 1px solid #6c757d;
210+
background: transparent;
211+
color: #64748b;
212+
border: 1.5px solid #e2e8f0;
170213
}
171214

172215
.clearButton:hover:not(:disabled) {
173-
background: #5a6268;
174-
border-color: #5a6268;
175-
transform: translateY(-1px);
176-
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
216+
background: #f8fafc;
217+
border-color: #cbd5e1;
218+
color: #475569;
177219
}
178220

179221
/* Responsive Design */
180222
@media (max-width: 768px) {
181223
.formContainer {
182-
padding: 1.5rem;
224+
padding: 1.75rem;
225+
border-radius: 12px;
226+
}
227+
228+
.fieldSection {
229+
padding: 1.25rem;
183230
}
184231

185232
.formGrid {
186233
grid-template-columns: 1fr;
187234
gap: 1rem;
188235
}
189236

237+
.formGridThreeCol {
238+
grid-template-columns: 1fr;
239+
gap: 1rem;
240+
}
241+
190242
.formActions {
191243
flex-direction: column-reverse;
192-
gap: 0.75rem;
244+
gap: 0.625rem;
193245
}
194246

195247
.button {
196248
width: 100%;
249+
padding: 0.875rem 1.5rem;
197250
}
198251
}
199252

200253
@media (max-width: 480px) {
201254
.formContainer {
202-
padding: 1rem;
255+
padding: 1.25rem;
203256
}
204257

205258
.formTitle {
206259
font-size: 1.5rem;
207260
}
208261

209-
.formGrid {
210-
gap: 0.75rem;
262+
.fieldSection {
263+
padding: 1rem;
264+
}
265+
266+
.formGrid,
267+
.formGridThreeCol {
268+
gap: 0.875rem;
211269
}
212270

213271
.input,
214272
.textarea {
215-
padding: 0.625rem;
273+
padding: 0.75rem;
216274
font-size: 0.9rem;
217275
}
218276

0 commit comments

Comments
 (0)