From dd747f9a79dec9041e23b109a0430156f9e76f0f Mon Sep 17 00:00:00 2001 From: Juan Albergen Date: Fri, 18 Sep 2020 14:40:30 +0200 Subject: [PATCH 1/3] style: adjusted color contrast of elements below 4.5 --- .../inputs/selects/AsyncSelect/index.tsx | 1 + .../selects/ConnectedSelect/common/index.tsx | 7 ++++ .../inputs/selects/ConnectedSelect/index.tsx | 1 + .../textinputs/DateInputField/index.tsx | 4 +- .../textinputs/SearchInputField/index.tsx | 5 +++ src/app/modules/about-module/layout.tsx | 40 +++++++++++-------- src/app/modules/common/ModuleHeader/index.tsx | 9 ++++- src/app/modules/landing-module/layout.tsx | 22 +++++----- src/app/modules/notfound-module/layout.tsx | 15 +++---- 9 files changed, 61 insertions(+), 43 deletions(-) diff --git a/src/app/components/inputs/selects/AsyncSelect/index.tsx b/src/app/components/inputs/selects/AsyncSelect/index.tsx index 50461ecc..4dbcb991 100644 --- a/src/app/components/inputs/selects/AsyncSelect/index.tsx +++ b/src/app/components/inputs/selects/AsyncSelect/index.tsx @@ -28,6 +28,7 @@ const customStyles = { multiValueLabel: MultiValueLabel, multiValueRemove: (provided: any) => ({ ...provided }), menu: Menu, + placeholder: styles => ({...styles, color: 'black', opacity: '1'}), }; async function loadOptions(search, loadedOptions, { page }, pivot) { diff --git a/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx index b4c92701..d8e322fc 100644 --- a/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx +++ b/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx @@ -128,8 +128,15 @@ export const Control = () => ({ export const ValueContainer = (provided) => ({ ...provided, padding: '5px', + marginLeft: '10px', + fontFamily: 'Inter', + color: 'rgb(18, 18, 18)', + fontStyle: 'normal', + fontWeight: 200, }); + + export const MenuList = (provided, state) => ({ ...provided, height: '300px', diff --git a/src/app/components/inputs/selects/ConnectedSelect/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/index.tsx index 7f3aa6a6..3f796aa3 100644 --- a/src/app/components/inputs/selects/ConnectedSelect/index.tsx +++ b/src/app/components/inputs/selects/ConnectedSelect/index.tsx @@ -28,6 +28,7 @@ const customStyles = { multiValueLabel: MultiValueLabel, multiValueRemove: (provided: any) => ({ ...provided }), menu: Menu, + placeholder: styles => ({...styles, color: 'black', opacity: '1'}), }; export const ConnectedSelect = (props: any) => { diff --git a/src/app/components/inputs/textinputs/DateInputField/index.tsx b/src/app/components/inputs/textinputs/DateInputField/index.tsx index 72ac2a4e..6f1d53e2 100644 --- a/src/app/components/inputs/textinputs/DateInputField/index.tsx +++ b/src/app/components/inputs/textinputs/DateInputField/index.tsx @@ -42,8 +42,8 @@ const BaseComponent = styled((props) => )` padding: 0; font-size: 16px; - font-weight: 300; - color: rgba(1, 1, 10, 0.38); + font-weight: 200; + color: rgba(0, 0, 0); margin-left: 15px; } & [class*='MuiFormLabel-root'] { diff --git a/src/app/components/inputs/textinputs/SearchInputField/index.tsx b/src/app/components/inputs/textinputs/SearchInputField/index.tsx index 67fc3462..10f9a373 100644 --- a/src/app/components/inputs/textinputs/SearchInputField/index.tsx +++ b/src/app/components/inputs/textinputs/SearchInputField/index.tsx @@ -62,6 +62,11 @@ export const SearchInputField = (props: Props) => { > div { min-height: auto; } + + > div > div > input::-webkit-input-placeholder { + color: #01010A; + opacity: 1; + } `} /> ); diff --git a/src/app/modules/about-module/layout.tsx b/src/app/modules/about-module/layout.tsx index 615a8390..30f4b4e5 100644 --- a/src/app/modules/about-module/layout.tsx +++ b/src/app/modules/about-module/layout.tsx @@ -5,6 +5,14 @@ import { ModuleHeader } from 'app/modules/common/ModuleHeader'; import { ParagraphContainer } from 'app/modules/about-module/common/ParagraphContainer'; import Grid from '@material-ui/core/Grid'; import Hidden from '@material-ui/core/Hidden'; +import styled from 'styled-components'; + +export const Link = styled.a` + color: #185364; + :hover{ + color: #03DBE4; + } +`; export const AboutLayout = () => { return ( @@ -26,12 +34,12 @@ export const AboutLayout = () => { according to the IATI Standard. Data users can gain data on development and humanitarian resources and results through using the{' '} - Datastore’s API - + . Users will also be able to download data from a new user-friendly Datastore Query Builder. @@ -45,21 +53,21 @@ export const AboutLayout = () => { The new{' '} - IATI Datastore API - {' '} + {' '} provides data published by organisations who have used version 2 of the IATI Standard. This is following the decision to deprecate{' '} - version 1 by IATI members - + , which was implemented July 2019. @@ -71,12 +79,12 @@ export const AboutLayout = () => { Schema provides the exact order and format that publishers should provide their XML files in. More information about the Schema can be found on{' '} - IATI’s Reference site - + . @@ -104,20 +112,20 @@ export const AboutLayout = () => { For detailed documentation on how to use the API, please refer to the{' '} - Datastore API documentation - + . For information on how to map queries from the ‘old’ Datastore to the new one, please see the{' '} - mapping document - + . @@ -130,23 +138,23 @@ export const AboutLayout = () => { The{' '} - Query builder - {' '} + {' '} allows users to build common queries through a series of drop down and freetext filters.

For guidance on how to use the query builder, see the{' '} - Query Builder User Guide. - + diff --git a/src/app/modules/common/ModuleHeader/index.tsx b/src/app/modules/common/ModuleHeader/index.tsx index 124a6bdc..f70654a3 100644 --- a/src/app/modules/common/ModuleHeader/index.tsx +++ b/src/app/modules/common/ModuleHeader/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Box, Grid, Typography, useTheme } from '@material-ui/core'; import { Header } from 'app/components/surfaces/Header'; import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery'; +import styled from 'styled-components'; type ModuleModel = { title?: string; @@ -9,6 +10,10 @@ type ModuleModel = { extraText?: boolean; }; +const Link = styled.a` + color: #03DBE4; +`; + export const ModuleHeader = (props: ModuleModel) => { const theme = useTheme(); const md = useMediaQuery(theme.breakpoints.down('md')); @@ -30,12 +35,12 @@ export const ModuleHeader = (props: ModuleModel) => { <> For guidance on how
to use the query builder, see the{' '} - Query Builder User Guide. - + )} diff --git a/src/app/modules/landing-module/layout.tsx b/src/app/modules/landing-module/layout.tsx index cc687cc7..b0f404bc 100644 --- a/src/app/modules/landing-module/layout.tsx +++ b/src/app/modules/landing-module/layout.tsx @@ -12,9 +12,9 @@ import { HomeHeader } from 'app/components/HomeHeader'; import { AppBar } from 'app/components/surfaces/AppBar'; import Providers from 'app/Providers'; -const TypographyOpacity = styled((props) => )` - opacity: 0.8; -`; +// const TypographyOpacity = styled((props) => )` +// opacity: 0.8; +// `; export const LandingLayout = () => { return ( @@ -28,23 +28,23 @@ export const LandingLayout = () => { IATI Datastore - + The IATI Datastore provides data on development and humanitarian spending and projects that address poverty and crises across the world. - + - + Find data published by organisations from governments, development finance institutions and UN agencies to NGOs, foundations and the private sector. They have published data according to the IATI Standard, our set of rules and guidance for sharing useful, open data. - + - + Access data through using the Datastore’s API or Query Builder. - + @@ -61,10 +61,6 @@ export const LandingLayout = () => { - {/*FOOTER*/} - {/*TODO: replace box with footer component*/} - {/**/} - {/*