CSS fixes

Author: Carmen Tang

.gitignore

@@ -6,5 +6,6 @@ npm-debug.log
 public
 .DS_Store
 yarn.lock
+yarn-error.log
 # Local Netlify folder
-.netlify
+.netlify

src/components/Contact.js

@@ -3,11 +3,7 @@ import AppContext from "./AppContext"
 import { navigate } from "gatsby";
 import { Message } from "semantic-ui-react";
 import Alert from "../components/Alert";
-<<<<<<< HEAD
 import { StyledPrimaryButton } from "../components/Buttons";
-=======
->>>>>>> adding thank you message
-
 import '../styles/contact.scss'
 
 
@@ -25,7 +21,7 @@ var contactDict = {
         contactLegend: "Contact Information",
         email: "Email",
         cell: "Cell",
-        includeDetails: "Share my tenancy information with Housing Now!",
+        includeDetails: "Share my tenancy information with ",
         subscribe: "Subscribe to newsletters from Housing Now!",
         disclaimer: "Any information you share is kept confidential and is only used to assist you with your case.",
         submitText: "Submit",
@@ -37,7 +33,7 @@ var contactDict = {
         contactLegend: "Información del contacto",
         email: "Correo Electrónico",
         cell: "Celular",
-        includeDetails: "¡Comparta mi información de arrendamiento con Housing Now!",
+        includeDetails: "¡Comparta mi información de arrendamiento con ",
         subscribe: "Suscribirse a boletines de Housing Now!",
         disclaimer: "Cualquier información que comparta se mantiene confidencial y solo se utiliza para ayudarlo con su caso.",
         submitText: "Enviar",
@@ -116,20 +112,17 @@ class QuickContactForm extends React.Component {
                                     <input className="form-control" type="email" name="email" value={email} onChange={this.handleChange} placeholder={dict[appCtx.lang].email} />
                                 </fieldset>
                                 <fieldset>
-                                    <label className="checkboxes"><input type="checkbox" name="includeDetails" checked={includeDetails} onChange={this.handleChange} /> {dict[appCtx.lang].includeDetails}</label><br/>
+                                    <label className="checkboxes"><input type="checkbox" name="includeDetails" checked={includeDetails} onChange={this.handleChange} /> {dict[appCtx.lang].includeDetails} <a href="https://www.housingnowca.org/about">Housing Now!</a></label><br/>
                                     <label className="checkboxes"><input type="checkbox" name="subscribe" checked={subscribe} onChange={this.handleChange} /> {dict[appCtx.lang].subscribe}</label>
                                 </fieldset>
                                 <p className="disclaimer">{dict[appCtx.lang].disclaimer}</p>
-                                <center><StyledPrimaryButton type="submit">{submitText ? submitText : dict[appCtx.lang].submitText}</StyledPrimaryButton></center>
+                                <p className="center-layout"><StyledPrimaryButton type="submit">{submitText ? submitText : dict[appCtx.lang].submitText}</StyledPrimaryButton></p>
                             </form>
                         </div>
                         :
                         <div>
-<<<<<<< HEAD
                           <Alert /><br/>
-=======
-                          <Alert />
->>>>>>> adding thank you message
+
                         </div>
                 )}
             </AppContext.Consumer>

src/components/FlowSelector.js

@@ -31,7 +31,7 @@ class FlowSelector extends React.Component {
       to = "/eligibility/cities/" + town;
     } else if (county in regulatedCounties) {
       to = "/eligibility/counties/" + county;
-    } else if (town !== "") {
+    } else if (town != "") {
       to = "/eligibility/state";
     }
 
@@ -48,14 +48,14 @@ class FlowSelector extends React.Component {
     return (
       <AppContext.Consumer>
         {({ appCtx, updateContext }) => (
-          <div><center>
+          <div className="center-layout">
             <StyledPrimaryButton disabled={!appCtx.validCAZip} onClick={(e)=>{this.onClick(appCtx)}}>{this.state.btnText}</StyledPrimaryButton>
             {(appCtx.town === undefined && appCtx.zip !== undefined) ?
               <p className="error">{this.state.errText}</p>
             :
               <p className="error"></p>
             }
-          </center></div>
+          </div>
         )}
       </AppContext.Consumer>
     );

src/components/Modal.js

@@ -25,7 +25,7 @@ var dict = {
     en: {
         button: "I'm Looking for Help!",
         title: "Connect With Us!",
-        description: "Share your contact information and we will follow up shortly!",
+        description: "Share your contact information & we will follow up shortly!",
         close: "Close",
     },
     es: {
@@ -55,7 +55,7 @@ export default function TransitionsModal() {
           <StyledPrimaryButton onClick={handleOpen} type="button">{dict[appCtx.lang].button}</StyledPrimaryButton>&nbsp;
           <Modal
             aria-labelledby="transition-modal-title"
-            aria-describedby="transition-modal-description"
+            aria-describedby="text-description"
             className={classes.modal}
             open={open}
             onClose={handleClose}
@@ -68,9 +68,9 @@ export default function TransitionsModal() {
             <Fade in={open}>
               <div className={classes.paper}>
                 <h2 id="transition-modal-title">{dict[appCtx.lang].title}</h2>
-                <center><p id="transition-modal-description">{dict[appCtx.lang].description}</p></center>
+                <p class="text-description">{dict[appCtx.lang].description}</p>
                 <QuickContactForm autohide={true} />
-                <center><StyledPrimaryButton onClick={handleClose} type="button">{dict[appCtx.lang].close}</StyledPrimaryButton></center>
+                <p className="center-layout"><StyledPrimaryButton onClick={handleClose} type="button">{dict[appCtx.lang].close}</StyledPrimaryButton></p>
               </div>
             </Fade>
           </Modal>

src/components/clauses/YesNoMaybeState.js

@@ -55,9 +55,9 @@ class YesNoMaybeState extends React.Component {
                     <div>
                     <h1>{this.state.dict[appCtx.lang].eligibility}</h1>
                     <p>{this.state.questionText}</p>
-                    <center><StyledPrimaryButton onClick={(e)=> { this.onChange('yes', appCtx, updateContext)}} type="button">{this.state.yesText ? this.state.yesText : this.state.dict[appCtx.lang].yes}</StyledPrimaryButton>&nbsp;
+                    <p className="center-layout"><StyledPrimaryButton onClick={(e)=> { this.onChange('yes', appCtx, updateContext)}} type="button">{this.state.yesText ? this.state.yesText : this.state.dict[appCtx.lang].yes}</StyledPrimaryButton>&nbsp;
                     <StyledPrimaryButton onClick={(e)=> { this.onChange('no', appCtx, updateContext)}} type="button">{this.state.noText ? this.state.noText : this.state.dict[appCtx.lang].no}</StyledPrimaryButton>&nbsp;
-                    <StyledPrimaryButton onClick={(e)=> { this.onChange('idk', appCtx, updateContext)}} type="button">{this.state.maybeText ? this.state.maybeText : this.state.dict[appCtx.lang].maybe}</StyledPrimaryButton></center>
+                    <StyledPrimaryButton onClick={(e)=> { this.onChange('idk', appCtx, updateContext)}} type="button">{this.state.maybeText ? this.state.maybeText : this.state.dict[appCtx.lang].maybe}</StyledPrimaryButton></p>
                     </div>
                 )}
             </AppContext.Consumer>

src/components/clauses/YesNoState.js

@@ -29,7 +29,7 @@ const YesNoState = ({ stateName, questionText, yesText, noText, yes, no }) => {
           <div>
             <h1>{dict[appCtx.lang].eligibility}</h1>
             <p>{questionText}</p>
-            <center><StyledPrimaryButton
+            <p className="center-layout"><StyledPrimaryButton
               onClick={e => {
                 onChange(true, appCtx, updateContext);
               }}
@@ -45,7 +45,7 @@ const YesNoState = ({ stateName, questionText, yesText, noText, yes, no }) => {
               type="button"
             >
               {noText ? noText : dict[appCtx.lang].no}
-            </StyledPrimaryButton></center>
+            </StyledPrimaryButton></p>
           </div>
         );
       }}

src/pages/calculator.js

@@ -254,7 +254,7 @@ class Calculator extends React.Component {
                 should use the rent calculator, as increases in 2019 may be rolled back
                 resulting in a rent reduction. <b>Before using this calculator, check your eligibility <Link to="/eligibility">here</Link></b>!
               </p>
-              <center><Modal /></center><br/>
+              <div className="center-layout"><Modal /></div><br/>
             </div>
             <div className="card">
               <div className="card-body">

src/pages/es/about-us.mdx

@@ -2,7 +2,7 @@
 
 Tenantprotections.org es un proyecto voluntario de TechEquity Collaborative y nuestros socios en Code for San Francisco, Community Legal Services in East Palo Alto (CLESPA) y Alliance of Californians for Community Empowerment (ACCE).
 
-Agradecemos a los voluntarios que generosamente donaron su tiempo y habilidades para garantizar que los inquilinos en California tengan acceso a información confiable sobre la Ley de Protección al Inquilino de 2019: Kyle Peacock, Tom Croucher, Reid Sherman, Linden Chiu, Danica Liang, Kellee Kimbro, Don Spire y Herman Borrego.
+Agradecemos a los voluntarios que generosamente donaron su tiempo y habilidades para garantizar que los inquilinos en California tengan acceso a información confiable sobre la Ley de Protección al Inquilino de 2019: Tom Croucher, Reid Sherman, Linden Chiu, Annie Zhang, Danica Liang, Kellee Kimbro, Don Spire y Herman Borrego.
 
 También, un agradecimiento especial a nuestros voluntarios que hicieron que el sitio estuviera disponible en español: Luis Delgado, German Calderon y Herman Borrego.
 
@@ -16,4 +16,3 @@ Este sitio existe para proporcionar a los inquilinos en California información
 - [Code for San Francisco](https://codeforsanfrancisco.org/) - CfSF is a Code for America Bridage empowering volunteers to use tech skills to improve their communities
 - [Community Legal Services in East Palo Alto](http://clsepa.org/) - Community Legal Services in East Palo Alto (CLSEPA) es una firma de abogados sin fines de lucro que ofrece servicios legales gratuitos que mejoran la vida de las familias de bajos ingresos en toda el Área de la Bahía. CLSEPA se especializa en vivienda, inmigración, derechos de los trabajadores, autorización de registros y protección del consumidor. El equipo de CLSEPA trabaja codo a codo con comunidades de bajos ingresos y se asocia con organizaciones comunitarias, iglesias y escuelas para lograr un cambio duradero. Capacitamos y apoyamos a los miembros de la comunidad para que naveguen por el sistema legal y ejerzan sus derechos. CLSEPA persigue la justicia sistémica utilizando múltiples estrategias innovadoras, que incluyen educación comunitaria, asesoramiento y representación legal individual, asistencia legal a grupos comunitarios, defensa de políticas y litigios de impacto.
 - [TechEquity](https://techequitycollaborative.org/) - TechEquity Collaborative es una organización sin fines de lucro que cree que la industria tecnológica puede y debe contribuir a un crecimiento de base amplia que beneficie a todos. Que en lugar de ser una fuerza de desplazamiento y desigualdad, la tecnología puede crear oportunidades y una prosperidad generalizada. TechEquity es una organización dirigida por miembros formada por individuos y empresas que comparten nuestros valores. Educamos a las personas en el sector tecnológico sobre temas de vivienda y mano de obra y laborales, y los activamos para hacer cambios en esas áreas clave. En 2019, TechEquity trabajó con una coalición de socios para copatrocinar la Ley de Protección de Inquilinos de 2019 (AB 1482).
-

src/pages/es/calculator.js

@@ -284,7 +284,7 @@ class Calculator extends React.Component {
                 revertirse, lo que resulta en una reducción de la renta. <b>Antes de
                 usar esta calculadora, verifica tu elegibilidad <Link to="/eligibility">aquí</Link></b>!
               </p>
-              <center><Modal /></center><br/>
+              <p className="center-layout"><Modal /></p><br/>
             </div>
             <div className="card">
               <div className="card-body">

src/styles/buttons.scss

@@ -54,3 +54,7 @@ button .button {
   box-shadow: none;
   text-shadow: none;
 }
+
+.button-layout {
+  text-align: center;
+}

src/styles/layout.scss

@@ -69,7 +69,7 @@
     width: 100%;
     cursor: pointer;
   }
- 
+
   h1,
   h2,
   h3,
@@ -80,7 +80,7 @@
     font-size: 24px;
     margin: 14px 0px;
   }
- 
+
   h1 {
     margin: 2rem 0 1rem 0;
     font-size: 28px;
@@ -114,12 +114,20 @@
         width: 460px;
       }
     }
-    
+
     .section-txt {
       display: flex;
       flex: 1;
       flex-direction: column;
       justify-content: center;
     }
   }
+
+  .center-layout {
+    text-align: center;
+  }
+
+  .text-description {
+    width: 500px;
+  }
 }

src/templates/city-es.js

@@ -6,7 +6,7 @@ const City = () => {
   return (
     <AppContext.Consumer>
       {({ appCtx, updateContext }) => (
-        <div><center>
+        <div className="center-layout">
           <p>
             <h1> ¡Espere! ¡Parece que usted vive en {appCtx.town} en el condado de {appCtx.county}, que tiene sus propias protecciones de renta y desalojo! </h1>
             Antes de verificar su elegibilidad en todo el estado, primero debe determinar si las protecciones de {appCtx.town} lo cubren. Si no lo cubren,
@@ -27,7 +27,7 @@ const City = () => {
           <PrimaryButton to="/es/eligibility/state/">
             Verifique su situación en todo el estado de California.
           </PrimaryButton>
-        </center></div>
+        </div>
       )}
     </AppContext.Consumer>
   );

src/templates/city.js

@@ -6,7 +6,7 @@ const City = () => {
   return (
     <AppContext.Consumer>
       {({ appCtx, updateContext }) => (
-        <div><center>
+        <div className="center-layout">
           <p>
             <h1>Wait! It looks like you live in {appCtx.town} in {appCtx.county} County, which has its own rent and eviction protections!</h1>
             Before checking your state-wide eligibility, you should first determine if {appCtx.town}'s protections cover you. If they do not cover you,
@@ -28,7 +28,7 @@ const City = () => {
           <PrimaryButton to="/eligibility/state/">
             Check my status state-wide
           </PrimaryButton>
-        </center></div>
+        </div>
       )}
     </AppContext.Consumer>
   );