From ddd4fd28f5a3cc882e4632f2563fe9562be811e2 Mon Sep 17 00:00:00 2001
From: Ahmed Ibrahim <me@ahmedibrahim.dev>
Date: Thu, 26 Dec 2024 14:01:29 +0200
Subject: [PATCH] refactor(nova): improve topics layout

---
 apps/nova/src/components/Tutors/Content.tsx   | 27 ++---------------
 packages/assets/assets/notification-2.svg     |  8 +++++
 packages/assets/package.json                  |  1 +
 .../src/components/TutorCard/TutorCardV1.tsx  | 29 +++++++++++++------
 4 files changed, 32 insertions(+), 33 deletions(-)
 create mode 100644 packages/assets/assets/notification-2.svg

diff --git a/apps/nova/src/components/Tutors/Content.tsx b/apps/nova/src/components/Tutors/Content.tsx
index 6225ba9c..93f0cfef 100644
--- a/apps/nova/src/components/Tutors/Content.tsx
+++ b/apps/nova/src/components/Tutors/Content.tsx
@@ -8,7 +8,7 @@ import { motion } from "framer-motion";
 import React, { useCallback, useState } from "react";
 import { InView } from "react-intersection-observer";
 import MoreTutorsSoon from "@litespace/assets/MoreTutorsSoon";
-import Notification from "@litespace/assets/Notification";
+import Notification2 from "@litespace/assets/Notification2";
 import { Typography } from "@litespace/luna/Typography";
 import { useFormatMessage } from "@litespace/luna/hooks/intl";
 import { Button, ButtonSize } from "@litespace/luna/Button";
@@ -16,21 +16,6 @@ import { useToast } from "@litespace/luna/Toast";
 
 type Tutor = Element<ITutor.FindOnboardedTutorsApiResponse["list"]>;
 
-const topics = [
-  "hobbies",
-  "travel",
-  "books",
-  "food",
-  "family",
-  "health",
-  "career",
-  "culture",
-  "holidays",
-  "work",
-  "favourite subjects",
-  "current events",
-];
-
 const Content: React.FC<{
   tutors: ITutor.FindOnboardedTutorsApiResponse["list"] | null;
   loading: boolean;
@@ -75,7 +60,7 @@ const Content: React.FC<{
                 onBook={() => openBookingDialog(tutor)}
                 profileUrl={profileUrl}
                 imageUrl={tutor.image ? asFullAssetUrl(tutor.image) : null}
-                topics={topics}
+                topics={tutor.topics}
               />
             </motion.div>
           );
@@ -127,13 +112,7 @@ const Content: React.FC<{
             >
               {intl("tutors.coming.set-notifications")}
             </Typography>
-            <Notification
-              width={24}
-              height={24}
-              viewBox="0 0 16 16"
-              fill="var(--natural-50)"
-              className="block [&>*]:stroke-natural-50"
-            />
+            <Notification2 width={24} height={24} />
           </div>
         </Button>
       </div>
diff --git a/packages/assets/assets/notification-2.svg b/packages/assets/assets/notification-2.svg
new file mode 100644
index 00000000..697ae4b5
--- /dev/null
+++ b/packages/assets/assets/notification-2.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
+        fill="#F2F2F2" />
+    <path
+        d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
+        fill="#F2F2F2" />
+</svg>
\ No newline at end of file
diff --git a/packages/assets/package.json b/packages/assets/package.json
index 26a3aa77..cf987d51 100644
--- a/packages/assets/package.json
+++ b/packages/assets/package.json
@@ -77,6 +77,7 @@
     "./MoreTutorsSoon": "./dist/MoreTutorsSoon.tsx",
     "./More": "./dist/More.tsx",
     "./NewTutor": "./dist/NewTutor.tsx",
+    "./Notification2": "./dist/Notification2.tsx",
     "./Notification": "./dist/Notification.tsx",
     "./Paperclip": "./dist/Paperclip.tsx",
     "./Pause": "./dist/Pause.tsx",
diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
index 40373859..d0e1f027 100644
--- a/packages/luna/src/components/TutorCard/TutorCardV1.tsx
+++ b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
@@ -17,6 +17,9 @@ import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Tooltip } from "@/components/Tooltip";
 
+const FRESH_TUTOR_MAX_TOPIC_COUNT = 7;
+const TUTOR_MAX_TOPIC_COUNT = 3;
+
 export const TutorCardV1: React.FC<CardProps> = ({
   id,
   name,
@@ -30,22 +33,22 @@ export const TutorCardV1: React.FC<CardProps> = ({
   onBook,
 }) => {
   const intl = useFormatMessage();
-  const isNewTutor = useMemo(
+  const isFreshTutor = useMemo(
     () => !studentCount && !lessonCount && !rating,
     [lessonCount, rating, studentCount]
   );
 
   const remainingTopicsCount = useMemo(() => {
-    // 3 is the number of the topics presented in one line
-    // 6 is the number of the topics presented in two lines
-    const displayedCount = !isNewTutor ? 3 : 6;
+    const displayedCount = !isFreshTutor
+      ? FRESH_TUTOR_MAX_TOPIC_COUNT
+      : TUTOR_MAX_TOPIC_COUNT;
     const totalTopics = topics.length;
 
     const remainingTopicsCount =
       totalTopics < displayedCount ? 0 : totalTopics - displayedCount;
 
     return remainingTopicsCount;
-  }, [isNewTutor, topics]);
+  }, [isFreshTutor, topics]);
 
   return (
     <div
@@ -90,7 +93,7 @@ export const TutorCardV1: React.FC<CardProps> = ({
           </Typography>
         </Link>
 
-        {!isNewTutor ? (
+        {!isFreshTutor ? (
           <div className={cn("tw-flex tw-gap-8 tw-my-4")}>
             {studentCount ? (
               <div className="tw-flex tw-flex-col tw-gap-1">
@@ -159,15 +162,23 @@ export const TutorCardV1: React.FC<CardProps> = ({
         ) : null}
 
         {!isEmpty(topics) && topics.join("").length > 0 ? (
-          <div className="tw-flex tw-my-4 tw-gap-2 tw-flex-wrap tw-justify-start">
+          <div
+            className={cn(
+              "tw-flex tw-gap-2 tw-flex-wrap tw-justify-start tw-mb-4",
+              { "tw-mt-4": isFreshTutor }
+            )}
+          >
             {topics.map((topic, idx) => {
-              if ((isNewTutor && idx < 6) || (!isNewTutor && idx < 3))
+              if (
+                (isFreshTutor && idx < FRESH_TUTOR_MAX_TOPIC_COUNT) ||
+                (!isFreshTutor && idx < TUTOR_MAX_TOPIC_COUNT)
+              )
                 return (
                   <Tooltip
                     key={idx}
                     content={<Typography element="body">{topic}</Typography>}
                   >
-                    <div className="tw-w-1/4">
+                    <div className="tw-w-16">
                       <Typography
                         element="tiny-text"
                         weight="regular"