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 <[email protected]>
Klimatbyran · May 29, 2024 · c0f2c16 · c0f2c16
1 parent c1753a0
commit c0f2c16
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<DatasetKey>(getDataset(routeDataset as string))
-  const [selectedDataView, setSelectedDataView] = useState(getDataView(dataView as string))
+  const [selectedDataset, setSelectedDataset] = useState<DatasetKey>(
+    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
-            ? (
-              <CompanyView companies={companies} />
-            )
-            : (
-              <RegionalView
-                municipalities={municipalities}
-                selectedDataset={selectedDataset}
-                setSelectedDataset={setSelectedDataset}
-                selectedDataView={selectedDataView}
-                setSelectedDataView={setSelectedDataView}
-                dataDescriptions={dataDescriptions}
-              />
-            )}
+          {showCompanyData ? (
+            <CompanyView companies={companies} />
+          ) : (
+            <RegionalView
+              municipalities={municipalities}
+              selectedDataset={selectedDataset}
+              setSelectedDataset={setSelectedDataset}
+              selectedDataView={selectedDataView}
+              setSelectedDataView={setSelectedDataView}
+              dataDescriptions={dataDescriptions}
+            />
+          )}
         </Container>
       </PageWrapper>
     </>
@@ -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'])),
     },
   }
 }