Makes Table responsive & some tweaks here & there

This commit is contained in:
Vazhin Tayeb 2021-01-15 17:05:11 +03:00 committed by Muhammad Azeez
parent 544876ac55
commit ac1d8eef3a
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 ( return (
<div <div
className="flex flex-col items-center justify-center h-4/5" className="flex flex-col items-center justify-center h-4/5"
style={{ ...styles, marginTop: "90px" }} style={{ ...styles, marginTop: "80px" }}
> >
<Component /> <Component />
</div> </div>

View File

@ -14,18 +14,19 @@ const Navbar = () => {
return ( return (
<div <div
className="w-screen bg-blue-custom flex justify-center items-center fixed top-0 left-0" 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"> <nav className="flex items-center justify-between w-4/5">
<Link to="/"> <Link to="/">
<img src={logo} alt="logo" className="h-28" /> <img src={logo} alt="logo" className="h-24" />
</Link> </Link>
{user ? ( {user ? (
<ul className="list-none flex items-center justify-between w-2/6 m-0"> <ul className="list-none flex items-center justify-between w-2/6 m-0">
<li className="m-0"> <li className="m-0">
<Link <Link
to="/" 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 Your Vehicles
</Link> </Link>
@ -33,14 +34,16 @@ const Navbar = () => {
<li className="m-0"> <li className="m-0">
<Link <Link
to="/register" 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 Register A Vehicles
</Link> </Link>
</li> </li>
<li <li
onClick={signOut} 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 Sign Out
</li> </li>

View File

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

View File

@ -17,7 +17,7 @@ const Table = ({ vehicleData }) => {
} }
return ( 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"> <table className="min-w-full divide-y divide-gray-200 mb-0">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>