Skip to content

Commit 0a84acf

Browse files
Merge branch 'pages/overview-danil'
Updated color ratios
2 parents ce596ff + b3b7f2c commit 0a84acf

11 files changed

Lines changed: 192 additions & 102 deletions

File tree

src/App.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
22
import { useAuth, AuthProvider } from "./contexts/AuthContext";
33

4-
// Bootstrap Icons
4+
// Bootstrap
55
import "bootstrap-icons/font/bootstrap-icons.css";
6+
import "bootstrap/dist/css/bootstrap.min.css";
7+
import "bootstrap/dist/js/bootstrap.bundle.min.js";
8+
import "./CustomBootstrap.css";
69

710
import "./App.css";
811
// Public components
@@ -17,8 +20,6 @@ import ReportDetailPage from "./pages/ReportDetailPage";
1720
import RequireRole from "./components/RequireRole";
1821
import NewProject from "./pages/CreateNewProject";
1922
import EditProject from "./pages/EditProject";
20-
import "bootstrap/dist/css/bootstrap.min.css";
21-
import "bootstrap/dist/js/bootstrap.bundle.min.js";
2223
import Navbar from "./components/Navbar";
2324

2425
// Vendor components

src/CustomBootstrap.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--bs-warning: #7F46F1; /* Your custom warning color */
3+
--bs-warning-rgb: 127, 70, 241; /* RGB values of your color */
4+
}

src/components/Carousel.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
}
3131
.carousel-control-prev-icon,
3232
.carousel-control-next-icon {
33-
background-color: rgba(0, 0, 0, 0.5);
34-
border-radius: 50%;
33+
background-color: rgba(0, 0, 0, 1);
34+
border-radius: 60%;
3535
padding: 10px;
3636
}
3737

src/components/Carousel.tsx

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ const Carousel = ({ allProjects }: Props) => {
2626
className="carousel slide"
2727
data-bs-ride="carousel"
2828
>
29-
{/* Bootstrap Indicators */}
3029
<div className="carousel-indicators">
3130
{allProjects.map((_, index) => (
3231
<button
@@ -41,7 +40,6 @@ const Carousel = ({ allProjects }: Props) => {
4140
))}
4241
</div>
4342

44-
{/* Carousel Inner */}
4543
<div className="carousel-inner">
4644
{allProjects.map((project, index) => (
4745
<div
@@ -50,42 +48,38 @@ const Carousel = ({ allProjects }: Props) => {
5048
>
5149
<div className="project-carousel-item">
5250
<div className="container">
53-
{/* Title and Status */}
5451
<div className="row mb-4">
5552
<div className="col-12">
5653
<h2 className="display-6 mb-2">{project.name}</h2>
5754
{project.status}
5855
</div>
5956
</div>
6057

61-
{/* Metrics Row */}
6258
<div className="row mb-4">
6359
<div className="col-md-6 mb-3 mb-md-0">
6460
<div className="metric-card primary">
65-
<h6 className="text-muted mb-1">COMPLETION</h6>
66-
<h3 className="mb-0">
61+
<h6 className="mb-1 text-black">COMPLETION</h6>
62+
<h3 className="mb-0 text-black">
6763
{project.metric1.split(": ")[1]}
6864
</h3>
6965
</div>
7066
</div>
7167
<div className="col-md-6">
7268
<div className="metric-card info">
73-
<h6 className="text-muted mb-1">REPORTS</h6>
74-
<h3 className="mb-0">
69+
<h6 className="mb-1 text-black">REPORTS</h6>
70+
<h3 className="mb-0 text-black">
7571
{project.metric2.split(": ")[1]}
7672
</h3>
7773
</div>
7874
</div>
7975
</div>
8076

81-
{/* Description */}
8277
<div className="row mb-4">
8378
<div className="col-12">
8479
<p className="lead">{project.description}</p>
8580
</div>
8681
</div>
8782

88-
{/* Project Details */}
8983
<div className="row">
9084
<div className="col-md-6">
9185
<div className="card">
@@ -128,7 +122,6 @@ const Carousel = ({ allProjects }: Props) => {
128122
))}
129123
</div>
130124

131-
{/* Bootstrap Controls - Pure Default */}
132125
<button
133126
className="carousel-control-prev"
134127
type="button"

src/components/Footer.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
list-style: none;
7070
padding: 0;
7171
margin: 0;
72-
color: #9ca3af;
72+
color: #000;
7373
font-weight: 500;
7474
}
7575

@@ -78,7 +78,7 @@
7878
}
7979

8080
.footer-section ul li a {
81-
color: #9ca3af;
81+
color: #000;
8282
text-decoration: none;
8383
transition: color 0.2s;
8484
}
@@ -104,12 +104,12 @@
104104

105105
.footer-copyright {
106106
font-size: 0.875rem;
107-
color: #9ca3af; /* gray-400 */
107+
color: #000; /* gray-400 */
108108
text-align: center;
109109
}
110110

111111
.footer-copyright a {
112-
color: #9ca3af;
112+
color: #000;
113113
text-decoration: none;
114114
transition: color 0.2s;
115115
}
@@ -126,7 +126,7 @@
126126
}
127127

128128
.footer-social a {
129-
color: #9ca3af; /* gray-400 */
129+
color: #000; /* gray-400 */
130130
transition: color 0.2s;
131131
}
132132

src/components/Footer.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,12 @@ const Footer = () => (
7878
</span>
7979

8080
<div className="footer-social">
81-
<a href="https://www.facebook.com/ETSHawaii" target="_blank" rel="noopener noreferrer" aria-label="Facebook page">
81+
<a
82+
href="https://www.facebook.com/ETSHawaii"
83+
target="_blank"
84+
rel="noopener noreferrer"
85+
aria-label="Facebook page"
86+
>
8287
<svg
8388
aria-hidden="true"
8489
xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +98,12 @@ const Footer = () => (
9398
</svg>
9499
<span className="sr-only">Facebook page</span>
95100
</a>
96-
<a href="https://x.com/ETSHIgov/" target="_blank" rel="noopener noreferrer" aria-label="Twitter page">
101+
<a
102+
href="https://x.com/ETSHIgov/"
103+
target="_blank"
104+
rel="noopener noreferrer"
105+
aria-label="Twitter page"
106+
>
97107
<svg
98108
aria-hidden="true"
99109
xmlns="http://www.w3.org/2000/svg"

src/components/VendorProjectCard.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,16 @@ const VendorProjectCard: React.FC<VendorProjectCardProps> = ({ project }) => {
3838
{name}
3939
</h2>
4040
<div
41-
className="badge mb-3 px-4 py-2"
41+
className={`badge mb-3 px-4 py-2 ${
42+
status === "On Track"
43+
? "bg-success"
44+
: status === "At Risk"
45+
? "bg-warning"
46+
: status === "Critical"
47+
? "bg-critical"
48+
: "bg-primary"
49+
}`}
4250
style={{
43-
backgroundColor: statusColor,
4451
color: "white",
4552
borderRadius: "50px",
4653
fontSize: "1rem",
@@ -51,9 +58,9 @@ const VendorProjectCard: React.FC<VendorProjectCardProps> = ({ project }) => {
5158

5259
<div className="row mt-4">
5360
<div className="col-md-6">
54-
<div className="card border">
61+
<div className="card border-primary">
5562
<div className="card-body text-center">
56-
<span className="text-info">{metric1}</span>
63+
<span className="text-primary">{metric1}</span>
5764
</div>
5865
</div>
5966
</div>

0 commit comments

Comments
 (0)