Enhance UI with section headers and descriptions for Archived Tasks, Labels, Settings, Things, User Activities, and update NavBar

src/views/Chores/ArchivedTasks.jsx

@@ -17,6 +17,7 @@ import {
   IconButton,
   Input,
   List,
+  Stack,
   Typography,
 } from '@mui/joy'
 import Fuse from 'fuse.js'
@@ -448,6 +449,20 @@ const ArchivedTasks = () => {
 
   return (
     <Container maxWidth='md'>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+        {/* <EmojiEvents sx={{ fontSize: '2rem', color: '#FFD700' }} /> */}
+        <Stack sx={{ flex: 1 }}>
+          <Typography
+            level='h3'
+            sx={{ fontWeight: 'lg', color: 'text.primary' }}
+          >
+            Archived Tasks
+          </Typography>
+          <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
+            View and manage tasks that have been archived or completed.
+          </Typography>
+        </Stack>
+      </Box>
       {/* Header */}
       {/* <Box
         sx={{

src/views/Labels/LabelView.jsx

@@ -7,6 +7,7 @@ import {
   CircularProgress,
   Container,
   IconButton,
+  Stack,
   Typography,
 } from '@mui/joy'
 import { useEffect, useRef, useState } from 'react'
@@ -552,6 +553,22 @@ const LabelView = () => {
 
   return (
     <Container maxWidth='md' sx={{ px: 0 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+        {/* <EmojiEvents sx={{ fontSize: '2rem', color: '#FFD700' }} /> */}
+        <Stack sx={{ flex: 1 }}>
+          <Typography
+            level='h3'
+            sx={{ fontWeight: 'lg', color: 'text.primary' }}
+          >
+            Labels
+          </Typography>
+          <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
+            Manage your labels and organize your tasks effectively. Labels will
+            be automatically shared with your circle if they are used on a
+            shared task.
+          </Typography>
+        </Stack>
+      </Box>
       <Box
         sx={{
           // bgcolor: 'background.body',

src/views/Settings/SettingsOverview.jsx

@@ -18,6 +18,7 @@ import {
   CardContent,
   Container,
   Grid,
+  Stack,
   Typography,
 } from '@mui/joy'
 import { useNavigate } from 'react-router-dom'
@@ -109,13 +110,19 @@ const SettingsOverview = () => {
 
   return (
     <Container maxWidth='lg' sx={{ py: 4 }}>
-      <Box sx={{ mb: 4 }}>
-        <Typography level='h2' sx={{ mb: 1 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+        {/* <EmojiEvents sx={{ fontSize: '2rem', color: '#FFD700' }} /> */}
+        <Stack sx={{ flex: 1 }}>
+          <Typography
+            level='h3'
+            sx={{ fontWeight: 'lg', color: 'text.primary' }}
+          >
             Settings
           </Typography>
-        <Typography level='body-lg' color='neutral'>
+          <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
             Customize your experience and manage your account preferences
           </Typography>
+        </Stack>
       </Box>
 
       {/* Upgrade Card - Only show if user is not a Plus member */}

src/views/Things/ThingsView.jsx

@@ -8,7 +8,15 @@ import {
   ToggleOn,
   Widgets,
 } from '@mui/icons-material'
-import { Avatar, Box, Chip, Container, IconButton, Typography } from '@mui/joy'
+import {
+  Avatar,
+  Box,
+  Chip,
+  Container,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/joy'
 import React, { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useNotification } from '../../service/NotificationProvider'
@@ -660,6 +668,23 @@ const ThingsView = () => {
 
   return (
     <Container maxWidth='md' sx={{ px: 0 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+        {/* <EmojiEvents sx={{ fontSize: '2rem', color: '#FFD700' }} /> */}
+        <Stack sx={{ flex: 1 }}>
+          <Typography
+            level='h3'
+            sx={{ fontWeight: 'lg', color: 'text.primary' }}
+          >
+            Things
+          </Typography>
+          <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
+            Things are custom fields that can be attached to tasks to capture
+            additional information. They can be of type text, number, or
+            boolean. You can associate things with tasks and have the task due
+            once condition is met
+          </Typography>
+        </Stack>
+      </Box>
       <Box
         sx={{
           overflow: 'hidden',

src/views/User/UserActivities.jsx

@@ -826,6 +826,20 @@ const UserActivites = () => {
         flexDirection: 'column',
       }}
     >
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+        {/* <EmojiEvents sx={{ fontSize: '2rem', color: '#FFD700' }} /> */}
+        <Stack sx={{ flex: 1 }}>
+          <Typography
+            level='h3'
+            sx={{ fontWeight: 'lg', color: 'text.primary' }}
+          >
+            User Activities
+          </Typography>
+          <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
+            Overview of user activities and task statistics
+          </Typography>
+        </Stack>
+      </Box>
       {/* Main Content Area - Mobile: Stack vertically, Desktop: Side by side */}
       <Box
         sx={{

src/views/components/NavBar.jsx

@@ -26,7 +26,6 @@ import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { version } from '../../../package.json'
 import UserProfileAvatar from '../../components/UserProfileAvatar'
-import ThemeToggleButton from '../Settings/ThemeToggleButton'
 import NavBarLink from './NavBarLink'
 const links = [
   {
@@ -167,7 +166,7 @@ const NavBar = () => {
       <Box className='flex-1' />
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <UserProfileAvatar />
-        <ThemeToggleButton />
+        {/* <ThemeToggleButton /> */}
       </Box>
       <Drawer
         open={drawerOpen}