Profiledropshadowanddashboardbutton

src/_components/dashboard-component/dashboard-component.tsx

@@ -11,7 +11,7 @@ import { DashboardGoal, UserAchievementEntry } from '@/_lib/_data/types/types';
 import extendedtext from '@/_lib/_data/constants/extended-texts.json';
 import { QuizText } from '@/_lib/_data/types/types';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import NavToPage from '../nav-to-page-button-component/nav-to-page-button';
+import Link from 'next/link';
 
 type DashboardProps = {
   historyData: {
@@ -49,7 +49,7 @@ function Dashboard({ historyData, userAchievements }: DashboardProps) {
   const completedGoals = historyArray.length - 1; // Subtract 1 for starting node
   const progressPercentage = Math.min(
     100,
-    Math.round((completedGoals / totalGoals) * 100)
+    Math.round((completedGoals / totalGoals) * 100),
   );
 
   // Generate encouraging message based on progress
@@ -97,12 +97,12 @@ function Dashboard({ historyData, userAchievements }: DashboardProps) {
     return currentTextIndex > 0 ? true : false;
   }
 
-
   const [darkmode, setDarkmode] = useState<boolean | null>(null);
 
   useEffect(() => {
-      const themeDarkmode = localStorage.getItem('theme') == 'dark' ? true : false;
-      setDarkmode (themeDarkmode);
+    const themeDarkmode =
+      localStorage.getItem('theme') == 'dark' ? true : false;
+    setDarkmode(themeDarkmode);
   }, []);
 
   return (
@@ -113,12 +113,21 @@ function Dashboard({ historyData, userAchievements }: DashboardProps) {
           {welcomeMessage}
         </h1>
 
-        <NavToPage destinationPage="Quiz" />
+        <Link
+          href="/quiz"
+          className="px-4 py-2 bg-light_blue_bg dark:bg-[#333] hover:bg-light_blue dark:hover:bg-slate-700 text-white dark:text-blue font-semibold rounded-lg transition-colors text-sm sm:text-base shadow-md"
+        >
+          Resume Quiz
+        </Link>
       </div>
 
       {/* Current Goal */}
       <div className="w-full">
-        <Goal goal={goalText} percentage={progressPercentage} />
+        <Goal
+          goal={goalText}
+          percentage={progressPercentage}
+          showButton={false}
+        />
       </div>
 
       {/* Main Content Grid */}

src/_components/dashboard-component/goal/goal.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-export default function Goal({ goal, percentage }) {
+export default function Goal({ goal, percentage, showButton = true }) {
   return (
     <div className="bg-light_blue dark:bg-[#333] px-4 sm:px-6 lg:px-8 py-4 sm:py-5 flex flex-col gap-y-3 rounded-xl shadow-md">
       <p className="text-white dark:text-blue drop-shadow-md text-base sm:text-xl lg:text-2xl font-bold leading-snug">

src/_components/sidebar-component/navigation.tsx

@@ -60,7 +60,9 @@ export const Navigation = ({
           <Link
             href="/profile"
             className={twMerge(
-              'text-slate-500 dark:text-blue hover:text-blue transition duration-200 flex items-center space-x-2 py-2 px-2 rounded-md text-md'
+              'text-slate-500 dark:text-blue hover:text-blue transition duration-200 flex items-center space-x-2 py-2 px-2 rounded-md text-md',
+              isActive('/profile') &&
+                'bg-slate-50 dark:bg-blue shadow-slate-300 dark:shadow-slate-800 shadow-xl text-blue dark:text-[#333]'
             )}
           >
             <div className="flex flex-row my-2">