From 4677f189e26b06d09b3223e7d5cbbe744bc81547 Mon Sep 17 00:00:00 2001 From: "Alejandro M. Coca" Date: Fri, 3 Sep 2021 19:17:36 -0400 Subject: [PATCH 1/6] Add walk icon --- src/assets/walk-icon.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/assets/walk-icon.svg diff --git a/src/assets/walk-icon.svg b/src/assets/walk-icon.svg new file mode 100644 index 0000000..42a4af9 --- /dev/null +++ b/src/assets/walk-icon.svg @@ -0,0 +1,3 @@ + + + From 1c00028465d85ae93f70ec5883bdfed401978129 Mon Sep 17 00:00:00 2001 From: "Alejandro M. Coca" Date: Fri, 3 Sep 2021 19:18:21 -0400 Subject: [PATCH 2/6] Working with Settings & Slider --- src/pages/SettingsPage.js | 64 ++++++++++++++++++++++++--------------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js index 99f1cf5..66867cc 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage.js @@ -2,7 +2,9 @@ import React, { useContext } from 'react'; import ReactSlider from 'react-slider'; import { HeaderNav } from '../components/HeaderNav'; - +import { ReactComponent as WalkIcon } from '../assets/walk-icon.svg'; +import { ReactComponent as CarIcon } from '../assets/car-icon.svg'; +import { ReactComponent as BicycleIcon } from '../assets/bicycle-icon.svg'; import { LocationsContext } from '../context/LocationsContext'; import { MapCenterContext } from '../context/MapCenterContext'; @@ -18,18 +20,27 @@ export const SettingsPage = () => { <>
-

Settings

-

- {userLocationShared - ? `Adjust how frequently the app +

SETTINGS

+
+ {userLocationShared ? ( +
+

+ Adjust how frequently the app refreshes with new information. +

+
+

+ This is effective when you are actively sharing your location, + and can improve battery life of your device. +

+
+ ) : ( + `Please share your location to adjust how frequently the app refreshes with new data` - : `Please share your location to adjust how frequently the app - refreshes with new data`} -

-
- {userLocationShared ? ( - <> -
+ )} +
+ + {userLocationShared ? ( + <>
{
{state.valueNow}
)} /> +
+
+ +

Car / Train

+
+
+ +

Bicycle

+
+
+ +

Walk

+
+
- -

- Recommended settings are based on expected speed of transportation -

-
    -
  • Car/Train: 0 seconds
    • -
  • Bicycle: 15 seconds
    • -
  • Walking: 30 seconds
    • -
-
- - ) : null} + + ) : null} + ); }; From 6569397254acc384d64ebfb7881d66c4ca9da31d Mon Sep 17 00:00:00 2001 From: "Alejandro M. Coca" Date: Fri, 3 Sep 2021 19:19:49 -0400 Subject: [PATCH 3/6] Add styles view --- src/App.css | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 3fea58d..e3e1867 100644 --- a/src/App.css +++ b/src/App.css @@ -135,6 +135,13 @@ main > h1 + * { padding: 0 0.5rem; } +.view__title { + text-align: left; + color: var(--primary-color); + font-family: var(--font-family-headings); + font-weight: 700; +} + .view__header { background-color: rgb(64, 138, 250); color: white; @@ -406,7 +413,6 @@ a.active { Settings \*--------------------------------------------------------------------------*/ .settings-subheader { - max-width: 60ch; margin-left: auto; margin-right: auto; margin-top: 2rem; @@ -417,23 +423,38 @@ a.active { color: #1c2334; } +.settings__instruction { + text-align: justify; +} + .slider-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 3rem; + width: 95%; } .slider { width: 100%; - max-width: 500px; - height: 50px; - margin: 0 auto; } .slider + * { - margin-top: 5rem; + margin-top: 4rem; +} + +.slider__options { + display: flex; + justify-content: space-between; + width: 100%; +} + +.slider__transport { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; } .thumb { @@ -441,8 +462,8 @@ a.active { top: 1px; width: 50px; height: 48px; - border: 5px solid gray; - background-color: black; + border: 5px solid black; + background-color: var(--primary-color); color: white; font-size: 0.9em; text-align: center; From 50458955042ee2e4d483c03ba31ad6e4e160109f Mon Sep 17 00:00:00 2001 From: "Alejandro M. Coca" Date: Fri, 3 Sep 2021 19:31:31 -0400 Subject: [PATCH 4/6] Improvement mobile styles --- src/App.css | 7 +++++++ src/pages/SettingsPage.js | 6 ++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index e3e1867..dfe0386 100644 --- a/src/App.css +++ b/src/App.css @@ -427,6 +427,13 @@ a.active { text-align: justify; } +.settings__message { + height: 60vh; + display: flex; + justify-content: center; + align-items: center; +} + .slider-container { display: flex; flex-direction: column; diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js index 66867cc..8d960fe 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage.js @@ -34,8 +34,10 @@ export const SettingsPage = () => {

) : ( - `Please share your location to adjust how frequently the app - refreshes with new data` +

+ Please share your location to adjust how frequently the app + refreshes with new data +

)} From 2e50d3fcd7b6208f4b7e5f6af838b4edc70f3334 Mon Sep 17 00:00:00 2001 From: Jessica Woudsma <38255956+jssckbl@users.noreply.github.com> Date: Fri, 3 Sep 2021 20:35:21 -0500 Subject: [PATCH 5/6] update color of border of settings slider circle. update font body to Merriweather as listed in Figma. --- src/App.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index dfe0386..44c4c78 100644 --- a/src/App.css +++ b/src/App.css @@ -100,7 +100,7 @@ body { margin: 0; line-height: 1.5; color: #1c2334; - font-family: Barlow Condensed, Helvetica, sans-serif; + font-family: var(--font-family-body-text); } .app { @@ -469,7 +469,7 @@ a.active { top: 1px; width: 50px; height: 48px; - border: 5px solid black; + border: 5px solid var(--secondary-color); background-color: var(--primary-color); color: white; font-size: 0.9em; From d107a9076f8f28a264c3cbe6fccae6052eeb92fd Mon Sep 17 00:00:00 2001 From: Jessica Woudsma <38255956+jssckbl@users.noreply.github.com> Date: Fri, 3 Sep 2021 20:42:58 -0500 Subject: [PATCH 6/6] update text color to primary color --- src/App.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index 44c4c78..b6896a9 100644 --- a/src/App.css +++ b/src/App.css @@ -99,7 +99,7 @@ body, body { margin: 0; line-height: 1.5; - color: #1c2334; + color: var(--primary-color); font-family: var(--font-family-body-text); } @@ -420,7 +420,7 @@ a.active { font-weight: 400; line-height: 1.5; text-align: center; - color: #1c2334; + color: var(--primary-color); } .settings__instruction {