TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

increasing sizing

Browse Source
This commit is contained in:
Toba Ojo
2025-09-17 14:39:56 +01:00
parent 0b7ab3b0de
commit 3811b1f366
10 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/HistoryList/HistoryList.tsx
View File

@@ -5,7 +5,6 @@ import AlertItem from "./AlertItem";
const HistoryList = () => {
const { state } = useAlertHitContext();
console.log(state);
return (
<Card className="h-100">

14
src/components/PlateStack/NumberPlate.tsx
View File

@@ -9,16 +9,16 @@ type NumberPlateProps = {
const NumberPlate = ({ motion, vrm }: NumberPlateProps) => {
return (
<div
className={`relative w-[8rem] border-4 border-black rounded-lg text-nowrap
text-black px-3
${motion ? "bg-yellow-400" : "bg-white"}
`}
className={`relative w-[16rem] border-6 border-black rounded-xl text-nowrap
text-black px-6 py-2
${motion ? "bg-yellow-400" : "bg-white"}
`}
>
<div className="">
<div className="absolute inset-y-0 left-0 bg-blue-600 w-4 flex flex-col">
<div>
<div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
<GB />
</div>
<p className=" pl-2 font-extrabold text-right">
<p className="pl-4 font-extrabold text-3xl text-right">
{vrm && formatNumberPlate(vrm)}
</p>
</div>

2
src/components/SettingForms/System/SystemFileUpload.tsx
View File

@@ -19,7 +19,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
opts: {
timeoutMs: 30000,
fieldName: "upload",
uploadUrl: "http://192.168.75.11/upload/software-update/2'",
uploadUrl: "http://192.168.75.11/upload/software-update/2",
},
};
uploadSettings(settings);

1
src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
View File

@@ -11,7 +11,6 @@ const WiFiCard = () => {
return (
<Card className="mb-4">
<CardHeader title={"WiFi"} />
<div className="flex flex-col gap-4">
<FormGroup>
<label

20
src/components/SightingModal/SightingModal.tsx
View File

@@ -25,7 +25,7 @@ const SightingModal = ({
</div>
<div className="flex flex-col gap-6 md:flex-row">
<div className="flex-1 flex flex-col gap-4">
<div className="flex-1 flex flex-col gap-2">
<div className="flex justify-start md:justify-start">
<NumberPlate vrm={sighting?.vrm} motion={motionAway} />
</div>
@@ -50,15 +50,15 @@ const SightingModal = ({
</div>
</div>
<aside className="md:w-80 lg:w-96 bg-gray-800/70 text-white rounded-xl p-4 border border-gray-700">
<aside className="md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl p-4 border border-gray-700">
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
Vehicle Info
</h3>
<dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm">
<dl className="mt-3 grid grid-cols-1 sm:grid-cols-1 gap-x-4 gap-y-2 text-sm">
<div>
<dt className="text-gray-300">VRM</dt>
<dd className="font-medium break-all">
<dd className="font-medium text-2xl break-all">
{sighting?.vrm ?? "-"}
</dd>
</div>
@@ -74,12 +74,6 @@ const SightingModal = ({
<dt className="text-gray-300">Time</dt>
<dd className="font-medium">{sighting?.timeStamp ?? "-"}</dd>
</div>
<div className="sm:col-span-2">
<dt className="text-gray-300">Location</dt>
<dd className="font-medium truncate">
{sighting?.locationName ?? "-"}
</dd>
</div>
<div>
<dt className="text-gray-300">Make</dt>
<dd className="font-medium">{sighting?.make ?? "-"}</dd>
@@ -96,16 +90,16 @@ const SightingModal = ({
</aside>
</div>
<div className="mt-6 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
<div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 bg-red-600 text-white hover:bg-red-700 w-full md:w-auto"
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-auto"
onClick={handleClose}
>
<FontAwesomeIcon icon={faX} />
Close
</button>
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 bg-green-600 text-white hover:bg-green-700 w-full md:w-auto"
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-auto"
onClick={handleClose}
>
<FontAwesomeIcon icon={faCheck} />

12
src/components/UI/Header.tsx
View File

@@ -75,17 +75,21 @@ export default function Header() {
</Link>
</div>
{/* Right: Texts stacked + icons */}
<div className="flex items-center space-x-12">
<div className="flex items-center space-x-24">
<div className="flex flex-col leading-tight text-white text-sm tabular-nums">
<h2>Local: {localStr}</h2>
<h2>UTC: {utcStr}</h2>
</div>
<div className="flex flex-row space-x-2">
<div className="flex flex-row space-x-8">
<Link to={"/session-settings"}>
<FontAwesomeIcon className="text-white" icon={faListCheck} />
<FontAwesomeIcon
className="text-white"
icon={faListCheck}
size="2x"
/>
</Link>
<Link to={"/system-settings"}>
<FontAwesomeIcon className="text-white" icon={faGear} />
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
</Link>
</div>
</div>

2
src/components/UI/ModalComponent.tsx
View File

@@ -16,7 +16,7 @@ const ModalComponent = ({
<Modal
isOpen={isModalOpen}
onRequestClose={close}
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[70%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
>
{children}