Merge Sienna's branch

web/package.json

@@ -21,7 +21,8 @@
   "dependencies": {
     "@mantine/carousel": "^7.11.2",
     "@mantine/core": "7.11.2",
-    "@mantine/hooks": "7.11.2",
+    "@mantine/dropzone": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
     "@reduxjs/toolkit": "^2.2.5",
     "@tabler/icons-react": "^3.7.0",
     "embla-carousel-react": "^8.1.7",

web/src/app/App.tsx

@@ -9,7 +9,7 @@ import '@mantine/carousel/styles.css';
 
 export default function App() {
   return (
-    <MantineProvider theme={theme}>
+    <MantineProvider theme={theme} defaultColorScheme="dark">
       <Router />
       <ToastContainer
         position="bottom-right"

web/src/app/components/Modal/EditAvatar.tsx

@@ -0,0 +1,45 @@
+import { Box, Avatar, Divider, Flex, ActionIcon, Text, FileButton } from '@mantine/core';
+import styles from './Modal.module.css';
+import { IconCameraPlus } from '@tabler/icons-react';
+import { IconTrash } from '@tabler/icons-react';
+import { useState } from 'react';
+
+interface EditAvatarProps {
+  avatar: string;
+}
+
+export const EditAvatar = ({ avatar }: EditAvatarProps) => {
+  const [file, setFile] = useState<File | null>(null);
+
+  return (
+    <Box>
+      <Flex align="center" justify="center" mb={20}>
+        <Avatar radius="xl" className={styles.avatar} variant="transparent" src={avatar} />
+      </Flex>
+      <Divider size="md" />
+      <Flex justify="space-between">
+        <FileButton onChange={setFile} accept="image/png,image/jpeg">
+          {(props) => (
+            <button {...props} className={styles.modalButton}>
+              <Flex direction="column" align="center">
+                <ActionIcon variant="transparent">
+                  <IconCameraPlus stroke={2} className={styles.icon} />
+                </ActionIcon>
+                <Text style={{ cursor: 'pointer' }}>Add Photo</Text>
+              </Flex>
+            </button>
+          )}
+        </FileButton>
+
+        <button className={styles.modalButton}>
+          <Flex direction="column" align="center">
+            <ActionIcon variant="transparent">
+              <IconTrash stroke={2} className={styles.icon} />
+            </ActionIcon>
+            <Text style={{ cursor: 'pointer' }}>Delete</Text>
+          </Flex>
+        </button>
+      </Flex>
+    </Box>
+  );
+};

web/src/app/components/Modal/EditBannerModal.tsx

@@ -0,0 +1,43 @@
+import { Box, Divider, Flex, ActionIcon, Text, Image, FileButton } from '@mantine/core';
+import styles from './Modal.module.css';
+import { IconPencil } from '@tabler/icons-react';
+import { IconTrash } from '@tabler/icons-react';
+import { useState } from 'react';
+
+interface EditBannerModalProps {
+  banner: string;
+}
+
+export const EditBannerModal = ({ banner }: EditBannerModalProps) => {
+  const [file, setFile] = useState<File | null>(null);
+  return (
+    <Box>
+      <Flex align="center" justify="center" className={styles.bannerWrapper}>
+        <Image src={banner} className={styles.banner} />
+      </Flex>
+      <Divider size="md" />
+      <Flex justify="space-between">
+        <FileButton onChange={setFile} accept="image/png,image/jpeg">
+          {(props) => (
+            <button {...props} className={styles.modalButton}>
+              <Flex direction="column" align="center">
+                <ActionIcon variant="transparent">
+                  <IconPencil stroke={2} className={styles.icon} />
+                </ActionIcon>
+                <Text style={{ cursor: 'pointer' }}>Add Photo</Text>
+              </Flex>
+            </button>
+          )}
+        </FileButton>
+        <button className={styles.modalButton}>
+          <Flex direction="column" align="center">
+            <ActionIcon variant="transparent">
+              <IconTrash stroke={2} className={styles.icon} />
+            </ActionIcon>
+            <Text style={{ cursor: 'pointer' }}>Delete</Text>
+          </Flex>
+        </button>
+      </Flex>
+    </Box>
+  );
+};

web/src/app/components/Modal/EditModal.tsx

@@ -0,0 +1,39 @@
+import { Modal, Box, Button } from '@mantine/core';
+import { IconXboxX } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import styles from './Modal.module.css';
+
+type ModalProp = {
+  opened: boolean;
+  close: () => void;
+  content: ReactNode;
+  title: string;
+};
+
+export default function EditModal({ opened, close, content, title }: ModalProp) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      closeButtonProps={{
+        icon: <IconXboxX size={50} stroke={2} color="#ffffff" />,
+      }}
+      centered
+      size="100%"
+      classNames={{
+        content: styles.content,
+        body: styles.body,
+        title: styles.title,
+      }}
+      title={title}
+    >
+      {content}
+      <Box className={styles.buttonContainer}>
+        <Button className={styles.button1} onClick={close}>
+          Cancel
+        </Button>
+        <Button className={styles.button2}>Save</Button>
+      </Box>
+    </Modal>
+  );
+}

web/src/app/components/Modal/EditStudentProfile.tsx

@@ -0,0 +1,89 @@
+import { Tabs, Box, Button, Select, Divider, Modal } from '@mantine/core';
+import { AboutTab } from '../Tabs/AboutTab';
+import { EducationTab } from '../Tabs/EducationTab';
+import { SkillsTab } from '../Tabs/SkillsTab';
+import { CVTab } from '../Tabs/CVTab';
+import styles from './Modal.module.css';
+import { useMediaQuery } from '@mantine/hooks';
+import { useState } from 'react';
+
+export const EditStudentProfile = () => {
+  const [activeTab, setActiveTab] = useState('about');
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const tabOptions = [
+    { value: 'about', label: 'About Me' },
+    { value: 'education', label: 'Education' },
+    { value: 'skills', label: 'Skills' },
+    { value: 'cv', label: 'CV' },
+  ];
+
+  const isMobile = useMediaQuery('(max-width: 430px)'); //mobile screen
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'about':
+        return <AboutTab />;
+      case 'education':
+        return <EducationTab />;
+      case 'skills':
+        return <SkillsTab />;
+      case 'cv':
+        return <CVTab />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Box>
+      {isMobile ? ( //conditionally render mobile tab dropdown
+        <>
+          <Select
+            data={tabOptions}
+            value={activeTab}
+            onChange={(value) => setActiveTab(value as string)}
+            classNames={{
+              wrapper: styles.selectWrapper,
+              input: styles.selectInput,
+              dropdown: styles.selectDropdown,
+            }}
+          />
+          <Divider size="md" mt={20} />
+          <Box mt={20}>{renderContent()}</Box>
+        </>
+      ) : (
+        <Tabs
+          color="#ff8400"
+          defaultValue="about"
+          classNames={{
+            root: styles.tabRoot,
+            list: styles.list,
+            panel: styles.panel,
+            tabLabel: styles.tabLabel
+          }}
+        >
+          <Tabs.List>
+            {tabOptions.map((tab) => (
+              <Tabs.Tab key={tab.value} value={tab.value}>
+                {tab.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          <Tabs.Panel value="about" mt={30}>
+            <AboutTab />
+          </Tabs.Panel>
+          <Tabs.Panel value="education" mt={30}>
+            <EducationTab />
+          </Tabs.Panel>
+          <Tabs.Panel value="skills" mt={30}>
+            <SkillsTab />
+          </Tabs.Panel>
+          <Tabs.Panel value="cv" mt={30}>
+            <CVTab />
+          </Tabs.Panel>
+        </Tabs>
+      )}
+    </Box>
+  );
+};