feat: improve writing

Author: mostafakamar2308

apps/web/src/components/Tutors/TutorCard.tsx

@@ -13,7 +13,7 @@ import { Web } from "@litespace/utils/routes";
 import cn from "classnames";
 import { isEmpty } from "lodash";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useFindTutorRatings } from "@litespace/headless/rating";
 
 const MAXIMUM_CARD_TOPICS_NUM = 4;
@@ -42,6 +42,7 @@ export const TutorCard: React.FC<{
   cardHeight,
 }) => {
   const intl = useFormatMessage();
+  const navigate = useNavigate();
 
   return (
     <Link
@@ -153,21 +154,22 @@ export const TutorCard: React.FC<{
         >
           {intl("tutor-card.book-now")}
         </Button>
-        <Link
-          to={router.web({
-            route: Web.TutorProfile,
-            id: tutorId,
-          })}
+        <Button
+          htmlType="button"
+          className="w-full md:hidden mt-auto text-body font-medium"
+          variant="secondary"
+          size={buttonSize}
+          onClick={() =>
+            navigate(
+              router.web({
+                route: Web.TutorProfile,
+                id: tutorId,
+              })
+            )
+          }
         >
-          <Button
-            htmlType="button"
-            className="w-full md:hidden mt-auto text-body font-medium"
-            variant="secondary"
-            size={buttonSize}
-          >
-            {intl("tutor-card.show-profile")}
-          </Button>{" "}
-        </Link>
+          {intl("tutor-card.show-profile")}
+        </Button>{" "}
       </div>
     </Link>
   );

apps/web/src/pages/StudentDashboard.tsx

@@ -17,6 +17,7 @@ import { Link } from "react-router-dom";
 import { useTutors } from "@litespace/headless/tutor";
 import { Tabs } from "@litespace/ui/Tabs";
 import { track } from "@/lib/analytics";
+import { Typography } from "@litespace/ui/Typography";
 
 const StudentDashboard: React.FC = () => {
   const mq = useMediaQuery();
@@ -257,7 +258,11 @@ const LearningApproachMobile = () => {
 
   return (
     <div className="block md:hidden">
+      <Typography className="mb-2 text-subtitle-2 font-bold" tag={"h1"}>
+        {intl("student-dashboard.learning-approach.title")}
+      </Typography>
       <Accordion
+        defaultValue={items[0].id}
         onValueChange={(value) => {
           const item = items.find((item) => item.id === value);
           if (!item) return;

packages/ui/src/components/Accordion/Accordion.tsx

@@ -14,13 +14,15 @@ import { Typography } from "@/components/Typography";
 export const Accordion: React.FC<{
   items: AccordionItem[];
   onValueChange?: (value: string) => void;
-}> = ({ items, onValueChange }) => {
+  defaultValue?: string;
+}> = ({ items, defaultValue, onValueChange }) => {
   return (
     <Root
       collapsible
       type="single"
       className={cn("flex flex-col w-full rounded-2xl overflow-hidden gap-2")}
       onValueChange={onValueChange}
+      defaultValue={defaultValue}
     >
       {items.map((item) => (
         <Item

packages/ui/src/components/Dialog/Dialog.tsx

@@ -163,7 +163,7 @@ export const Dialog: React.FC<{
           variant === "default" ? (
             <>
               <Optional show={!hiddenTitle}>
-                <div className="flex justify-between items-center w-full">
+                <div className="flex justify-between items-center md:items-start w-full">
                   <Title>{title}</Title>
                   <Optional show={!!close}>
                     <Close

packages/ui/src/components/Lessons/ManageLesson/ManageLessonDialog.tsx

@@ -345,7 +345,10 @@ export const ManageLessonDialog: React.FC<{
             <Typography tag="p" className="text-caption font-bold">
               {intl("book-lesson.title-1")}
             </Typography>
-            <Typography tag="p" className="text-tiny text-natural-600">
+            <Typography
+              tag="p"
+              className="text-tiny md:max-w-[340px] text-natural-600"
+            >
               {intl("book-lesson.title-2")}
             </Typography>
           </div>