Skip to content

Commit d511265

Browse files
piyushroshanpiyushroshan
committed
Fix css of remaining components
1 parent 088e1d2 commit d511265

File tree

11 files changed

+1563
-198
lines changed

11 files changed

+1563
-198
lines changed

‎services/web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "crapi-web",
33
"version": "0.1.0",
4-
"proxy": "http://localhost:8888",
4+
"proxy": "https://crapi.allvapps.com",
55
"private": true,
66
"dependencies": {
77
"@ant-design/cssinjs": "^1.21.1",

‎services/web/src/components/contactMechanic/contactMechanic.tsx‎

Lines changed: 169 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,24 @@
1616
import React from "react";
1717

1818
import { connect, ConnectedProps } from "react-redux";
19-
import { Button, Form, Card, Input, Select } from "antd";
19+
import { Button, Form, Card, Input, Select, Typography, Layout } from "antd";
20+
import {
21+
CarOutlined,
22+
ToolOutlined,
23+
MessageOutlined,
24+
SendOutlined,
25+
UserOutlined,
26+
ExclamationCircleOutlined,
27+
} from "@ant-design/icons";
2028
import {
2129
VIN_REQUIRED,
2230
MECHANIC_REQUIRED,
2331
PROBLEM_REQUIRED,
2432
} from "../../constants/messages";
33+
import "./styles.css";
2534

2635
const { Option } = Select;
36+
const { Title, Text } = Typography;
2737

2838
interface Mechanic {
2939
mechanic_code: string;
@@ -51,57 +61,167 @@ const ContactMechanic: React.FC<ContactMechanicProps> = ({
5161
const VIN = urlParams.get("VIN");
5262

5363
return (
54-
<div className="container">
55-
<Card title="Contact Mechanic" bordered={false} className="form-card">
56-
<Form
57-
name="add-vehicle"
58-
initialValues={{
59-
remember: true,
60-
}}
61-
labelCol={{ sm: { span: 8 } }}
62-
wrapperCol={{ sm: { span: 16 } }}
63-
onFinish={onFinish}
64+
<Layout className="page-container contact-mechanic-page">
65+
<div className="contact-mechanic-container">
66+
<div className="page-title">
67+
<Title level={1}>
68+
<ToolOutlined style={{ color: "#8b5cf6", marginRight: "12px" }} />
69+
Contact Mechanic
70+
</Title>
71+
<Text>
72+
Submit a service request for your vehicle and get connected with a
73+
qualified mechanic
74+
</Text>
75+
</div>
76+
77+
<Card
78+
className="contact-mechanic-card"
79+
title={
80+
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
81+
<UserOutlined style={{ color: "#8b5cf6", fontSize: "24px" }} />
82+
<span>Service Request Form</span>
83+
</div>
84+
}
85+
bordered={false}
6486
>
65-
<Form.Item
66-
name="vin"
67-
label="VIN"
68-
initialValue={VIN}
69-
rules={[{ required: true, message: VIN_REQUIRED }]}
70-
>
71-
<Input placeholder="VIN" disabled />
72-
</Form.Item>
73-
<Form.Item
74-
name="mechanicCode"
75-
label="Mechanic"
76-
rules={[{ required: true, message: MECHANIC_REQUIRED }]}
87+
<Form
88+
name="contact-mechanic-form"
89+
className="contact-mechanic-form"
90+
layout="vertical"
91+
initialValues={{
92+
vin: VIN,
93+
}}
94+
onFinish={onFinish}
95+
size="large"
7796
>
78-
<Select>
79-
{mechanics.map((mechanic) => (
80-
<Option
81-
value={mechanic.mechanic_code}
82-
key={mechanic.mechanic_code}
97+
{/* Vehicle Information Section */}
98+
<div className="vehicle-info-section">
99+
<div className="form-section-title">
100+
<CarOutlined style={{ color: "#3b82f6" }} />
101+
Vehicle Information
102+
</div>
103+
104+
<Form.Item
105+
name="vin"
106+
label={
107+
<span>
108+
<CarOutlined
109+
style={{ marginRight: "8px", color: "#8b5cf6" }}
110+
/>
111+
Vehicle Identification Number (VIN)
112+
</span>
113+
}
114+
rules={[{ required: true, message: VIN_REQUIRED }]}
115+
>
116+
<Input
117+
placeholder="Enter your vehicle VIN"
118+
disabled
119+
prefix={<CarOutlined style={{ color: "#6b7280" }} />}
120+
/>
121+
</Form.Item>
122+
</div>
123+
124+
{/* Mechanic Selection Section */}
125+
<div className="mechanic-selection-section">
126+
<div className="form-section-title">
127+
<ToolOutlined style={{ color: "#10b981" }} />
128+
Select Mechanic
129+
</div>
130+
131+
<Form.Item
132+
name="mechanicCode"
133+
label={
134+
<span>
135+
<ToolOutlined
136+
style={{ marginRight: "8px", color: "#8b5cf6" }}
137+
/>
138+
Available Mechanics
139+
</span>
140+
}
141+
rules={[{ required: true, message: MECHANIC_REQUIRED }]}
142+
>
143+
<Select
144+
placeholder="Choose a mechanic for your service"
145+
showSearch
146+
optionFilterProp="children"
147+
filterOption={(input, option) =>
148+
(option?.children as unknown as string)
149+
?.toLowerCase()
150+
.includes(input.toLowerCase())
151+
}
83152
>
84-
{mechanic.mechanic_code}
85-
</Option>
86-
))}
87-
</Select>
88-
</Form.Item>
89-
<Form.Item
90-
name="problemDetails"
91-
label="Problem Description"
92-
rules={[{ required: true, message: PROBLEM_REQUIRED }]}
93-
>
94-
<Input.TextArea />
95-
</Form.Item>
96-
<Form.Item wrapperCol={{ sm: { span: 24 } }}>
97-
{hasErrored && <div className="error-message">{errorMessage}</div>}
98-
<Button type="primary" htmlType="submit" className="form-button">
99-
Send Service Request
100-
</Button>
101-
</Form.Item>
102-
</Form>
103-
</Card>
104-
</div>
153+
{mechanics.map((mechanic) => (
154+
<Option
155+
value={mechanic.mechanic_code}
156+
key={mechanic.mechanic_code}
157+
>
158+
<div
159+
style={{
160+
display: "flex",
161+
alignItems: "center",
162+
gap: "8px",
163+
}}
164+
>
165+
<ToolOutlined style={{ color: "#8b5cf6" }} />
166+
{mechanic.mechanic_code}
167+
</div>
168+
</Option>
169+
))}
170+
</Select>
171+
</Form.Item>
172+
</div>
173+
174+
{/* Problem Description Section */}
175+
<div className="problem-description-section">
176+
<div className="form-section-title">
177+
<MessageOutlined style={{ color: "#f59e0b" }} />
178+
Problem Description
179+
</div>
180+
181+
<Form.Item
182+
name="problemDetails"
183+
label={
184+
<span>
185+
<MessageOutlined
186+
style={{ marginRight: "8px", color: "#8b5cf6" }}
187+
/>
188+
Describe the Issue
189+
</span>
190+
}
191+
rules={[{ required: true, message: PROBLEM_REQUIRED }]}
192+
>
193+
<Input.TextArea
194+
placeholder="Please provide a detailed description of the problem you're experiencing with your vehicle..."
195+
rows={6}
196+
showCount
197+
maxLength={1000}
198+
/>
199+
</Form.Item>
200+
</div>
201+
202+
{/* Error Message */}
203+
{hasErrored && (
204+
<div className="error-message">
205+
<ExclamationCircleOutlined />
206+
{errorMessage}
207+
</div>
208+
)}
209+
210+
{/* Submit Button */}
211+
<Form.Item>
212+
<Button
213+
type="primary"
214+
htmlType="submit"
215+
className="submit-service-request-btn"
216+
icon={<SendOutlined />}
217+
>
218+
Send Service Request
219+
</Button>
220+
</Form.Item>
221+
</Form>
222+
</Card>
223+
</div>
224+
</Layout>
105225
);
106226
};
107227

0 commit comments

Comments
 (0)