quick change from material-tailwind -> mui

mahmoudmoravej · Apr 19, 2024 · 2877e08 · 2877e08
1 parent 7a7f6dc
commit 2877e08
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 92 deletions.
diff --git a/app/@types/graphql/schema.ts b/app/@types/graphql/schema.ts
@@ -1,5 +1,5 @@
 import { gql } from "@apollo/client/index.js";
-import * as Apollo from "@apollo/client";
+import * as Apollo from "@apollo/client/index.js";
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {

diff --git a/app/widgets/layout/dashboard-sidenav.tsx b/app/widgets/layout/dashboard-sidenav.tsx
@@ -1,7 +1,14 @@
 import PropTypes from "prop-types";
 import { Link, NavLink } from "react-router-dom";
-import { default as material } from "@material-tailwind/react";
-const { Button, Typography } = material;
+
+import {
+  ListItem,
+  Typography,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
 
 import { RouteData } from "~/routesData";
 import { useNavigate } from "@remix-run/react";
@@ -51,47 +58,29 @@ export function Sidenav({
       </div>
       <div className="m-4">
         {routes.map(({ title, pages }, key) => (
-          <ul key={key} className="mb-4 flex flex-col gap-1">
+          <List key={key}>
             {title && (
-              <li className="mx-3.5 mb-2 mt-4">
+              <ListItem className="mx-3.5 mb-2 mt-4">
                 <Typography
-                  variant="small"
+                  variant="body2"
                   color={sidenavType === "dark" ? "white" : "blue-gray"}
                   className="font-black uppercase opacity-75"
                 >
                   {title}
                 </Typography>
-              </li>
+              </ListItem>
             )}
             {pages.map(({ icon, name, path }) => (
-              <li key={name}>
-                <NavLink to={path} end>
-                  {({ isActive }) => (
-                    <Button
-                      variant={isActive ? "gradient" : "text"}
-                      color={
-                        isActive
-                          ? sidenavColor
-                          : sidenavType === "dark"
-                            ? "white"
-                            : "blue-gray"
-                      }
-                      className="flex items-center gap-4 px-4 capitalize"
-                      fullWidth
-                    >
-                      {icon}
-                      <Typography
-                        color="inherit"
-                        className="font-medium capitalize"
-                      >
-                        {name}
-                      </Typography>
-                    </Button>
-                  )}
-                </NavLink>
-              </li>
+              <NavLink to={path} key={name}>
+                {({ isActive }) => (
+                  <ListItemButton key={name} selected={isActive}>
+                    <ListItemIcon>{icon}</ListItemIcon>
+                    <ListItemText>{name}</ListItemText>
+                  </ListItemButton>
+                )}
+              </NavLink>
             ))}
-          </ul>
+          </List>
         ))}
       </div>
     </aside>

diff --git a/app/widgets/layout/dashboard-top-navbar.tsx b/app/widgets/layout/dashboard-top-navbar.tsx
@@ -1,12 +1,11 @@
 import { Link } from "react-router-dom";
 
-import { default as material } from "@material-tailwind/react";
-const { Navbar, Button, IconButton, Input } = material;
 import {
   UserCircleIcon,
   Cog6ToothIcon,
   Bars3Icon,
 } from "@heroicons/react/24/solid";
+import { AppBar, Button, IconButton, TextField } from "@mui/material";
 import { signOutClient } from "~/utils";
 import { useApolloClient } from "@apollo/client/index.js";
 import { useSettingsContext } from "~/contexts";
@@ -21,15 +20,17 @@ export function DashboardTopNavbar() {
   // page = page ? page : "";
 
   return (
-    <Navbar
-      color={fixedNavbar ? "white" : "transparent"}
-      className={`rounded-xl transition-all ${
-        fixedNavbar
-          ? "sticky top-4 z-40 py-3 shadow-md shadow-blue-gray-500/5"
-          : "px-0 py-1"
-      }`}
-      fullWidth
-      blurred={fixedNavbar}
+    <AppBar
+      position="sticky"
+      color="default"
+
+      // className={`rounded-xl transition-all ${
+      //   fixedNavbar
+      //     ? "sticky top-4 z-40 py-3 shadow-md shadow-blue-gray-500/5"
+      //     : "px-0 py-1"
+      // }`}
+      // fullWidth
+      // blurred={fixedNavbar}
     >
       <div className="flex flex-col-reverse justify-between gap-6 md:flex-row md:items-center">
         {
@@ -63,11 +64,10 @@ export function DashboardTopNavbar() {
         }
         <div className="flex items-center">
           <div className="mr-auto md:mr-4 md:w-56">
-            <Input label="Search" crossOrigin={undefined} />
+            <TextField title="Search" size="small" />
           </div>
           <IconButton
-            variant="text"
-            color="blue-gray"
+            color="default"
             className="grid xl:hidden"
             onClick={() => {
               setSideNavBarOpen(!sideNavBarOpen);
@@ -78,7 +78,6 @@ export function DashboardTopNavbar() {
           <Link to="/logout">
             <Button
               variant="text"
-              color="blue-gray"
               className="hidden items-center gap-1 px-4 normal-case xl:flex"
               onClick={() => {
                 // setAuthContextUser(undefined); it is not a good practice. It reloads the already loaded/cached pages with empty user data which raises errors in another render before the full redirect happens.
@@ -88,11 +87,7 @@ export function DashboardTopNavbar() {
               <UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
               Sign out
             </Button>
-            <IconButton
-              variant="text"
-              color="blue-gray"
-              className="grid xl:hidden"
-            >
+            <IconButton className="grid xl:hidden">
               <UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
             </IconButton>
           </Link>
@@ -174,11 +169,11 @@ export function DashboardTopNavbar() {
               </MenuItem>
             </MenuList>
           </Menu> */}
-          <IconButton variant="text" color="blue-gray" onClick={() => null}>
+          <IconButton onClick={() => null}>
             <Cog6ToothIcon className="h-5 w-5 text-blue-gray-500" />
           </IconButton>
         </div>
       </div>
-    </Navbar>
+    </AppBar>
   );
 }
diff --git a/app/widgets/layout/firstpage-footer.tsx b/app/widgets/layout/firstpage-footer.tsx
@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 
-import { default as material } from "@material-tailwind/react";
-const { Typography, IconButton } = material;
+import { Typography, IconButton } from "@mui/material";
 
 const year = new Date().getFullYear();
 
@@ -37,10 +36,7 @@ export function FirstPageFooter({
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <IconButton
-                    color="white"
-                    className="rounded-full bg-transparent shadow-none"
-                  >
+                  <IconButton className="rounded-full bg-transparent shadow-none">
                     <Typography color={color}>
                       <i className={`fa-brands fa-${name}`} />
                     </Typography>
@@ -53,7 +49,7 @@ export function FirstPageFooter({
             {menus.map(({ name, items }) => (
               <div key={name}>
                 <Typography
-                  variant="small"
+                  variant="body2"
                   color="blue-gray"
                   className="mb-2 block font-medium uppercase"
                 >
@@ -63,11 +59,8 @@ export function FirstPageFooter({
                   {items.map((item) => (
                     <li key={item.name}>
                       <Typography
-                        as="a"
-                        href={item.path}
-                        target="_blank"
                         rel="noreferrer"
-                        variant="small"
+                        variant="body2"
                         className="mb-2 block font-normal text-blue-gray-500 hover:text-blue-gray-700"
                       >
                         {item.name}
@@ -83,7 +76,7 @@ export function FirstPageFooter({
         <div className="flex flex-wrap items-center justify-center md:justify-between">
           <div className="mx-auto w-full px-4 text-center">
             <Typography
-              variant="small"
+              variant="body2"
               className="font-normal text-blue-gray-500"
             >
               {copyright}

diff --git a/app/widgets/layout/page-title.tsx b/app/widgets/layout/page-title.tsx
@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 
-import { default as material } from "@material-tailwind/react";
-const { Typography } = material;
+import { Typography } from "@mui/material";
 
 export function PageTitle({
   section,
@@ -14,13 +13,13 @@ export function PageTitle({
 }) {
   return (
     <div className="mx-auto w-full px-4 text-center lg:w-6/12">
-      <Typography variant="lead" className="font-semibold">
+      <Typography variant="caption" className="font-semibold">
         {section}
       </Typography>
       <Typography variant="h2" color="blue-gray" className="my-3">
         {heading}
       </Typography>
-      <Typography variant="lead" className="text-blue-gray-500">
+      <Typography variant="caption" className="text-blue-gray-500">
         {children}
       </Typography>
     </div>

diff --git a/app/widgets/layout/site-navbar.tsx b/app/widgets/layout/site-navbar.tsx
@@ -2,8 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
-import { default as material } from "@material-tailwind/react";
-const { Navbar: MTNavbar, Typography, Button, IconButton, Collapse } = material;
+import {
+  AppBar,
+  Typography,
+  Button,
+  IconButton,
+  Collapse,
+} from "@mui/material";
 
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import { siteRouteType } from "~/routesData";
@@ -29,13 +34,7 @@ export function SiteNavbar({
   const navList = (
     <ul className="mb-4 mt-2 flex flex-col gap-2 text-inherit lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
       {routes.map(({ name, path, icon, href, target }) => (
-        <Typography
-          key={name}
-          as="li"
-          variant="small"
-          color="inherit"
-          className="capitalize"
-        >
+        <Typography key={name} variant="body2" className="capitalize">
           {href ? (
             <a
               href={href}
@@ -67,7 +66,7 @@ export function SiteNavbar({
   );
 
   return (
-    <MTNavbar color="transparent" className="p-3">
+    <AppBar color="transparent" className="p-3">
       <div className="container mx-auto flex items-center justify-between text-white">
         <Link to="/">
           <Typography className="ml-2 mr-4 cursor-pointer py-1.5 font-bold">
@@ -81,9 +80,7 @@ export function SiteNavbar({
           })}
         </div>
         <IconButton
-          variant="text"
-          size="sm"
-          color="white"
+          size="small"
           className="ml-auto text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
           onClick={() => setOpenNav(!openNav)}
         >
@@ -94,10 +91,7 @@ export function SiteNavbar({
           )}
         </IconButton>
       </div>
-      <Collapse
-        className="rounded-xl bg-white text-blue-gray-900"
-        open={openNav}
-      >
+      <Collapse className="rounded-xl bg-white text-blue-gray-900" in={openNav}>
         <div className="mx-aut container  px-4 pb-4 pt-2">
           {navList}
           <a
@@ -106,7 +100,7 @@ export function SiteNavbar({
             className="mb-2 block"
             rel="noreferrer"
           >
-            <Button variant="text" size="sm" fullWidth>
+            <Button variant="text" size="small" fullWidth>
               pro version
             </Button>
           </a>
@@ -115,15 +109,15 @@ export function SiteNavbar({
           })}
         </div>
       </Collapse>
-    </MTNavbar>
+    </AppBar>
   );
 }
 
 SiteNavbar.defaultProps = {
   brandName: "mAy I Coach",
   action: (
     <a href="/" target="_blank" rel="noreferrer">
-      <Button variant="gradient" size="sm" fullWidth>
+      <Button variant="text" size="small" fullWidth>
         free 30 days trial!
       </Button>
     </a>