From c0f2c1664b80b48ec03fde0f131875f5ab699652 Mon Sep 17 00:00:00 2001 From: SimonAM Date: Wed, 29 May 2024 11:25:07 +0200 Subject: [PATCH] Fix: #528 Make map legend floating and add background color. (#532) * experiment with map labels * feat: floating titlecontainer with background * fix: hide map pegend when in list view * chore: formatting * Update styles * Allow scrolling even when the MapLabels are on top to improve navigation on mobile This sometimes makes the map labels show beneath, but overall this is an UX improvement for mobile users which makes it worth it. --------- Co-authored-by: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> --- Theme.tsx | 133 +++++++++++++++++++++++++++++++++++ components/Map/MapLabels.tsx | 24 +++---- components/RegionalView.tsx | 18 ++--- components/ToggleButton.tsx | 22 +++--- pages/index.tsx | 53 +++++++------- 5 files changed, 189 insertions(+), 61 deletions(-) diff --git a/Theme.tsx b/Theme.tsx index c46de1e1..7b3bfe86 100644 --- a/Theme.tsx +++ b/Theme.tsx @@ -1,7 +1,140 @@ import { ReactNode } from 'react' import { ThemeProvider } from 'styled-components' +const colors2024 = { + gray: { + 50: '#F7F7F7', + 100: '#E1E1E1', + 150: '#C3C3C3', + 200: '#A5A5A5', + 250: '#878787', + 300: '#444444', + 350: '#5B5B5B', + 400: '#717171', + 500: '#2E2E2E', + 600: '#272727', + 650: '#202020', + 700: '#191919', + 750: '#121212', + 800: '#0E0E0E', + 850: '#090909', + 900: '#050505', + 950: '#000000', + }, + orange: { + 50: '#FEE7CD', + 100: '#FEDBB4', + 150: '#FDCF9A', + 200: '#FDC381', + 250: '#FDB768', + 300: '#FBAD59', + 350: '#F9A349', + 400: '#F6993A', + 500: '#F48F2A', + 600: '#E38320', + 650: '#D37715', + 700: '#C26B0B', + 750: '#B25F00', + 800: '#A05500', + 850: '#8E4B00', + 900: '#7D4100', + 950: '#6B3700', + }, + blue: { + 50: '#D4E7F7', + 100: '#C5DFFA', + 150: '#B6DAFB', + 200: '#A7D5FD', + 250: '#99CFFF', + 300: '#96CDFD', + 350: '#79B7F0', + 400: '#69ACE9', + 500: '#59A0E1', + 600: '#4B90CB', + 650: '#3D81B5', + 700: '#2E729E', + 750: '#206288', + 800: '#1D577A', + 850: '#1A4C6B', + 900: '#16415D', + 950: '#13364E', + }, + green: { + 50: '#F1FFCC', + 100: '#E7FEA5', + 150: '#E3FD95', + 200: '#DEFD86', + 250: '#D5FD63', + 300: '#CDFA4C', + 350: '#C5F735', + 400: '#BCF51D', + 500: '#AAE506', + 600: '#9AD006', + 650: '#8BBB06', + 700: '#7CA605', + 750: '#6C9105', + 800: '#608009', + 850: '#556E0E', + 900: '#495D12', + 950: '#3D4B16', + }, + pink: { + 50: '#FAE1E9', + 100: '#F5C6D4', + 150: '#F3B9CB', + 200: '#F0ADC1', + 250: '#EEA0B7', + 300: '#EF95B0', + 350: '#EF8AA9', + 400: '#F080A1', + 500: '#F0759A', + 600: '#DA698B', + 650: '#C35D7C', + 700: '#AD516C', + 750: '#97455D', + 800: '#8E3D55', + 850: '#85364D', + 900: '#7C2E45', + 950: '#73263D', + }, +} + +const namedColors2024 = { + white: colors2024.gray[50], + gray: colors2024.gray[250], + black1: colors2024.gray[500], + black2: colors2024.gray[750], + black3: colors2024.gray[950], + + orange1: colors2024.orange[50], + orange2: colors2024.orange[250], + orange3: colors2024.orange[500], + orange4: colors2024.orange[750], + orange5: colors2024.orange[950], + + blue1: colors2024.blue[50], + blue2: colors2024.blue[250], + blue3: colors2024.blue[500], + blue4: colors2024.blue[750], + blue5: colors2024.blue[950], + + green1: colors2024.green[50], + green2: colors2024.green[250], + green3: colors2024.green[500], + green4: colors2024.green[750], + green5: colors2024.green[950], + + pink1: colors2024.pink[50], + pink2: colors2024.pink[250], + pink3: colors2024.pink[500], + pink4: colors2024.pink[750], + pink5: colors2024.pink[950], +} + export const colorTheme = { + newColors: namedColors2024, + huePalette: colors2024, + black: '#181818', lightBlack: '#262626', grey: '#939393', diff --git a/components/Map/MapLabels.tsx b/components/Map/MapLabels.tsx index 9b25ac1c..d8570bc6 100644 --- a/components/Map/MapLabels.tsx +++ b/components/Map/MapLabels.tsx @@ -6,18 +6,15 @@ import { Paragraph } from '../Typography' import { Square, mapColors } from '../shared' const Container = styled.div` - padding-left: 0.87rem; - padding-top: 1.2rem; - padding-bottom: 0.5rem; - margin-top: 30px; - - @media only screen and (${devices.tablet}) { - position: absolute; - left: 0; - top: 0; - margin-top: 36px; - - } + background: ${({ theme }) => `${theme.lightBlack}99`}; + pointer-events: none; + z-index: 40; + border-radius: 8px; + padding: 8px; + height: min-content; + position: absolute; + top: 56px; + left: 8px; ` const LabelBox = styled.div` @@ -28,7 +25,7 @@ const LabelBox = styled.div` ` const ArrowIcon = styled(Icon)<{ $rotateUp?: boolean }>` - color: black; + color: ${({ theme }) => theme.newColors.black3}; position: absolute; z-index: 1; margin: auto; @@ -41,7 +38,6 @@ const ArrowIcon = styled(Icon)<{ $rotateUp?: boolean }>` const StyledParagraph = styled(Paragraph)` z-index: 1; - font-family: 'Anonymous Pro'; font-size: 0.7em; margin: 0; line-height: 0; diff --git a/components/RegionalView.tsx b/components/RegionalView.tsx index 8c1ed2f9..ae8c8b4d 100644 --- a/components/RegionalView.tsx +++ b/components/RegionalView.tsx @@ -29,6 +29,7 @@ const InfoText = styled.div` background: ${({ theme }) => theme.lightBlack}; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; + z-index: 50; p { font-size: 12px; @@ -48,7 +49,7 @@ const InfoText = styled.div` ` const ParagraphSource = styled(Paragraph)` - color: ${({ theme }) => theme.grey}; + color: ${({ theme }) => theme.newColors.gray}; margin: 0; ` @@ -69,18 +70,19 @@ const TitleContainer = styled.div` const FloatingH5 = styled(H5Regular)` position: absolute; - margin: 56px 0 0 12px; + top: 8px; + left: 8px; z-index: 200; font-size: 1rem; + padding: 4px 8px; + height: 44px; + display: flex; + align-items: center; + border-radius: 8px; + background: ${({ theme }) => `${theme.lightBlack}99`}; @media only screen and (${devices.smallMobile}) { font-size: 1.125rem; - margin-top: 60px; - } - - @media only screen and (${devices.tablet}) { - margin-top: 76px; - margin-bottom: 16px; } ` diff --git a/components/ToggleButton.tsx b/components/ToggleButton.tsx index e207f055..bd818531 100644 --- a/components/ToggleButton.tsx +++ b/components/ToggleButton.tsx @@ -2,31 +2,25 @@ import styled from 'styled-components' import { devices } from '../utils/devices' const ToggleBtn = styled.button` - height: 36px; - margin: 12px 4px 12px 12px; - margin-right: 4px; position: absolute; - top: 0; - right: 0; - color: ${({ theme }) => theme.offWhite}; - background: transparent; - border-radius: 4px; + top: 8px; + right: 8px; + color: ${({ theme }) => theme.newColors.white}; + background: ${({ theme }) => `${theme.lightBlack}99`}; + padding: 4px; + border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: right; z-index: 150; - - @media only screen and (${devices.smallMobile}) { - margin-right: 12px; - } ` const ToggleText = styled.p` - margin-right: 8px; + padding-left: 4px; + padding-right: 8px; font-size: 12px; - font-family: 'Borna'; @media only screen and (${devices.tablet}) { font-size: 14px; } diff --git a/pages/index.tsx b/pages/index.tsx index 20fad8a1..a21da404 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,10 +10,7 @@ import { Company, Municipality, DatasetKey } from '../utils/types' import PageWrapper from '../components/PageWrapper' import Layout from '../components/Layout' import Footer from '../components/Footer/Footer' -import { - defaultDataset, - getDataDescriptions, -} from '../utils/datasetDefinitions' +import { defaultDataset, getDataDescriptions } from '../utils/datasetDefinitions' import RegionalView from '../components/RegionalView' import CompanyView from '../components/CompanyView' import PillSwitch from '../components/PillSwitch' @@ -50,14 +47,19 @@ function StartPage({ companies, municipalities }: PropsType) { const router = useRouter() const { dataGroup, dataset: routeDataset, dataView } = router.query const { t } = useTranslation() - const { - dataDescriptions, getDataset, getDataView, - } = getDataDescriptions(router.locale as string, t) + const { dataDescriptions, getDataset, getDataView } = getDataDescriptions( + router.locale as string, + t, + ) const normalizedDataGroup = getDataGroup(dataGroup as string) - const [selectedDataset, setSelectedDataset] = useState(getDataset(routeDataset as string)) - const [selectedDataView, setSelectedDataView] = useState(getDataView(dataView as string)) + const [selectedDataset, setSelectedDataset] = useState( + getDataset(routeDataset as string), + ) + const [selectedDataView, setSelectedDataView] = useState( + getDataView(dataView as string), + ) const showCompanyData = normalizedDataGroup === defaultDataGroup @@ -73,23 +75,24 @@ function StartPage({ companies, municipalities }: PropsType) { isActive={!showCompanyData} links={[ { text: t('common:companies'), href: '/foretag/utslappen/lista' }, - { text: t('common:municipalities'), href: `/geografiskt/${selectedDataset}/${selectedDataView}` }, + { + text: t('common:municipalities'), + href: `/geografiskt/${selectedDataset}/${selectedDataView}`, + }, ]} /> - {showCompanyData - ? ( - - ) - : ( - - )} + {showCompanyData ? ( + + ) : ( + + )} @@ -108,7 +111,7 @@ export const getServerSideProps: GetServerSideProps = async ({ res, locale }) => permanent: true, }, props: { - ...await serverSideTranslations(locale as string, ['common', 'startPage']), + ...(await serverSideTranslations(locale as string, ['common', 'startPage'])), }, } }