Merge pull request #629 from bounswe/frontend/feature/moderationFinal…

…Page

Frontend/feature/moderation final page

prediction-polls/frontend/src/Components/Modals/JuryModal.jsx

@@ -0,0 +1,52 @@
+// JuryModal.js
+import React from 'react';
+import { Modal } from 'antd';
+import useModal from '../../contexts/ModalContext/useModal';
+import { ModalNames } from '../../contexts/ModalContext/ModalNames';
+import styles from './JuryModal.module.css';
+
+const JuryModal = () => {
+  const { modals, closeModal,setJuryCheckboxState } = useModal();
+
+  const handleCancel = () => {
+    closeModal(ModalNames.JuryTermsModal);
+  };
+
+  const handleOK = () => {
+    setJuryCheckboxState(true); 
+    closeModal(ModalNames.JuryTermsModal); 
+  };
+
+  return (
+    <Modal
+      title="Jury Terms"
+      open={modals[ModalNames.JuryTermsModal]}
+      onCancel={handleCancel}
+      onOk={handleOK}
+      okText="I Agree"
+      cancelText="Cancel"
+    >
+      <div className={styles.juryRules}>
+        <p>Before proceeding to make a decision on the poll in question, please carefully review and agree to the following terms:</p>
+
+        <p><strong>1. Impartiality:</strong> I affirm that I have no personal or financial interest in the outcomes of this poll and that I have not participated in the poll. I commit to making an unbiased decision based solely on the poll's content and the evidence provided.</p>
+
+        <p><strong>2. Confidentiality:</strong> I understand that my role as a jury member is a position of trust. I agree not to disclose or discuss any details of the poll or its deliberation process outside the official channels provided by the platform.</p>
+
+        <p><strong>3. Knowledge and Honesty:</strong> I acknowledge that I am making decisions based on the tags I am interested in and knowledgeable about. I will conduct any necessary research and fact-checking to ensure the accuracy of my decision.</p>
+
+        <p><strong>4. Respect and Civility:</strong> I commit to engaging respectfully and constructively with the poll and fellow jury members. I understand that my role is to contribute positively to the community and uphold the platform's standards.</p>
+
+        <p><strong>5. Rule Adherence:</strong> I have read and understood the platform's rules and guidelines for jury members, including the consequences of any misconduct or failure to act responsibly. I agree to adhere to these rules throughout the decision-making process.</p>
+
+        <p><strong>6. Timely Participation:</strong> I understand the importance of making a timely decision within the 24-hour timeframe and commit to adhering to this schedule to ensure the smooth functioning of the platform.</p>
+
+        <p><strong>7. Ethical Conduct:</strong> I promise to conduct myself ethically and responsibly, recognizing the impact my decision may have on the poll's creator, participants, and the platform community.</p>
+
+        <p>By clicking "I Agree," you affirm your understanding and commitment to these terms and the responsibilities of being a jury member. Your thoughtful and fair participation is crucial to maintaining the integrity and quality of our community's decision-making process.</p>
+      </div>
+    </Modal>
+  );
+};
+
+export default JuryModal;

prediction-polls/frontend/src/Components/Modals/JuryModal.module.css

@@ -0,0 +1,16 @@
+.juryRules {
+    font-size: 14px; 
+    color: #333; 
+    line-height: 1.5; 
+    overflow-y: auto; 
+    max-height: 60vh; 
+    padding: 20px; 
+  }
+
+  .juryRules p {
+    margin-bottom: 10px; 
+  }
+
+  .juryRules strong {
+    font-weight: bold; 
+  }

prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css

@@ -5,7 +5,6 @@
   flex-direction: column;
   box-sizing: border-box;
   align-items: center;
-  padding-top: 20px;
   padding-bottom: 20px;
   background-color: var(--primary-50);
   justify-content: space-between;
@@ -38,8 +37,8 @@
 }
 
 .logo {
-  height: 8%;
-  width: 250px;
+  height: 9.6%;
+  width: 270px;
   display: flex;
   justify-content: center;
   align-items: center;

prediction-polls/frontend/src/Components/Sidebar/index.jsx

@@ -7,7 +7,7 @@ import ModerationIcon from "../../Assets/icons/ModerationIcon.jsx";
 import LeaderboardIcon from "../../Assets/icons/LeaderboardIcon.jsx";
 import NotificationsIcon from "../../Assets/icons/NotificationsIcon.jsx";
 import SettingsIcon from "../../Assets/icons/SettingsIcon.jsx";
-import { ReactComponent as Logo } from "../../Assets/Logo.svg";
+import { ReactComponent as Logo } from "../../Assets/RectNewLogo.svg";
 import styles from "./Sidebar.module.css";
 import { useNavigate } from "react-router-dom";
 import logout from "../../api/requests/logout.jsx";

prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css

@@ -10,8 +10,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: space-evenly;
   padding: 20px;
+  max-height: 85%;
 }
 
 .animationStyle {
@@ -42,20 +43,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 22px 0px;
+  padding: 12px 0px;
   width: 100%;
-  background: var(--primary-500);
+  background: var(--primary-500) ;
   color: var(--neutral-white);
+  border:none;
+  border-radius: 8px;
 }
 .formButtonStyle:hover {
   background: var(--primary-600);
 }
 
 .logoStyle {
   color: var(--neutral-100);
-  margin-bottom: 20px;
-  max-width: 80%;
-  max-height: 80%;
+  max-width: 30%;
+  max-height: 30%;
 }
 
 .googleLogoStyle {
@@ -67,7 +69,7 @@
 }
 
 .signUpStyle {
-  color: var(--primary-500);
+  color: var(--primary-500) !important;
 }
 
 .passwordDivStyle {

prediction-polls/frontend/src/Pages/Auth/SignIn/index.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import styles from "./SignIn.module.css";
 import { Button, Input, Form, Divider, Typography } from "antd";
-import { ReactComponent as Logo } from "../../../Assets/Logo.svg";
+import { ReactComponent as Logo } from "../../../Assets/NewLogo.svg";
 import { ReactComponent as SignPageAnimation } from "../../../Assets/SignPageAnimation.svg";
 import { ReactComponent as GoogleLogo } from "../../../Assets/icons/GoogleIcon.svg";
 import { useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";
-import getGoogleOAuthURL from "../../../Config/googleOAuth"
+import getGoogleOAuthURL from "../../../Config/googleOAuth";
 const { Text } = Typography;
 
 function SignIn() {
@@ -23,42 +23,49 @@ function SignIn() {
     e.preventDefault();
     try {
       const requestOptions = {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           username: username,
-          password: password
-        })
+          password: password,
+        }),
       };
-      const response = await fetch(process.env.REACT_APP_BACKEND_LINK+'/auth/login', requestOptions);
+      const response = await fetch(
+        process.env.REACT_APP_BACKEND_LINK + "/auth/login",
+        requestOptions
+      );
       const data = await response.json();
-
-    if (response.status === 201 && data.accessToken && data.refreshToken) {
-      localStorage.setItem('accessToken', data.accessToken); 
-      localStorage.setItem('refreshToken', data.refreshToken);
-      localStorage.setItem('username', username);
-      navigate("/feed");
-    } 
 
-    }
-    catch (error) {
-      setMessage("An unexpected error has occurred. Please try again!")
+      if (response.status === 201 && data.accessToken && data.refreshToken) {
+        localStorage.setItem("accessToken", data.accessToken);
+        localStorage.setItem("refreshToken", data.refreshToken);
+        localStorage.setItem("username", username);
+        navigate("/feed");
+      }
+    } catch (error) {
+      setMessage("An unexpected error has occurred. Please try again!");
     }
   };
 
   return (
     <div className={styles.splitContainerStyle}>
       <div className={styles.formContainerStyle}>
         <Link to="/home" className={styles.logoStyle}>
-          <Logo />
+          <Logo width={150} height={150} />
         </Link>
-        <Form className = {{...styles.formItemLayout,labelCol: { span: 24 }, wrapperCol: { span: 24 }}}>
+        <Form
+          className={{
+            ...styles.formItemLayout,
+            labelCol: { span: 24 },
+            wrapperCol: { span: 24 },
+          }}
+        >
           <Form.Item>
             <div>
-              <Button className={styles.formButtonStyle} onClick={handleLogin}>
+              <button className={styles.formButtonStyle} onClick={handleLogin}>
                 <GoogleLogo className={styles.googleLogoStyle} />
                 <span>Sign In with Google</span>
-              </Button>
+              </button>
             </div>
           </Form.Item>
           <Form.Item>
@@ -86,30 +93,40 @@ function SignIn() {
                 }}
                 onChange={(e) => setPassword(e.target.value)}
               />
-              <Link to="/auth/forgot-password" className={styles.forgotPasswordStyle}>
+              <Link
+                to="/auth/forgot-password"
+                className={styles.forgotPasswordStyle}
+              >
                 Forgot Password?
               </Link>
             </div>
           </Form.Item>
           <Form.Item>
-            <Button className={styles.formButtonStyle} onClick={handleSignIn}>LOG IN</Button>
+            <button className={styles.formButtonStyle} onClick={handleSignIn}>
+              LOG IN
+            </button>
           </Form.Item>
           <Form.Item>
             <div className={styles.displayCenterStyle}>
               <span>Don't have an account?</span>
-              <Button type="link" className={styles.signUpStyle} onClick={() => navigate("/auth/sign-up")}>
+              <Button
+                type="link"
+                className={styles.signUpStyle}
+                onClick={() => navigate("/auth/sign-up")}
+              >
                 Sign Up
               </Button>
             </div>
           </Form.Item>
+          <div className={styles.messageStyle}>
+            {message ? <p>{message}</p> : null}
+          </div>
         </Form>
-        <div className={styles.messageStyle}>{message ? <p>{message}</p> : null}</div>
       </div>
       <div className={styles.imageStyle}>
         <SignPageAnimation className={styles.animationStyle} />
       </div>
-    </div >
-
+    </div>
   );
 }