Improve UI

* Rephrase word choices for user gender on client's advice

* Create a dedicated image box for single image display

* Use switch to toggle showing and hiding animation

* Show save/cancel buttons explicitly on profile page
  but save button enabled only when there's some editing

* Use CSS styles for background image for better perf

* Enhance appearance of user goal panel on profile page

* Bugfix

eslint.config.mjs

@@ -8,6 +8,9 @@ export default tseslint.config(
     languageOptions: {
       globals: {
         console: 'readonly',
+        fetch:   'readonly',
+        then:    'readonly',
+        window:  'readonly',
         localStorage: 'readonly',
         HTMLElement: 'readonly',
         HTMLInputElement: 'readonly',

src/app/components/BackgroundWrapper.tsx

@@ -7,23 +7,11 @@ interface BackgroundWrapperProps {
 }
 
 const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({ children }) => {
-    return (
-        <Box
-            sx={{
-                minHeight: "100vh",
-                backgroundImage: "url('/assets/background.jpg')",
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-            }}
-        >
-            {children}
-        </Box>
-    );
+  return (
+    <Box className="bgwrapper" >
+      {children}
+    </Box>
+  );
 };
 
-export default BackgroundWrapper;
+export default BackgroundWrapper;

src/app/components/ImgBox.tsx

@@ -0,0 +1,38 @@
+'use client';
+import React from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+interface ImgBoxProps {
+  imgSrc?: string;
+  alt?: string;
+  size: number;
+}
+
+const CircImgFrame = styled(Box)<ImgBoxProps>(({ theme, size }) => ({
+  border: `1px solid ${theme.palette.primary.main}`,
+  borderRadius: '50%',
+  overflow: 'hidden',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: size,
+  width: size,
+}));
+
+const StyledImg = styled('img')({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});
+
+
+export function CircImgBox({imgSrc, alt, size}: ImgBoxProps) {
+  return (
+    <CircImgFrame size={size}>
+      <StyledImg src={imgSrc} alt={alt} />
+    </CircImgFrame>
+  );
+};
+
+// TODO: add a rectangle image box

src/app/components/Navbar.tsx

@@ -61,7 +61,6 @@ function ProfileMenu() {
   const { user, loading } = useUserData(uid);
   const router = useRouter();
 
-  console.log("User: ", user);
   // handlers
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(e.currentTarget);
@@ -156,17 +155,15 @@ const NavButton = styled(Button)(({ theme }) => ({
   color: theme.palette.primary.main,
 }));
 
-
-
 function Navbar() {
 
   const theme = useTheme();
-  const isSm = useMediaQuery(theme.breakpoints.down('sm'));
+  const sm = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
     <FlatAppBar component="nav" color="transparent" position="static">
       <Toolbar className="nav-bar">
-        {isSm ? (
+        {sm ? (
           <IconButton
             size="large"
             edge="start"

src/app/constants.ts

@@ -23,11 +23,11 @@ export const AVATARS: string[] = [
 export const DUSER: User = {
   email: '[email protected]',
   name: 'Joyfule Jar',
-  gender: 'Secret',
+  gender: 'Prefer not to say',
   phone: '',
   avatar: DEFAULT_AVATAR,
   task: {
-    goal: 0,
-    setDate: '',
+    goal: 100,
+    setDate: '2024-10-08',
   },
 };

src/app/globals.css

@@ -24,36 +24,37 @@ body {
   margin: 0 auto;
 }
 
+/* background image container */
+.bgwrapper {
+  min-height: 100vh;
+  background-image: url("../../public/assets/background.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .header {
   background: transparent;
   padding: 10px 20px;
 }
 
 .nav-bar {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
+  @apply w-full flex justify-between items-center;
   margin: 1em auto;
 }
 
-.nav-home {
-  @apply flex justify-center max-sm:hidden no-underline;
-  flex: 1 0 auto;
-}
-
 .nav-routes {
   @apply flex justify-end items-center mx-4 md:gap-x-4 gap-x-1 max-sm:hidden;
   list-style: none;
   flex: 4 0 auto;
 }
 
-
 .nav-routes li {
   cursor: pointer;
 }
 
 .nav-icons {
-  @apply flex justify-center items-center gap-x-2 pt-2;
+  @apply flex justify-center items-center gap-x-2;
 }
 
 .logo {
@@ -62,26 +63,20 @@ body {
 }
 
 .avatar-container {
-  @apply relative m-2 border border-2 border-black flex-none;
-  width: 140px;
-}
-
-.avatar {
-  height: 120px;
-  width: 120px;
+  @apply relative m-2 p-2 border border-2 border-black flex justify-center items-center;
 }
 
-.avatar img {
-  @apply h-full w-full;
+.avatar-btn {
+  @apply absolute right-0 bottom-4;
 }
 
-.avatar-btn {
-  @apply absolute right-0 bottom-2;
+/* used by MUI `Container' which uses flexbox by default */
+.profile-page-layout {
+  @apply w-full m-4 relative;
 }
 
 .profile-goal-container {
-  @apply m-2 border-2 border-black rounded-md flex-none;
-  max-width: 100px;
+  @apply m-2 flex-none justify-center items-center;
 }
 
 .content {
@@ -96,8 +91,6 @@ body {
   justify-content: center;
   align-items: center;
   padding: 50px 20px;
-  /* background: url('/path-to-your-background-image.png') no-repeat center center;
-  background-size: cover; */
   width: 100%;
 }
 

src/app/interface.ts

@@ -1,19 +1,19 @@
 // Common interfaces
 export interface Task {
-  goal: number,
-  setDate: string,
+  goal: number;
+  setDate: string;
 };
 
 export interface User {
-  email: string,
-  name: string,
-  gender?: string,
-  phone?: string,
-  avatar?: string,
-  task?: Task,
+  email: string;
+  name: string;
+  gender?: string;
+  phone?: string;
+  avatar?: string;
+  task?: Task;
 };
 
 export interface UserProfileProps {
-  user: User,
+  user: User;
   handler: (update: Partial<User>) => void;
 };

src/app/profile/components/Avatar.tsx

@@ -15,7 +15,6 @@ export function UserAvatar(props: {user: User}) {
       <Avatar
         src={props.user.avatar || DEFAULT_AVATAR}
         alt={`${props.user.name}'s profile image`}
-        className="avatar"
       >
       </Avatar>
     </Box>