coachme page -> mui

mahmoudmoravej · Apr 22, 2024 · 56c985f · 56c985f
1 parent 2877e08
commit 56c985f
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 55 deletions.
diff --git a/app/components/DefaultSkeleton.tsx b/app/components/DefaultSkeleton.tsx
@@ -1,5 +1,4 @@
-import { default as material } from "@material-tailwind/react";
-const { Typography } = material;
+import { Typography } from "@mui/material";
 
 export function DefaultSkeleton() {
   return (
@@ -22,50 +21,49 @@ export function DefaultSkeleton() {
       </div>
       <div className="w-max">
         <Typography
-          as="div"
           variant="h1"
           className="mb-4 h-3 w-56 rounded-full bg-gray-300"
         >
           &nbsp;
         </Typography>
         <Typography
-          as="div"
-          variant="paragraph"
+          component="div"
+          paragraph
           className="mb-2 h-2 w-72 rounded-full bg-gray-300"
         >
           &nbsp;
         </Typography>
         <Typography
-          as="div"
-          variant="paragraph"
+          component="div"
+          paragraph
           className="mb-2 h-2 w-72 rounded-full bg-gray-300"
         >
           &nbsp;
         </Typography>
         <Typography
-          as="div"
-          variant="paragraph"
+          component="div"
+          paragraph
           className="mb-2 h-2 w-72 rounded-full bg-gray-300"
         >
           &nbsp;
         </Typography>
         <Typography
-          as="div"
-          variant="paragraph"
+          component="div"
+          paragraph
           className="mb-2 h-2 w-72 rounded-full bg-gray-300"
         >
           &nbsp;
         </Typography>
         <Typography
-          as="div"
-          variant="paragraph"
+          component="div"
+          paragraph
           className="mb-2 h-2 w-72 rounded-full bg-gray-300"
         >
           &nbsp;
         </Typography>
         <Typography
-          as="div"
-          variant="paragraph"
+          component="div"
+          paragraph
           className="mb-2 h-2 w-72 rounded-full bg-gray-300"
         >
           &nbsp;

diff --git a/...ndividuals.$id.coach/components/GenerateCycleSummaryButton/GenerateCycleSummaryButton.tsx b/...ndividuals.$id.coach/components/GenerateCycleSummaryButton/GenerateCycleSummaryButton.tsx
@@ -4,8 +4,7 @@ import {
 } from "@app-types/graphql";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
 
-import { default as material } from "@material-tailwind/react";
-const { Spinner, Button } = material;
+import { CircularProgress, Button } from "@mui/material";
 
 import { useState } from "react";
 
@@ -56,13 +55,12 @@ export function GenerateCycleSummaryButton({
 
   return (
     <Button
-      size="sm"
-      variant="gradient"
+      size="small"
       className="float-right flex items-center gap-2"
       onClick={onGenerateCycleSummary}
     >
       {isSaving ? (
-        <Spinner className="h-4 w-4" />
+        <CircularProgress className="h-4 w-4" />
       ) : (
         <>
           <LightBulbIcon className="h-5 w-5 text-inherit" />

diff --git a/app/routes/_dashboard.individuals.$id.coach/route.tsx b/app/routes/_dashboard.individuals.$id.coach/route.tsx
@@ -1,16 +1,15 @@
 import { Link, useParams } from "@remix-run/react";
 
-import { default as material } from "@material-tailwind/react";
-const {
+import {
   Accordion,
-  AccordionBody,
-  AccordionHeader,
+  AccordionDetails,
+  AccordionSummary,
   Card,
-  CardBody,
-  Spinner,
+  CardContent,
+  CircularProgress,
   Tooltip,
   Typography,
-} = material;
+} from "@mui/material";
 
 import {
   AdviceFragmentFragment,
@@ -22,6 +21,7 @@ import { noNull } from "~/utils";
 import { GenerateCycleSummaryButton } from "./components/GenerateCycleSummaryButton";
 import { DefaultSkeleton } from "~/components/DefaultSkeleton";
 import { useUser } from "~/contexts";
+import { ArrowDownIcon } from "@heroicons/react/24/solid";
 
 export default function IndividualCoach() {
   const { id: idParam } = useParams();
@@ -47,7 +47,7 @@ export default function IndividualCoach() {
       setAdviceList(data?.adviceList?.nodes?.filter(noNull).map((o) => o));
   }, [data?.adviceList?.nodes]);
 
-  if (loading) return <Spinner className="w-full" />;
+  if (loading) return <CircularProgress className="w-full" />;
 
   if (error) return <p>{JSON.stringify(error)}</p>;
   if (!individual || !data || !data.adviceList?.nodes) return <p>No data</p>;
@@ -81,13 +81,16 @@ export default function IndividualCoach() {
   };
 
   const cyclesMarkup = activeCycles?.map((cycle, idx) => (
-    <Accordion key={idx} open={open === idx}>
-      <AccordionHeader onClick={() => handleOpen(idx)}>
+    <Accordion key={idx} defaultExpanded={open === idx}>
+      <AccordionSummary
+        onClick={() => handleOpen(idx)}
+        expandIcon={<ArrowDownIcon />}
+      >
         {cycle.title}
-      </AccordionHeader>
-      <AccordionBody>
+      </AccordionSummary>
+      <AccordionDetails>
         <Card className="mb-5 mt-5 flex flex-row  space-x-4 text-base font-normal">
-          <CardBody className="w-full">
+          <CardContent className="w-full">
             {cycle.advice
               ? `Analyzed at ${new Date(cycle.advice.analyzedAt).toLocaleString(
                   "en-CA",
@@ -110,14 +113,14 @@ export default function IndividualCoach() {
               }
               onSaving={handleIsOnGenerateCycleSummary}
             />
-          </CardBody>
+          </CardContent>
         </Card>{" "}
         <div className="flex flex-row space-x-4  pt-0 text-base font-normal">
           <Card className="flex-1">
-            <CardBody>
+            <CardContent>
               <Typography variant="h6" color="gray" className="mb-4 uppercase">
                 <Tooltip
-                  content={
+                  title={
                     cycle.advice?.analyzedActivitiesTotal.toString() +
                     " out of " +
                     cycle.advice?.activitiesTotal.toString() +
@@ -147,13 +150,13 @@ export default function IndividualCoach() {
                   )}
                 </Typography>
               </pre>
-            </CardBody>
+            </CardContent>
           </Card>
           <Card className="flex-1">
-            <CardBody>
+            <CardContent>
               <Typography variant="h6" color="gray" className="mb-4 uppercase">
                 <Tooltip
-                  content={
+                  title={
                     cycle.advice?.contentReadyVisionsTotal.toString() +
                     " out of " +
                     cycle.advice?.visionsTotal.toString() +
@@ -184,10 +187,10 @@ export default function IndividualCoach() {
                   )}
                 </Typography>
               </pre>
-            </CardBody>
+            </CardContent>
           </Card>
           <Card className="flex-1">
-            <CardBody>
+            <CardContent>
               <Typography variant="h6" color="gray" className="mb-4 uppercase">
                 Coaching Advice
               </Typography>
@@ -205,16 +208,16 @@ export default function IndividualCoach() {
                   )}
                 </Typography>
               </pre>
-            </CardBody>
+            </CardContent>
           </Card>
         </div>
-      </AccordionBody>
+      </AccordionDetails>
     </Accordion>
   ));
 
   return (
     <>
-      <Card color="transparent" shadow={false} className="mb-10">
+      <Card color="transparent" raised={true} className="mb-10 mt-10 p-5">
         <Typography variant="h4" color="blue-gray">
           Coach {individual.fullname}
         </Typography>

diff --git a/app/widgets/cards/feature-card.tsx b/app/widgets/cards/feature-card.tsx
@@ -1,8 +1,10 @@
 import PropTypes from "prop-types";
 
-import { default as material } from "@material-tailwind/react";
+import material from "@material-tailwind/react";
 const { Card, CardBody, Typography, IconButton } = material;
 
+console.log("!!!", Card);
+
 export function FeatureCard({
   color,
   icon,

diff --git a/app/widgets/layout/dashboard-sidenav.tsx b/app/widgets/layout/dashboard-sidenav.tsx
@@ -71,9 +71,9 @@ export function Sidenav({
               </ListItem>
             )}
             {pages.map(({ icon, name, path }) => (
-              <NavLink to={path} key={name}>
+              <NavLink to={path} key={name} end>
                 {({ isActive }) => (
-                  <ListItemButton key={name} selected={isActive}>
+                  <ListItemButton selected={isActive} href="">
                     <ListItemIcon>{icon}</ListItemIcon>
                     <ListItemText>{name}</ListItemText>
                   </ListItemButton>

diff --git a/app/widgets/layout/dashboard-top-navbar.tsx b/app/widgets/layout/dashboard-top-navbar.tsx
@@ -23,12 +23,11 @@ export function DashboardTopNavbar() {
     <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"
-      // }`}
+      className={` transition-all ${
+        fixedNavbar
+          ? "sticky top-4 z-40 py-3 shadow-md shadow-blue-gray-500/5"
+          : "px-0 py-1"
+      }`}
       // fullWidth
       // blurred={fixedNavbar}
     >
@@ -64,7 +63,7 @@ export function DashboardTopNavbar() {
         }
         <div className="flex items-center">
           <div className="mr-auto md:mr-4 md:w-56">
-            <TextField title="Search" size="small" />
+            {/* <TextField title="Search" size="small" /> */}
           </div>
           <IconButton
             color="default"

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "build": "remix vite:build",
     "dev": "remix vite:dev",
-    "start": "PORT=6000 remix-serve ./build/server/index.js",
+    "start": "PORT=5500 remix-serve ./build/server/index.js",
     "typecheck": "tsc",
     "graphql": "graphql-codegen --config graphql.codegen.ts",
     "lint": "eslint --quiet --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",