Merge pull request #15 from TartejBrothers/Changes

Updated Project page
TartejBrothers · Jan 9, 2024 · dd984ab · dd984ab
2 parents 5453b28 + f393dae
commit dd984ab
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 30 deletions.
diff --git a/src/components/home.jsx b/src/components/home.jsx
@@ -26,7 +26,7 @@ export default function homepage() {
           <p>A Portal To Assist You In Your Attendance Calculations</p>
         </div>
         <div className="homeform">
-          <form>
+          <form className="loginform">
             <h4>Login with your Academia Details</h4>
             <div className="forminner">
               <p>Glad you’re back.!</p>

diff --git a/src/components/project.jsx b/src/components/project.jsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import "./styles/project.css";
 import "./styles/global.css";
+import "./styles/project.css";
 export default function ProjectPage() {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
@@ -14,27 +14,40 @@ export default function ProjectPage() {
       </h1>
       <div className="projectbody">
         <h5>Pick a single date or add a range</h5>
-        <div className="dateform">
-          <DatePicker
-            wrapperClassName="datePicker"
-            placeholderText="Select Start Date"
-            selected={startDate}
-            selectsStart
-            startDate={startDate}
-            endDate={endDate}
-            onChange={(date) => setStartDate(date)}
-          />
-          <DatePicker
-            wrapperClassName="datePicker"
-            selected={endDate}
-            selectsEnd
-            startDate={startDate}
-            placeholderText="Select End Date"
-            endDate={endDate}
-            minDate={startDate}
-            onChange={(date) => setEndDate(date)}
-          />
+        <form>
+          <div className="dateform">
+            <DatePicker
+              wrapperClassName="datePicker"
+              placeholderText="Select Start Date"
+              selected={startDate}
+              selectsStart
+              startDate={startDate}
+              endDate={endDate}
+              onChange={(date) => setStartDate(date)}
+            />
+            <DatePicker
+              wrapperClassName="datePicker"
+              selected={endDate}
+              selectsEnd
+              startDate={startDate}
+              placeholderText="Select End Date"
+              endDate={endDate}
+              minDate={startDate}
+              onChange={(date) => setEndDate(date)}
+            />
+            <button type="submit" className="submitbutton">
+              Add To Records
+            </button>
+          </div>
+        </form>
+      </div>
+      <div className="datesadded">
+        <div className="datemain">
+          <h5>Dates Added</h5>
         </div>
+        <div className="datebody">15th November</div>
+        <div className="datebody">18th November</div>
+        <div className="datebody">22nd - 30th November </div>
       </div>
     </div>
   );

diff --git a/src/components/styles/home.css b/src/components/styles/home.css
@@ -1,4 +1,3 @@
-
 .homecontent {
   display: flex;
   height: 100vh;
@@ -33,7 +32,7 @@
 .homeheader p {
   font-size: 24px;
 }
-.homeform form {
+.loginform {
   z-index: 10;
   display: flex;
   flex-direction: column;
@@ -57,14 +56,14 @@
   background-image: url("../images/formbg.png");
   padding-inline: 20px;
 }
-form h4 {
+.loginform h4 {
   text-align: center;
   margin-block-start: 0;
   margin-block-end: 0;
   font-size: 26px;
 }
 
-form input[type="text"],
+.loginform input[type="text"],
 [type="password"] {
   display: flex;
   color: #ffffff;
@@ -76,7 +75,7 @@ form input[type="text"],
   width: calc(100% - 40px);
 }
 
-form input::placeholder {
+.loginform input::placeholder {
   color: #ffffff;
 }
 

diff --git a/src/components/styles/project.css b/src/components/styles/project.css
@@ -28,6 +28,7 @@ html {
 .react-datepicker {
   border-radius: 20px;
 }
+
 .react-datepicker__input-container input {
   width: 50vw;
   background: none;
@@ -41,7 +42,7 @@ html {
 }
 .react-datepicker__month-container {
   padding: 40px;
-  width: calc(50vw - 80px);
+  width: calc(50vw - 40px);
 }
 .react-datepicker__day-names {
   background-color: #ffffff;
@@ -56,9 +57,60 @@ html {
 }
 
 .react-datepicker__day--selected {
-  background: rgba(0, 173, 181, 0.73);
+  background: #b9e0e1;
 }
 .react-datepicker__day--in-selecting-range,
 .react-datepicker__day--in-range {
-  background-color: rgba(0, 173, 181, 0.22);
+  background-color: #b9e0e1;
+}
+.react-datepicker__navigation {
+  margin-top: 8px;
+}
+.submitbutton {
+  display: flex;
+  padding: 14px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  width: calc(50vw + 40px);
+  border-radius: 20px;
+  background: radial-gradient(
+    100% 100% at 100% 100%,
+    rgba(0, 173, 181, 1) 0%,
+    rgba(0, 173, 181, 1) 100%
+  );
+  border: none;
+  color: #ffffff;
+  font-size: 20px;
+  margin-bottom: 80px;
+}
+.datesadded {
+  display: flex;
+  background-color: #ffffff;
+  color: rgba(34, 40, 49, 1);
+  border-radius: 50px;
+  overflow-x: scroll;
+
+  gap: 20px;
+}
+.datesadded::-webkit-scrollbar {
+  display: none;
+}
+.datemain {
+  background-color: rgba(0, 173, 181, 0.5);
+  padding: 5px 20px;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+}
+.datemain h5 {
+  font-size: 20px;
+}
+.datebody {
+  background-color: #b9e0e1;
+  padding: 10px 20px;
+  font-size: 18px;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
 }