Update the leaving roadmap page

src/components/Projects/LeavingRoadmapWarningModal.tsx

@@ -1,6 +1,6 @@
 import { ArrowUpRight, X } from 'lucide-react';
 import { Modal } from '../Modal';
-import { getRelativeTimeString } from '../../lib/date';
+import { SubmissionRequirement } from './SubmissionRequirement.tsx';
 
 type LeavingRoadmapWarningModalProps = {
   onClose: () => void;
@@ -12,32 +12,41 @@ export function LeavingRoadmapWarningModal(
 ) {
   const { onClose, onContinue } = props;
 
-  const projectTips = [
-    'Leave an upvote if you liked the project',
-    'Open an issue on the GitHub repository and give the user feedback about their project',
-    'Report if the solution is not relevant',
-  ];
-
   return (
     <Modal onClose={onClose} bodyClassName="h-auto p-4">
-      <h2 className="mb-0.5 text-xl font-semibold">Leaving roadmap.sh</h2>
-      <p className="text-balance text-sm text-gray-500">
-        You are about to visit the project page on GitHub. Once you have
-        reviewed the project, please back and.
+      <h2 className="mb-1.5 text-2xl font-semibold">Leaving roadmap.sh</h2>
+      <p className="text-sm text-gray-500">
+        You are about to visit the project solution on GitHub. We recommend you
+        to follow these tips before you leave.
       </p>
 
-      <ul className="ml-4 mt-4 list-disc space-y-1.5 marker:text-gray-400">
-        {projectTips.map((tip) => {
-          return (
-            <li key={tip} className="text-balance">
-              {tip}
-            </li>
-          );
-        })}
-      </ul>
+      <div className="my-3">
+        <p className="rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          Make sure to come back and{' '}
+          <span className="font-medium text-purple-600">leave an upvote</span>{' '}
+          if you liked the solution. It helps the author and the community.
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          If you have feedback on the solution, open an issue or a pull request
+          on the{' '}
+          <span className="font-medium text-purple-600">
+            solution repository
+          </span>
+          .
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          Downvote the solution if it is{' '}
+          <span className="font-medium text-purple-600">
+            incorrect or misleading
+          </span>
+          . It helps the community. It helps the community.
+        </p>
+      </div>
 
       <button
-        className="mt-4 inline-flex items-center gap-2 rounded-lg bg-black p-2 px-3 text-white"
+        className="inline-flex w-full items-center gap-2 rounded-lg bg-black px-3 py-2.5 text-sm text-white"
         onClick={onContinue}
       >
         <ArrowUpRight className="h-5 w-5" />

src/components/Projects/ListProjectSolutions.tsx

@@ -13,6 +13,7 @@ import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { VoteButton } from './VoteButton.tsx';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+import { cn } from '../../lib/classname.ts';
 
 export interface ProjectStatusDocument {
   _id?: string;
@@ -239,7 +240,9 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
           return (
             <div
               key={solution._id}
-              className="flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0"
+              className={
+                'flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0'
+              }
             >
               <div className="flex items-center gap-1.5">
                 <img
@@ -259,12 +262,12 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                     counter % submittedAlternatives.length
                   ] || 'submitted their solution'}
                 </span>{' '}
-                <span className="text-gray-400 text-right sm:text-left flex-grow sm:flex-grow-0 sm:font-medium sm:text-black">
+                <span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black">
                   {getRelativeTimeString(solution?.submittedAt!)}
                 </span>
               </div>
 
-              <div className="flex items-center justify-center sm:justify-end gap-1">
+              <div className="flex items-center justify-end gap-1">
                 <span className="flex items-center overflow-hidden rounded-full border">
                   <VoteButton
                     icon={ThumbsUp}
@@ -288,10 +291,8 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                 <a
                   className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white"
                   onClick={(e) => {
-                    if (!isVisited) {
                     e.preventDefault();
                     setShowLeavingRoadmapModal(solution);
-                    }
                   }}
                   target="_blank"
                   href={solution.repositoryUrl}

src/components/Projects/LoadingSolutions.tsx

@@ -1,8 +1,10 @@
+import { isMobileScreen } from '../../lib/is-mobile.ts';
+
 export function LoadingSolutions() {
-  return (
-    <ul className="flex flex-col divide-y divide-transparent min-h-[500px]">
-      {new Array(11).fill(0).map((_, index) => (
-        <li key={index} className="flex h-[44px] items-center justify-between">
+  const totalCount = isMobileScreen() ? 3 : 11;
+
+  const loadingRow = (
+    <li className="flex min-h-[78px] animate-pulse flex-wrap items-center justify-between overflow-hidden rounded-md bg-gray-200 sm:min-h-[44px] sm:animate-none sm:rounded-none sm:bg-transparent">
       <span className="flex items-center">
         <span className="block h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200"></span>
         <span
@@ -10,11 +12,33 @@ export function LoadingSolutions() {
         ></span>
       </span>
       <span className="flex items-center gap-2">
-            <span className={'w-[80px] rounded-full bg-gray-200 animated-pulse h-[26px]'}></span>
-            <span className={'w-[113px] rounded-full bg-gray-200 animated-pulse h-[26px]'}></span>
+        <span
+          className={
+            'animated-pulse h-[26px] w-[80px] rounded-full bg-gray-200'
+          }
+        ></span>
+        <span
+          className={
+            'animated-pulse h-[26px] w-[113px] rounded-full bg-gray-200'
+          }
+        ></span>
       </span>
     </li>
-      ))}
+  );
+
+  return (
+    <ul className="flex min-h-[500px] flex-col gap-2 divide-y sm:gap-0">
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
     </ul>
   );
 }

src/components/Projects/SubmissionRequirement.tsx

@@ -23,11 +23,11 @@ export function SubmissionRequirement(props: SubmissionRequirementProps) {
       {!isLoading && (
         <>
           {status === 'pending' ? (
-            <CircleDashed className="h-4 w-4 text-gray-400" />
+            <CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" />
           ) : status === 'success' ? (
-            <CheckIcon className="h-4 w-4 text-green-800" />
+            <CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" />
           ) : (
-            <X className="h-4 w-4 text-yellow-800" />
+            <X className="h-4 w-4 flex-shrink-0 text-yellow-800" />
           )}
         </>
       )}

src/pages/projects/[projectId]/solutions.astro

@@ -50,11 +50,11 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
       <ProjectTabs projectId={projectId} activeTab='solutions' />
 
       <div class='mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5'>
-        <div class='relative mb-5'>
+        <div class='relative mb-5 hidden sm:block'>
           <h1 class='mb-1 text-xl font-semibold'>
             {projectData.title} Solutions
           </h1>
-          <p class='hidden text-sm text-gray-500 sm:block'>
+          <p class='text-sm text-gray-500'>
             {projectData.description}
           </p>
         </div>