Merge pull request #4 from hotungkhanh/kan-24/enrolment-page

kan-24/enrolment page
hotungkhanh · Aug 24, 2024 · 5eb39a2 · 5eb39a2
2 parents f93bea2 + e5f2b93
commit 5eb39a2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git a/frontend/src/assets/frontpage.jpg b/frontend/src/assets/frontpage.jpg
diff --git a/frontend/src/components/UploadPopUp.tsx b/frontend/src/components/UploadPopUp.tsx
@@ -37,7 +37,7 @@ export default function UploadPopUp() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <ModalContent sx={{ width: 600, height: 400 }}>
+        <ModalContent sx={{ width: 500, height: 120 }}>
           <DisplayFile fileChosen={fileChosen}/>
           <UploadButton setFileChosen={setFileChosen}></UploadButton>
           <ProceedButton fileChosen={fileChosen}></ProceedButton>

diff --git a/frontend/src/pages/Enrolment.tsx b/frontend/src/pages/Enrolment.tsx
@@ -3,15 +3,30 @@ import "../styles/enrolment.css";
 import UploadPopUp from "../components/UploadPopUp.tsx";
 import Header from "../components/Header.tsx";
 import Footer from "../components/Footer.tsx";
-
+import Photo from "../assets/frontpage.jpg";
 export default function StarterPage() {
+  const timeStyle = {
+    color: "#f05a22",
+    fontStyle: "italic",
+  };
+  const tablerStyle = {
+    color: "black",
+  };
   return (
     <Box className="app-container">
-      <Header/>
+      <Header />
       <Box className="content">
-        <UploadPopUp></UploadPopUp>
+        <Box className="description">
+          <span style={timeStyle}>Time</span>
+          <span style={tablerStyle}>tabler</span>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta obcaecati blanditiis eaque harum ipsa aut sint cupiditate non atque nam nobis dolorem quo odit totam officia, sunt eligendi illum unde voluptas fugit modi sapiente amet. Qui voluptates, veritatis, eligendi odit, quod pariatur sed laborum possimus minima aliquid illum beatae est! Quam facilis esse inventore, quia repellendus consectetur totam nulla corporis.</p>
+          <UploadPopUp></UploadPopUp>
+        </Box>
+        <Box className="imageBox">
+          <img src={Photo} alt="logo.exe" width="900" height="auto"/>
+        </Box>
       </Box>
-      <Footer/>
+      <Footer />
     </Box>
   );
 }
diff --git a/frontend/src/styles/enrolment.css b/frontend/src/styles/enrolment.css
@@ -8,9 +8,28 @@
 /* Content area that grows to fill space */
 .content {
   flex: 1; /* This allows the content to grow and push the footer down */
-  padding: 20px;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 
+.description {
+  margin: 20%;
+}
+
+.description span {
+  font-size: 50px;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.description p {
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.imageBox {
+  overflow: hidden; /* Hide any overflow content */
+  position: relative;
+}
 body {
     margin: 0;
     padding: 0;