Added learn more, restyled add response

Author: bhaviksingh

data/siteText/learnMore_en.md

@@ -0,0 +1,16 @@
+Jose Miguel migrated to the United States when he was 14 years old. He has been in this country for 19 years and has spent 17 of them incarcerated. As is the case of many black, brown and immigrant youth, Jose Miguel was targeted and impacted by the criminal injustice system since a young age. This has left a scar on his life and his mental health, that he heals and processes through art. Jose Miguel is one of over 1,000 immigrant detainees held in Adelanto ICE Processing Center, a for-profit private prison owned by GEO Group. It is the largest immigration prison in California, and one of the largest in the country. It is one of three large prisons in Adelanto, a desert town of only 30,000 people.
+
+Since March 2020, family visitation in Adelanto has been suspended. Due to continued lockdowns, GEO group has additionally suspended use of video calls for most of the pandemic. For Jose, this has translated into almost complete isolation from the outside world, leaving him with the possibility of communicating with his loved ones exclusively through paid monitored phone calls or postal mail. The only free, private, unmonitored communications that Jose and other detainees currently have is with their attorneys. Similarly, the only in-person contact allowed is with attorneys. More recently, the USPS crisis has impacted isolation even more, for letters sent to and from prisons have been lost or are incredibly delayed. Throughout the years, [human rights groups](https://www.hrw.org/report/2017/05/08/systemic-indifference/dangerous-substandard-medical-care-us-immigration-detention) and [disability rights organizations](https://www.disabilityrightsca.org/post/there-is-no-safety-here-the-dangers-for-people-with-mental-illness-and-other-disabilities-at) have found substandard, life-threatening and inhumane conditions in Adelanto, especially for medically vulnerable detainees, that persist to this day. Despite suffering a severe mental disability, Jose Miguel has been placed in solitary confinement multiple times in the past, most recently in June 12, 2020, when [GEO guards assaulted detainees](https://www.latimes.com/california/story/2020-06-26/immigrants-detained-at-adelanto-staged-a-peaceful-protest-guards-in-riot-gear-pepper-sprayed-them) who were peacefully protesting against lockdowns and communication shutdowns, and used gas pepper spray against them.. In addition, Jose Miguel suffers medical conditions that make him particularly vulnerable to COVID-19, and despite this increased risk, he has not been released from detention. Not far from Adelanto, in [Mesa Verde ICE Processing Center](https://www.kqed.org/news/11833925/half-of-all-detainees-at-bakersfield-ice-facility-have-tested-positive-for-covid-19), another Immigration Prison owned by GEO Group, over 50% of the detainees are currently positive for COVID-19. Because transfers within prisons and detentions have not halted, and ICE and GEO continue to act with deliberate indifference, it is a matter of time for these conditions to replicate in Adelanto.
+
+These are the conditions under which Jose Miguel creates art and from which this project was born. Jose seeks to share and communicate with the “outside world”, his internal world that he creates and cultivates from inside prison. He calls to begin an ongoing conversation through engagement with art. The recurring themes found in Jose’s songs and poetry are love, decisions that young people make, and the experience of incarceration.
+
+For prisoners the difference between inside and outside can be everything. A [viewer of this portal, or a person who visits prisons] is not inside. But as more and more people listen and see, as our own archipelago becomes more and more difficult to ignore, we will understand that their inside surrounds us all. [Here](https://www.ucpress.edu/book/9780520246690/american-gulag) you can read more about the prison immigration system in the U.S. [Here](https://immigrationimpact.com/2020/08/27/ice-phone-calls/?emci=74f11c33-44e9-ea11-8b03-00155d0394bb&emdi=f13c0f2f-ccea-ea11-8b03-00155d0394bb&ceid=8885589#.X0klMn6Sk2w) you can read more about how ICE makes it almost impossible for people to communicate fromom detention center, even during a pandemic.
+Coronavirus is disproportionately harming the U.S. prison population. [Here](https://law.ucla.edu/academics/centers/criminal-justice-program/ucla-covid-19-behind-bars-data-project) you can learn more about it.
+
+### Get involved
+
+Other ways to support? Stay engaged. When it is safe, visit an immigration prison with an immigration advocate. Meet with detainees. Be a lifeline to somebody in detention. Support bail funds. Deposit funds in detainees commissary accounts. Participate in court watch programs. Share with your family. Vote.
+
+### Who we are
+
+Daniela is an immigration attorney based in Los Angeles. She works in the intersection of immigration, mental health and the criminal legal system. She practices a model of holistic representation by building strong networks of collaboration with lawyers, social workers, mental health professionals, artists and oral historians.

data/siteText/text.json

@@ -16,7 +16,7 @@
       "respondingTo": "responding to..",
       "submitResponse": "Submit response"
     },
-    "learnMore": ["LEARN MORE"],
+    "learnMore": "./learnMore_en.md",
     "responseDetail": ["Something about responses here.."],
     "buttons": {
       "addResponse": "respond to José Miguel",
@@ -44,7 +44,7 @@
       "respondingTo": "responding to..",
       "submitResponse": "Submit response"
     },
-    "learnMore": ["Learn more in spanish"],
+    "learnMore": "./learnMore_en.md",
     "responseDetail": ["[ES] Something about responses here.."],
     "buttons": {
       "addResponse": "responder a José Miguel",

src/components/addResponseBanner.js

@@ -66,7 +66,7 @@ export default function AddResponseBanner({ locale }) {
     }
   }
   return (
-    <div style={{ height: "100%" }}>
+    <div>
       {getAddResponseDialogue()}
       <div className="addResponseBanner">{getAddResponseButton()}</div>
       <AllResponsePreviews></AllResponsePreviews>

src/components/pieces/addResponse.js

@@ -148,9 +148,12 @@ export default function AddResponse({ isOpen, closeResponseCallback }) {
           let addResponseText = getAddresponseText(locale)
           return (
             <div className="addResponse-container">
-              <div className="header">
+              <div className="header content-container flex">
                 {addResponseText.intro.map((paragraph, index) => (
-                  <div key={index} className={ResponseStyles.addResponseText}>
+                  <div
+                    key={index}
+                    className={`${ResponseStyles.addResponseText} half`}
+                  >
                     {" "}
                     {paragraph}{" "}
                   </div>

src/components/pieces/allPiecePreview.js

@@ -50,7 +50,11 @@ export default function AllPiecePreview() {
 
   return (
     <div>
-      <div className="content-container flex" id="preview-container">
+      <div
+        className="content-container flex"
+        id="preview-container"
+        style={{ paddingBottom: "96px" }}
+      >
         {data.allPiecesJson.edges.map(({ node }, index) =>
           renderPiece(node, index)
         )}

src/pages/about.js

@@ -10,24 +10,24 @@ export default function About({ data }) {
     }
     let getLearnMoreText = data.allSiteTextJson.edges[0].node
     let getLearnMoreTextLocalized = getLearnMoreText[locale].learnMore
-    return getLearnMoreTextLocalized
+    let learnMoreTextHTML = getLearnMoreTextLocalized.childMarkdownRemark.html
+    return learnMoreTextHTML
   }
-  const aboutData = data.allSiteTextJson.edges[0].node.en.learnMore
+
   return (
     <div id="about-container" className="core-container">
-      <div className="content-container flex header-container">
-        <LocaleConsumer>
-          {locale => {
-            let aboutData = getLearnMoreText(locale)
-            return aboutData.map((paragraph, index) => (
-              <div className="half" key={index}>
-                {" "}
-                {paragraph}{" "}
-              </div>
-            ))
-          }}
-        </LocaleConsumer>
-      </div>
+      <LocaleConsumer>
+        {locale => {
+          let aboutHTML = getLearnMoreText(locale)
+          return (
+            <div
+              style={{ paddingBottom: "96px" }}
+              className="content-container header-container"
+              dangerouslySetInnerHTML={{ __html: aboutHTML }}
+            />
+          )
+        }}
+      </LocaleConsumer>
     </div>
   )
 }
@@ -38,10 +38,18 @@ export const query = graphql`
       edges {
         node {
           en {
-            learnMore
+            learnMore {
+              childMarkdownRemark {
+                html
+              }
+            }
           }
           es {
-            learnMore
+            learnMore {
+              childMarkdownRemark {
+                html
+              }
+            }
           }
         }
       }

src/styles/global.css

@@ -10,14 +10,14 @@ body,
   margin: 0;
   font-family: "Josefin Slab", sans-serif;
   font-weight: 500;
-  font-size: 18px;
-  line-height: 1.4em;
+  font-size: 16px;
+  line-height: 1.5em;
 }
 
 :root {
   --blue: rgb(0, 150, 255);
   --yellow: rgb(255, 255, 90);
-  --red: rgb(255, 120, 120);
+  --red: rgb(255, 140, 140);
   --lightYellow: rgb(255, 255, 200);
   --white: rgb(255, 255, 255, 1);
   --space: 24px;
@@ -87,9 +87,9 @@ body,
   z-index: 51;
 
   background-image: linear-gradient(
-    rgba(255, 255, 255, 0.8) 0%,
-    rgba(255, 255, 255, 0.8) 80%,
-    var(--yellow) 100%
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 1) 80%,
+    var(--yellow) 90%
   );
 }
 
@@ -119,6 +119,27 @@ body,
   display: none;
 }
 
+#about-container .content-container {
+  column-count: 2;
+  column-gap: var(--margin);
+  column-gap: var(--space);
+  padding: var(--margin);
+  padding-top: 0px;
+}
+
+#about-container .content-container p {
+  margin: 0;
+  text-indent: 12px;
+  margin-bottom: 8px;
+}
+
+#about-container .content-container h3 {
+  width: 100%;
+}
+#about-container .content-container p:first-child {
+  text-indent: 0px;
+}
+
 .content-container.flex .half {
   flex: 1;
   margin: var(--margin);
@@ -203,25 +224,14 @@ a:visited {
     --width: calc(33% - var(--space));
     --margin: calc(0.5 * var(--space));
   }
-
-  .secondary-container.expanded {
-    flex: 1;
-    height: 100%;
-    width: 30vw;
-    border-right: 1px solid black;
-    position: static;
-
-    background-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 80%,
-      var(--yellow) 100%
-    );
-  }
-
   .primary-container {
     max-width: 1600px;
     margin: 0 auto;
   }
+
+  #about-container .content-container {
+    column-count: 3;
+  }
 }
 
 /* Phone portrait */
@@ -260,4 +270,8 @@ a:visited {
     flex-basis: 100%;
     margin-bottom: 0px;
   }
+
+  #about-container .content-container {
+    column-count: 1;
+  }
 }

src/styles/pieceDetail.module.css

@@ -48,7 +48,7 @@
   }
 
   .translation {
-    flex-basis: 25rem;
+    flex-basis: 33rem;
     flex-grow: 1;
     margin-right: var(--space);
   }

src/styles/response.module.css

@@ -1,17 +1,19 @@
 /* TODO: MOVE THIS TO A BETTER PLACE LMAO */
 
 .addResponse {
-  padding: calc(var(--space) + var(--margin));
+  padding: calc(var(--space));
   height: 100%;
 }
 
 .addResponseText {
   margin-bottom: var(--margin);
+  padding: 0;
+  margin: 0;
 }
 
 .responseInput {
   width: 100%;
-  margin-top: var(--margin);
+  margin: var(--margin);
 }
 
 .responseInput input,
@@ -25,6 +27,23 @@
   font-weight: 300;
 }
 
+.responseInput button {
+  background: var(--yellow);
+  padding: var(--margin);
+  font-family: "Josefin sans", sans-serif;
+  font-weight: 500;
+  border: none;
+  box-shadow: 0px 0px 5px 6px var(--yellow);
+  outline: none;
+  margin-top: var(--margin);
+  cursor: pointer;
+}
+
+.responseInput select {
+  margin-left: var(--margin);
+  padding: var(--margin);
+}
+
 .responseDetailContainer {
   padding-bottom: 96px;
 }