Skip to content

New/style #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CalMurph merged 5 commits into from
Jul 9, 2026
Merged

New/style #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5403ebf
Saving local changes
CalMurph Jul 8, 2026
a4275ed
Merge remote-tracking branch 'origin/main' into new/style
CalMurph Jul 8, 2026
002e554
Saving local changes
CalMurph Jul 9, 2026
e817cff
Updating styling
CalMurph Jul 9, 2026
b04368c
chore: apply formatting
github-actions[bot] Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion backend/endpoints/hpcQuestion/controller/getRandomQuestion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ module.exports = (db) => {
*/
return async (req, res) => {
try {
if (Math.random() >= 0.35) {
if (Math.random() >= 0.25) {
return res.status(200).json({
success: true,
body: null
Expand Down
16 changes: 6 additions & 10 deletions frontend/app/components/ClusterSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,27 +359,23 @@ export default function ClusterSettingsPage() {

return (
<main className="flex justify-center space-y-8">
<div className="relative z-10 w-full max-w-6xl">
<div className="rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl">
<div className="relative z-10 w-full">
<div className="p-10 ">
{/* Header */}
<div className="mb-10 text-center">
<div className="mb-4 flex justify-center">
<FaDatabase className="h-20 w-20 text-emerald-300" aria-hidden="true" />
</div>

<div className="mb-10 text-left">
<h1 className="text-5xl font-bold text-white">{cluster.name}</h1>

<p className="mt-3 text-lg text-slate-300">Cluster settings and overview</p>

<div className="mt-6 space-y-3">
{!hasChecks ? (
<div className="flex flex-wrap justify-center gap-3">
<div className="flex flex-wrap justify-start gap-3">
<span className="rounded-full border border-blue-400/30 bg-blue-500/20 px-4 py-2 text-sm font-semibold text-blue-200">
No checks have been performed for this cluster
</span>
</div>
) : (
<div className="flex flex-wrap justify-center gap-3">
<div className="flex flex-wrap justify-start gap-3">
{status ? (
<span className="rounded-full border border-green-400/30 bg-green-500/20 px-4 py-2 text-sm font-semibold text-green-300">
Status: Healthy
Expand All @@ -398,7 +394,7 @@ export default function ClusterSettingsPage() {
</div>
)}

<div className="flex flex-wrap justify-center gap-3 border-t border-white/10 pt-3">
<div className="flex flex-wrap justify-start gap-3 pt-3">
<span className="rounded-full border border-white/10 bg-white/5 px-4 py-2 font-mono text-sm text-slate-300">
id: {clusterId}
</span>
Expand Down
15 changes: 4 additions & 11 deletions frontend/app/components/Form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,17 +542,10 @@ export default function Form() {

return (
<main className="flex justify-center space-y-8">
<div className="relative z-10 w-full max-w-6xl">
<form
onSubmit={handleSubmit}
className="rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl"
>
<div className="relative z-10 w-full">
<form onSubmit={handleSubmit} className="p-10">
{/* Header */}
<div className="mb-10 text-center">
<div className="mb-4 flex justify-center">
<FaClipboardList className="h-20 w-20 text-blue-300" aria-hidden="true" />
</div>

<div className="mb-10 text-left">
<h1 className="text-4xl sm:text-5xl font-bold text-white">
Process Documentation
</h1>
Expand Down Expand Up @@ -1015,7 +1008,7 @@ export default function Form() {
type="submit"
disabled={submitting || steps.length === 0 || !canSubmit}
aria-disabled={submitting || steps.length === 0}
className="mt-10 w-full cursor-pointer rounded-2xl border border-blue-200/25 bg-gradient-to-r from-blue-500 via-blue-500 to-indigo-600 py-4 text-lg font-semibold text-white shadow-xl shadow-blue-950/30 transition duration-200 hover:-translate-y-0.5 hover:border-blue-100/40 hover:from-blue-400 hover:via-blue-500 hover:to-indigo-500 focus:outline-none focus:ring-2 focus:ring-blue-200/60 focus:ring-offset-2 focus:ring-offset-slate-950 active:translate-y-0 disabled:cursor-not-allowed disabled:translate-y-0 disabled:opacity-50"
className="mt-10 w-full cursor-pointer rounded-4xl border border-slate-200/25 bg-gradient-to-r from-blue-500 via-blue-500 to-indigo-600 py-4 text-lg font-semibold text-white shadow-xl shadow-blue-950/30 transition duration-200 hover:-translate-y-0.5 hover:border-blue-100/40 hover:from-blue-400 hover:via-blue-500 hover:to-indigo-500 focus:outline-none focus:ring-2 focus:ring-blue-200/60 focus:ring-offset-2 focus:ring-offset-slate-950 active:translate-y-0 disabled:cursor-not-allowed disabled:translate-y-0 disabled:opacity-50"
>
{submitting ? 'Submitting...' : 'Submit Report'}
</button>
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ export default function Header() {

return (
<header className="sticky top-0 z-50">
<div className="w-full px-4 sm:px-6">
<div className="mt-3 flex items-center justify-between rounded-2xl border border-white/10 bg-white/10 px-4 py-3 shadow-xl backdrop-blur-xl">
<div className="w-full ">
<div className="flex w-full items-center justify-between bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 px-4 py-4 shadow-xl backdrop-blur-xl">
<Link
href="/"
className="transition-opacity hover:opacity-90"
Expand Down
208 changes: 106 additions & 102 deletions frontend/app/components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,116 +102,120 @@ const cardBase =

export default function Home() {
return (
<main className="flex justify-center space-y-8">
<div className="relative z-10 w-full max-w-6xl">
<div className="rounded-3xl border border-white/10 bg-white/10 p-10 shadow-2xl backdrop-blur-xl">
<main className="flex justify-center">
<div className="relative z-10 w-full">
<div className=" w-full">
{/* Header */}
<div className="mb-10 text-center">
<div className="mb-4 flex justify-center">
<div className="bg-cover bg-center text-center">
<h1 className="flex items-center justify-center gap-4 text-4xl font-bold text-white sm:text-5xl">
Portal
<PortalIcon />
</div>

<h1 className="text-4xl sm:text-5xl font-bold text-white">Portal</h1>
</h1>

<p className="mt-3 text-lg text-slate-300">
Access schedules and submit reports in one place.
</p>
</div>

<div className="flex flex-wrap gap-6 justify-center">
{/* Schedule */}
<Link
href="/schedule"
className={`${cardBase} border border-green-400/20 bg-green-500/10 hover:border-green-400/50 hover:bg-green-500/20`}
>
<FaRegCalendarAlt
className="mb-4 text-5xl text-green-300"
aria-hidden="true"
/>

<h2 className="mb-2 text-2xl font-bold text-white">View Schedule</h2>

<p className="text-slate-300">
Check the weekly rota and see team allocations.
</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-green-300 transition-transform group-hover:translate-x-2">
Open Schedule
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Report */}
<Link
href="/name"
className={`${cardBase} border border-blue-400/20 bg-blue-500/10 hover:border-blue-400/50 hover:bg-blue-500/20`}
>
<FaRegEdit className="mb-4 text-5xl text-blue-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">Fill Out Report</h2>

<p className="text-slate-300">Complete and submit your daily report.</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-blue-300 transition-transform group-hover:translate-x-2">
Start Report
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Results */}
<Link
href="/results"
className={`${cardBase} border border-purple-400/20 bg-purple-500/10 hover:border-purple-400/50 hover:bg-purple-500/20`}
>
<FaChartBar className="mb-4 text-5xl text-purple-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">View Results</h2>

<p className="text-slate-300">
Access submitted reports and past test results.
</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-purple-300 transition-transform group-hover:translate-x-2">
Open Results
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Administration */}
<Link
href="/options"
className={`${cardBase} border border-amber-400/20 bg-amber-500/10 hover:border-amber-400/50 hover:bg-amber-500/20`}
>
<IoIosSettings className="mb-4 text-6xl text-amber-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">Administration</h2>

<p className="text-slate-300">
Manage users, clusters, and scheduling options.
</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-amber-300 transition-transform group-hover:translate-x-2">
Open Administration
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Overview */}
<Link
href="/overview"
className={`${cardBase} border border-pink-400/20 bg-pink-500/10 hover:border-pink-400/50 hover:bg-pink-500/20`}
>
<GrOverview className="mb-4 text-6xl text-pink-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">Overview</h2>

<p className="text-slate-300">View a break down of a day&apos;s reports.</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-pink-300 transition-transform group-hover:translate-x-2">
Open Overview
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>
<div className="mx-auto mb-4 max-w-6xl p-6">
<div className="flex flex-wrap justify-center gap-6">
{/* Schedule */}
<Link
href="/schedule"
className={`${cardBase} border border-green-400/20 bg-green-500/10 hover:border-green-400/50 hover:bg-green-500/20`}
>
<FaRegCalendarAlt
className="mb-4 text-5xl text-green-300"
aria-hidden="true"
/>

<h2 className="mb-2 text-2xl font-bold text-white">View Schedule</h2>

<p className="text-slate-300">
Check the weekly rota and see team allocations.
</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-green-300 transition-transform group-hover:translate-x-2">
Open Schedule
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Report */}
<Link
href="/name"
className={`${cardBase} border border-blue-400/20 bg-blue-500/10 hover:border-blue-400/50 hover:bg-blue-500/20`}
>
<FaRegEdit className="mb-4 text-5xl text-blue-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">Fill Out Report</h2>

<p className="text-slate-300">Complete and submit your daily report.</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-blue-300 transition-transform group-hover:translate-x-2">
Start Report
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Results */}
<Link
href="/results"
className={`${cardBase} border border-purple-400/20 bg-purple-500/10 hover:border-purple-400/50 hover:bg-purple-500/20`}
>
<FaChartBar className="mb-4 text-5xl text-purple-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">View Results</h2>

<p className="text-slate-300">
Access submitted reports and past test results.
</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-purple-300 transition-transform group-hover:translate-x-2">
Open Results
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Administration */}
<Link
href="/options"
className={`${cardBase} border border-amber-400/20 bg-amber-500/10 hover:border-amber-400/50 hover:bg-amber-500/20`}
>
<IoIosSettings
className="mb-4 text-6xl text-amber-300"
aria-hidden="true"
/>

<h2 className="mb-2 text-2xl font-bold text-white">Administration</h2>

<p className="text-slate-300">
Manage users, clusters, and scheduling options.
</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-amber-300 transition-transform group-hover:translate-x-2">
Open Administration
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>

{/* Overview */}
<Link
href="/overview"
className={`${cardBase} border border-pink-400/20 bg-pink-500/10 hover:border-pink-400/50 hover:bg-pink-500/20`}
>
<GrOverview className="mb-4 text-6xl text-pink-300" aria-hidden="true" />

<h2 className="mb-2 text-2xl font-bold text-white">Overview</h2>

<p className="text-slate-300">View a break down of a day&apos;s reports.</p>

<div className="mt-6 flex items-center gap-1 font-semibold text-pink-300 transition-transform group-hover:translate-x-2">
Open Overview
<IoIosArrowForward aria-hidden="true" />
</div>
</Link>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading