From 50969b29305d75761d6f3b0e803927acdb6185db Mon Sep 17 00:00:00 2001
From: ntuff <ndtuff@gmail.com>
Date: Mon, 15 Apr 2024 23:38:58 -0230
Subject: [PATCH] Styling improvements

---
 frontend/src/pages/garage/Garage.js                           | 2 +-
 frontend/src/pages/garage/Vehicle.js                          | 2 +-
 .../src/pages/maintenance-history/ManualVehicleHistory.js     | 4 ++--
 frontend/src/pages/vehicle/VehicleHistory.js                  | 3 +--
 frontend/src/pages/vehicle/VehicleInfo.js                     | 4 ++--
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/garage/Garage.js b/frontend/src/pages/garage/Garage.js
index 407c33e..9945c93 100644
--- a/frontend/src/pages/garage/Garage.js
+++ b/frontend/src/pages/garage/Garage.js
@@ -66,7 +66,7 @@ function Garage(props) {
     }, [refreshData]);
 
     return (
-        <Container className="mt-1">
+        <Container className="mt-5">
             <Row className="mb-3">
                 <Col>
                     <h2 onClick={() => navigate('/garage')}
diff --git a/frontend/src/pages/garage/Vehicle.js b/frontend/src/pages/garage/Vehicle.js
index 83b4321..0c7a538 100644
--- a/frontend/src/pages/garage/Vehicle.js
+++ b/frontend/src/pages/garage/Vehicle.js
@@ -141,7 +141,7 @@ function Vehicle(props) {
                     <Card.Title className={'d-flex justify-content-center'}>{v.configurations.year} {v.configurations.make} {v.configurations.model}</Card.Title>
                     <Card.Text className="d-flex justify-content-around">
                         <Link to={`/garage/vehicle-info/${v.configurations.config_id}`} state={{configId: v.configurations.config_id}}>
-                            <Button style={{ backgroundColor: '#6A91BF', borderColor: '#6A91BF' }}>View Info</Button>
+                            <Button style={{ backgroundColor: '#6A91BF', borderColor: '#6A91BF' }}>View/Edit Info</Button>
                         </Link>
                         <RemoveVehicle configId={v.configurations.config_id} />
                     </Card.Text>
diff --git a/frontend/src/pages/maintenance-history/ManualVehicleHistory.js b/frontend/src/pages/maintenance-history/ManualVehicleHistory.js
index 9796649..a048ec3 100644
--- a/frontend/src/pages/maintenance-history/ManualVehicleHistory.js
+++ b/frontend/src/pages/maintenance-history/ManualVehicleHistory.js
@@ -49,7 +49,7 @@ function ManualVehicleHistory(props) {
 
     return (
         <>
-            <Button onClick={handleShow} style={{ backgroundColor: '#8c7498', borderColor: '#8c7498' }}>Add Maintenance History</Button>
+            <Button onClick={handleShow} style={{ backgroundColor: '#5E989C', borderColor: '#5E989C' }}>Add Maintenance History</Button>
             <Modal show={show} onHide={handleClose}>
                 <Modal.Dialog>
                     <Modal.Header closeButton>
@@ -106,7 +106,7 @@ function ManualVehicleHistory(props) {
                     </Modal.Body>
                     <Modal.Footer className={'mx-auto'}>
                         <Button variant="secondary" onClick={handleClose}>Close</Button>
-                        <Button variant="success" onClick={submit}>Upload</Button>
+                        <Button style={{backgroundColor: '#5E989C', borderColor: '#5E989C'}} onClick={submit}>Upload</Button>
                     </Modal.Footer>
                 </Modal.Dialog>
             </Modal>
diff --git a/frontend/src/pages/vehicle/VehicleHistory.js b/frontend/src/pages/vehicle/VehicleHistory.js
index dfbd11d..cc0050e 100644
--- a/frontend/src/pages/vehicle/VehicleHistory.js
+++ b/frontend/src/pages/vehicle/VehicleHistory.js
@@ -151,7 +151,6 @@ function VehicleHistory(props) {
                                                 configId={configId}
                                                 buttonVariant="outline-secondary"
                                             />
-                                            {/* Adding a span with horizontal padding */}
                                             <span style={{width: '8px', display: 'inline-block'}}></span>
                                             <DeleteMaintenanceHistory
                                                 maintenanceInfo={service}
@@ -274,7 +273,7 @@ function UpdateMaintenanceHistory(props) {
                     </Modal.Body>
                     <Modal.Footer className={'mx-auto'}>
                         <Button variant="secondary" onClick={handleClose}>Close</Button>
-                        <Button variant="success" onClick={submit}>Save changes</Button>
+                        <Button variant="success" onClick={submit} style={{ backgroundColor: '#5E989C', borderColor: '#5E989C' }}>Save changes</Button>
                     </Modal.Footer>
                 </Modal.Dialog>
             </Modal>
diff --git a/frontend/src/pages/vehicle/VehicleInfo.js b/frontend/src/pages/vehicle/VehicleInfo.js
index dc8aa5b..abee854 100644
--- a/frontend/src/pages/vehicle/VehicleInfo.js
+++ b/frontend/src/pages/vehicle/VehicleInfo.js
@@ -188,7 +188,7 @@ function VehicleInfo() {
                 <Col className="text-start">
                     <Button variant="primary"
                             onClick={() => navigate(`/garage/vehicle-history/${configId}`, {state: {configId}})}
-                            style={{ backgroundColor: '#6A91BF', borderColor: '#8c7498' }}>
+                            style={{ backgroundColor: '#6A91BF', borderColor: '#6A91BF' }}>
                         View Maintenance History
                     </Button>
                 </Col>
@@ -234,7 +234,7 @@ function VehicleInfo() {
                                 </Form.Group>
                                 <div className="d-flex justify-content-center">
                                     <Button variant="primary" onClick={handleUpdateOdometer}
-                                            style={{ backgroundColor: '#A1CCA5', borderColor: '#8c7498', color: 'black' }}>
+                                            style={{ backgroundColor: '#5E989C', borderColor: '#5E989C', color: 'White' }}>
                                         Update Odometer
                                     </Button>
                                 </div>