Makes Table responsive & some tweaks here & there

This commit is contained in:
Vazhin Tayeb 2021-01-15 17:05:11 +03:00
parent 5313802585
commit d1ae0240d1
5 changed files with 70 additions and 67 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 101 KiB

View File

@ -4,7 +4,7 @@ const Main = ({ Component, styles = {} }) => {
return (
<div
className="flex flex-col items-center justify-center h-4/5"
style={{ ...styles, marginTop: "90px" }}
style={{ ...styles, marginTop: "80px" }}
>
<Component />
</div>

View File

@ -14,18 +14,19 @@ const Navbar = () => {
return (
<div
className="w-screen bg-blue-custom flex justify-center items-center fixed top-0 left-0"
style={{ height: "90px" }}
style={{ height: "80px" }}
>
<nav className="flex items-center justify-between w-4/5">
<Link to="/">
<img src={logo} alt="logo" className="h-28" />
<img src={logo} alt="logo" className="h-24" />
</Link>
{user ? (
<ul className="list-none flex items-center justify-between w-2/6 m-0">
<li className="m-0">
<Link
to="/"
className="text-white font-inter text-xl font-semibold hover:text-white"
className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal"
style={{ fontSize: "1.36rem" }}
>
Your Vehicles
</Link>
@ -33,14 +34,16 @@ const Navbar = () => {
<li className="m-0">
<Link
to="/register"
className="text-white font-inter text-xl font-semibold hover:text-white"
className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal"
style={{ fontSize: "1.36rem" }}
>
Register A Vehicles
</Link>
</li>
<li
onClick={signOut}
className="m-0 text-white font-inter text-xl font-semibold hover:text-white cursor-pointer"
className="m-0 text-white font-inter font-semibold hover:text-white focus:text-white cursor-pointer tracking-normal"
style={{ fontSize: "1.36rem" }}
>
Sign Out
</li>

View File

@ -64,7 +64,7 @@ const VehiclesMain = () => {
}
return (
<div className="flex flex-col">
<div className="flex flex-col xl:w-2/3 lg:w-4/5 w-11/12">
<Heading1
text={"Traffic Police Service"}
classes="mt-24"

View File

@ -17,7 +17,7 @@ const Table = ({ vehicleData }) => {
}
return (
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded">
<div className="shadow overflow-x-auto border-b border-gray-200 sm:rounded w-full">
<table className="min-w-full divide-y divide-gray-200 mb-0">
<thead className="bg-gray-50">
<tr>