diff --git a/app/services/nodemailer-service.js b/app/services/nodemailer-service.js deleted file mode 100644 index 5a9f67fe9..000000000 --- a/app/services/nodemailer-service.js +++ /dev/null @@ -1,100 +0,0 @@ -const applyEmailTemplate = require("../../client/src/helpers/EmailTemplate"); -const nodemailer = require("nodemailer"); -const serverUrl = process.env.SERVER_URL; -const clientUrl = process.env.CLIENT_URL; -const emailUser = process.env.EMAIL_USER; - -const transporter = nodemailer.createTransport({ - service: "gmail", - auth: { - user: process.env.EMAIL_USER, - pass: process.env.EMAIL_PASSWORD, - }, -}); - -const sendRegistrationConfirmation = async ( - email, - token, - emailTemplate = applyEmailTemplate -) => { - const emailBody = ` -

- Hello, -

-

- Thank you for registering with Food Oasis! - Please take a moment to verify your account by clicking the link bellow. -
-

- - - - -
- Verify Email -
-
- Thanks, -
- Food Oasis Team - `; - const options = { - to: `${email}`, - from: emailUser, - subject: `Verify your account`, - html: `${emailTemplate.applyEmailTemplate(emailBody)}`, - }; - transporter.sendMail(options, function (err, result) { - if (err) { - return Promise.reject("Sending registration confirmation email failed."); - } else { - return Promise.resolve(result); - } - }); -}; - -const sendResetPasswordConfirmation = async ( - email, - token, - emailTemplate = applyEmailTemplate -) => { - const emailBody = ` -

- Hello, -

-

- Your Food Oasis password can be reset by clicking the link bellow. -

- - - - -
- Reset Password -
-
- Regards, -
- Food Oasis Team - `; - const options = { - to: `${email}`, - from: "dnr.jobsforhope@gmail.com", - subject: `Password Reset`, - html: `${emailTemplate.applyEmailTemplate(emailBody)}`, - }; - transporter.sendMail(options, function (err, result) { - if (err) { - return Promise.reject( - "Sending reset password confirmation email failed." - ); - } else { - return Promise.resolve(result); - } - }); -}; - -module.exports = { - sendRegistrationConfirmation, - sendResetPasswordConfirmation, -}; diff --git a/app/services/sendgrid-service.js b/app/services/sendgrid-service.js index 9a88a5a80..486e5c752 100644 --- a/app/services/sendgrid-service.js +++ b/app/services/sendgrid-service.js @@ -17,7 +17,7 @@ const sendRegistrationConfirmation = async (

Thank you for registering with Food Oasis! - Please take a moment to verify your account by clicking the link bellow. + Please take a moment to verify your account by clicking the link below.

@@ -57,7 +57,7 @@ const sendResetPasswordConfirmation = async ( Hello,

- Your Food Oasis password can be reset by clicking the link bellow. + Your Food Oasis password can be reset by clicking the link below.

diff --git a/client/package.json b/client/package.json index d7cbb6f98..9b9b598fc 100644 --- a/client/package.json +++ b/client/package.json @@ -1,7 +1,7 @@ { "name": "food-oasis-client", "description": "React Client for Food Oasis", - "version": "1.0.24", + "version": "1.0.25", "author": "Hack for LA", "license": "GPL-2.0", "private": true, diff --git a/client/public/index.html b/client/public/index.html index fb41eebf0..c4d63487c 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -16,7 +16,7 @@ name="description" content="Food Oasis is an application that helps eliminate food waste by connecting donors and food outlets." /> - + diff --git a/client/src/App.js b/client/src/App.js index 45ae033bb..2468a43eb 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -20,6 +20,9 @@ import Faq from "components/StaticPages/Faq"; import DonateCA from "components/StaticPagesCA/Donate"; import AboutCA from "components/StaticPagesCA/About"; import FaqCA from "components/StaticPagesCA/Faq"; +import DonateHI from "components/StaticPagesHI/Donate"; +import AboutHI from "components/StaticPagesHI/About"; +import FaqHI from "components/StaticPagesHI/Faq"; import Resources from "components/Resources"; import Register from "components/Register"; import Login from "components/Login"; @@ -32,6 +35,7 @@ import Home from "containers/Home"; import Results from "components/Results/ResultsContainer"; import Suggestion from "components/Suggestion"; import newTheme from "./theme/newTheme"; +import { defaultCoordinates } from "./helpers/Configuration"; const useStyles = makeStyles({ app: (props) => ({ @@ -73,8 +77,8 @@ function App() { const [toast, setToast] = useState({ message: "" }); const [bgImg, setBgImg] = useState(""); const [origin, setOrigin] = useState({ - latitude: 34.0522, - longitude: -118.2437, + latitude: defaultCoordinates.lat, + longitude: defaultCoordinates.lon, }); useEffect(() => { @@ -125,8 +129,8 @@ function App() { (error) => { console.log(`Getting browser location failed: ${error.message}`); const userCoordinates = { - latitude: 34.0522, - longitude: -118.2437, + latitude: defaultCoordinates.lat, + longitude: defaultCoordinates.lon, }; setUserCoordinates(userCoordinates); } @@ -239,13 +243,31 @@ function App() { - {tenantId === 2 ? : } + {tenantId === 3 ? ( + + ) : tenantId === 2 ? ( + + ) : ( + + )} - {tenantId === 2 ? : } + {tenantId === 3 ? ( + + ) : tenantId === 2 ? ( + + ) : ( + + )} - {tenantId === 2 ? : } + {tenantId === 3 ? ( + + ) : tenantId === 2 ? ( + + ) : ( + + )} diff --git a/client/src/components/Menu.js b/client/src/components/Menu.js index 1962e6849..bc5b69f70 100644 --- a/client/src/components/Menu.js +++ b/client/src/components/Menu.js @@ -83,6 +83,7 @@ export default function Menu(props) { <> logout(setUser, setToast, history)} diff --git a/client/src/components/Results/ResultsContainer.js b/client/src/components/Results/ResultsContainer.js index 7c13d1800..0351dadeb 100644 --- a/client/src/components/Results/ResultsContainer.js +++ b/client/src/components/Results/ResultsContainer.js @@ -5,6 +5,7 @@ import { Grid } from "@material-ui/core"; import { useOrganizationBests } from "hooks/useOrganizationBests"; import useCategoryIds from "hooks/useCategoryIds"; import { isMobile } from "helpers"; +import { defaultCoordinates } from "../../helpers/Configuration"; import Filters from "./ResultsFilters"; import List from "./ResultsList"; @@ -78,14 +79,14 @@ export default function ResultsContainer(props) { ? JSON.parse(storage.origin).latitude : userCoordinates ? userCoordinates.latitude - : 34.07872, + : defaultCoordinates.lat, longitude: userSearch ? userSearch.longitude : storage.origin ? JSON.parse(storage.origin).longitude : userCoordinates ? userCoordinates.longitude - : -118.243328, + : defaultCoordinates.lon, }; const [radius, setRadius] = useState( diff --git a/client/src/components/StaticPagesHI/About.js b/client/src/components/StaticPagesHI/About.js new file mode 100644 index 000000000..f29bf7e0d --- /dev/null +++ b/client/src/components/StaticPagesHI/About.js @@ -0,0 +1,282 @@ +import React from "react"; + +import aboutbg from "./assets/about-bg.png"; +import iconSpacer from "./assets/icon-spacer.svg"; +import iconSpacerBlue from "./assets/icon-spacer-blue.svg"; +import foodCycle from "./assets/food-cycle.png"; +import foodForward from "./assets/food-forward.png"; +import farmPeople from "./assets/farm-people.png"; +import foodBank from "./assets/food-bank.png"; +import { makeStyles } from "@material-ui/core"; +import Footer from "../Footer"; + +const useStyles = makeStyles(() => ({ + outer: { + background: "#fff", + }, + main: { + padding: "1.5rem 0;", + maxWidth: "1200px", + margin: "0 auto", + "@media only screen and (min-width: 75em)": { + padding: "1.5rem 2rem", + }, + }, + title: { + textTransform: "uppercase", + fontWeight: 500, + textAlign: "center", + background: "#FFF", + margin: 0, + padding: "32px 0", + "& $span": { + color: "#336699", + }, + }, + figure: { + margin: 0, + padding: 0, + }, + icon: { + margin: "auto", + }, + mission: { + padding: "32px", + margin: "32px 0", + borderRadius: "24px", + color: "#4d4d4d", + background: "#f0f0f0", + display: "flex", + flexDirection: "column", + "& $h2": { + color: "#336699", + flexBasis: "100", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + }, + team: { + padding: "32px", + margin: "32px 0 0 0", + borderRadius: "24px", + color: "#fff", + background: "#336699", + display: "flex", + flexDirection: "column", + "& $h2": { + flexBasis: "100", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + "& $a": { + color: "#fff", + }, + }, + contact: { + padding: "32px", + margin: "32px 0 0 0", + borderRadius: "24px", + color: "#4d4d4d", + background: "#f0f0f0", + display: "flex", + flexDirection: "column", + textAlign: "center", + "& $h2": { + color: "#336699", + flexBasis: "100", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + "& $a": { + color: "#4d4d4d", + }, + }, + partners: { + background: "#fff", + padding: "48px 32px", + borderRadius: "24px", + justifyContent: "space-between", + alignItems: "center", + display: "flex", + flexWrap: "wrap", + flexDirection: "column", + "& $h2": { + color: "#336699", + width: "100%", + flexBasis: "100", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "60px", + }, + "@media only screen and (min-width: 64em)": { + flexDirection: "row", + }, + }, + partnersLogo: { + maxWidth: "100%", + height: "100%", + marginBottom: "40px", + "@media only screen and (min-width: 64em) ": { + marginBottom: 0, + }, + }, +})); +const About = () => { + const classes = useStyles(); + // const { t } = useTranslation("about"); + return ( +
+

+ About Food Oasis Hawaii +

+
+
+ About +
+
+ Our Mission +

Our Mission

+

+ Access to enough food should be a basic right. Unfortunately, this + is not the reality for millions of people in Hawaii. Food insecurity + is inconsistent with access to cheap and nutritious food. +

+

(TBD)

+

+ Food pantries in the area are experiencing unprecedented demand. The + demand for food assistance has almost doubled since the beginning of + 2020. To compound matters, it is the hard work of volunteers that + keeps pantries and meal programs open. The number of volunteers + available to distribute food has diminished. +

+

+ The primary goal of Food Oasis is to provide up-to-date information + to Hawaiians. We built a directory that connects anyone with + hundreds of free food resources. Food Oasis presents reliable + information on a user-friendly platform. This will reduce stress and + uncertainty for food seekers. It will also demonstrate to our + community the growing need of food donations on the islands. +

+

+ Food Oasis is creating a directory of updated food resources. There + are countless groups helping to feed hungry Hawaiians. But it’s + difficult for those in need to find them because there’s no one + source of updated info. We’re working to change that. +

+
+
+ Our Team +

Our Team

+

+ Food Oasis started in 2015 under{" "} + + Hack for LA + + , a brigade under the non-profit{" "} + + Code for America + + . The goal was to create a site of free and subsidized food + resources. The team gave the project to a nonprofit to manage its + day-to-day operations. The upkeep turned out to be much more work + than any single nonprofit could handle. +

+ +

+ Our web-based solution is sparking collaboration, community + building, and team building. The result of this community-building + gives the food seeker updated information to find the free food + resources they need. +

+

+ We are 100% volunteer-run project. We look forward to sharing our + updated directory with Hawaii. +

+
+
+ Contact Us +

Contact Us

+

+ Questions about our project? +
+ Updates to the listings? +
+ General inquiries? +
+

+

+ Please contact us +
+ foodoasishi@gmail.com +

+
+
+ Our Team +

Our Partners

+ Food Cycle LA + Food Forward + Farm People + Food Bank +
+
+
+
+ ); +}; + +export default About; diff --git a/client/src/components/StaticPagesHI/Donate.js b/client/src/components/StaticPagesHI/Donate.js new file mode 100644 index 000000000..b0eb93f01 --- /dev/null +++ b/client/src/components/StaticPagesHI/Donate.js @@ -0,0 +1,241 @@ +import React from "react"; + +import donatebg from "./assets/donate-bg.png"; +import iconSpacer from "./assets/icon-spacer.svg"; +import iconSpacerBlue from "./assets/icon-spacer-blue.svg"; +import { makeStyles } from "@material-ui/core"; +import Footer from "../Footer"; + +const useStyles = makeStyles(() => ({ + outer: { + background: "#fff", + }, + main: { + padding: "1.5rem 0;", + maxWidth: "1200px", + margin: "0 auto", + "@media only screen and (min-width: 75em)": { + padding: "1.5rem 2rem", + }, + }, + title: { + color: "#4d4d4d", + textTransform: "uppercase", + fontWeight: 500, + textAlign: "center", + background: "#FFF", + margin: 0, + padding: "32px 0", + }, + btnOrange: { + color: "#fff", + fontSize: "18px", + background: "#e57109", + boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", + borderRadius: "6px", + padding: "8px 16px", + textDecoration: "none", + textTransform: "uppercase", + }, + btnOutline: { + color: "#fff", + border: "1px solid #336699", + background: "#336699", + borderRadius: "6px", + padding: "8px 16px", + textDecoration: "none", + textTransform: "uppercase", + }, + btnWhite: { + color: "#336699", + background: "#ffffff", + borderRadius: "6px", + padding: "8px 16px", + textDecoration: "none", + textTransform: "uppercase", + }, + figure: { + margin: 0, + padding: 0, + }, + icon: { + margin: "auto", + }, + donate: { + padding: "32px", + margin: "32px 0 0 0", + borderRadius: "24px", + color: "#4d4d4d", + background: "#f0f0f0", + display: "flex", + flexWrap: "wrap", + "& $h2": { + color: "#336699", + flexBasis: "100%", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + "& $btnOutline": { + margin: "20px auto 0 auto", + }, + }, + volunteerSection: { + padding: "32px", + margin: "32px 0 0 0", + borderRadius: "24px", + color: "#fff", + background: "#336699", + display: "flex", + flexWrap: "wrap", + "& $h2": { + color: "#fff", + flexBasis: "100%", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + "& $btnWhite": { + margin: "20px auto 0 auto", + }, + }, + cards: { + display: "flex", + flexWrap: "wrap", + margin: "0 0 32px 0", + justifyContent: "center", + "& $aside": { + textAlign: "center", + borderRadius: "24px", + padding: "1.25rem", + maxWidth: "550px", + margin: "1rem 0", + "& $btnWhite": { + display: "inline-block", + marginBottom: "20px", + }, + "& $h3": { + fontSize: "40px", + fontWeight: "500", + color: "#ffffff", + margin: "20px 0", + }, + "@media only screen and (min-width: 64em)": { + marginLeft: "1rem", + marginRight: "1rem", + }, + }, + "@media only screen and (min-width: 64em)": { + flexWrap: "nowrap", + padding: "32px", + }, + }, + signup: { + background: "rgba(229, 113, 9, .7)", + }, + volunteer: { + background: "#e57109", + }, +})); +const Donate = () => { + const classes = useStyles(); + // const { t } = useTranslation("donate"); + return ( +
+

Donate

+
+
+ Donate +
+
+ Why Donate? +

Why Donate?

+

+ We’ve done so much already as a 100% volunteer-run organization—but + we need your help to finish what we set out to do. The admin, + development, and marketing costs to expand our directory are + extensive. We have a directory of over 1,300 organizations to + update. Your tax-deductible donation would help us offset some of + those costs. +

+

+ Please make donations to our parent organization (Code for America). + At the Code for America donation page you will see a text box: “What + inspired you to donate today”? Please write "Food Oasis and Code for + Hawaii" in that box. Your donation will get earmarked for Food Oasis + Hawaii. +

+ + Donate + +
+
+ Volunteer +

Volunteer

+

+ We’re run 100% by remote volunteers who do critical work by updating + our food directory weekly. The work you do impact those who don’t + have enough to eat. Your help to update our directory makes it + easier for anyone to get in touch with groups that fit their needs. +

+ + Become a Volunteer + +
+
+ + +
+
+
+
+ ); +}; + +export default Donate; diff --git a/client/src/components/StaticPagesHI/Faq.js b/client/src/components/StaticPagesHI/Faq.js new file mode 100644 index 000000000..20f3e9356 --- /dev/null +++ b/client/src/components/StaticPagesHI/Faq.js @@ -0,0 +1,237 @@ +import React from "react"; + +import faqbg from "./assets/faq-bg.png"; +import iconSpacer from "./assets/icon-spacer.svg"; +import iconSpacerBlue from "./assets/icon-spacer-blue.svg"; +import { makeStyles } from "@material-ui/core"; +import Footer from "../Footer"; + +const useStyles = makeStyles(() => ({ + outer: { + background: "#fff", + }, + main: { + padding: "1.5rem 0;", + maxWidth: "1200px", + margin: "0 auto", + "@media only screen and (min-width: 75em)": { + padding: "1.5rem 2rem", + }, + }, + title: { + textTransform: "uppercase", + fontWeight: 500, + textAlign: "center", + background: "#FFF", + margin: 0, + padding: "32px 0", + "& $span": { + color: "#336699", + "& $span": { + textTransform: "none", + }, + }, + }, + figure: { + margin: 0, + padding: 0, + }, + icon: { + margin: "auto", + }, + glossary: { + padding: "32px", + margin: "32px 0", + borderRadius: "24px", + color: "#4d4d4d", + display: "flex", + flexWrap: "wrap", + "& $h2": { + color: "#336699", + flexBasis: "100%", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + }, + forVolunteers: { + padding: "32px", + margin: "32px 0", + borderRadius: "24px", + color: "#fff", + background: "#336699", + display: "flex", + flexDirection: "column", + "& $h2": { + flexBasis: "100%", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + "& $a": { + color: "#ffffff", + }, + }, + forDonors: { + color: "#4d4d4d", + background: "#fff", + padding: "32px", + margin: "32px 0", + borderRadius: "24px", + display: "flex", + flexDirection: "column", + "& $h2": { + color: "#336699", + flexBasis: "100%", + textTransform: "uppercase;", + textAlign: "center", + fontWeight: "500", + fontSize: "32px", + marginTop: "10px", + marginBottom: "20px", + }, + }, + dl: { + marginTop: "0", + marginBottom: "0", + "& $dt": { + fontWeight: "600", + }, + "& $dd": { + marginLeft: "0", + marginBottom: "32px", + }, + "& $dd:last-child": { + marginBottom: "0", + }, + }, +})); +const About = () => { + const classes = useStyles(); + // const { t } = useTranslation("about"); + return ( +
+

+ + FAQs + +

+
+
+ FAQ +
+
+ Glossary +

Glossary

+
+
Food Seeker
+
A person in need of free groceries or meals.
+
Food Pantry
+
+ A place that gives away free groceries—not cooked meals—to the + community. +
+
Food Bank
+
+ A nonprofit that collects donated food and distributes it to food + pantries. +
+
Meal Program or Soup Kitchen
+
+ A place that gives away free cooked meals—not grocery and pantry + items—to the community. +
+
Food Donation
+
+ Donated food includes pantry items, produce, and prepared meals. +
+
Food Rescue Organization
+
+ Collects food donations from farmers, grocery stores, restaurants, + corporations, and caterers. Their goal is to give food to people + who need it and not have it go to waste. +
+
+
+
+ For Volunteers +

For Volunteers

+
+
How can I sign up to volunteer?
+
+ + Attend a training session + {" "} + to get an assignment, or reach out to{" "} + jenny@foodoasis.la. +
+
When can I volunteer?
+
+ Anytime. After you attend a training session, you can update the + details whenever you have time. That may mean calling in the + mornings or researching online in the evenings. +
+
How do I set up an account to start my assignment?
+
+ Enter your info here, and look out for a + confirmation email from{" "} + foodoasishi@gmail.com. + Follow the instructions on the email. +
+
+
+
+ For Donors +

For Donors

+
+
What is food insecurity?
+
+ Unable to consistently access or afford adequate food to live a + healthy life. +
+
How is Food Oasis helping to diminish food insecurity?
+
+ Food Oasis is creating a directory of updated food resources. + There are countless groups helping to feed hungry Hawaiians. But + it’s difficult for those in need to find them because there’s no + one source of updated info. We’re working to change that. +
+
What will my donation go toward?
+
+ Your donations help us with the human costs required to update the + food resources in Hawaii. +
+
+
+
+
+
+ ); +}; + +export default About; diff --git a/client/src/components/StaticPagesHI/README.md b/client/src/components/StaticPagesHI/README.md new file mode 100644 index 000000000..d9b79cbb3 --- /dev/null +++ b/client/src/components/StaticPagesHI/README.md @@ -0,0 +1,5 @@ +This folder contains static pages that were imported from a static site. + +The css and scss folder have styles from the static site and should not +be imported to react components. They are for reference only and should be +deleted once the pages are styled correctly. diff --git a/client/src/components/StaticPagesHI/assets/about-bg.png b/client/src/components/StaticPagesHI/assets/about-bg.png new file mode 100644 index 000000000..964b5575a Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/about-bg.png differ diff --git a/client/src/components/StaticPagesHI/assets/donate-bg.png b/client/src/components/StaticPagesHI/assets/donate-bg.png new file mode 100644 index 000000000..446769230 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/donate-bg.png differ diff --git a/client/src/components/StaticPagesHI/assets/faq-bg.png b/client/src/components/StaticPagesHI/assets/faq-bg.png new file mode 100644 index 000000000..dfbbb74a9 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/faq-bg.png differ diff --git a/client/src/components/StaticPagesHI/assets/farm-people.png b/client/src/components/StaticPagesHI/assets/farm-people.png new file mode 100644 index 000000000..efae672c4 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/farm-people.png differ diff --git a/client/src/components/StaticPagesHI/assets/favicon.ico b/client/src/components/StaticPagesHI/assets/favicon.ico new file mode 100644 index 000000000..51d2d654c Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/favicon.ico differ diff --git a/client/src/components/StaticPagesHI/assets/fola-logo-footer.png b/client/src/components/StaticPagesHI/assets/fola-logo-footer.png new file mode 100644 index 000000000..35fea1736 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/fola-logo-footer.png differ diff --git a/client/src/components/StaticPagesHI/assets/fola-logo.png b/client/src/components/StaticPagesHI/assets/fola-logo.png new file mode 100644 index 000000000..189bb06ef Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/fola-logo.png differ diff --git a/client/src/components/StaticPagesHI/assets/food-bank.png b/client/src/components/StaticPagesHI/assets/food-bank.png new file mode 100644 index 000000000..63bee55c7 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/food-bank.png differ diff --git a/client/src/components/StaticPagesHI/assets/food-cycle.png b/client/src/components/StaticPagesHI/assets/food-cycle.png new file mode 100644 index 000000000..c6545cf27 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/food-cycle.png differ diff --git a/client/src/components/StaticPagesHI/assets/food-forward.png b/client/src/components/StaticPagesHI/assets/food-forward.png new file mode 100644 index 000000000..1f1023a77 Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/food-forward.png differ diff --git a/client/src/components/StaticPagesHI/assets/icon-menu.svg b/client/src/components/StaticPagesHI/assets/icon-menu.svg new file mode 100644 index 000000000..4f5811bc0 --- /dev/null +++ b/client/src/components/StaticPagesHI/assets/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/src/components/StaticPagesHI/assets/icon-spacer-blue.svg b/client/src/components/StaticPagesHI/assets/icon-spacer-blue.svg new file mode 100644 index 000000000..bfe35194e --- /dev/null +++ b/client/src/components/StaticPagesHI/assets/icon-spacer-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/StaticPagesHI/assets/icon-spacer-gray.svg b/client/src/components/StaticPagesHI/assets/icon-spacer-gray.svg new file mode 100644 index 000000000..f9f20f59d --- /dev/null +++ b/client/src/components/StaticPagesHI/assets/icon-spacer-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/StaticPagesHI/assets/icon-spacer.svg b/client/src/components/StaticPagesHI/assets/icon-spacer.svg new file mode 100644 index 000000000..97d0a6c37 --- /dev/null +++ b/client/src/components/StaticPagesHI/assets/icon-spacer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/StaticPagesHI/css/custom.css b/client/src/components/StaticPagesHI/css/custom.css new file mode 100644 index 000000000..f42cc6c42 --- /dev/null +++ b/client/src/components/StaticPagesHI/css/custom.css @@ -0,0 +1,108 @@ +/* Style */ +header { + background: var(--color-bg); + margin-bottom: 4px; } + +header nav { + padding: 0 1rem; + height: 60px; } + +header nav ul { + margin-left: auto; } + +header nav p { + color: var(--color-bg-heading); + padding-left: 20px; } + +h1.title { + text-transform: uppercase; + font-weight: 500; + text-align: center; + background: var(--color-bg); + margin: 0; + padding: 32px 0; } + +h1.title span { + color: var(--color-pantries); } + +main { + padding: 1.5rem 0; + max-width: var(--width-content); } + +section { + padding: 32px; + margin: 32px 0; + border-radius: var(--border-radius); } + +section .icon { + flex-basis: 100%; } + +section h2 { + flex-basis: 100%; + text-transform: uppercase; + text-align: center; + font-weight: 500; + font-size: 32px; + margin-top: 10px; + margin-bottom: 20px; } + +.mission { + color: #fff; + background: var(--color-pantries); } + +.team { + color: var(--color-bg-heading); } + +.team h2 { + color: var(--color-pantries); } + +.partners { + background: var(--color-bg); + padding: 48px 32px; + justify-content: space-between; + align-items: center; + flex-direction: column; } + +.partners h2 { + color: var(--color-bg-heading); + margin-bottom: 60px; } + +.partners .logo { + max-width: 100%; + height: 100%; + margin-bottom: 40px; } + +footer { + background: var(--color-bg); + position: relative; } + +footer nav { + padding: 1.5rem 1rem; + justify-content: space-between; + align-items: flex-start; } + +footer nav li { + display: block; + text-align: right; + text-transform: uppercase; } + +footer nav a { + text-decoration: none; } + +@media only screen and (min-width: 64em) { + .partners { + flex-direction: row; } + .partners .logo { + margin-bottom: 0; } + footer nav { + justify-content: center; + align-items: center; } + footer nav li { + display: inline-block; } + .footer-logo { + position: absolute; + left: 1rem; } } + +@media only screen and (min-width: 75em) { + main { + padding: 1.5rem 2rem; } } diff --git a/client/src/components/StaticPagesHI/css/styles.css b/client/src/components/StaticPagesHI/css/styles.css new file mode 100644 index 000000000..509cfba80 --- /dev/null +++ b/client/src/components/StaticPagesHI/css/styles.css @@ -0,0 +1,942 @@ +:root { + /* MVP.css */ + --border-radius: 24px; + --box-shadow: 2px 2px 10px; + /* System Colors */ + --color-active: #19334D; + --color-hover: #4c99e5; + --color-success: #219653; + --color-error: #cc3333; + /* Icon Colors */ + --color-pantries: #336699; + --color-meals: #e57109; + /* Greyscale */ + --color-bg: #fff; + --color-bg-secondary: #f0f0f0; + --color-bg-icons: #999; + --color-bg-body: #1b1b1b; + --color-bg-heading: #4d4d4d; + --font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + --hover-brightness: 1.2; + --justify-important: center; + --justify-normal: left; + --line-height: 1.5; + --width-card: 285px; + --width-card-medium: 460px; + --width-card-wide: 800px; + --width-content: 1200px; + /* Flexbox Grid */ + --gutter-width: 1rem; + --outer-margin: 2rem; + --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); + --half-gutter-width: calc((var(--gutter-width) * 0.5)); + --xs-min: 30; + --sm-min: 48; + --md-min: 64; + --lg-min: 75; + --screen-xs-min: var(--xs-min)em; + --screen-sm-min: var(--sm-min)em; + --screen-md-min: var(--md-min)em; + --screen-lg-min: var(--lg-min)em; + --container-sm: calc(var(--sm-min) + var(--gutter-width)); + --container-md: calc(var(--md-min) + var(--gutter-width)); + --container-lg: calc(var(--lg-min) + var(--gutter-width)); } + +@custom-media --sm-viewport only screen and (min-width: 48em); +@custom-media --md-viewport only screen and (min-width: 64em); +@custom-media --lg-viewport only screen and (min-width: 75em); +/* +@media (prefers-color-scheme: dark) { + :root { + --color: #0097fc; + --color-accent: #0097fc4f; + --color-bg: #333; + --color-bg-secondary: #555; + --color-secondary: #e20de9; + --color-secondary-accent: #e20de94f; + --color-shadow: #bbbbbb20; + --color-text: #f7f7f7; + --color-text-secondary: #aaa; + } +} +*/ +/* Layout */ +article aside { + background: var(--color-secondary-accent); + border-left: 4px solid var(--color-secondary); + padding: 0.01rem 0.8rem; } + +body { + box-sizing: border-box; + background: var(--color-bg-secondary); + color: var(--color-bg-body); + font-family: var(--font-family); + line-height: var(--line-height); + margin: 0; + overflow-x: hidden; + padding: 0; } + +footer, +header, +main { + margin: 0 auto; + padding: 0; } + +hr { + background-color: var(--color-bg-secondary); + border: none; + height: 1px; + margin: 4rem 0; } + +section { + display: flex; + flex-wrap: wrap; } + +section aside { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + margin: 1rem; + padding: 1.25rem; + width: var(--width-card); } + +section aside:hover { + box-shadow: var(--box-shadow) var(--color-bg-secondary); } + +section aside img { + max-width: 100%; } + +[hidden] { + display: none; } + +/* Headers */ +article header, +div header, +main header { + padding-top: 0; } + +header { + text-align: var(--justify-important); } + +header a b, +header a em, +header a i, +header a strong { + margin-left: 0.5rem; + margin-right: 0.5rem; } + +section header { + padding-top: 0; + width: 100%; } + +/* Nav */ +nav { + align-items: center; + display: flex; + justify-content: flex-start; } + +nav ul { + list-style: none; + padding: 0; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } + +nav ul li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; } + +/* Nav Dropdown */ +nav ul li:hover ul { + display: block; } + +nav ul li ul { + background: var(--color-bg); + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: none; + height: auto; + left: -2px; + padding: .5rem 1rem; + position: absolute; + top: 1.7rem; + white-space: nowrap; + width: auto; } + +nav ul li ul li, +nav ul li ul li a { + display: block; } + +/* Typography */ +code, +samp { + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + display: inline-block; + margin: 0 0.1rem; + padding: 0 0.5rem; } + +details { + margin: 1.3rem 0; } + +details summary { + font-weight: bold; + cursor: pointer; } + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: var(--line-height); } + +mark { + padding: 0.1rem; } + +ol li, +ul li { + padding: 0.2rem 0; } + +p { + margin: 0.75rem 0; + padding: 0; } + +pre { + margin: 1rem 0; + max-width: var(--width-card-wide); + padding: 1rem 0; } + +pre code, +pre samp { + display: block; + max-width: var(--width-card-wide); + padding: 0.5rem 2rem; + white-space: pre-wrap; } + +small { + color: var(--color-text-secondary); } + +sup { + background-color: var(--color-secondary); + border-radius: var(--border-radius); + color: var(--color-bg); + font-size: xx-small; + font-weight: bold; + margin: 0.2rem; + padding: 0.2rem 0.3rem; + position: relative; + top: -2px; } + +/* Links */ +a { + color: var(--color-secondary); + display: inline-block; } + +a:hover { + filter: brightness(var(--hover-brightness)); + text-decoration: underline; } + +a b, +a em, +a i, +a strong, +button { + border-radius: var(--border-radius); + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: var(--line-height); + margin: 0.5rem 0; + padding: 1rem 2rem; } + +button { + font-family: var(--font-family); } + +button:hover { + cursor: pointer; + filter: brightness(var(--hover-brightness)); } + +a b, +a strong, +button { + background-color: var(--color); + border: 2px solid var(--color); + color: var(--color-bg); } + +a em, +a i { + border: 2px solid var(--color); + border-radius: var(--border-radius); + color: var(--color); + display: inline-block; + padding: 1rem 2rem; } + +/* Images */ +figure { + margin: 0; + padding: 0; } + +figure img { + max-width: 100%; } + +figure figcaption { + color: var(--color-text-secondary); } + +/* Forms */ +button:disabled, +input:disabled { + background: var(--color-bg-secondary); + border-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + cursor: not-allowed; } + +button[disabled]:hover { + filter: none; } + +form { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: block; + max-width: var(--width-card-wide); + min-width: var(--width-card); + padding: 1.5rem; + text-align: var(--justify-normal); } + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; } + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: var(--width-card-wide); } + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; } + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; } + +input, +select, +textarea { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; } + +input[readonly], +textarea[readonly] { + background-color: var(--color-bg-secondary); } + +label { + font-weight: bold; + margin-bottom: 0.2rem; } + +/* Tables */ +table { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + border-spacing: 0; + display: inline-block; + max-width: 100%; + overflow-x: auto; + padding: 0; + white-space: nowrap; } + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: var(--justify-important); } + +table thead { + background-color: var(--color); + border-collapse: collapse; + border-radius: var(--border-radius); + color: var(--color-bg); + margin: 0; + padding: 0; } + +table thead th:first-child { + border-top-left-radius: var(--border-radius); } + +table thead th:last-child { + border-top-right-radius: var(--border-radius); } + +table thead th:first-child, +table tr td:first-child { + text-align: var(--justify-normal); } + +table tr:nth-child(even) { + background-color: var(--color-accent); } + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: var(--line-height); + margin: 1rem auto; + max-width: var(--width-card-medium); + padding: 1.5rem 1rem; + text-align: var(--justify-important); } + +blockquote footer { + color: var(--color-text-secondary); + display: block; + font-size: small; + line-height: var(--line-height); + padding: 1.5rem 0; } + +/* Flexbox Grid */ +.container-fluid, .container { + margin-right: auto; + margin-left: auto; } + +.container-fluid { + padding-right: var(--outer-margin, 2rem); + padding-left: var(--outer-margin, 2rem); } + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin-right: var(--gutter-compensation, -0.5rem); + margin-left: var(--gutter-compensation, -0.5rem); } + +.row.reverse { + flex-direction: row-reverse; } + +.col.reverse { + flex-direction: column-reverse; } + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); } + +.col-xs { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; } + +.col-xs-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; } + +.col-xs-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; } + +.col-xs-3 { + flex-basis: 25%; + max-width: 25%; } + +.col-xs-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; } + +.col-xs-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; } + +.col-xs-6 { + flex-basis: 50%; + max-width: 50%; } + +.col-xs-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; } + +.col-xs-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; } + +.col-xs-9 { + flex-basis: 75%; + max-width: 75%; } + +.col-xs-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; } + +.col-xs-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; } + +.col-xs-12 { + flex-basis: 100%; + max-width: 100%; } + +.col-xs-offset-0 { + margin-left: 0; } + +.col-xs-offset-1 { + margin-left: 8.33333333%; } + +.col-xs-offset-2 { + margin-left: 16.66666667%; } + +.col-xs-offset-3 { + margin-left: 25%; } + +.col-xs-offset-4 { + margin-left: 33.33333333%; } + +.col-xs-offset-5 { + margin-left: 41.66666667%; } + +.col-xs-offset-6 { + margin-left: 50%; } + +.col-xs-offset-7 { + margin-left: 58.33333333%; } + +.col-xs-offset-8 { + margin-left: 66.66666667%; } + +.col-xs-offset-9 { + margin-left: 75%; } + +.col-xs-offset-10 { + margin-left: 83.33333333%; } + +.col-xs-offset-11 { + margin-left: 91.66666667%; } + +.start-xs { + justify-content: flex-start; + text-align: start; } + +.center-xs { + justify-content: center; + text-align: center; } + +.end-xs { + justify-content: flex-end; + text-align: end; } + +.top-xs { + align-items: flex-start; } + +.middle-xs { + align-items: center; } + +.bottom-xs { + align-items: flex-end; } + +.around-xs { + justify-content: space-around; } + +.between-xs { + justify-content: space-between; } + +.first-xs { + order: -1; } + +.last-xs { + order: 1; } + +@media only screen and (min-width: 48em) { + .container { + width: var(--container-sm, 46rem); } + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); } + .col-sm { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; } + .col-sm-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; } + .col-sm-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; } + .col-sm-3 { + flex-basis: 25%; + max-width: 25%; } + .col-sm-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; } + .col-sm-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; } + .col-sm-6 { + flex-basis: 50%; + max-width: 50%; } + .col-sm-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; } + .col-sm-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; } + .col-sm-9 { + flex-basis: 75%; + max-width: 75%; } + .col-sm-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; } + .col-sm-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; } + .col-sm-12 { + flex-basis: 100%; + max-width: 100%; } + .col-sm-offset-0 { + margin-left: 0; } + .col-sm-offset-1 { + margin-left: 8.33333333%; } + .col-sm-offset-2 { + margin-left: 16.66666667%; } + .col-sm-offset-3 { + margin-left: 25%; } + .col-sm-offset-4 { + margin-left: 33.33333333%; } + .col-sm-offset-5 { + margin-left: 41.66666667%; } + .col-sm-offset-6 { + margin-left: 50%; } + .col-sm-offset-7 { + margin-left: 58.33333333%; } + .col-sm-offset-8 { + margin-left: 66.66666667%; } + .col-sm-offset-9 { + margin-left: 75%; } + .col-sm-offset-10 { + margin-left: 83.33333333%; } + .col-sm-offset-11 { + margin-left: 91.66666667%; } + .start-sm { + justify-content: flex-start; + text-align: start; } + .center-sm { + justify-content: center; + text-align: center; } + .end-sm { + justify-content: flex-end; + text-align: end; } + .top-sm { + align-items: flex-start; } + .middle-sm { + align-items: center; } + .bottom-sm { + align-items: flex-end; } + .around-sm { + justify-content: space-around; } + .between-sm { + justify-content: space-between; } + .first-sm { + order: -1; } + .last-sm { + order: 1; } } + +@media only screen and (min-width: 64em) { + .container { + width: var(--container-md, 61rem); } + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); } + .col-md { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; } + .col-md-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; } + .col-md-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; } + .col-md-3 { + flex-basis: 25%; + max-width: 25%; } + .col-md-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; } + .col-md-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; } + .col-md-6 { + flex-basis: 50%; + max-width: 50%; } + .col-md-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; } + .col-md-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; } + .col-md-9 { + flex-basis: 75%; + max-width: 75%; } + .col-md-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; } + .col-md-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; } + .col-md-12 { + flex-basis: 100%; + max-width: 100%; } + .col-md-offset-0 { + margin-left: 0; } + .col-md-offset-1 { + margin-left: 8.33333333%; } + .col-md-offset-2 { + margin-left: 16.66666667%; } + .col-md-offset-3 { + margin-left: 25%; } + .col-md-offset-4 { + margin-left: 33.33333333%; } + .col-md-offset-5 { + margin-left: 41.66666667%; } + .col-md-offset-6 { + margin-left: 50%; } + .col-md-offset-7 { + margin-left: 58.33333333%; } + .col-md-offset-8 { + margin-left: 66.66666667%; } + .col-md-offset-9 { + margin-left: 75%; } + .col-md-offset-10 { + margin-left: 83.33333333%; } + .col-md-offset-11 { + margin-left: 91.66666667%; } + .start-md { + justify-content: flex-start; + text-align: start; } + .center-md { + justify-content: center; + text-align: center; } + .end-md { + justify-content: flex-end; + text-align: end; } + .top-md { + align-items: flex-start; } + .middle-md { + align-items: center; } + .bottom-md { + align-items: flex-end; } + .around-md { + justify-content: space-around; } + .between-md { + justify-content: space-between; } + .first-md { + order: -1; } + .last-md { + order: 1; } } + +@media only screen and (min-width: 75em) { + .container { + width: var(--container-lg, 71rem); } + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); } + .col-lg { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; } + .col-lg-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; } + .col-lg-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; } + .col-lg-3 { + flex-basis: 25%; + max-width: 25%; } + .col-lg-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; } + .col-lg-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; } + .col-lg-6 { + flex-basis: 50%; + max-width: 50%; } + .col-lg-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; } + .col-lg-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; } + .col-lg-9 { + flex-basis: 75%; + max-width: 75%; } + .col-lg-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; } + .col-lg-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; } + .col-lg-12 { + flex-basis: 100%; + max-width: 100%; } + .col-lg-offset-0 { + margin-left: 0; } + .col-lg-offset-1 { + margin-left: 8.33333333%; } + .col-lg-offset-2 { + margin-left: 16.66666667%; } + .col-lg-offset-3 { + margin-left: 25%; } + .col-lg-offset-4 { + margin-left: 33.33333333%; } + .col-lg-offset-5 { + margin-left: 41.66666667%; } + .col-lg-offset-6 { + margin-left: 50%; } + .col-lg-offset-7 { + margin-left: 58.33333333%; } + .col-lg-offset-8 { + margin-left: 66.66666667%; } + .col-lg-offset-9 { + margin-left: 75%; } + .col-lg-offset-10 { + margin-left: 83.33333333%; } + .col-lg-offset-11 { + margin-left: 91.66666667%; } + .start-lg { + justify-content: flex-start; + text-align: start; } + .center-lg { + justify-content: center; + text-align: center; } + .end-lg { + justify-content: flex-end; + text-align: end; } + .top-lg { + align-items: flex-start; } + .middle-lg { + align-items: center; } + .bottom-lg { + align-items: flex-end; } + .around-lg { + justify-content: space-around; } + .between-lg { + justify-content: space-between; } + .first-lg { + order: -1; } + .last-lg { + order: 1; } } diff --git a/client/src/components/StaticPagesHI/scss/custom.scss b/client/src/components/StaticPagesHI/scss/custom.scss new file mode 100644 index 000000000..35c2c3997 --- /dev/null +++ b/client/src/components/StaticPagesHI/scss/custom.scss @@ -0,0 +1,115 @@ +/* Style */ +header { + background: var(--color-bg); + margin-bottom: 4px; +} +header nav { + padding: 0 1rem; + height: 60px; +} +header nav ul { + margin-left: auto; +} +header nav p { + color: var(--color-bg-heading); + padding-left: 20px; +} +h1.title { + text-transform: uppercase; + font-weight: 500; + text-align: center; + background: var(--color-bg); + margin: 0; + padding: 32px 0; +} +h1.title span { + color: var(--color-pantries); +} +main { + padding: 1.5rem 0; + max-width: var(--width-content); +} +section { + padding: 32px; + margin: 32px 0; + border-radius: var(--border-radius); +} +section .icon { + flex-basis: 100%; +} +section h2 { + flex-basis: 100%; + text-transform: uppercase; + text-align: center; + font-weight: 500; + font-size: 32px; + margin-top: 10px; + margin-bottom: 20px; +} +.mission { + color: #fff; + background: var(--color-pantries); +} +.team { + color: var(--color-bg-heading); +} +.team h2 { + color: var(--color-pantries); +} +.partners { + background: var(--color-bg); + padding: 48px 32px; + justify-content: space-between; + align-items: center; + flex-direction: column; +} +.partners h2 { + color: var(--color-bg-heading); + margin-bottom: 60px; +} +.partners .logo { + max-width: 100%; + height: 100%; + margin-bottom: 40px; +} +footer { + background: var(--color-bg); + position: relative; +} +footer nav { + padding: 1.5rem 1rem; + justify-content: space-between; + align-items: flex-start; +} +footer nav li { + display: block; + text-align: right; + text-transform: uppercase; +} +footer nav a { + text-decoration: none; +} +@media only screen and (min-width: 64em) { + .partners { + flex-direction: row; + } + .partners .logo { + margin-bottom: 0; + } + footer nav { + justify-content: center; + align-items: center; + } + footer nav li { + display: inline-block; + } + .footer-logo { + position: absolute; + left: 1rem; + } +} +@media only screen and (min-width: 75em) { + main { + padding: 1.5rem 2rem; + } +} \ No newline at end of file diff --git a/client/src/components/StaticPagesHI/scss/styles.scss b/client/src/components/StaticPagesHI/scss/styles.scss new file mode 100644 index 000000000..1e54bcacf --- /dev/null +++ b/client/src/components/StaticPagesHI/scss/styles.scss @@ -0,0 +1,1278 @@ +:root { + /* MVP.css */ + --border-radius: 24px; + --box-shadow: 2px 2px 10px; + + /* System Colors */ + --color-active: #19334D; + --color-hover: #4c99e5; + --color-success: #219653; + --color-error: #cc3333; + + /* Icon Colors */ + --color-pantries: #336699; + --color-meals: #e57109; + + /* Greyscale */ + --color-bg: #fff; + --color-bg-secondary: #f0f0f0; + --color-bg-icons: #999; + --color-bg-body: #1b1b1b; + --color-bg-heading: #4d4d4d; + + --font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + --hover-brightness: 1.2; + --justify-important: center; + --justify-normal: left; + --line-height: 1.5; + + --width-card: 285px; + --width-card-medium: 460px; + --width-card-wide: 800px; + + --width-content: 1200px; + + /* Flexbox Grid */ + --gutter-width: 1rem; + --outer-margin: 2rem; + --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); + --half-gutter-width: calc((var(--gutter-width) * 0.5)); + + --xs-min: 30; + --sm-min: 48; + --md-min: 64; + --lg-min: 75; + + --screen-xs-min: var(--xs-min)em; + --screen-sm-min: var(--sm-min)em; + --screen-md-min: var(--md-min)em; + --screen-lg-min: var(--lg-min)em; + + --container-sm: calc(var(--sm-min) + var(--gutter-width)); + --container-md: calc(var(--md-min) + var(--gutter-width)); + --container-lg: calc(var(--lg-min) + var(--gutter-width)); +} + +@custom-media --sm-viewport only screen and (min-width: 48em); +@custom-media --md-viewport only screen and (min-width: 64em); +@custom-media --lg-viewport only screen and (min-width: 75em); + +/* +@media (prefers-color-scheme: dark) { + :root { + --color: #0097fc; + --color-accent: #0097fc4f; + --color-bg: #333; + --color-bg-secondary: #555; + --color-secondary: #e20de9; + --color-secondary-accent: #e20de94f; + --color-shadow: #bbbbbb20; + --color-text: #f7f7f7; + --color-text-secondary: #aaa; + } +} +*/ + +/* Layout */ +article aside { + background: var(--color-secondary-accent); + border-left: 4px solid var(--color-secondary); + padding: 0.01rem 0.8rem; +} + +body { + box-sizing: border-box; + background: var(--color-bg-secondary); + color: var(--color-bg-body); + font-family: var(--font-family); + line-height: var(--line-height); + margin: 0; + overflow-x: hidden; + padding: 0; +} + +footer, +header, +main { + margin: 0 auto; + padding: 0; +} + +hr { + background-color: var(--color-bg-secondary); + border: none; + height: 1px; + margin: 4rem 0; +} + +section { + display: flex; + flex-wrap: wrap; +} + +section aside { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + margin: 1rem; + padding: 1.25rem; + width: var(--width-card); +} + +section aside:hover { + box-shadow: var(--box-shadow) var(--color-bg-secondary); +} + +section aside img { + max-width: 100%; +} + +[hidden] { + display: none; +} + +/* Headers */ +article header, +div header, +main header { + padding-top: 0; +} + +header { + text-align: var(--justify-important); +} + +header a b, +header a em, +header a i, +header a strong { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +section header { + padding-top: 0; + width: 100%; +} + +/* Nav */ +nav { + align-items: center; + display: flex; + justify-content: flex-start; +} + +nav ul { + list-style: none; + padding: 0; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +nav ul li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; +} + +/* Nav Dropdown */ +nav ul li:hover ul { + display: block; +} + +nav ul li ul { + background: var(--color-bg); + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: none; + height: auto; + left: -2px; + padding: .5rem 1rem; + position: absolute; + top: 1.7rem; + white-space: nowrap; + width: auto; +} + +nav ul li ul li, +nav ul li ul li a { + display: block; +} + +/* Typography */ +code, +samp { + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + display: inline-block; + margin: 0 0.1rem; + padding: 0 0.5rem; +} + +details { + margin: 1.3rem 0; +} + +details summary { + font-weight: bold; + cursor: pointer; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: var(--line-height); +} + +mark { + padding: 0.1rem; +} + +ol li, +ul li { + padding: 0.2rem 0; +} + +p { + margin: 0.75rem 0; + padding: 0; +} + +pre { + margin: 1rem 0; + max-width: var(--width-card-wide); + padding: 1rem 0; +} + +pre code, +pre samp { + display: block; + max-width: var(--width-card-wide); + padding: 0.5rem 2rem; + white-space: pre-wrap; +} + +small { + color: var(--color-text-secondary); +} + +sup { + background-color: var(--color-secondary); + border-radius: var(--border-radius); + color: var(--color-bg); + font-size: xx-small; + font-weight: bold; + margin: 0.2rem; + padding: 0.2rem 0.3rem; + position: relative; + top: -2px; +} + +/* Links */ +a { + color: var(--color-secondary); + display: inline-block; +} + +a:hover { + filter: brightness(var(--hover-brightness)); + text-decoration: underline; +} + +a b, +a em, +a i, +a strong, +button { + border-radius: var(--border-radius); + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: var(--line-height); + margin: 0.5rem 0; + padding: 1rem 2rem; +} + +button { + font-family: var(--font-family); +} + +button:hover { + cursor: pointer; + filter: brightness(var(--hover-brightness)); +} + +a b, +a strong, +button { + background-color: var(--color); + border: 2px solid var(--color); + color: var(--color-bg); +} + +a em, +a i { + border: 2px solid var(--color); + border-radius: var(--border-radius); + color: var(--color); + display: inline-block; + padding: 1rem 2rem; +} + +/* Images */ +figure { + margin: 0; + padding: 0; +} + +figure img { + max-width: 100%; +} + +figure figcaption { + color: var(--color-text-secondary); +} + +/* Forms */ + +button:disabled, +input:disabled { + background: var(--color-bg-secondary); + border-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + cursor: not-allowed; +} + +button[disabled]:hover { + filter: none; +} + +form { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: block; + max-width: var(--width-card-wide); + min-width: var(--width-card); + padding: 1.5rem; + text-align: var(--justify-normal); +} + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: var(--width-card-wide); +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"]+label, +input[type="radio"]+label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input, +select, +textarea { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[readonly], +textarea[readonly] { + background-color: var(--color-bg-secondary); +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +/* Tables */ +table { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + border-spacing: 0; + display: inline-block; + max-width: 100%; + overflow-x: auto; + padding: 0; + white-space: nowrap; +} + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: var(--justify-important); +} + +table thead { + background-color: var(--color); + border-collapse: collapse; + border-radius: var(--border-radius); + color: var(--color-bg); + margin: 0; + padding: 0; +} + +table thead th:first-child { + border-top-left-radius: var(--border-radius); +} + +table thead th:last-child { + border-top-right-radius: var(--border-radius); +} + +table thead th:first-child, +table tr td:first-child { + text-align: var(--justify-normal); +} + +table tr:nth-child(even) { + background-color: var(--color-accent); +} + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: var(--line-height); + margin: 1rem auto; + max-width: var(--width-card-medium); + padding: 1.5rem 1rem; + text-align: var(--justify-important); +} + +blockquote footer { + color: var(--color-text-secondary); + display: block; + font-size: small; + line-height: var(--line-height); + padding: 1.5rem 0; +} + +/* Flexbox Grid */ +.container-fluid, .container { + margin-right: auto; + margin-left: auto; +} + +.container-fluid { + padding-right: var(--outer-margin, 2rem); + padding-left: var(--outer-margin, 2rem); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin-right: var(--gutter-compensation, -0.5rem); + margin-left: var(--gutter-compensation, -0.5rem); +} + +.row.reverse { + flex-direction: row-reverse; +} + +.col.reverse { + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); +} + +.col-xs { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; +} + +.col-xs-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; +} + +.col-xs-3 { + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; +} + +.col-xs-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; +} + +.col-xs-6 { + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; +} + +.col-xs-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; +} + +.col-xs-9 { + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; +} + +.col-xs-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; +} + +.col-xs-12 { + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-0 { + margin-left: 0; +} + +.col-xs-offset-1 { + margin-left: 8.33333333%; +} + +.col-xs-offset-2 { + margin-left: 16.66666667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.33333333%; +} + +.col-xs-offset-5 { + margin-left: 41.66666667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.33333333%; +} + +.col-xs-offset-8 { + margin-left: 66.66666667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.33333333%; +} + +.col-xs-offset-11 { + margin-left: 91.66666667%; +} + +.start-xs { + justify-content: flex-start; + text-align: start; +} + +.center-xs { + justify-content: center; + text-align: center; +} + +.end-xs { + justify-content: flex-end; + text-align: end; +} + +.top-xs { + align-items: flex-start; +} + +.middle-xs { + align-items: center; +} + +.bottom-xs { + align-items: flex-end; +} + +.around-xs { + justify-content: space-around; +} + +.between-xs { + justify-content: space-between; +} + +.first-xs { + order: -1; +} + +.last-xs { + order: 1; +} + +@media only screen and (min-width: 48em) { + .container { + width: var(--container-sm, 46rem); + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-sm { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-sm-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-sm-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-sm-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-sm-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-sm-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-sm-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-sm-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-sm-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-0 { + margin-left: 0; + } + + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + + .start-sm { + justify-content: flex-start; + text-align: start; + } + + .center-sm { + justify-content: center; + text-align: center; + } + + .end-sm { + justify-content: flex-end; + text-align: end; + } + + .top-sm { + align-items: flex-start; + } + + .middle-sm { + align-items: center; + } + + .bottom-sm { + align-items: flex-end; + } + + .around-sm { + justify-content: space-around; + } + + .between-sm { + justify-content: space-between; + } + + .first-sm { + order: -1; + } + + .last-sm { + order: 1; + } +} + +@media only screen and (min-width: 64em) { + .container { + width: var(--container-md, 61rem); + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-md { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-md-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-md-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-md-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-md-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-md-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-md-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-md-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-md-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-0 { + margin-left: 0; + } + + .col-md-offset-1 { + margin-left: 8.33333333%; + } + + .col-md-offset-2 { + margin-left: 16.66666667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.33333333%; + } + + .col-md-offset-5 { + margin-left: 41.66666667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.33333333%; + } + + .col-md-offset-8 { + margin-left: 66.66666667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.33333333%; + } + + .col-md-offset-11 { + margin-left: 91.66666667%; + } + + .start-md { + justify-content: flex-start; + text-align: start; + } + + .center-md { + justify-content: center; + text-align: center; + } + + .end-md { + justify-content: flex-end; + text-align: end; + } + + .top-md { + align-items: flex-start; + } + + .middle-md { + align-items: center; + } + + .bottom-md { + align-items: flex-end; + } + + .around-md { + justify-content: space-around; + } + + .between-md { + justify-content: space-between; + } + + .first-md { + order: -1; + } + + .last-md { + order: 1; + } +} + +@media only screen and (min-width: 75em) { + .container { + width: var(--container-lg, 71rem); + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-lg { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-lg-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-lg-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-lg-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-lg-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-lg-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-lg-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-lg-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-lg-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-0 { + margin-left: 0; + } + + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + + .start-lg { + justify-content: flex-start; + text-align: start; + } + + .center-lg { + justify-content: center; + text-align: center; + } + + .end-lg { + justify-content: flex-end; + text-align: end; + } + + .top-lg { + align-items: flex-start; + } + + .middle-lg { + align-items: center; + } + + .bottom-lg { + align-items: flex-end; + } + + .around-lg { + justify-content: space-around; + } + + .between-lg { + justify-content: space-between; + } + + .first-lg { + order: -1; + } + + .last-lg { + order: 1; + } +} \ No newline at end of file diff --git a/client/src/components/Verification/SearchCriteria.js b/client/src/components/Verification/SearchCriteria.js index 1a6381108..074ec7f77 100644 --- a/client/src/components/Verification/SearchCriteria.js +++ b/client/src/components/Verification/SearchCriteria.js @@ -20,6 +20,7 @@ import { import RadioTrueFalseEither from "../RadioTrueFalseEither"; import LocationAutocomplete from "../LocationAutocomplete"; import AccountAutocomplete from "../AccountAutocomplete"; +import { defaultCoordinates } from "../../helpers/Configuration"; const useStyles = makeStyles((theme) => ({ card: { @@ -57,8 +58,10 @@ const SearchCriteria = ({ : "custom" ); - const [customLatitude, setCustomLatitude] = useState(34); - const [customLongitude, setCustomLongitude] = useState(-118); + const [customLatitude, setCustomLatitude] = useState(defaultCoordinates.lat); + const [customLongitude, setCustomLongitude] = useState( + defaultCoordinates.LocationAutocomplete + ); const [customPlaceName, setCustomPlaceName] = useState(""); useEffect(() => { diff --git a/client/src/containers/Home/index.js b/client/src/containers/Home/index.js index 44414938a..b56d901e3 100644 --- a/client/src/containers/Home/index.js +++ b/client/src/containers/Home/index.js @@ -9,9 +9,10 @@ import Container from "@material-ui/core/Container"; import Paper from "@material-ui/core/Paper"; import Box from "@material-ui/core/Box"; import Search from "components/Search"; -// The two tenant logos happen to be the same at the moment +// The three tenant logos happen to be the same at the moment import logo from "images/foodoasis.svg"; import logoCA from "images/foodoasis.svg"; +import logoHI from "images/foodoasis.svg"; import { getTenantId } from "helpers/Configuration"; const useStyles = makeStyles((theme) => ({ @@ -133,7 +134,9 @@ const Home = (props) => { - {getTenantId() === 2 ? ( + {getTenantId() === 3 ? ( + logo + ) : getTenantId() === 2 ? ( logo ) : ( logo @@ -148,7 +151,11 @@ const Home = (props) => { className={classes.form} onSubmit={() => props.history.push("/organizations")} > - {getTenantId() === 2 ? ( + {getTenantId() === 3 ? ( + + Locate free food resources in Hawaii + + ) : getTenantId() === 2 ? ( Locate free food resources in California diff --git a/client/src/helpers/Configuration.js b/client/src/helpers/Configuration.js index 340ba34a3..83494b536 100644 --- a/client/src/helpers/Configuration.js +++ b/client/src/helpers/Configuration.js @@ -1,6 +1,21 @@ export const getTenantId = () => - window.location.hostname.toLowerCase().includes("ca.food") || - window.location.hostname.toLowerCase().includes("california") || - process.env.REACT_APP_TENANT_ID === "2" + window.location.hostname.toLowerCase().includes("hi.food") || + window.location.hostname.toLowerCase().includes("hawaii") || + process.env.REACT_APP_TENANT_ID === "3" + ? 3 + : window.location.hostname.toLowerCase().includes("ca.food") || + window.location.hostname.toLowerCase().includes("california") || + process.env.REACT_APP_TENANT_ID === "2" ? 2 : 1; + +export const defaultCoordinates = (() => { + switch (getTenantId()) { + case 3: + return { lat: 21.33629, lon: -157.89435 }; + case 2: + return { lat: 38.576711, lon: -121.493671 }; + default: + return { lat: 34.07872, lon: -118.243328 }; + } +})(); diff --git a/client/src/hooks/useMapboxGeocoder.js b/client/src/hooks/useMapboxGeocoder.js index 0cd853db0..f80b72665 100644 --- a/client/src/hooks/useMapboxGeocoder.js +++ b/client/src/hooks/useMapboxGeocoder.js @@ -7,6 +7,7 @@ const baseUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places`; const losAngelesCountyLatLong = "-118.9517,33.6988,-117.6462,34.8233"; const californiaLatLong = "-124.389, 32.4796, -114.1723, 42.072"; +const hawaiiLatLong = "-160.25, 18.91, -154.58, 22.30"; const initialState = { isLoading: false, @@ -48,7 +49,11 @@ export function useMapboxGeocoder() { const fetchMapboxResults = debounce( async (searchString) => { const bbox = - getTenantId() === 1 ? losAngelesCountyLatLong : californiaLatLong; + getTenantId() === 1 + ? losAngelesCountyLatLong + : getTenantId() === 2 + ? californiaLatLong + : hawaiiLatLong; const mapboxUrl = `${baseUrl}/${searchString}.json?bbox=${bbox}&access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`; dispatch({ type: actionTypes.FETCH_REQUEST }); diff --git a/migrations/1602619516416_add-hawaii-tenant.js b/migrations/1602619516416_add-hawaii-tenant.js new file mode 100644 index 000000000..ed7c91669 --- /dev/null +++ b/migrations/1602619516416_add-hawaii-tenant.js @@ -0,0 +1,11 @@ +/* eslint-disable camelcase */ + +exports.shorthands = undefined; + +exports.up = (pgm) => { + pgm.sql(`INSERT INTO tenant (id, name, code) VALUES (3, 'Hawaii', 'HI')`); +}; + +exports.down = (pgm) => { + pgm.sql(`DELETE FROM tenant WHERE id = 3`); +}; diff --git a/package.json b/package.json index 157d58667..bcd44a96d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "foodoasis", - "version": "1.0.24", + "version": "1.0.25", "author": "Hack for LA", "description": "Web API Server for Food Oasis", "main": "server.js",