Dev main

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://demos.creative-tim.com/material-tailwind-dashboard-react/#/",
   "dependencies": {
-    "@material-tailwind/react": "0.3.2",
+    "@material-tailwind/react": "^0.3.3",
     "@react-google-maps/api": "^2.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/assets/styles/tailwind.css

@@ -449,6 +449,14 @@ video {
 	margin-bottom: 4rem;
 }.mt-14{
 	margin-top: 3.5rem;
+}.mb-0{
+	margin-bottom: 0px;
+}.mt-96{
+	margin-top: 24rem;
+}.mt-\[32rem\]{
+	margin-top: 32rem;
+}.mb-8{
+	margin-bottom: 2rem;
 }.block{
 	display: block;
 }.inline-block{
@@ -471,6 +479,12 @@ video {
 	height: auto;
 }.h-\[600px\]{
 	height: 600px;
+}.h-72{
+	height: 18rem;
+}.h-56{
+	height: 14rem;
+}.h-40{
+	height: 10rem;
 }.min-h-full{
 	min-height: 100%;
 }.w-full{
@@ -553,10 +567,15 @@ video {
 }.bg-white{
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}.bg-red-500{
+	--tw-bg-opacity: 1;
+	background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }.bg-gradient-to-tr{
 	background-image: linear-gradient(to top right, var(--tw-gradient-stops));
 }.p-4{
 	padding: 1rem;
+}.p-0{
+	padding: 0px;
 }.py-6{
 	padding-top: 1.5rem;
 	padding-bottom: 1.5rem;
@@ -566,6 +585,9 @@ video {
 }.px-16{
 	padding-left: 4rem;
 	padding-right: 4rem;
+}.px-0{
+	padding-left: 0px;
+	padding-right: 0px;
 }.px-2{
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
@@ -581,9 +603,6 @@ video {
 }.px-6{
 	padding-left: 1.5rem;
 	padding-right: 1.5rem;
-}.px-0{
-	padding-left: 0px;
-	padding-right: 0px;
 }.pt-8{
 	padding-top: 2rem;
 }.pr-4{
@@ -652,18 +671,18 @@ video {
 	transition-duration: 150ms;
 }.duration-300{
 	transition-duration: 300ms;
-}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translateX(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translateX(-10px)}/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize *//*
+}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translateX(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translateX(-10px)}/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize *//*
 Document
 ========
 *//**
 Use a better box model (opinionated).
 */*,
-*::before,
-*::after {
+::before,
+::after {
 	box-sizing: border-box;
 }/**
 Use a more readable tab size (opinionated).
-*/:root {
+*/html {
 	-moz-tab-size: 4;
 	   tab-size: 4;
 }/**

src/components/ChartBar.js

@@ -103,7 +103,7 @@ export default function ChartBar() {
     }, []);
     return (
         <Card>
-            <CardHeader color="red" contentPosition="left">
+            <CardHeader color="pink" contentPosition="left">
                 <h6 className="uppercase text-gray-200 text-xs font-medium">
                     Overview
                 </h6>

src/components/PageVisitsCard.js

@@ -6,14 +6,14 @@ import Button from '@material-tailwind/react/Button';
 export default function PageVisitsCard() {
     return (
         <Card>
-            <CardHeader color="teal" contentPosition="none">
+            <CardHeader color="blue" contentPosition="none">
                 <div className="w-full flex items-center justify-between">
                     <h2 className="text-white text-2xl">Page Visits</h2>
                     <Button
                         color="transparent"
                         buttonType="link"
                         size="lg"
-                        ripple="light"
+                        style={{ padding: 0 }}
                     >
                         See More
                     </Button>

src/components/ProfileCard.js

@@ -36,7 +36,7 @@ export default function ProfileCard() {
                     </div>
                 </div>
             </div>
-            <div className="text-center mt-8">
+            <div className="text-center">
                 <H5 color="gray">John Smith</H5>
                 <div className="mt-0 mb-2 text-gray-700 flex items-center justify-center gap-2">
                     <Icon name="place" size="xl" />

src/components/SettingsForm.js

@@ -8,14 +8,14 @@ import Textarea from '@material-tailwind/react/Textarea';
 export default function SettingsForm() {
     return (
         <Card>
-            <CardHeader color="purple" size="lg" contentPosition="none">
+            <CardHeader color="purple" contentPosition="none">
                 <div className="w-full flex items-center justify-between">
                     <h2 className="text-white text-2xl">My Account</h2>
                     <Button
                         color="transparent"
                         buttonType="link"
                         size="lg"
-                        ripple="light"
+                        style={{ padding: 0 }}
                     >
                         Settings
                     </Button>

src/components/Sidebar.js

@@ -110,7 +110,7 @@ export default function Sidebar() {
                                     className="flex items-center gap-4 text-sm font-light py-3"
                                 >
                                     <Icon name="account_circle" size="2xl" />
-                                    Progile Page
+                                    Profile Page
                                 </a>
                             </li>
                         </ul>

src/components/StatusCard.js

@@ -19,8 +19,8 @@ export default function StatusCard({
         <div className="px-4 mb-10">
             <Card>
                 <CardRow>
-                    <CardHeader color={color} size="lg" iconOnly>
-                        <Icon name={icon} size="5xl" color="white" />
+                    <CardHeader color={color} iconOnly className="mb-0">
+                        <Icon name={icon} size="3xl" color="white" />
                     </CardHeader>
 
                     <CardStatus title={title} amount={amount} />
@@ -31,9 +31,7 @@ export default function StatusCard({
                     color={percentageColor}
                     date={date}
                 >
-                    <div className="inline-block align-middle">
-                        <Icon color={percentageColor} name={percentageIcon} />
-                    </div>
+                    <Icon color={percentageColor} name={percentageIcon} />
                 </CardStatusFooter>
             </Card>
         </div>

src/components/TableCard.js

@@ -11,7 +11,7 @@ import Team4 from 'assets/img/team-4-470x470.png';
 export default function CardTable() {
     return (
         <Card>
-            <CardHeader color="purple" size="lg" contentPosition="left">
+            <CardHeader color="purple" contentPosition="left">
                 <h2 className="text-white text-2xl">Card Table</h2>
             </CardHeader>
             <CardBody>
@@ -81,11 +81,7 @@ export default function CardTable() {
                                     </div>
                                 </th>
                                 <th className="border-b border-gray-200 align-middle font-light text-sm whitespace-nowrap px-2 py-4 text-left">
-                                    <Progress
-                                        color="red"
-                                        value="60"
-                                        percentage
-                                    />
+                                    <Progress color="red" value="60" />
                                 </th>
                             </tr>
                             <tr>
@@ -132,11 +128,7 @@ export default function CardTable() {
                                     </div>
                                 </th>
                                 <th className="border-b border-gray-200 align-middle font-light text-sm whitespace-nowrap px-2 py-4 text-left">
-                                    <Progress
-                                        color="green"
-                                        value="100"
-                                        percentage
-                                    />
+                                    <Progress color="green" value="100" />
                                 </th>
                             </tr>
                             <tr>
@@ -183,11 +175,7 @@ export default function CardTable() {
                                     </div>
                                 </th>
                                 <th className="border-b border-gray-200 align-middle font-light text-sm whitespace-nowrap px-2 py-4 text-left">
-                                    <Progress
-                                        color="teal"
-                                        value="90"
-                                        percentage
-                                    />
+                                    <Progress color="teal" value="90" />
                                 </th>
                             </tr>
                             <tr>
@@ -234,11 +222,7 @@ export default function CardTable() {
                                     </div>
                                 </th>
                                 <th className="border-b border-gray-200 align-middle font-light text-sm whitespace-nowrap px-2 py-4 text-left">
-                                    <Progress
-                                        color="green"
-                                        value="100"
-                                        percentage
-                                    />
+                                    <Progress color="green" value="100" />
                                 </th>
                             </tr>
                         </tbody>

src/components/TrafficCard.js

@@ -14,7 +14,7 @@ export default function TrafficCard() {
                         color="transparent"
                         buttonType="link"
                         size="lg"
-                        ripple="light"
+                        style={{ padding: 0 }}
                     >
                         See More
                     </Button>

src/pages/Dashboard.js

@@ -7,11 +7,26 @@ import TrafficCard from 'components/TrafficCard';
 export default function Dashboard() {
     return (
         <>
-            <div className="bg-light-blue-500 pt-14 pb-28 px-3 md:px-8 h-auto">
+            <div className="bg-light-blue-500 px-3 md:px-8 h-40" />
+
+            <div className="px-3 md:px-8 -mt-24">
+                <div className="container mx-auto max-w-full">
+                    <div className="grid grid-cols-1 xl:grid-cols-5">
+                        <div className="xl:col-start-1 xl:col-end-4 px-4 mb-14">
+                            <ChartLine />
+                        </div>
+                        <div className="xl:col-start-4 xl:col-end-6 px-4 mb-14">
+                            <ChartBar />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="px-3 md:px-8">
                 <div className="container mx-auto max-w-full">
-                    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-4">
                         <StatusCard
-                            color="red"
+                            color="pink"
                             icon="trending_up"
                             title="Traffic"
                             amount="350,897"
@@ -41,7 +56,7 @@ export default function Dashboard() {
                             date="Since yesterday"
                         />
                         <StatusCard
-                            color="teal"
+                            color="blue"
                             icon="poll"
                             title="Performance"
                             amount="49,65%"
@@ -54,19 +69,6 @@ export default function Dashboard() {
                 </div>
             </div>
 
-            <div className="px-3 md:px-8 h-auto -mt-24">
-                <div className="container mx-auto max-w-full">
-                    <div className="grid grid-cols-1 xl:grid-cols-5">
-                        <div className="xl:col-start-1 xl:col-end-4 px-4 mb-14">
-                            <ChartLine />
-                        </div>
-                        <div className="xl:col-start-4 xl:col-end-6 px-4 mb-14">
-                            <ChartBar />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
             <div className="px-3 md:px-8 h-auto">
                 <div className="container mx-auto max-w-full">
                     <div className="grid grid-cols-1 xl:grid-cols-5">

src/pages/Maps.js

@@ -8,7 +8,7 @@ export default function Dashboard() {
                 <div className="container mx-auto max-w-full">
                     <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4">
                         <StatusCard
-                            color="red"
+                            color="pink"
                             icon="trending_up"
                             title="Traffic"
                             amount="350,897"
@@ -38,7 +38,7 @@ export default function Dashboard() {
                             date="Since yesterday"
                         />
                         <StatusCard
-                            color="teal"
+                            color="blue"
                             icon="poll"
                             title="Performance"
                             amount="49,65%"

src/pages/Settings.js

@@ -9,7 +9,7 @@ export default function Dashboard() {
                 <div className="container mx-auto max-w-full">
                     <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4">
                         <StatusCard
-                            color="red"
+                            color="pink"
                             icon="trending_up"
                             title="Traffic"
                             amount="350,897"
@@ -39,7 +39,7 @@ export default function Dashboard() {
                             date="Since yesterday"
                         />
                         <StatusCard
-                            color="teal"
+                            color="blue"
                             icon="poll"
                             title="Performance"
                             amount="49,65%"

src/pages/Tables.js

@@ -8,7 +8,7 @@ export default function Dashboard() {
                 <div className="container mx-auto max-w-full">
                     <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4">
                         <StatusCard
-                            color="red"
+                            color="pink"
                             icon="trending_up"
                             title="Traffic"
                             amount="350,897"
@@ -38,7 +38,7 @@ export default function Dashboard() {
                             date="Since yesterday"
                         />
                         <StatusCard
-                            color="teal"
+                            color="blue"
                             icon="poll"
                             title="Performance"
                             amount="49,65%"