Skip to content

Commit 0900586

Browse files
aryanrachala54aryanrachala54
committed
convert EquipmentUpdateForm to CSS Module
1 parent c7b9ec9 commit 0900586

4 files changed

Lines changed: 105 additions & 69 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.module.css‎

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@
1212
margin-bottom: 0.5rem;
1313
}
1414

15-
.addToolFlexGroup {
16-
display: flex;
17-
gap: 1.5rem;
18-
flex-wrap: wrap;
19-
}
20-
2115
.addToolButtons {
2216
display: flex;
2317
justify-content: space-between;
@@ -30,25 +24,6 @@
3024
min-width: 120px;
3125
}
3226

33-
.addToolTotalPrice {
34-
display: flex;
35-
border-radius: 10px;
36-
line-height: 3rem;
37-
font-weight: bolder;
38-
background-color: #f5e6e6;
39-
padding: 1rem;
40-
justify-content: space-between;
41-
align-items: center;
42-
}
43-
44-
.filePreviewContainer {
45-
display: flex;
46-
flex-wrap: wrap;
47-
gap: 0.5rem;
48-
width: 100%;
49-
margin-top: 1rem;
50-
}
51-
5227
.toolFormError {
5328
font-weight: 500;
5429
font-size: 12px !important;
@@ -61,15 +36,6 @@
6136
}
6237

6338
@media screen and (max-width: 600px) {
64-
.addToolFlexGroup {
65-
flex-direction: column;
66-
gap: 1rem;
67-
}
68-
69-
.filePreviewContainer {
70-
flex-direction: column;
71-
}
72-
7339
.addToolButtons {
7440
flex-direction: column;
7541
align-items: stretch;
@@ -85,16 +51,66 @@
8551
padding: 0.5rem;
8652
}
8753

88-
.addToolTotalPrice {
89-
flex-direction: column;
90-
text-align: center;
91-
}
92-
93-
.addToolTotalPrice div {
94-
width: 100%;
95-
}
96-
9754
.addToolButtons {
9855
gap: 0.5rem;
9956
}
10057
}
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)