Merge pull request #1163 from hshareef9/1150-redesigned-aspects-of-ou…

…r-policies

redesigned core values of policies

components/Policies/PolicyPage.module.css

@@ -3,55 +3,59 @@
  font-family: "Nunito";
 }
 
+.sharedValues {
+ font-size: 1rem;
+ font-weight: 700;
+ color: #1a3185;
+ text-align: justify;
+ margin-top: 1rem;
+ margin-bottom: 0.5rem;
+}
+
 .subHeading {
- font-size: 1.5rem;
  font-weight: bold;
- margin-top: 0;
- margin-left: 0.2rem;
- margin-bottom: 0.4rem;
- letter-spacing: -0.625px;
- text-align: center;
- width: 100%;
 }
 
-.subHeading2 {
- font-size: 1rem;
- margin-top: 0;
- margin-left: 0.2rem;
- margin-bottom: 0.4rem;
- letter-spacing: -0.625px;
- text-align: center;
- width: 100%;
+.text1 {
+ font-weight: 400;
 }
 
-.subHeading2Underlined {
- font-size: 1rem;
- text-decoration: underline;
- margin-top: 0;
- margin-left: 0.2rem;
- margin-bottom: 0.4rem;
- letter-spacing: -0.625px;
- text-align: center;
- width: 100%;
+.text2 {
+ margin-bottom: 1.5rem;
+}
+
+.boxContainer {
+ display: flex;
+ justify-content: space-evenly;
+}
+
+.blueBox {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 325px;
+ height: 100px;
+ background: #1a3185;
+ border-radius: 10px;
 }
 
-.subHeading2Bold {
+.symbol {
+ width: 60px;
+ height: 55px;
+}
+
+.values {
+ font-family: "Nunito";
+ font-style: normal;
+ font-weight: 700;
  font-size: 1rem;
- font-weight: bold;
- margin-top: 0;
- margin-left: 0.2rem;
- margin-bottom: 2rem;
- letter-spacing: -0.625px;
- text-align: center;
- width: 100%;
+ color: white;
+ padding-top: 1rem;
 }
 
 hr.bottomBorder {
  border-bottom: 2px solid rgba(0, 0, 0, 100%);
- width: 50%;
- margin-top: 0;
- margin-left: 25%;
- margin-right: 25%;
+ width: 100%;
 }
 
 /* ---------- Policy Links --------------*/

components/Policies/PolicyPage.tsx

@@ -1,8 +1,9 @@
 import { PolicyContent } from "./PolicyContent"
-import { Button, Stack, Container } from "react-bootstrap"
+import { Button, Stack, Container, Image, Row, Col } from "react-bootstrap"
 import { ButtonHTMLAttributes, useEffect, useState } from "react"
 import style from "./PolicyPage.module.css"
 import Router from "next/router"
+import classNames from "classnames"
 
 const policies = ["copyright", "privacy-policy", "code-of-conduct"] as const
 export type Policy = (typeof policies)[number]
@@ -17,22 +18,8 @@ export default function PolicyPage({
  }
 
  return (
- <Container className={style.policyContent}>
- <h1>Terms of Service</h1>
- <span>
- <p className={style.subHeading}>Our Shared Values</p>
- <hr className={style.bottomBorder}></hr>
- <p className={style.subHeading2Underlined}>
- How we interact with each other determines what we can accomplish.
- </p>
- <p className={style.subHeading2}>
- On this website, we ask you to act with:
- </p>
- <p className={style.subHeading2Bold}>
- Compassion, Curiosity, and Humility
- </p>
- </span>
-
+ <Container fluid className={style.policyContent}>
+ <h1>Policies</h1>
  <Stack direction="horizontal">
  <Button
  className={`${
@@ -48,8 +35,9 @@ export default function PolicyPage({
  id="copyright"
  onClick={e => handleOnClick("copyright")}
  >
- Copyright <br />
+ Terms of Service <br />
  </Button>
+
  <Button
  className={`${
  style[policy === "code-of-conduct" ? "currentTab" : "tab"]
@@ -62,6 +50,51 @@ export default function PolicyPage({
  </Stack>
 
  <PolicyContent policy={policy} />
+
+ <div className={style.sharedValues}>
+ <p className={style.subHeading}>Our Shared Values</p>
+ <hr className={style.bottomBorder}></hr>
+ <p className={style.text1}>
+ How we interact with each other determines what we can accomplish
+ </p>
+ <p className={style.text2}>On this website, we ask you to act with:</p>
+ </div>
+
+ <Container fluid>
+ <Row
+ className={classNames(
+ style.boxContainer,
+ "row-fluid",
+ "gx-5",
+ "gy-3"
+ )}
+ >
+ <Col xs={12} className={style.blueBox}>
+ <Image
+ src="handShake.jpg"
+ alt="hand shake"
+ className={style.symbol}
+ ></Image>
+ <p className={style.values}>Humility</p>
+ </Col>
+ <Col xs={12} className={style.blueBox}>
+ <Image
+ src="compassion.png"
+ alt="cupped hand holding heart"
+ className={style.symbol}
+ ></Image>
+ <p className={style.values}>Compassion</p>
+ </Col>
+ <Col xs={12} className={style.blueBox}>
+ <Image
+ src="lightBulb.png"
+ alt="lightbulb"
+ className={style.symbol}
+ ></Image>
+ <p className={style.values}>Curiosity</p>
+ </Col>
+ </Row>
+ </Container>
  </Container>
  )
 }

public/code-of-conduct.md

@@ -2,7 +2,7 @@
 # Code of Conduct
 + ## Rules for Moderation 
 + ---
-+ - A team of Massachusetts moderators, including members of the MAPLE development team and others trained by them, have been entrusted to review each testimony that is published on MAPLE.
++ - A team of Massachusetts moderators trained by members of the MAPLE organization has been entrusted to review each testimony that is published on MAPLE.
 + - We reserve the right to delete testimonies that violate our Community Guidelines or that, in our sole discretion, we consider objectionable in accordance with the Community Guidelines.
 + - We reserve the right to freeze your account if you post testimonies that violate our Community Guidelines or that, in our sole discretion, we consider objectionable in accordance with the Community Guidelines.
 
@@ -17,6 +17,6 @@
 + - You may not threaten or promote violence against an individual or a group of people.
 + - You may not threaten or promote terrorism or violent extremism.
 + - You may not engage in the targeted harassment of someone.
-+ - You may not promote violence against, threaten, or harass other people on the basis of race, ethnicity, national origin, sexual orientation, gender, gender identity, religious affiliation, age, or disability.
++ - You may not promote violence against, threaten, or harass other people on the basis of race, ethnicity, national origin, sexual orientation, sex, gender, gender identity, religious affiliation, age, or disability.
 + - You may not use our service for any unlawful purpose or in furtherance of illegal activities. 
 + - You may not publish or post other people's private information, including names, physical addresses, email addresses, and phone numbers.

public/copyright.md

@@ -1,7 +1,14 @@
+# Terms of Service 
+
 + ## Copyright
 + ---
 + - If you believe that any content residing or accessible on or through MAPLE infringes a copyright, please contact us at info@mapletestimony.org. 
 + - You understand that by submitting your testimony to MAPLE you are making it available to MAPLE under an express license that allows reproduction.
 + - This work is licensed under CC BY 4.0
 + - This work is licensed under Attribution 4.0 International
 
+---
+
++ ## Newsletter
++ ---
++ - We may send newsletters via email to MAPLE members. You can unsubscribe from these newsletters at any time by using the “Unsubscribe” link in the emails themselves. We never share with or sell your email to third party providers.

public/privacy-policy.md

@@ -17,7 +17,7 @@
 
 ---
 
-+ ## Information and How We Use It
++ ## Information We Collect and How We Use It 
 + ---
 + ### Account Information:
 + - If you create an account, you must provide us with some Personal Information so that we can provide our services to you. 
@@ -75,10 +75,4 @@ Administrative communications relating to your account (e.g., for purposes of ac
 
 + ## Where to Direct Questions or Concerns
 + ---
-+ - If you have any questions or concerns regarding our Privacy Policy, you can contact us at: info@mapletestimony.org
-
----
-
-+ ## Newsletter
-+ ---
-+ - We may send newsletters via email to MAPLE members. You can unsubscribe from these newsletters at any time by using the “Unsubscribe” link in the emails themselves. We never share with or sell your email to third party providers. 
++ - If you have any questions or concerns regarding our Privacy Policy, you can contact us at: info@mapletestimony.org