redesign profile page

frontend/components/EditProfile.jsx

@@ -0,0 +1,113 @@
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { useRouter } from 'next/router';
+import Button from "./Button";
+import { useEffect } from "react";
+const EditProfile = ({ uname, aname, eno, contact, email, field, pfp }) => {
+    const { data: session } = useSession();
+    const [editProfile, setEdit] = useState(true);
+    const [formName, setName] = useState("");
+    const [formEmail, setEmail] = useState("");
+    const [formEno, setEno] = useState("");
+    const [formContact, setContact] = useState("");
+    const [formField, setField] = useState("");
+    const [fieldColor, setColor] = useState("rgba(255, 255, 255, 0.4)");
+    async function setData(e) {
+        e.preventDefault();
+        let data = {
+            access_token: session.accessToken,
+            id_token: session.user.id,
+            name: formName ? formName : aname,
+            email: formEmail ? formEmail : email,
+            enrollmentNo: formEno ? formEno : eno,
+            contactNo: formContact ? formContact : contact,
+            field: formField ? formField : field,
+        };
+
+        axios.post(`${process.env.NEXT_PUBLIC_BACKEND_URL}api/set-user/`, data, { headers: { "Content-Type": "application/json" } }).then(() => {
+            window.location.reload();
+        });
+    }
+
+    useEffect(()=>{
+        if(formField=="Developer" || formField=="Designer")
+        setColor("rgba(255, 255, 255)")
+    })
+
+    return (
+        <>
+            <div className="signup">
+                <form className="signupForm" onSubmit={setData}>
+                    <div className="formAvatar">
+                        <div
+                            className="formImage"
+                            style={{
+                                backgroundImage: `url(${pfp})`,
+                            }}
+                        ></div>
+                        <div className="userHandleForm">{uname}</div>
+                        <select name="field" onChange={(e) => setField(e.target.value)} className="roleDropDown" style={{color:fieldColor}}>
+                            <option value="" disabled selected hidden>{field}</option>
+                            <option className="options1" value="Developer">Developer</option>
+                            <option className="options2" value="Designer">Designer</option>
+                        </select>
+                    </div>
+                    <div className="userDetailsForm">
+                        <div className="formEdit">
+                            <label>ACTUAL NAME</label>
+                            <input
+                                type="text"
+                                placeholder={aname}
+                                className="input"
+                                onChange={(e) => setName(e.target.value)}
+                                value={formName}
+                            />
+                        </div>
+                        <div className="formEdit">
+                            <label>ENROLMENT NO</label>
+                            <input
+                                type="text"
+                                placeholder={eno}
+                                pattern="[0-9]{8}"
+                                className="input"
+                                title="enrollment number should contain only 8 numeric digits"
+                                onChange={(e) => setEno(e.target.value)}
+                                value={formEno}
+                            />
+                        </div>
+                        <div className="formEdit">
+                            <label>CONTACT NO</label>
+                            <input
+                                type="tel"
+                                placeholder={contact}
+                                pattern="[0-9]{10}"
+                                title="phone number should contain only 10 numeric digits"
+                                className="input"
+                                onChange={(e) => setContact(e.target.value)}
+                                value={formContact}
+                            />
+                        </div>
+                        <div className="formEdit">
+                            <label>EMAIL ID</label>
+                            <input
+                                type="email"
+                                placeholder={email}
+                                className="input"
+                                onChange={(e) => setEmail(e.target.value)}
+                                value={formEmail}
+                            />
+                        </div>
+                        <div    className="submitProfile">
+                            <Button type="submit" text={"Sign Up"} />
+                        </div>
+
+                    </div>
+                </form>
+            </div>
+        </>
+    );
+};
+
+export default EditProfile;

frontend/components/MergedCard.jsx

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+
+const MergedCard = ({ Card }) => {
+  return (
+    <div className="mergedCard" >
+      <div className="requestsTop">
+        <p className='top'>{Card.username}/ {Card.pr_repo}/ {Card.pr_branch} -&gt;</p>
+        <p className='top'>{Card.pr_repo}/ master</p>
+      </div>
+      <div className="requestsTitle">
+        <p className='prTitle'>{Card.pr_title}</p>
+      </div>
+    </div>
+  );
+};
+export default MergedCard;

frontend/components/MergedList.jsx

@@ -0,0 +1,11 @@
+import MergedCard from "./MergedCard";
+
+const MergedList= ({ list}) => {
+    return (
+        list.map((Card, i) => {
+            return <MergedCard Card={Card} key={i} />;
+        })
+    );
+};
+
+export default MergedList;

frontend/components/PendingCard.jsx

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+
+const PendingCard = ({ Card}) => {
+
+  return (
+    <div className="pendingCard" >
+      <div className="requestsTop">
+        <p className='top'>{Card.username}/ {Card.pr_repo}/ {Card.pr_branch} -&gt;</p>
+        <p className='top'>{Card.pr_repo}/ master</p>
+      </div>
+      <div className="requestsTitle">
+        <p className='prTitle'>{Card.pr_title}</p>
+      </div>
+    </div>
+  );
+};
+export default PendingCard

frontend/components/Profile.jsx

@@ -3,149 +3,57 @@ import { useSession } from "next-auth/react";
 import PropTypes from "prop-types";
 import { useState } from "react";
 import Button from "./Button";
-import { useRouter } from 'next/router';
 
-const Profile = ({ uname, aname, role, eno, contact, email, pfp }) => {
+const Profile = ({ uname, aname, role, eno, contact, email, pfp, rank }) => {
   const { data: session } = useSession();
-  const [editProfile, setEdit] = useState(true);
   const [formName, setName] = useState("");
   const [formEmail, setEmail] = useState("");
   const [formEno, setEno] = useState("");
   const [formContact, setContact] = useState("");
   const [formField, setField] = useState("Developer");
-  const router = useRouter();
 
-  if (router.query.details == 0) {
-    editProfile = false;
-  }
-
-
-  async function setData(e) {
-    e.preventDefault();
-    let data = {
-      access_token: session.accessToken,
-      id_token: session.user.id,
-      name: formName ? formName : aname,
-      email: formEmail ? formEmail : email,
-      enrollmentNo: formEno ? formEno : eno,
-      contactNo: formContact ? formContact : contact,
-      field: formField ? formField : field,
-    };
-
-    axios.post(`${process.env.NEXT_PUBLIC_BACKEND_URL}api/set-user/`, data, { headers: { "Content-Type": "application/json" } }).then(() => {
-      window.location.reload();
-    });
-  }
 
   return (
-    <div className="signup">
-      <form className="user-form" onSubmit={setData}>
+    <div className="userCard">
+      <div className="user-form">
         <div className="avatar">
           <div
             className="imageCropper"
             style={{
               backgroundImage: `url(${pfp})`,
             }}
           ></div>
-          <div className="labels">
-            <label className="userHandle" >{uname}</label>
-            <label className="actualName">{aname}</label>
-            {editProfile === true ? (
-              <label className="role">{role}</label>
-            ) : (
-              true
-            )}
-          </div>
-          {editProfile === true && (
-            <div>
-              <input
-                type="image"
-                className="edit"
-                src="images/edit.svg"
-                onClick={() => {
-                  setEdit(false);
-                }}
-              />
-            </div>
-          )}
         </div>
-        {editProfile && <hr />}
-        {editProfile === true ? (
-          <div className="user-details">
-            <div className="form-floating">
-              <label className="detail-label">ACTUAL NAME</label>
-              <label className="details">{aname}</label>
-            </div>
-            <div className="form-floating">
-              <label className="detail-label">ENROLMENT NO</label>
-              <label className="details">{eno}</label>
-            </div>
-            <div className="form-floating">
-              <label className="detail-label">CONTACT NO</label>
-              <label className="details">{contact}</label>
-            </div>
-            <div className="form-floating">
-              <label className="detail-label">EMAIL ID</label>
-              <label className="details">{email}</label>
-            </div>
-          </div>
-        ) : (
-          <div className="user-details">
-            <div className="form-floating">
-              <label>ACTUAL NAME</label>
-              <input
-                type="text"
-                placeholder="ENTER YOUR NAME"
-                className="input"
-                onChange={(e) => setName(e.target.value)}
-                value={formName}
-              />
-            </div>
-            <div className="form-floating">
-              <label>ENROLMENT NO</label>
-              <input
-                type="text"
-                placeholder="ENTER ENROLLMENT NO."
-                pattern="[0-9]{8}"
-                className="input"
-                title="enrollment number should contain only 8 numeric digits"
-                onChange={(e) => setEno(e.target.value)}
-                value={formEno}
-              />
-            </div>
-            <div className="form-floating">
-              <label>CONTACT NO</label>
-              <input
-                type="tel"
-                placeholder="ENTER CONTACT NO."
-                pattern="[0-9]{10}"
-                title="phone number should contain only 10 numeric digits"
-                className="input"
-                onChange={(e) => setContact(e.target.value)}
-                value={formContact}
-              />
-            </div>
-            <div className="form-floating">
-              <label>EMAIL ID</label>
-              <input
-                type="email"
-                placeholder="ENTER EMAIL ID"
-                className="input"
-                onChange={(e) => setEmail(e.target.value)}
-                value={formEmail}
-              />
-            </div>
-            <div
-              style={{
-                height: "50px",
-              }}
-            >
-              <Button type="submit" text={"Sign Up"} />
-            </div>
+        <div className="labels">
+          <label className="userHandle">{uname}</label>
+          <label className="actualName capitalised">{aname}</label>
+          <label className="role">{role}</label>
+        </div>
 
+        <div className="user-details">
+          <div className="form-floating">
+            <label className="detail-label">ENROLMENT NO</label>
+            <label className="details">{eno}</label>
           </div>
-        )}
-      </form>
+          <div className="form-floating">
+            <label className="detail-label">CONTACT NO</label>
+            <label className="details">{contact}</label>
+          </div>
+          <div className="form-floating"> 
+            <label className="detail-label">EMAIL ID</label>
+            <label className="details">{email}</label>
+          </div>
+          <div className="form-floating">
+            <label className="detail-label">GITHUB HANDLE</label>
+            <label className="details">{uname}</label>
+          </div>
+          <div className="rankHandle">
+            <label className="userHandle">222</label>
+            <label className>#RANK</label>
+          </div>
+        </div>
+      </div>
+
     </div>
   );
 };

frontend/components/PullRequests.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const Issue = ({ Card }) => {
+  return (
+    <div className="pullbox">
+      <div
+        style={{
+          textAlign: "center",
+          margin: "1rem",
+        }}
+      >
+        <h4>
+          <b>
+
+          </b>
+        </h4>
+
+      </div>
+      <div className="mentor"></div>
+    </div>
+  );
+};
+
+export default Issue;