Fix logo vectorization and update course view

src/_mock/course.ts

@@ -0,0 +1,94 @@
+const mockCourse = [
+  {
+    _id: '660013d760b78190151214f4',
+    title: 'Software Engineering',
+    description:
+      'With this full course will provide you with all of the essentials to become a Software Engineer. From the very basics HTML, CSS and front end JavaScript, typescript, along with tools like Git, Visual Studio, VSCode and front end frameworks, and will also provide you with the ability to control the Backend, databasing, be involved and participate in the overall application lifecycle. Main focus on coding and debugging.',
+    duration: '18',
+    tuition: 12000,
+    minimumSkill: 'beginner',
+    scholarshipAvailable: false,
+    bootcamp: null,
+    user: '5d7a514b5d2c12c7449be045',
+    __v: 0,
+    createdAt: '2024-03-24T11:51:51.772Z',
+    updatedAt: '2024-03-24T11:51:51.772Z'
+  },
+  {
+    _id: '660013d760b78190151214f5',
+    title: 'FRONT-END Web Development',
+    description:
+      'This course will provide you with all of the essentials to become a successful frontend web developer. You will learn to master HTML, CSS and front end JavaScript, along with tools like Git, Visual Studi, VSCode and front end frameworks like Vue, Be a Frontier on FRONTEND Development',
+    duration: '8',
+    tuition: 24000,
+    minimumSkill: 'beginner',
+    scholarshipAvailable: false,
+    bootcamp: null,
+    user: '5d7a514b5d2c12c7449be045',
+    __v: 0,
+    createdAt: '2024-03-24T11:51:51.772Z',
+    updatedAt: '2024-03-24T11:51:51.772Z'
+  },
+  {
+    _id: '660013d760b78190151214f6',
+    title: 'BACK-END Web Development',
+    description:
+      "The behind-the-scenes functionality of a website is referred to as the 'back-end'. It is a combination of technology and programming that powers a website, consisting of three parts that a user never sees: a server, an application, and a database. The back-end runs a website — the user does not see it or interact with it, but it is always running in the background, delivering functionality and a desktop-like experience. Back-end developers play a critical role in web development teams, and make sure that data or services requested by the front-end system or software are delivered.",
+    duration: '6',
+    tuition: 8000,
+    minimumSkill: 'intermediate',
+    scholarshipAvailable: false,
+    bootcamp: null,
+    user: '5d7a514b5d2c12c7449be045',
+    __v: 0,
+    createdAt: '2024-03-24T11:51:51.772Z',
+    updatedAt: '2024-03-24T11:51:51.772Z'
+  },
+  {
+    _id: '5d725c84c4ded7bcb480eaa0',
+    title: 'FULL STACK Web Development',
+    description:
+      'In this course you will learn full stack web development, first learning all about the frontend with HTML/CSS/JS/Vue and then the backend with Node.js/Express/MongoDB',
+    duration: '12',
+    tuition: 10000,
+    minimumSkill: 'intermediate',
+    scholarshipAvailable: false,
+    bootcamp: null,
+    user: '5d7a514b5d2c12c7449be045',
+    __v: 0,
+    createdAt: '2024-03-24T11:51:51.772Z',
+    updatedAt: '2024-03-24T11:51:51.772Z'
+  },
+  {
+    _id: '5d725cb9c4ded7bcb480eaa1',
+    title: 'Dev Ops',
+    description:
+      'In this course you will learn all about the front end with HTML, CSS and JavaScript. You will master tools like Git and Webpack and also learn C# and ASP.NET with Postgres',
+    duration: '10',
+    tuition: 12000,
+    minimumSkill: 'intermediate',
+    scholarshipAvailable: false,
+    bootcamp: null,
+    user: '5d7a514b5d2c12c7449be046',
+    __v: 0,
+    createdAt: '2024-03-24T11:51:51.772Z',
+    updatedAt: '2024-03-24T11:51:51.772Z'
+  },
+  {
+    _id: '5d725cd2c4ded7bcb480eaa2',
+    title: 'UI/UX',
+    description:
+      'In this course you will learn to create beautiful interfaces. It is a mix of design and development to create modern user experiences on both web and mobile',
+    duration: '12',
+    tuition: 10000,
+    minimumSkill: 'intermediate',
+    scholarshipAvailable: false,
+    bootcamp: null,
+    user: '5d7a514b5d2c12c7449be046',
+    __v: 0,
+    createdAt: '2024-03-24T11:51:51.773Z',
+    updatedAt: '2024-03-24T11:51:51.773Z'
+  }
+]
+
+export default mockCourse

src/_mock/index.ts

@@ -1,2 +1,3 @@
 export { default as image } from './image'
 export { default as mockBootcamp } from './bootcamp'
+export { default as mockCourse } from './course'

src/component/form/upload-field/avatar-editor-dialog.tsx

@@ -15,24 +15,13 @@ interface AvatarEditorDialogProps {
   setEditor: (editor: AvatarEditor | null) => void
 }
 
-const AvatarEditorDialog: FC<AvatarEditorDialogProps> = ({
-  onSave,
-  openDialog,
-  setOpenDialog,
-  setEditor,
-  previewUrl,
-  handleClearPreview,
-}) => {
+const AvatarEditorDialog: FC<AvatarEditorDialogProps> = ({ onSave, openDialog, setOpenDialog, setEditor, previewUrl, handleClearPreview }) => {
   const { Icon, iconSrc: clearSrc } = useIcon(ICON_WEB_NAME.CLOSE)
 
   return (
     <Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
       <DialogContent>
-        <AvatarEditor
-          ref={(editor: AvatarEditor | null) => setEditor(editor)}
-          image={previewUrl || 'default_image_path'}
-          {...AvatarEditorProps}
-        />
+        <AvatarEditor ref={(editor: AvatarEditor | null) => setEditor(editor)} image={previewUrl || 'default_image_path'} {...AvatarEditorProps} />
         <SIconButton onClick={handleClearPreview}>
           <Icon icon={clearSrc} />
         </SIconButton>

src/component/navbar/account-popover.tsx

@@ -82,7 +82,7 @@ export default function AccountPopover({ user }: { user: any }) {
             }
           })
         }}>
-        {user?.avatar !== '/upload/avatar/no-avatar.jpeg' ? (
+        {user?.avatar === '/upload/avatar/no-avatar.jpeg' ? (
           <Avatar src={user?.avatar} />
         ) : (
           <DefaultAvatar firstName={user.firstname} lastName={user.lastname} />