Merge pull request #37 from Ryczko/feature/new_date_picker

new date picker + time picker + minor sign out button too big fix

package.json

@@ -18,6 +18,7 @@
     "firebase": "^9.6.9",
     "framer-motion": "^6.3.0",
     "react": "^17.0.2",
+    "react-datepicker": "^4.7.0",
     "react-dom": "^17.0.2",
     "react-firebase-hooks": "^5.0.3",
     "react-hot-toast": "^2.2.0",
@@ -58,6 +59,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-datepicker": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
     "autoprefixer": "^10.4.4",

src/Components/BurgerMenu/BurgerMenu.tsx

@@ -16,7 +16,7 @@ const BurgerMenu = ({ isOpen, children }: BurgerMenuProps) => {
       initial="closed"
       variants={variants}
       id="burger_menu"
-      className="fixed shadow-md left-0 z-10 flex flex-col items-center justify-center w-screen top-20 bg-zinc-100 md:hidden"
+      className="fixed pb-2 shadow-md left-0 z-10 flex flex-col items-center justify-center w-screen top-20 bg-zinc-100 lg:hidden"
     >
       {children}
     </motion.div>

src/Components/DataCard/DataCard.tsx

@@ -5,7 +5,7 @@ type Props = {
 
 export default function DataCard({ title, value }: Props) {
   return (
-    <div className="px-6 m-1 py-2 w-[200px] bg-white rounded-lg border border-gray-200 shadow-md">
+    <div className="px-6 m-1 py-2 w-[200px] bg-white rounded-lg border border-zinc-200 shadow-md">
       <h3 className="font-semibold mb-1">{title}</h3>
       {value}
     </div>