Skip to content

Commit 34c74f2

Browse files
jordan-smith721jordan-smith721
committed
Cory feedback
1 parent ab87638 commit 34c74f2

16 files changed

Lines changed: 592 additions & 100 deletions

File tree

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

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
/**
2+
* Search Movie Modal Styles
3+
*
4+
* CSS Module for the search movie modal component.
5+
* Provides consistent styling with the rest of the application.
6+
*/
7+
8+
.formContainer {
9+
background: white;
10+
border-radius: 12px;
11+
padding: 2rem;
12+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
13+
margin-bottom: 2rem;
14+
}
15+
16+
.formTitle {
17+
font-size: 1.75rem;
18+
font-weight: bold;
19+
color: #333;
20+
margin: 0 0 1.5rem 0;
21+
text-align: center;
22+
}
23+
24+
.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;
33+
text-align: center;
34+
}
35+
36+
.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;
43+
font-size: 0.9rem;
44+
text-align: center;
45+
}
46+
47+
.form {
48+
width: 100%;
49+
}
50+
51+
.formGrid {
52+
display: grid;
53+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
54+
gap: 1.5rem;
55+
margin-bottom: 1.5rem;
56+
}
57+
58+
.formGroup {
59+
display: flex;
60+
flex-direction: column;
61+
gap: 0.5rem;
62+
}
63+
64+
.label {
65+
font-weight: 500;
66+
color: #333;
67+
font-size: 0.9rem;
68+
}
69+
70+
.input,
71+
.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;
77+
background: white;
78+
}
79+
80+
.input:focus,
81+
.textarea:focus {
82+
outline: none;
83+
border-color: #0070f3;
84+
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
85+
}
86+
87+
.input:disabled,
88+
.textarea:disabled {
89+
background: #f8f9fa;
90+
color: #6c757d;
91+
cursor: not-allowed;
92+
}
93+
94+
.inputError {
95+
border-color: #dc2626 !important;
96+
}
97+
98+
.inputError:focus {
99+
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
100+
}
101+
102+
.error {
103+
color: #dc2626;
104+
font-size: 0.875rem;
105+
margin-top: 0.25rem;
106+
}
107+
108+
.searchOperatorDescription {
109+
color: #6c757d;
110+
font-size: 0.875rem;
111+
margin-top: 0.25rem;
112+
display: block;
113+
}
114+
115+
.formActions {
116+
display: flex;
117+
gap: 1rem;
118+
justify-content: flex-end;
119+
padding-top: 1.5rem;
120+
border-top: 1px solid #e1e5e9;
121+
}
122+
123+
.button {
124+
padding: 0.75rem 1.5rem;
125+
border: none;
126+
border-radius: 8px;
127+
font-size: 1rem;
128+
font-weight: 500;
129+
cursor: pointer;
130+
transition: all 0.2s ease;
131+
min-width: 120px;
132+
}
133+
134+
.button:disabled {
135+
opacity: 0.6;
136+
cursor: not-allowed;
137+
transform: none;
138+
}
139+
140+
.saveButton {
141+
background: #0070f3;
142+
color: white;
143+
border: 1px solid #0070f3;
144+
}
145+
146+
.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);
151+
}
152+
153+
.cancelButton {
154+
background: #6c757d;
155+
color: white;
156+
border: 1px solid #6c757d;
157+
}
158+
159+
.cancelButton:hover:not(:disabled) {
160+
background: #5a6268;
161+
border-color: #5a6268;
162+
transform: translateY(-1px);
163+
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
164+
}
165+
166+
.clearButton {
167+
background: #6c757d;
168+
color: white;
169+
border: 1px solid #6c757d;
170+
}
171+
172+
.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);
177+
}
178+
179+
/* Responsive Design */
180+
@media (max-width: 768px) {
181+
.formContainer {
182+
padding: 1.5rem;
183+
}
184+
185+
.formGrid {
186+
grid-template-columns: 1fr;
187+
gap: 1rem;
188+
}
189+
190+
.formActions {
191+
flex-direction: column-reverse;
192+
gap: 0.75rem;
193+
}
194+
195+
.button {
196+
width: 100%;
197+
}
198+
}
199+
200+
@media (max-width: 480px) {
201+
.formContainer {
202+
padding: 1rem;
203+
}
204+
205+
.formTitle {
206+
font-size: 1.5rem;
207+
}
208+
209+
.formGrid {
210+
gap: 0.75rem;
211+
}
212+
213+
.input,
214+
.textarea {
215+
padding: 0.625rem;
216+
font-size: 0.9rem;
217+
}
218+
219+
.button {
220+
padding: 0.75rem 1rem;
221+
font-size: 0.9rem;
222+
}
223+
}

‎client/app/components/SearchMovieModal/SearchMovieModal.tsx‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,12 @@
88
*/
99

1010
import { useState } from 'react';
11-
import { Movie } from '../../types/movie';
12-
import styles from '../EditMovieForm/EditMovieForm.module.css';
11+
import styles from './SearchMovieModal.module.css';
1312

1413
interface SearchMovieModalProps {
1514
onSearch: (searchParams: SearchParams) => void;
1615
onCancel: () => void;
1716
isLoading?: boolean;
18-
searchResults?: Movie[];
19-
resultCount?: number;
2017
}
2118

2219
export interface SearchParams {
@@ -53,9 +50,7 @@ const getInitialFormData = (): SearchFormData => ({
5350
export default function SearchMovieModal({
5451
onSearch,
5552
onCancel,
56-
isLoading = false,
57-
searchResults = [],
58-
resultCount = 0
53+
isLoading = false
5954
}: SearchMovieModalProps) {
6055
const [formData, setFormData] = useState<SearchFormData>(getInitialFormData());
6156
const [errors, setErrors] = useState<Record<string, string>>({});
@@ -145,7 +140,7 @@ export default function SearchMovieModal({
145140
<div className={styles.formContainer}>
146141
<h2 className={styles.formTitle}>Search Movies</h2>
147142
<p className={styles.batchDescription}>
148-
Search across movie plots, directors, writers, and cast. Use MongoDB Search with fuzzy matching for names.
143+
Search across movie plots, directors, writers, and cast.
149144
</p>
150145

151146
{errors.general && (
@@ -154,13 +149,6 @@ export default function SearchMovieModal({
154149
</div>
155150
)}
156151

157-
{/* Show results count if we have results */}
158-
{searchResults.length > 0 && (
159-
<div className={styles.batchDescription} style={{ backgroundColor: '#d1f2eb', borderColor: '#b7e5d1' }}>
160-
Found {resultCount} movie{resultCount !== 1 ? 's' : ''} matching your search criteria
161-
</div>
162-
)}
163-
164152
<form onSubmit={handleSubmit} className={styles.form}>
165153
{/* Search Fields */}
166154
<div className={styles.formGrid}>
@@ -176,7 +164,7 @@ export default function SearchMovieModal({
176164
onChange={(e) => handleInputChange('plot', e.target.value)}
177165
className={`${styles.input} ${errors.plot ? styles.inputError : ''}`}
178166
disabled={isLoading}
179-
placeholder="Search in plot summaries"
167+
placeholder="Exact phrase search in plot summaries"
180168
/>
181169
{errors.plot && <span className={styles.error}>{errors.plot}</span>}
182170
</div>
@@ -210,7 +198,7 @@ export default function SearchMovieModal({
210198
onChange={(e) => handleInputChange('directors', e.target.value)}
211199
className={`${styles.input} ${errors.directors ? styles.inputError : ''}`}
212200
disabled={isLoading}
213-
placeholder="Director names (fuzzy search enabled)"
201+
placeholder="Director names"
214202
/>
215203
{errors.directors && <span className={styles.error}>{errors.directors}</span>}
216204
</div>
@@ -227,7 +215,7 @@ export default function SearchMovieModal({
227215
onChange={(e) => handleInputChange('writers', e.target.value)}
228216
className={`${styles.input} ${errors.writers ? styles.inputError : ''}`}
229217
disabled={isLoading}
230-
placeholder="Writer names (fuzzy search enabled)"
218+
placeholder="Writer names"
231219
/>
232220
{errors.writers && <span className={styles.error}>{errors.writers}</span>}
233221
</div>
@@ -244,7 +232,7 @@ export default function SearchMovieModal({
244232
onChange={(e) => handleInputChange('cast', e.target.value)}
245233
className={`${styles.input} ${errors.cast ? styles.inputError : ''}`}
246234
disabled={isLoading}
247-
placeholder="Actor names (fuzzy search enabled)"
235+
placeholder="Actor names"
248236
/>
249237
{errors.cast && <span className={styles.error}>{errors.cast}</span>}
250238
</div>
@@ -286,7 +274,7 @@ export default function SearchMovieModal({
286274
</option>
287275
))}
288276
</select>
289-
<small style={{ color: '#6c757d', fontSize: '0.875rem', marginTop: '0.25rem' }}>
277+
<small className={styles.searchOperatorDescription}>
290278
{searchOperatorOptions.find(opt => opt.value === formData.search_operator)?.description}
291279
</small>
292280
</div>
@@ -296,9 +284,8 @@ export default function SearchMovieModal({
296284
<button
297285
type="button"
298286
onClick={handleClear}
299-
className={`${styles.button} ${styles.cancelButton}`}
287+
className={`${styles.button} ${styles.clearButton}`}
300288
disabled={isLoading}
301-
style={{ backgroundColor: '#6c757d', borderColor: '#6c757d' }}
302289
>
303290
Clear
304291
</button>

0 commit comments

Comments
 (0)
⚡