Skip to content

Commit e6c64bd

Browse files
one-communityone-community
authored
Merge pull request #4876 from OneCommunityGlobal/aryan_equipment_update_form_css_module
Aryan Converted EquipmentUpdateForm to CSS Module
2 parents dfb6ba5 + 0900586 commit e6c64bd

6 files changed

Lines changed: 175 additions & 136 deletions

File tree

‎src/components/BMDashboard/Tools/EquipmentUpdate.css‎

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

‎src/components/BMDashboard/Tools/EquipmentUpdate.jsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1+
import { useSelector } from 'react-redux';
12
import EquipmentUpdateForm from './EquipmentUpdateForm';
2-
import './EquipmentUpdate.css';
3+
import styles from './EquipmentUpdate.module.css';
34

45
export default function EquipmentUpdate() {
6+
const darkMode = useSelector(state => state.theme.darkMode);
7+
58
return (
6-
<main className="equipment-update-container">
7-
<header className="equipment-update-header">
8-
<h2>Which Tool or Equipment to Update</h2>
9-
</header>
10-
<EquipmentUpdateForm />
11-
</main>
9+
<div
10+
className={`${styles.equipmentUpdateWrapper} ${darkMode ? 'bg-oxford-blue text-light' : ''}`}
11+
>
12+
<main className={styles.equipmentUpdateContainer}>
13+
<header className={styles.equipmentUpdateHeader}>
14+
<h2>Which Tool or Equipment to Update</h2>
15+
</header>
16+
<EquipmentUpdateForm />
17+
</main>
18+
</div>
1219
);
1320
}

‎src/components/BMDashboard/Tools/EquipmentUpdate.module.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.equipmentUpdateWrapper {
2+
min-height: 100vh;
3+
padding: 1rem 0;
4+
}
5+
6+
.equipmentUpdateContainer {
7+
width: 100%;
8+
max-width: 800px;
9+
margin: 1rem auto;
10+
padding: 1rem 2rem;
11+
border: 1px solid #ccc;
12+
border-radius: 20px;
13+
}
14+
15+
.equipmentUpdateHeader h2 {
16+
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
17+
margin-left: 1rem;
18+
}
19+
20+
@media screen and (max-width: 800px) {
21+
.equipmentUpdateContainer {
22+
width: 95%;
23+
}
24+
}
25+
26+
.equipmentUpdateWrapper:global(.bg-oxford-blue) .equipmentUpdateContainer {
27+
border-color: #495057;
28+
}
29+
30+
.equipmentUpdateWrapper:global(.bg-oxford-blue) .equipmentUpdateHeader h2 {
31+
color: #e9ecef;
32+
}

‎src/components/BMDashboard/Tools/EquipmentUpdateForm.css‎

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

‎src/components/BMDashboard/Tools/EquipmentUpdateForm.jsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
66
import { fetchAllEquipments } from '../../../actions/bmdashboard/equipmentActions';
77
import { fetchTools } from '../../../actions/bmdashboard/toolActions';
88
import { fetchBMProjects } from '../../../actions/bmdashboard/projectActions';
9+
import styles from './EquipmentUpdateForm.module.css';
910

1011
const initialFormState = {
1112
project: '',
@@ -94,11 +95,11 @@ export default function EquipmentUpdateForm() {
9495
};
9596

9697
return (
97-
<div className="add-tool-form">
98+
<div className={styles.addToolForm}>
9899
<Form onSubmit={handleSubmit}>
99100
<FormGroup>
100101
<Label for="project">
101-
Project <span className="field-required">*</span>
102+
Project <span className={styles.fieldRequired}>*</span>
102103
</Label>
103104
<Input
104105
type="select"
@@ -116,12 +117,12 @@ export default function EquipmentUpdateForm() {
116117
</option>
117118
))}
118119
</Input>
119-
{!formData.project && <div className="toolFormError">Project is required</div>}
120+
{!formData.project && <div className={styles.toolFormError}>Project is required</div>}
120121
</FormGroup>
121122

122123
<FormGroup>
123124
<Label for="toolOrEquipment">
124-
Tool or Equipment <span className="field-required">*</span>
125+
Tool or Equipment <span className={styles.fieldRequired}>*</span>
125126
</Label>
126127
<Input
127128
type="select"
@@ -140,12 +141,14 @@ export default function EquipmentUpdateForm() {
140141
Equipment
141142
</option>
142143
</Input>
143-
{!formData.toolOrEquipment && <div className="toolFormError">This field is required</div>}
144+
{!formData.toolOrEquipment && (
145+
<div className={styles.toolFormError}>This field is required</div>
146+
)}
144147
</FormGroup>
145148

146149
<FormGroup>
147150
<Label for="name">
148-
Name <span className="field-required">*</span>
151+
Name <span className={styles.fieldRequired}>*</span>
149152
</Label>
150153
<Input
151154
type="select"
@@ -169,12 +172,12 @@ export default function EquipmentUpdateForm() {
169172
</option>
170173
))}
171174
</Input>
172-
{!formData.name && <div className="toolFormError">Please select a name</div>}
175+
{!formData.name && <div className={styles.toolFormError}>Please select a name</div>}
173176
</FormGroup>
174177

175178
<FormGroup>
176179
<Label for="number">
177-
Number <span className="field-required">*</span>
180+
Number <span className={styles.fieldRequired}>*</span>
178181
</Label>
179182
<Input
180183
type="text"
@@ -184,9 +187,9 @@ export default function EquipmentUpdateForm() {
184187
onChange={handleChange}
185188
placeholder="Enter number"
186189
/>
187-
{!formData.number && <div className="toolFormError">Number is required</div>}
190+
{!formData.number && <div className={styles.toolFormError}>Number is required</div>}
188191
</FormGroup>
189-
<div className="add-tool-buttons">
192+
<div className={styles.addToolButtons}>
190193
<Button color="primary" type="submit" disabled={!isFormValid}>
191194
Update
192195
</Button>

‎src/components/BMDashboard/Tools/EquipmentUpdateForm.module.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.addToolForm {
2+
width: 100%;
3+
max-width: 600px;
4+
margin: 0 auto;
5+
padding: 1rem;
6+
}
7+
8+
.addToolForm label {
9+
font-size: 0.9em;
10+
font-weight: bold;
11+
display: block;
12+
margin-bottom: 0.5rem;
13+
}
14+
15+
.addToolButtons {
16+
display: flex;
17+
justify-content: space-between;
18+
gap: 1rem;
19+
margin: 1rem auto 2rem;
20+
}
21+
22+
.addToolButtons button {
23+
flex: 1;
24+
min-width: 120px;
25+
}
26+
27+
.toolFormError {
28+
font-weight: 500;
29+
font-size: 12px !important;
30+
color: red;
31+
margin-top: 0.25rem;
32+
}
33+
34+
.fieldRequired {
35+
color: red;
36+
}
37+
38+
@media screen and (max-width: 600px) {
39+
.addToolButtons {
40+
flex-direction: column;
41+
align-items: stretch;
42+
}
43+
44+
.addToolButtons button {
45+
width: 100%;
46+
}
47+
}
48+
49+
@media screen and (max-width: 400px) {
50+
.addToolForm {
51+
padding: 0.5rem;
52+
}
53+
54+
.addToolButtons {
55+
gap: 0.5rem;
56+
}
57+
}
58+
59+
:global(.bg-oxford-blue) .addToolForm label {
60+
color: #e9ecef;
61+
}
62+
63+
:global(.bg-oxford-blue) .addToolForm :global(.form-control),
64+
:global(.bg-oxford-blue) .addToolForm :global(.custom-select) {
65+
background-color: #2c3e50;
66+
color: #e9ecef;
67+
border-color: #495057;
68+
}
69+
70+
:global(.bg-oxford-blue) .addToolForm select:global(.form-control) {
71+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e9ecef' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 1 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
72+
background-repeat: no-repeat;
73+
background-position: right 0.75rem center;
74+
background-size: 12px;
75+
-webkit-appearance: none;
76+
-moz-appearance: none;
77+
appearance: none;
78+
padding-right: 2rem;
79+
}
80+
81+
:global(.bg-oxford-blue) .addToolForm :global(.form-control)::placeholder {
82+
color: #adb5bd;
83+
}
84+
85+
:global(.bg-oxford-blue) .addToolForm :global(.form-control):focus,
86+
:global(.bg-oxford-blue) .addToolForm :global(.custom-select):focus {
87+
background-color: #34495e;
88+
color: #f8f9fa;
89+
border-color: #5a9fd4;
90+
box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25);
91+
}
92+
93+
:global(.bg-oxford-blue) .addToolForm :global(.form-control):disabled,
94+
:global(.bg-oxford-blue) .addToolForm :global(.custom-select):disabled {
95+
background-color: #1e2d3d;
96+
color: #6c757d;
97+
border-color: #3a4a5c;
98+
opacity: 1;
99+
}
100+
101+
:global(.bg-oxford-blue) .addToolForm select:global(.form-control):disabled {
102+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 1 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
103+
}
104+
105+
:global(.bg-oxford-blue) .addToolForm select:global(.form-control) option {
106+
background-color: #2c3e50;
107+
color: #e9ecef;
108+
}
109+
110+
:global(.bg-oxford-blue) .toolFormError {
111+
color: #ff6b6b;
112+
}
113+
114+
:global(.bg-oxford-blue) .fieldRequired {
115+
color: #ff6b6b;
116+
}

0 commit comments

Comments
 (0)