wip: update design

src/components/Dashboard/DashboardPage.tsx

@@ -97,7 +97,7 @@ export function DashboardPage(props: DashboardPageProps) {
               label="+ Create Team"
               isActive={false}
               href="/team/new"
-              className="border-black bg-black text-white"
+              className="border border-dashed text-gray-600 hover:border-gray-600 hover:text-black"
             />
           </>
         )}

src/components/Dashboard/PersonalDashboard.tsx

@@ -151,11 +151,11 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
   return (
     <section className="mt-8">
       {isLoading && (
-        <div className="mb-6 h-[91px] animate-pulse rounded-md border bg-gray-100" />
+        <div className="mb-10 h-[188px] animate-pulse rounded-md border bg-gray-100 sm:h-[91px]" />
       )}
       {!isLoading && (
-        <div className="mb-6 flex items-center justify-between gap-2 overflow-hidden rounded-md border bg-gray-50">
+        <div className="mb-10 flex flex-col gap-2 overflow-hidden rounded-md border bg-gray-50 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-center gap-3 pl-4">
+          <div className="flex items-center gap-3 p-4 sm:p-0 sm:pl-4">
             <figure className="shrink-0">
               <img
                 src={avatarLink}
@@ -169,7 +169,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
             </div>
           </div>
 
-          <div className="flex flex-col justify-start divide-y border-l">
+          <div className="flex flex-col justify-start divide-y border-t sm:border-l sm:border-t-0">
             <a
               className="flex items-center gap-2 bg-white px-3 py-3 text-sm font-medium text-gray-500 hover:text-black"
               href={`/account/update-profile`}
@@ -225,7 +225,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
         </div>
       )}
 
-      <h2 className="mb-3 mt-6 text-xs uppercase text-gray-400">My Projects</h2>
+      <h2 className="mb-3 mt-7 text-xs uppercase text-gray-400">My Projects</h2>
       {isLoading && <LoadingProgress />}
       {!isLoading && enrichedProjects.length > 0 && (
         <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-3">
@@ -257,17 +257,17 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
         </div>
       )}
 
-      <h2 className="mb-3 mt-6 text-xs uppercase text-gray-400">
+      <h2 className="mb-3 mt-7 text-xs uppercase text-gray-400">
         Role Based Roadmaps
       </h2>
       <ListRoadmaps roadmaps={builtInRoleRoadmaps} />
 
-      <h2 className="mb-3 mt-6 text-xs uppercase text-gray-400">
+      <h2 className="mb-3 mt-7 text-xs uppercase text-gray-400">
         Skill Based Roadmaps
       </h2>
       <ListRoadmaps roadmaps={builtInSkillRoadmaps} />
 
-      <h2 className="mb-3 mt-6 text-xs uppercase text-gray-400">
+      <h2 className="mb-3 mt-7 text-xs uppercase text-gray-400">
         Best Practices
       </h2>
       <ListRoadmaps roadmaps={builtInBestPractices} />
@@ -310,6 +310,7 @@ export function ListRoadmaps(props: ListRoadmapsProps) {
                     ? 'best-practice'
                     : 'roadmap'
                 }
+                className='data-[is-favorite="true"]:text-gray-400'
               />
             )}
           </div>

src/components/FeaturedItems/MarkFavorite.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { MouseEvent } from "react";
+import type { MouseEvent } from 'react';
 import { httpPatch } from '../../lib/http';
 import type { ResourceType } from '../../lib/resource-progress';
 import { isLoggedIn } from '../../lib/jwt';
@@ -7,6 +7,7 @@ import { showLoginPopup } from '../../lib/popup';
 import { FavoriteIcon } from './FavoriteIcon';
 import { Spinner } from '../ReactIcons/Spinner';
 import { useToast } from '../../hooks/use-toast';
+import { cn } from '../../lib/classname';
 
 type MarkFavoriteType = {
   resourceType: ResourceType;
@@ -27,7 +28,9 @@ export function MarkFavorite({
   const toast = useToast();
   const [isLoading, setIsLoading] = useState(false);
   const [isFavorite, setIsFavorite] = useState(
-      isAuthenticated ? (favorite ?? localStorage.getItem(localStorageKey) === '1') : false
+    isAuthenticated
+      ? (favorite ?? localStorage.getItem(localStorageKey) === '1')
+      : false,
   );
 
   async function toggleFavoriteHandler(e: MouseEvent<HTMLButtonElement>) {
@@ -48,7 +51,7 @@ export function MarkFavorite({
       {
         resourceType,
         resourceId,
-      }
+      },
     );
 
     if (error) {
@@ -68,7 +71,7 @@ export function MarkFavorite({
           resourceType,
           isFavorite: !isFavorite,
         },
-      })
+      }),
     );
 
     window.dispatchEvent(new CustomEvent('refresh-favorites', {}));
@@ -99,11 +102,18 @@ export function MarkFavorite({
       aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
       onClick={toggleFavoriteHandler}
       tabIndex={-1}
-      className={`${isFavorite ? '' : 'opacity-30 hover:opacity-100'} ${
+      className={cn(
-        className || 'absolute right-1.5 top-1.5 z-30 focus:outline-0'
+        'absolute right-1.5 top-1.5 z-30 focus:outline-0',
-      }`}
+        isFavorite ? '' : 'opacity-30 hover:opacity-100',
+        className,
+      )}
+      data-is-favorite={isFavorite}
     >
-      {isLoading ? <Spinner isDualRing={false} /> : <FavoriteIcon isFavorite={isFavorite} />}
+      {isLoading ? (
+        <Spinner isDualRing={false} />
+      ) : (
+        <FavoriteIcon isFavorite={isFavorite} />
+      )}
     </button>
   );
 }