Skip to content

Commit 6363e33

Browse files
YoyoJesusYoyoJesus
committed
UI updates + Color Scheme
1 parent 48d100b commit 6363e33

8 files changed

Lines changed: 221 additions & 12 deletions

File tree

‎challenges/Steganography/Hidden Data/Solution.txt‎

Whitespace-only changes.

‎challenges/Steganography/RGB Scopes/solution.txt‎

Whitespace-only changes.

‎challenges/Steganography/Simple Steg/solution.txt‎

Whitespace-only changes.

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Kent Hack It",
3+
"name": "Kent Hack It",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎src/App.css‎

Lines changed: 209 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.App {
22
text-align: center;
3+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
34
}
45

56
.App-logo {
@@ -14,7 +15,7 @@
1415
}
1516

1617
.App-header {
17-
background-color: #282c34;
18+
background: linear-gradient(135deg, #3e6a3d 0%, #2e5c87 100%);
1819
min-height: 100vh;
1920
display: flex;
2021
flex-direction: column;
@@ -36,3 +37,210 @@
3637
transform: rotate(360deg);
3738
}
3839
}
40+
41+
/* Custom navbar styling */
42+
.navbar {
43+
font-weight: 500;
44+
background: linear-gradient(90deg, #61cf5a 0%, #4a9eff 100%) !important;
45+
border: none;
46+
}
47+
48+
.navbar-brand {
49+
font-weight: 800;
50+
font-size: 1.5rem;
51+
color: white !important;
52+
text-decoration: none;
53+
}
54+
55+
.navbar-brand:hover {
56+
color: #f0f0f0 !important;
57+
}
58+
59+
.nav-link {
60+
font-weight: 400;
61+
color: white !important;
62+
}
63+
64+
.nav-link:hover {
65+
color: #000000 !important;
66+
background-color: rgba(255, 255, 255, 0.1) !important;
67+
border-radius: 4px;
68+
}
69+
70+
/* Override Bootstrap's navbar-light class */
71+
.navbar-light {
72+
background: linear-gradient(90deg, #61cf5a 0%, #4a9eff 100%) !important;
73+
}
74+
75+
/* Style the navbar toggler for mobile */
76+
.navbar-toggler {
77+
border-color: rgba(255, 255, 255, 0.3) !important;
78+
}
79+
80+
.navbar-toggler-icon {
81+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
82+
}
83+
84+
/* Global page styling to match navbar theme */
85+
body {
86+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
87+
background-color: #f8f9fa;
88+
color: #2d5a2d;
89+
}
90+
91+
/* Main content containers */
92+
.container, .container-fluid {
93+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
94+
}
95+
96+
/* Cards and content sections */
97+
.card {
98+
border: 1px solid #4a9eff !important;
99+
border-radius: 8px !important;
100+
box-shadow: 0 4px 6px rgba(74, 158, 255, 0.1) !important;
101+
background-color: white;
102+
}
103+
104+
.card:hover {
105+
box-shadow: 0 6px 12px rgba(74, 158, 255, 0.2) !important;
106+
transition: box-shadow 0.3s ease;
107+
border-color: #61cf5a !important;
108+
}
109+
110+
/* Buttons to match blue-green theme */
111+
.btn-primary {
112+
background: linear-gradient(45deg, #61cf5a 0%, #4a9eff 100%) !important;
113+
border: none !important;
114+
color: white !important;
115+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
116+
font-weight: 500;
117+
}
118+
119+
.btn-primary:hover {
120+
background: linear-gradient(45deg, #4fb547 0%, #3a8ae6 100%) !important;
121+
border: none !important;
122+
color: white !important;
123+
transform: translateY(-1px);
124+
transition: all 0.3s ease;
125+
}
126+
127+
.btn-outline-primary {
128+
color: #4a9eff !important;
129+
border-color: #4a9eff !important;
130+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
131+
font-weight: 500;
132+
}
133+
134+
.btn-outline-primary:hover {
135+
background: linear-gradient(45deg, #61cf5a 0%, #4a9eff 100%) !important;
136+
border-color: #4a9eff !important;
137+
color: white !important;
138+
}
139+
140+
.btn-secondary {
141+
background-color: #2e5c87 !important;
142+
border-color: #2e5c87 !important;
143+
color: white !important;
144+
}
145+
146+
.btn-secondary:hover {
147+
background-color: #1e4c77 !important;
148+
border-color: #1e4c77 !important;
149+
color: white !important;
150+
}
151+
152+
/* Links to match blue-green theme */
153+
.link-primary, a {
154+
color: #4a9eff !important;
155+
text-decoration: none;
156+
}
157+
158+
.link-primary:hover, a:hover {
159+
color: #61cf5a !important;
160+
text-decoration: underline;
161+
}
162+
163+
/* Headers and text styling */
164+
h1, h2, h3, h4, h5, h6 {
165+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
166+
color: white;
167+
font-weight: 600;
168+
}
169+
170+
/* Forms and inputs */
171+
.form-control {
172+
border: 1px solid #4a9eff !important;
173+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
174+
}
175+
176+
.form-control:focus {
177+
border-color: #61cf5a !important;
178+
box-shadow: 0 0 0 0.2rem rgba(97, 207, 90, 0.25) !important;
179+
}
180+
181+
.form-label {
182+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
183+
color: #2e5c87;
184+
font-weight: 500;
185+
}
186+
187+
/* Tables */
188+
.table {
189+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
190+
}
191+
192+
.table-striped > tbody > tr:nth-of-type(odd) > td {
193+
background-color: rgba(74, 158, 255, 0.05);
194+
}
195+
196+
/* Alerts */
197+
.alert-success {
198+
background-color: rgba(97, 207, 90, 0.1) !important;
199+
border-color: #61cf5a !important;
200+
color: #2e5c87 !important;
201+
}
202+
203+
.alert-primary {
204+
background-color: rgba(74, 158, 255, 0.1) !important;
205+
border-color: #4a9eff !important;
206+
color: #2e5c87 !important;
207+
}
208+
209+
/* Page-specific overrides */
210+
.App-header {
211+
background: linear-gradient(135deg, #3e6a3d 0%, #2e5c87 100%);
212+
color: white;
213+
}
214+
215+
/* Badge styling */
216+
.badge {
217+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
218+
}
219+
220+
.badge-primary {
221+
background: linear-gradient(45deg, #61cf5a 0%, #4a9eff 100%) !important;
222+
}
223+
224+
/* Pagination */
225+
.page-link {
226+
color: #4a9eff !important;
227+
}
228+
229+
.page-link:hover {
230+
color: #61cf5a !important;
231+
background-color: rgba(74, 158, 255, 0.1) !important;
232+
border-color: #4a9eff !important;
233+
}
234+
235+
.page-item.active .page-link {
236+
background: linear-gradient(45deg, #61cf5a 0%, #4a9eff 100%) !important;
237+
border-color: #4a9eff !important;
238+
}
239+
240+
/* Page background class for consistent theming */
241+
.page-background {
242+
background: linear-gradient(135deg, #3e6a3d 0%, #2e5c87 100%);
243+
min-height: 100vh;
244+
color: white;
245+
padding-top: 0;
246+
}

‎src/pages/challenges.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export function Challenges() {
158158
}, [profileData, FetchChallenges]);
159159

160160
return (
161-
<div className="App">
161+
<div className="App page-background">
162162
<Navbar />
163163
<div className="container mt-4">
164164
<h2 className="mb-3">Challenges</h2>
@@ -224,8 +224,8 @@ export function Challenges() {
224224
</div>
225225
))}
226226
</div>
227+
<Link className="navbar-brand btn btn-md btn-info" to="/rate-challenge">Rate Challenges</Link>
227228
</div>
228-
<Link className="navbar-brand btn btn-md btn-info" to="/rate-challenge">Rate Challenges</Link>
229229
</div>
230230
);
231231
}

‎src/pages/rate_challenge.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export function RatingPage() {
110110
};
111111

112112
return (
113-
<div className="App">
113+
<div className="App page-background">
114114
<Navbar />
115115
<div className="container mt-4">
116116
<div id='msg_popup' style={{ fontSize: "2rem", fontWeight: 'bold' }}>
@@ -130,20 +130,21 @@ export function RatingPage() {
130130
{/* Fetch challenge details if not already loaded */}
131131
{challengeDetails[challenge.id] ? (
132132
<>
133-
<h6 className="card-title mb-1">{challengeDetails[challenge.id].name}</h6>
133+
<h6 className="card-title mb-1" style={{ color: '#2e5c87' }}>{challengeDetails[challenge.id].name}</h6>
134134
<small className="text-muted">
135135
{challengeDetails[challenge.id].category} | Difficulty: {challengeDetails[challenge.id].difficulty}
136136
</small>
137-
<p className="card-text small mt-2">{challengeDetails[challenge.id].description}</p>
138-
<p className="card-text small mb-1">
137+
<p className="card-text small mt-2" style={{ color: '#333' }}>{challengeDetails[challenge.id].description}</p>
138+
<p className="card-text small mb-1" style={{ color: '#333' }}>
139139
⭐ {challengeDetails[challenge.id].rating} / 5
140140
</p>
141141

142142
<form onSubmit={(event) => handleSubmit(event, challenge.id)}>
143143
<div>
144-
<label htmlFor={`rating-${challenge.id}`}>Rating (1-5): </label>
144+
<label htmlFor={`rating-${challenge.id}`} style={{ color: '#2e5c87', fontWeight: '500' }}>Rating (1-5): </label>
145145
<select
146146
id={`rating-${challenge.id}`}
147+
className="form-control form-control-sm mt-1"
147148
value={ratings[challenge.id] || "select rating"} // default rating if not set
148149
onChange={(e) => handleRatingChange(challenge.id, e.target.value)}
149150
>

0 commit comments

Comments
 (0)